这是我参与「第四届青训营」笔记创作活动的第12天

初识 WebGL

复杂的图形渲染在这里，用 Web 来写动画

重点知识点介绍

GPU 不等同 WebGL 也不等同 3D ， GPU 除了在图形渲染上，还有在人工智能上的应用

WebGL并不像前端那么简单，主要是涉及了许多硬件方面的原理

图形绘制的过程：先对图像的轮廓进行提取，对轮廓进行网格化（常见的是三角网格），网格化后会进行光栅化，得出的数据给帧缓存，最后进行渲染

图形系统可以定制不同的渲染管线，通俗一点解释像是活字印刷一样，将图源进行拼接后，批量渲染

那么在这个过程为什么要分为 CPU 和 GPU

CPU可以看作是一个处理能力比较强大的处理单元，在多核系统中更是可以多个管道运行处理数据，可以同时处理多个任务，但核的数量始终有限，目前不可能有上万的核。

而现状是，普遍图形都有上万的像素甚至上百万，这么大的数据给 CPU 处理的话，效率比较低。因此换用 GPU 来处理，如下图

WebGL实际上是OpenGL图形渲染引擎的子集，专门用于Web上的

第二步中，指的是渲染管线中的数据送入GPU后，如何让这些数据经由GPU计算变成像素点，这是通过代码来写的，在 WebGL program 里会有渲染管线里面提供的处理方法，这些方法被称之为着色器

分为顶点着色器(vertexShader)和片源着色器(fragmentShader)，分别负责处理图形轮廓和负责处理颜色

如图，利用两种着色器来创建了对应的Webprogram并编译，最后将两种着色器挂载到program上

在 WebGL 里的坐标系以中心点为原点，默认情况下x轴和y轴的最大值是1，最小值是-1。例如在2D平面上的点，在canvas上（-1，-1）在左上角，（1，1）右下角

一般图形通过顶点坐标来描述，比如绘制一个三角形，对应的顶点就是（-1，-1），（0，1），（1，-1），以数组的形式传入。利用bufferData方法将数据传入到缓存区里。

在缓存区里，通过顶点着色器和片源着色器去执行 WebGL 的program，可以往里面传入参数。

需要注意的是，WebGL 是一个并行计算的系统，传入的三个位置坐标在经由 Shader 执行时，会同时执行。

用 WebGL去绘制一个 2D 图形的话需要很多代码，不用3D的，用2D的canvas去绘制的话会简单许多。

如果想绘制多边形呢，复杂多边形

通过三角划分，不断切割后形成的只有三角形部分

而旋转和位移的话是通过数学的方式来transform的，旋转和缩放作为线性变换可以转换成矩阵的方式表达

虽然现在已经有许多库提供现成的渲染效果，但理解 WebGL 和数学转换规则可以帮助我们深入理解它们是如何实现的，尤其是其中的数学思想和数学技巧。