目录
- 什么是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的兼容性并不好
