这是我参与「第五届青训营 」笔记创作活动的第15天
webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入[canvas]对吧：
canvas = document.getElementById("xxx");
ctx = canvas.getContext("2d");
SO，3D版本的就酱：
canvas = document.getElementById("xxx");
gl = canvas.getContext("experimental-webgl");
是的，[webGL]直接使用canvas元素，只是引入一个不同的上下文“experimental-webgl”，方便吧。
这里的上下文实际上应该是.getContext("webgl")，但由于现在webgl标准尚未完善，所以多数浏览器采用一个“试验性”的上下文
让我们先啰嗦一些玩意儿
3D坐标系
这个玩意儿大家都认识吧不多啰嗦了
这里y轴跟canvas是逆向的，这是一个右手坐标系
网格、多边形和顶点
网格(Mesh) 是绘制3D图形的一种方法，它是由一个或多个多边形组成的物体，每个顶点的坐标(x,y,z)定义了多边形在3D空间中的位置，这里的多边形通常是三角形和四边形。网格用来描述物体形状。恩，大概......也许......差不多......长这样：
材质、纹理和光源
贴个骷髅头什么的最嗨森了。但仅仅这样是然并卵的，为什么？因为现在毛都看不见。诶不带丢鸡蛋的，诶卧槽你再丢！
为什么说看不见呢，因为视觉是光作用于视网膜细胞所产生的大脑认知，所以我们需要光，还需要能反射光的表面。这样网格才能看得见。
于是有：
- 纹理映射(texture map) ：物体表面对光的反射，颜色及光泽度等，常由位图来决定。
- 光源(light) ：顾名思义就是闪瞎你的那个东西。常用有环境光、点光源、平行光等，物体表面对光的反射还有环境反射、镜面反射和漫反射。
- 材质(material) ：网格表面的特性的统称。
变换和矩阵
网格的形状是由顶点决定的，而我们做的是动画，难道动画每一帧要重新定义所有网格的所有顶点？显然是不可取的，所以我们需要变换(transform) 。变换是不需要遍历每个顶点就可以移动网格的操作，需要由矩阵(matrix) 来操作。
类似介种：
相机、透视、视口和投影
我们生活在三维世界中，但是用眼睛只能看到二维的图像。同样的，三维的网格要能够看见，需要渲染成二维图像。
好多好多的概念：
- 场景(scene) ：容纳一切的容器
- 相机(camera) ：就是你在webGL世界里面的眼睛呐。
- 视口(viewport) ：想想浏览器的视口的概念，对，就是3D场景渲染的二维图像，也就是你从浏览器的canvas元素上看到的。
- 视野(field of view) ：相机可见范围左右边界的夹角。
- 视锥体(view frustum) ：物体可以被渲染到视口的空间，换句话说，只有处于视锥体空间内部的物体，才可以被看见。
- 近裁剪面(near clipping plane) ：视锥体靠近相机的一面，其实就是视口。
- 远裁剪面(far clipping plane) ：视锥体最远离相机的平面。
太君别开枪！我知道你最讨厌一大片的概念了，来看图：
这样清楚了吧~~~ ？(终于啰嗦完了......)
数学真难
概念讲完了是不是该开搞了呢？诸位看官别急，且听小生慢慢道来。
大家明白，模拟三维空间，需要非常多的计算，网格的坐标、大小、角度，网格的平移、旋转，相机观察网格的二维映射等等等等。
