[canvas] 3D

使用webGL来创建3D程序

3D坐标系
网格、多边形与顶点
材质、纹理与光源
变换与矩阵
相机、透视、视口与投影
着色器

使用CSS3来创建3D效果

    CSS变换：作用于整个元素的3D操作（平移，旋转，缩放）
    CSS过度：随着时间作用于CSS属性的简单变化，如补间
    CSS动画：关键帧，随时间作用于CSS属性的复杂效果

webGL和CSS3都是使用GPU来实现3D实时渲染，叫硬件渲染。

软件渲染也就是使用canvas API来渲染 3D 的效果。

webGL渲染过程：

3D坐标系统

perspective(透视、景深)

perspective的作用是确定物体是靠近我们，还是远离我们

在2维的平面，我们想要让物体感觉向我们走来，就放大它，同理远离的效果就是让它变小。

当物体远离直至消失的过程中，要想模拟三维的消失效果，必须让物体的x坐标，y坐标向消失点移动。
这个消失点可以理解为汽车向远方驶去，最终它会逐渐变成黑点消失在地平线上，这个黑点就是消失点。

人眼代表观察点，蓝色的球体代表屏幕中的物体，
人眼距离屏幕的距离为fl,
物体与屏幕之间有一段距离z值（这个值在成像的时候并不存在，反映到物体大小的变化上）

物体的大小与这两者之间的距离满足下面的关系：

scale = fl / (fl + z) = 1 / （1 + z/fl）

fl的值就如css3中设定的perspective值。 
从公式可以得出：scale的值一般情况下范围为（0，1.0），
这个值之后会用在缩放物体的比例与靠近消失点的比例。
当z轴无限大的时候（也就是朝着z轴的正向持续运动），scale的值就会趋近于0。
当z的距离趋近于（-fl）的时候，scale的值就会变得很大，就像是戳进我们的眼里。

假设fl=200,这时物体的z坐标等于0，那么由公式可得scale=1.0,那么物体的大小不变，物体的位置不变。
如果z=200,那么scale=0.5。物体的大小变为原来的1/2，同时我们要让它现在的坐标乘以缩放比例scale,得到新的位置。
如果原来的为（200，300），那么新坐标就为（100，150）。
具体效果如下图：