这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

WebGL起源于Mozilla员工弗拉基米尔·弗基西维奇的一项称为Canvas 3D实验项目。2006年，弗基西维奇首次展示了Canvas 3D的原型。2007年底在Firefox和Opera被实现。 在2009年初，非营利技术联盟Khronos Group启动了WebGL的工作组，最初的工作成员包括Apple、Google、Mozilla、Opera等。2011年3月发布WebGL 1.0规范。截至2012年3月，工作组的主席由肯·罗素（Ken Russell，全名“Kenneth Bradley Russell”）担任。 WebGL的早期应用包括Zygote Body。 WebGL 2规范的发展始于2013年，并于2017年1月完成。该规范基于OpenGL ES 3.0。首度实现在Firefox 51、Chrome 56和Opera 43中。

1.什么是WebGL

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

2.Modern Graphics System

• 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
• 像素(Px):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
• 帧缓存(Frame Buffer):在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
• CPU(Central Processing Unit):中央处理单元，负责逻辑计算。
• GPU(Graphics Processing Unit):图形处理单元，负责图形计算。

3.CPU vs GPU

• GPU由大量的小运算单元构成
• 每个运算单元只负责处理很简单的计算
• 每个运算单元彼此独立
• 因此所有计算可以并行处理

4.WebGL Startup

0. 创建VebGL上下文创建
1. WebGL Program将缓冲区数据读取到GPU
2. 将数据存入缓冲区
3. GPU执行WebGL程序，输出结果

5.3D Matrix

3D标准模型的四个齐次矩阵(mat4)

0. 投影矩阵Projection Matrix
1. 模型矩阵Model Matri
2. 视图矩阵View Matriⅸ
3. 法向量矩阵Normal Matriⅸ

小结

WebGL 绘制图形的方式不是命令式的，而是“连接式”的。我们通过 WebGLRenderingContext 这个上下文将外部的变量与 GPU 内部的 shader 程序发生了联系。渲染管线就可以通过 shader 运行出我们想要的结果，大家需要掌握的重难点就在于如何向 WebGL 中传入各种类型的数据。