这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
什么是WebGL
WebGL本质是运用了GPU能力的渲染技术，另外也与3D相关，但WebGL并不等同于二者。现代计算机的图形系统，现代图形系统是基于光栅绘制图形，通常情况下保存某个位置具体的颜色信息，绘图过程中像素信息被存放于帧缓存中，帧缓存是一块内存地址。计算机的处理器分成CPU和GPU，CPU是中央处理单元，负责逻辑计算；GPU是图形处理单元，负责图形计算
先有CPU将图形网格化，再有GPU进行光栅化，进而存储到帧缓存当中去，使用的时候再批量地绘制出来，GPU由大量地小运算单元构成，每个运算单元彼此独立，可以并行进行简单运算
WebGL与OpenGL类似，都是一个系列的
WebGL Startup
- 创建WebGL上下文
选择canvas对象，使用.getContext对象获得WebGL上下文，使用GLS语言定义顶点着色器、片段着色器（先顶点着色器，再片段着色器；都是并行处理的）（写着色器的技巧比较好）
片段着色器可以进行线性插值。shader里进行并行计算。 - 创建WebGL Program（着色器）
- 将数据存入缓冲区 设置顶点（右手笛卡尔坐标系，与Web2D不一样）
- 将缓冲区数据读取到GPU 创建缓冲区（create&find），然后将buffer传给GPU（定义类型，激活指针），最后使用WebGL清理一下缓冲区
- GPU执行WebGL程序，输出结果 可以使用三角剖分进行图形的绘制（通过改变三角形的顶点，使用earcut的三角剖分，最后使用drawElements绘制（TRIANGLES会自动填充颜色，LINE_LOOP可见线条））
mesh.js是WebGL的底层
3D Meshing
3D图片的话可以先用软件先行划分三角网格（网格化之后再贴上贴图）
移动（Transforms）
平移、旋转（和角公式）、缩放，旋转+缩放是线性变换（叠加就是矩阵的变形），将矩阵升维成齐次矩阵之后可以将平移也写成线性变换的形式
投影矩阵（Projection Matrix）定义坐标系，模型矩阵(Model Matrix)进行Transform变换，视图矩阵(View Matrix)设定摄像机位置，法向量矩阵（Normal Matrix）则会影响光线反射
补充
The book of shaders适合用作图形学入门
