WebGL
What
什么是WebGL
WebGL是 OpenGL 与 JS的绑定，也可以理解成通过JS来操作OpenGL。
什么是OpenGL
OpenGL是专门用于渲染2D、3D适量图形的跨语言，跨平台的应用程序编程接口（是一套完整的SDK），可以看作它是一个集多款语言为一身的来操作显卡绘图的中间层
Why
为什么用 WebGL
更快
首先我们都知道CPU与GPU最根本的区别就是，CPU什么都干，GPU仅专注于图像相关。常用的Canvas2D实际上是调用的CPU来做图形计算，而WebGL因为基于的是OpenGL，也就是说用GPU来计算，那么谁的效率高，谁更快就显而易见：
- Canvas2D：CPU -> 内存 -> 显示 (软件加速)
- WebGL: GPU-> 显存 -> 显示 (硬件加速)
How
基础知识
坐标系
在3d空间当中，它的取值范围都是 -1 到 1，超过这个值将无法渲染
左手坐标系
- 相关应用：DirectX、BabylonJS、Unity、UE4
- Z值
右手坐标系
- 应用于：WebGL、ThreeJS、3DMax
- Z值越大，摄像机离图像越远
线性代数
线性代数就是将几何与代数统一
Vector - 矢量、向量
点：point
线：line
面：face、plane
体：geometry
方向：angle
长度：length
点乘：dot
叉乘：cross
Matrix - 矩阵
矩阵用于控制物体的、
网格：mesh
- mesh = new Mesh(geomery, material)
- 着色（material）后的体（geometry），称之为mesh
乘积：multiply
- 初始化：compose（postion, rotation, scale）
- 矩阵的计算是有顺序的，根据顺序即可以通过计算将模型初始化
转置： transpose
线性变换、仿射变换
Matrix Vector 既 矩阵向量 可以实现线性变换
- 平移矩阵: postion
- 旋转矩阵: rotation
- 缩放矩阵: scale
Transformation - 变换形式
- 移动
- 旋转
- 缩放
硬件加速
着色器
渲染管线的过程中，允许对顶点和片元（像素）进行编程的行为，称为着色器，着色器是直接执行在GPU上的代码。
- 定点着色器
- 片元着色器