WebGL介绍

目录

• 什么是WebGL🤔
• WebGL和canvas比较👊
• WebGL的原理☀️
• WebGL是简单的😁
• WebGL是复杂的😭

什么是WebGL

• WebGL（全写Web Graphics Library）是一种3D绘图标准
• WebGL在电脑的GPU中运行
• WebGL能够为HTML5 Canvas提供硬件3D加速渲染

举个例子

示例

性能

当执行大量绘制任务时，WebGL的性能约是canvas的3~5倍😲(数据供参考)

WebGL的原理☀️

program（着色程序）= 顶点着色器 + 片段着色器

• WebGL在GPU中运行。所以须要使用可以在GPU上运行的代码。这样的代码须要提供成对的方法。每一对组合起来称做一个program
• 顶点着色器：计算顶点的位置，
• 片段着色器：计算出当前绘制图元中每一个像素的颜色值

举个例子

示例

图例

矩阵变换

局部坐标 –(模型变换)-> 世界坐标 –(视图变换)-> 视图坐标 –(投影变换)–> CCV 坐标

以(0,1,0)为例，它的齐次向量为(0,0,1,1)，变化过程以下：

参考

• 计算机图形学
• 变换矩阵@维基百科
• 透视投影详解

深度检测

当两个表面重叠时，前面的模型会挡住后面的模型

纹理

为每一个顶点指定一个纹理坐标(在(0,0)与(1,1,)的正方形中)，而后传入纹理对象。片元着色器拿到的是对应片元的内插后的纹理坐标，就利用这个纹理坐标去纹理对象上取颜色，再画到片元上。

混合与蒙版

混合机制与深度检测相似，也发生在试图向某个已填充的像素填充颜色时。深度检测经过比较z值来肯定像素的颜色，而混合机制会将两种颜色混合

---

光照

WebGL 没有为光照提供任何内置的方法，须要开发者在着色器中实现光照算法 光是有颜色的，模型也是有颜色的。在光照下，最终物体呈现的颜色是二者共同做用的结果。

复杂模型

复杂模型可能有包括子模型，子模型可能与父模型有相对运动。

WebGL是简单的

它作的是一件简单的事，它仅仅运行用户提供的两个方法，一个顶点着色器和一个片段着色器，去绘制点，线和三角形。

WebGL是复杂的

作复杂的三维效果，须要复杂的“着色器”。全部空间坐标计算，着色器的设计，都须要程序本身作复杂的算法处理。

WebGL库

目前最流行的 WebGL库 ThreeJs

调试工具

比较成熟的 WebGL 调试工具是WebGL Inspector

总结

WebGL常常被当成3D API，人们总想“我可使用WebGL和一些神奇的东西作出炫酷的3D做品”。 事实上WebGL仅仅是一个光栅化引擎，它能够根据你的代码绘制出点，线和三角形。想要利用WebGL完成更复杂任务，取决于你可否提供合适的代码，组合使用点，线和三角形代替实现。

为何没有在平常开发中大规模的应用呢❓

• WebGL是直接调用底层的OpenGL，这使得WebGL的接口十分晦涩，对于通常的Web开发人员来讲，门槛比较高。
• WebGL的兼容性并很差

参考资料

• webglfundamentals.org/webgl/lesso…
• threejs.org/
• taobaofed.org/blog/2015/1…