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

什么是 WebGL

WebGL（Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0结合在一起，通过增加 OpenGL ES 2.0的一个 JavaScrip t绑定，WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染。WebGL 使得我们能够借助系统显卡来更好的在浏览器中展示3D场景和模型，并且绘制更加复杂的3D场景结构。

现代图形系统

图形系统的组成

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

图形系统的工作原理

当我们绘制一个几何图形的时候，我们会先将图形的轮廓提取出来，并对其进行网格化，把复杂的图形简化处理，之后将处理完的数据存放到帧缓存中，之后设备会从帧缓存中读取数据完成渲染。

CPU vs GPU

绘图的时候一般用到 GPU 而不是 CPU，虽然 CPU 具有强大的功能，但是由于绘制图像可能需要数十万个点阵，却又不需要强大的单元运算能力，如果要同时处理数十万个像素，GPU 是由大量互相独立的小运算单元构成，每个运算单元只负责处理很简单的计算，因此在图像处理方面，GPU 的结构更加适合。

WebGL 渲染过程

创建 WebGL 上下文

在 js 中通过 canvas 对象创建 WebGL 的上下文。

创建 WebGL Program

使用 GLSL 语言进行图形处理函数的编写，在 js 中我们对其进行编译并构建，最后生成一个 WebGL Program。

将数据存入缓冲区

将缓冲区数据读取到 GPU

GPU 执行 WebGL 程序，输出结果

3D标准模型

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

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