WebGL 介绍
WebGL是一项用来在网页上绘制和渲染复杂三维图图形（3d图形），并允许用户与之进行交互的技术。 学习WebGL需要掌握前端基础（HTML/CSS/JS）、计算机图形学、以及一定的数学物理知识。
WebGL的发展历史
- 2006年 WebGL 起源于Mozilla 员工弗拉基米尔·弗基西维奇的一项 Canvas 3D 实验项目
- 2007年末 在 FireFox 和 Opera 浏览器中实现
- 2009年初 Khronos Group 联盟建立了 WebGL 的工做组最初的工做成员包括 Apple、Google、Mozilla、Opera 等
- 2011 年 3 月 WebGL 1.0 规范发布
- WebGL2 规范的发展始于 2013 年，并于 2017 年 1 月最终完成 WebGL 2 的规范，首度在 Firefox 5一、Chrome 56 和 Opera 43 中被支持。
WebGL的优缺点
优点
- 轻松开发三维图形程序
- 充分利用浏览器的功能
- 学习和使用相对于其他3d制作软件更简单
缺点
- 较于桌面端开发API：Direct3D、openGL、UE、Unity相比，实现效果略差
- 开发成本较高，需要一定的数理知识，尤其是线性代数
- 开发及部署系统硬件要求较高，尤其是GPU
WebGL坐标系
WebGL是在canvas画布上渲染三维空间。
canvas是二维坐标系，画布左上角为原点，往右是X轴，往下是Y轴
WebGL使用的是正交右手坐标系（并不一定，比如在裁剪空间中使用左手坐标系，可以通过翻转Z轴坐标值进行补偿，来继续使用右手坐标系）右手坐标系只是大多数人都遵守的一个传统。
- WebGL坐标系顶点位于画布的正中心
- X轴最左边为-1，最右边为1
- y轴最下边为-1，最上边为1
- z轴朝向屏幕里面最大值为-1，朝向屏幕外面最大值为1
- 无论canvas画布宽高多少，WebGL坐标系的区间值都是一定的（-1，1）
WebGL的渲染管线
- 顶点缓冲区：讲物体形状的坐标信息放入缓冲区（缓冲区：待加工的数据，类似于数组，存储信息）
- 顶点着色器：顶点着色器接收数据，顶点缓冲区向顶点着色器传递数据，将uniform带入其中
- 图元装配：顶点着色器处理数据，进行图元装配（使用顶点，长度，半径等数据装配图元）
- 光栅器：将矢量图形转换成像素图形（光栅化）
- 片元着色器：将颜色和纹理加入其中，会接受uniform参数
- 融合：将物体，色彩等元素融合
- 抖动：实现动态效果
- 颜色缓冲区：最后涂饰到颜色缓冲区中（颜色缓冲区最终会展现给用户）
顶点着色器是GPU渲染管线上一个可以执行着色器语言的功能单元，具体作用就是执行顶点着色器程序对顶点进行变换计算，将变换后新的顶点坐标赋给内置变量gl_Position，最后输出。
图元装配就是通过绘制函数，将顶点坐标装配为图元。通过绘制模式控制装配图元（gl.POINTS:点域，gl.LINES:线条，gl.TRIANGLES:三角面）
光栅化将装配好的图元转换为像素形式的片元
片元着色器和顶点着色器一样是GPU管线上一个可执行着色程序的功能单元，顶点着色器是逐顶点处理顶点数据，片元着色器是逐片元处理片元数据。通过内置变量赋值进行着色。除了着色以外还可以通过discard实现哪些片元可以被丢弃，被丢弃的片元不会出现在颜色缓冲区（不会显示）
