前端技术栈是不是都玩过，那WebGL呢？

内容简介：前端技术栈是不是都玩过，那WebGL呢？

经常玩前端代码的朋友对前端技术栈肯定都有所涉猎，例如与HTML5相关的一些新特性：localStorage、文件API、WebSocket、富媒体、canvas等。那么，WebGL您熟悉吗？

从市场价值来看，目前大部分的浏览器都支持WebGL，受众群体很广。近几年发展很迅猛，整个技术生态构建的越来越完善。

早期的WebGL是由标准组织科纳斯组织（Khronos Group）发起并维护的，这个组织还运作着OpenGL、COLLADA及一些其它标准化规范。

WebGL有几大核心优势：

• 免费授权使用，高性价比。
• 可以做跨平台API，把 Java 作为唯一的入口语言，是一套编程API，与2D绘图类似，也是使用Canvas元素。
• 基于OpenGL ES 2.0，OpenGL ES是3D渲染标准OpenGL的精简版。我们的移动设备商，大部分使用OpenGL ES进行3D渲染，Web GL继承了它的优良价值（性能强劲、跨平台、协调一致等）。

听了这么多好处，那WebGL究竟能做出什么呢？看看下图，一个动态的水池，是不是很酷？

2D的图形世界是建立在笛卡尔儿坐标系中绘制的，写过这方面项目的都知道x坐标与y坐标。为了传递空间感知，WebGL的绘制是建立在3D坐标系中，相对于2D又新增加了一个z轴，如下图：

x轴是水平由左到右，y轴是垂直由下到上，z轴是由屏幕里面指向外面。熟悉2D坐标系的朋友对于理解3D应该不是很难。

除了3D坐标系之外，WebGL是如何绘制图形的呢？我们常用的方法是用网格（Mesh）。网格是由一系列的多边形构成的物质，通过多个顶点（x,y,z）定义多边形在3D坐标系空间中的位置。3D网格另一个别名叫模型（model），示例图如下：

有了网格之后，除了顶点坐标外，还需要更多的网格的属性，才能够更好的描述物质。例如物质的颜色、反光程度、光泽度等。其中，网格表面可以用位图来定义，也就是我们通常所说的纹理映射（texture map）或叫做纹理。纹理可以描述一个物质的外观，不同的纹理组合可以构建更加酷炫的效果。另外，网格的表面特性，例如一个物体的透明度、颜色和反光度等效果一般称为材质（material），它通常依赖于光源的照射呈现外观。

以上所述就是小编给大家介绍的《前端技术栈是不是都玩过，那WebGL呢？》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• Micronaut + GraalVM 是不是真的香
• 关于arduino是不是玩具的讨论
• Python的Tuple是不是冗余设计？
• DBA 防跑路，是不是备份最重要？
• Python 的缩进是不是反人类的设计？
• 看看是不是你想要的：pycharm永久激活！

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。