金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 教你用webgl快速创建一个小世界,移动端H5页面注

教你用webgl快速创建一个小世界,移动端H5页面注

发布时间:2019-11-01 11:16编辑:web前端浏览(82)

    移步端H5页面注意事项

    2017/02/18 · HTML5 · 移动端

    原著出处: Alexee   

    教你用webgl火速创造八个小世界

    2017/03/25 · HTML5 · AlloyTeam

    原稿出处: AlloyTeam   

    Webgl的吸重力在于能够创建二个谈得来的3D世界,但相相比较canvas2D来讲,除了物体的移位旋转换换完全正视矩阵扩展了复杂度,就连生成一个物体都变得很复杂。

    什么样?!为何不用Threejs?Threejs等库确实能够超大程度的加强支付效能,何况外地点封装的老大棒,不过不推荐初大方直接依赖Threejs,最佳是把webgl各省点都学会,再去拥抱Three等相关库。

    上篇矩阵入门中介绍了矩阵的基本知识,让大家领悟到了主导的仿射调换矩阵,能够对实体举办活动旋转等生成,而这篇作品将教我们快速生成多少个实体,并且结合转变矩阵在物体在你的社会风气里动起来。

    注:本文适合微微有一点点webgl基础的人同学,起码知道shader,知道哪些画贰个实体在webgl画布中

    Logo字体 VS Pepsi-Cola图——Logo字体采纳实践

    2017/04/05 · HTML5 · 1 评论 · Logo字体

    初稿出处: 人人网FED博客   

    本文介绍使用Logo字体和SVG取代百事可乐图的方法。7-Up图是数不清网站经常利用的后生可畏种工夫,然则它有欠缺:高清屏会模糊、不可能动态变化如hover时候反色。而使用Logo字体能够圆满消除上述难题,同一时候全体包容性好,生成的文书小等优点。

    1. 单个页面内容无法过多

    布置常用尺寸:7501334 / 6401134,包括了手提式有线电话机最上端实信号栏的莫斯中国科学技术大学学。

    一举手一投足端H5平移页面常常要求能够享受到各样社交App中,常用的有微信、QQ等。

    应用移动器具查看页面时会开掘,在微信浏览器中有顶上部分导航栏,在qq内置浏览器里持续有最上部导航,后面部分也可能有操作栏(safari浏览器也意气风发致),那个都会占用设计稿展现区域,因而在 设计环节 就须求怀恋内容的多少,页面尾部要留下一定的空白,那样在微信或qq中才不会被遮住。

    平时来讲图(QQ内置浏览器):页面设计尺寸为 7501334,最上端占领150px,底部占用 110px,共占用了 260px,因而设计稿内容应调控在 1334-260=1074px 的可观内。编写代码时,使用 Chrome 浏览器模拟设备大小,将该尺寸(**7501074**)存下来,用于实时查看移动端页面效果。

    设若页面已经写好了,就只能依据上边的尺寸实行内容的调解了,裁减成分间距,缩放图片大小等。
    享用下作者的诉讼失败尝试:

    1. 万大器晚成对总体页面进行缩放(使用 meta 标签),依照设计稿的比例,在中度满意的状态下上升的幅度会偏小,两侧会有白底;
    2. 固然使用 rem 作为相关间距的单位,也并未主意找到一个切合的比重在三种高度(微信/QQ)下切换,因而统风流浪漫调成适配 QQ 的,那样就算在微信下有多余的空白,固定后面部分的指导降落箭头也能使其不会过分突兀。

    图片 1

    750*1334 页面示例

    何以说webgl生成物体麻烦

    大家先稍稍相比下中央图形的创造代码
    矩形:
    canvas2D

    JavaScript

    ctx1.rect(50, 50, 100, 100); ctx1.fill();

    1
    2
    ctx1.rect(50, 50, 100, 100);
    ctx1.fill();

    webgl(shader和webgl景况代码忽视)

    JavaScript

    var aPo = [     -0.5, -0.5, 0,     0.5, -0.5, 0,     0.5, 0.5, 0,     -0.5, 0.5, 0 ];   var aIndex = [0, 1, 2, 0, 2, 3];   webgl.bindBuffer(webgl.ARRAY_BUFFER, webgl.createBuffer()); webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(aPo), webgl.STATIC_DRAW); webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);   webgl.vertexAttrib3f(aColor, 0, 0, 0);   webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, webgl.createBuffer()); webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(aIndex), webgl.STATIC_DRAW);   webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var aPo = [
        -0.5, -0.5, 0,
        0.5, -0.5, 0,
        0.5, 0.5, 0,
        -0.5, 0.5, 0
    ];
     
    var aIndex = [0, 1, 2, 0, 2, 3];
     
    webgl.bindBuffer(webgl.ARRAY_BUFFER, webgl.createBuffer());
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(aPo), webgl.STATIC_DRAW);
    webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);
     
    webgl.vertexAttrib3f(aColor, 0, 0, 0);
     
    webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, webgl.createBuffer());
    webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(aIndex), webgl.STATIC_DRAW);
     
    webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0);

    总体代码地址:
    结果:
    图片 2

    圆:
    canvas2D

    JavaScript

    ctx1.arc(100, 100, 50, 0, Math.PI * 2, false); ctx1.fill();

    1
    2
    ctx1.arc(100, 100, 50, 0, Math.PI * 2, false);
    ctx1.fill();

    webgl

    JavaScript

    var angle; var x, y; var aPo = [0, 0, 0]; var aIndex = []; var s = 1; for(var i = 1; i <= 36; i++) {     angle = Math.PI * 2 * (i / 36);     x = Math.cos(angle) * 0.5;     y = Math.sin(angle) * 0.5;       aPo.push(x, y, 0);       aIndex.push(0, s, s+1);       s++; }   aIndex[aIndex.length - 1] = 1; // hack一下   webgl.bindBuffer(webgl.ARRAY_BUFFER, webgl.createBuffer()); webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(aPo), webgl.STATIC_DRAW); webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);   webgl.vertexAttrib3f(aColor, 0, 0, 0);   webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, webgl.createBuffer()); webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(aIndex), webgl.STATIC_DRAW);   webgl.drawElements(webgl.TRIANGLES, aIndex.length, webgl.UNSIGNED_SHORT, 0);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    var angle;
    var x, y;
    var aPo = [0, 0, 0];
    var aIndex = [];
    var s = 1;
    for(var i = 1; i <= 36; i++) {
        angle = Math.PI * 2 * (i / 36);
        x = Math.cos(angle) * 0.5;
        y = Math.sin(angle) * 0.5;
     
        aPo.push(x, y, 0);
     
        aIndex.push(0, s, s+1);
     
        s++;
    }
     
    aIndex[aIndex.length - 1] = 1; // hack一下
     
    webgl.bindBuffer(webgl.ARRAY_BUFFER, webgl.createBuffer());
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(aPo), webgl.STATIC_DRAW);
    webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);
     
    webgl.vertexAttrib3f(aColor, 0, 0, 0);
     
    webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, webgl.createBuffer());
    webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(aIndex), webgl.STATIC_DRAW);
     
    webgl.drawElements(webgl.TRIANGLES, aIndex.length, webgl.UNSIGNED_SHORT, 0);

    完整代码地址:
    结果:
    图片 3

    小结:大家抛开shader中的代码和webgl初叶化情形的代码,开采webgl比canvas2D就是繁重众多呀。光是二种基本图形就多了如此多行代码,抓其根本多的案由正是因为作者们必要顶点消息。轻易如矩形大家能够直接写出它的极限,可是复杂一点的圆,大家还得用数学方法去变通,显然阻碍了人类文明的升高。
    相相比数学方法生成,假使大家能一贯得到顶点音讯那应该是最好的,有未有相当慢的点子获得极限音讯呢?
    有,使用建立模型软件生成obj文件。

    Obj文件简单来说正是带有贰个3D模子新闻的文本,这里消息饱含:顶点、纹理、法线以及该3D模型中纹理所使用的贴图
    下边那几个是一个obj文件的地址:

    雪碧图

    七喜图实例:天猫PC端

    图片 4

    将多张小图放至一张大图

    行使的时候,通过background-position调解呈现的岗位,如下图所示:

    图片 5

    七喜图的应用方法

    行使7-Up图唯生机勃勃的优点,能够说正是减弱浏览器的央浼次数。因为浏览器同一时间能够加载的能源数是自然的,IE 8是6个,Chrome是6个,Firefox是8个。为了求证,写了以下html结构:(这部份即便有一些跑题,不过很要供给研商一下)

    图片 6

    验证Chrome同期加载个数的html–相当多张异常的大的图纸

    然后在Chrome的开辟者工具里面包车型客车Timeline能够看来Chrome确实是6个6个加载的,每便最多加载6个:

    图片 7

    Chrome同一时间最多加载能源数为6个

    Pepsi-Cola图的制作方法能够用node的八个的包css-sprite,拾分地惠及。只要将Logo做好,放到相应的文书夹里面,写好布局文件运营,就能够转移对应的图纸和css,不须要自身手动去调度岗位等css属性。详见css-sprite

    而是,使用七喜图存在不可制止的缺欠

    2. 标题简短

    移动端浏览器导航条宽度有限,简短的标题可以使其出示完整。

    轻松易行解析一下这几个obj文件

    图片 8
    前两行见到#标识就理解那么些是注释了,该obj文件是用blender导出的。Blender是黄金年代款很好用的建立模型软件,最重大的它是免费的!

    图片 9
    Mtllib(material library)指的是该obj文件所采取的材料库文件(.mtl)
    惟有的obj生成的模子是白模的,它只富含纹理坐标的新闻,但从没贴图,有纹理坐标也没用

    图片 10
    V 顶点vertex
    Vt 贴图坐标点
    Vn 顶点法线

    图片 11
    Usemtl 使用材料库文件中实际哪贰个质感

    图片 12
    F是面,前边分别对应 顶点索引 / 纹理坐标索引 / 法线索引

    此处大多数也都以大家那些常用的性质了,还恐怕有部分别的的,这里就非常少说,能够google搜一下,超级多介绍很详细的稿子。
    豆蔻梢头旦有了obj文件,那我们的职业也正是将obj文件导入,然后读取内容还要按行深入分析就能够了。
    先放出最后的结果,四个模仿银系的3D文字效果。
    在线地址查看:

    在这里处顺便说一下,2D文字是能够通过深入分析获得3D文字模型数据的,将文字写到canvas上之后读取像素,获取路线。大家这里未有采取该情势,因为纵然如此辩护上别的2D文字都能转3D,还是能够做出像样input输入文字,3D呈现的意义。然则本文是教大家急速搭建三个小世界,所以大家照旧选用blender去建立模型。

    七喜图的弱项

    3. 二维码图片应用 img 标签引进

    二维码图片不要写为要素背景,不然长按未有章程触发扫描成效。应接受 img 标签引进,如下:

    JavaScript

    ![](images/qrcode.png)

    1
    ![](images/qrcode.png)

    具体贯彻

    高清屏会失真

    在2x的设施像素比的显示器上例如mac,就算要达到规定的标准和文字同样的清晰度,图片的宽窄需求实际展现大小的两倍,不然看起来会相比模糊:读者能够对照左侧文字和右边图片里文字的清晰度

    图片 13

    左边手图片里的文字比左侧字体的文字模糊

    特意是将来手提式有线电话机绝大部份是高清屏了,比方iphone 6 plus的分辨率高达了一九二〇 * 1080,所认为了高清屏,使用七喜图恐怕要筹算种种尺度的图片。

    4. 二维码图片记得扫描测验

    临时扫描二维码之后,会跳转至有个别地点,不幸的话QQ大概微信会对那些地方进行温馨提示,如下图所示:

    图片 14

    QQ内的协和提醒

    如此那般会阻止部分顾客继续寻访,进而不能够很好的将客户教导到运动想要推广的制品/品牌页面,如 App 的下载页面等。因而二维码的扫视测量检验无法少。

    举个例证,假诺二维码扫描结果是运用的下载地址的话,可以动用应用宝的微下载地址来生成二维码,那是不会被“温馨提示”的。

    1、首先建立模型生成obj文件

    此地大家应用blender生成文字
    图片 15

    7-Up图不便于变化

    Coca Cola图是一张晓芸态的图形,当她转移的那天就已然了他要以什么样的艺术体现,由此作者无法动态地改换她的水彩,不能够让他变大(恐怕会失真),不能像文字同样加多少个影子效果等等。比方下边包车型客车美食做法,hover或然选中的时候反色:

    图片 16
    图片 17

    当选可能hover时反色

    抑或是某一天UI要换颜色、某一天COO挂了,为表哀悼,为个商家的网址要换个朱红调。使用Coca Cola图时,全数的Logo都得重新创制。

    接纳Logo字体能够完备化解地点的标题

    5. 行使 Gulp 拼合图片

    要是图谋先布局,后选择自动化学工业具将图纸拼起来,减少央浼数,供给注意:在编写 CSS 的时候,图片宽高应固定,图片拼合后技术透过定位和出示区域的宽高来显示图片。

    举例,借使布局时 width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(100%的肥瘦)内会将别的图片体现出来,那不是大家想要见到的。

    2、读取解析obj文件

    JavaScript

    var regex = { // 那太傅则只去相配了大家obj文件中用到数量     vertex_pattern: /^vs+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)/, // 顶点     normal_pattern: /^vns+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)/, // 法线     uv_pattern: /^vts+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)/, // 纹理坐标     face_vertex_uv_normal: /^fs+(-?d+)/(-?d+)/(-?d+)s+(-?d+)/(-?d+)/(-?d+)s+(-?d+)/(-?d+)/(-?d+)(?:s+(-?d+)/(-?d+)/(-?d+))?/, // 面信息     material_library_pattern: /^mtllibs+([d|w|.]+)/, // 信任哪八个mtl文件     material_use_pattern: /^usemtls+([S]+)/ };   function loadFile(src, cb) {     var xhr = new XMLHttpRequest();       xhr.open('get', src, false);       xhr.onreadystatechange = function() {         if(xhr.readyState === 4) {               cb(xhr.responseText);         }     };       xhr.send(); }   function handleLine(str) {     var result = [];     result = str.split('n');       for(var i = 0; i < result.length; i++) {         if(/^#/.test(result[i]) || !result[i]) { // 注释部分过滤掉             result.splice(i, 1);               i--;         }     }       return result; }   function handleWord(str, obj) {     var firstChar = str.charAt(0);     var secondChar;     var result;       if(firstChar === 'v') {           secondChar = str.charAt(1);           if(secondChar === ' ' && (result = regex.vertex_pattern.exec(str)) !== null) {             obj.position.push(+result[1], +result[2], +result[3]); // 参加到3D对象顶点数组         } else if(secondChar === 'n' && (result = regex.normal_pattern.exec(str)) !== null) {             obj.normalArr.push(+result[1], +result[2], +result[3]); // 参与到3D对象法线数组         } else if(secondChar === 't' && (result = regex.uv_pattern.exec(str)) !== null) {             obj.uvArr.push(+result[1], +result[2]); // 出席到3D对象纹理坐标数组         }       } else if(firstChar === 'f') {         if((result = regex.face_vertex_uv_normal.exec(str)) !== null) {             obj.addFace(result); // 将顶点、发掘、纹理坐标数组造成面         }     } else if((result = regex.material_library_pattern.exec(str)) !== null) {         obj.loadMtl(result[1]); // 加载mtl文件     } else if((result = regex.material_use_pattern.exec(str)) !== null) {         obj.loadImg(result[1]); // 加载图片     } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    var regex = { // 这里正则只去匹配了我们obj文件中用到数据
        vertex_pattern: /^vs+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)/, // 顶点
        normal_pattern: /^vns+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)/, // 法线
        uv_pattern: /^vts+([d|.|+|-|e|E]+)s+([d|.|+|-|e|E]+)/, // 纹理坐标
        face_vertex_uv_normal: /^fs+(-?d+)/(-?d+)/(-?d+)s+(-?d+)/(-?d+)/(-?d+)s+(-?d+)/(-?d+)/(-?d+)(?:s+(-?d+)/(-?d+)/(-?d+))?/, // 面信息
        material_library_pattern: /^mtllibs+([d|w|.]+)/, // 依赖哪一个mtl文件
        material_use_pattern: /^usemtls+([S]+)/
    };
     
    function loadFile(src, cb) {
        var xhr = new XMLHttpRequest();
     
        xhr.open('get', src, false);
     
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
     
                cb(xhr.responseText);
            }
        };
     
        xhr.send();
    }
     
    function handleLine(str) {
        var result = [];
        result = str.split('n');
     
        for(var i = 0; i < result.length; i++) {
            if(/^#/.test(result[i]) || !result[i]) { // 注释部分过滤掉
                result.splice(i, 1);
     
                i--;
            }
        }
     
        return result;
    }
     
    function handleWord(str, obj) {
        var firstChar = str.charAt(0);
        var secondChar;
        var result;
     
        if(firstChar === 'v') {
     
            secondChar = str.charAt(1);
     
            if(secondChar === ' ' && (result = regex.vertex_pattern.exec(str)) !== null) {
                obj.position.push(+result[1], +result[2], +result[3]); // 加入到3D对象顶点数组
            } else if(secondChar === 'n' && (result = regex.normal_pattern.exec(str)) !== null) {
                obj.normalArr.push(+result[1], +result[2], +result[3]); // 加入到3D对象法线数组
            } else if(secondChar === 't' && (result = regex.uv_pattern.exec(str)) !== null) {
                obj.uvArr.push(+result[1], +result[2]); // 加入到3D对象纹理坐标数组
            }
     
        } else if(firstChar === 'f') {
            if((result = regex.face_vertex_uv_normal.exec(str)) !== null) {
                obj.addFace(result); // 将顶点、发现、纹理坐标数组变成面
            }
        } else if((result = regex.material_library_pattern.exec(str)) !== null) {
            obj.loadMtl(result[1]); // 加载mtl文件
        } else if((result = regex.material_use_pattern.exec(str)) !== null) {
            obj.loadImg(result[1]); // 加载图片
        }
    }

    代码大旨的地方都举行了讲授,注意这里的正则只去相配大家obj文件中满含的字段,其余新闻并未有去相配,假如有对obj文件全体十分大可能率富含的音讯实现相称的同学能够去看下Threejs中objLoad部分源码

    图标字体icon font

    图标字体就是将Logo作成贰个字体,使用时与平时字体无差异,能够安装字号大小、颜色、光滑度等等,方便变化,最大亮点是具有字体的矢量无失真特点,同有的时候候能够相配到IE 6。还会有四个独特之处是生成的公文比很小,2十六个图标的变迁的ttf字体文件才41KB

    图片 18

    八个Logo字体里面包车型大巴元素

    本文由金沙国际官网发布于web前端,转载请注明出处:教你用webgl快速创建一个小世界,移动端H5页面注

    关键词:

上一篇:有关HTML5的流言与真相,不要痴迷于HTML5

下一篇:没有了