前面的章节咱们介绍了2D层面的canvas动画，基本上若是你对原理和概念都理解了，通常的2D层面的动画对你来讲都是小菜一碟。从这一章开始咱们介绍如何使用2D的canvas来渲染3D系统。javascript
1.CSS3与webGL
提到3D效果，你可能首先会想到css3中的3D动画。经过它，单个元素或是整个页面均可以经过动画，图片滤镜，以及2D或3D的变换变得生动起来。使用它来构建3D效果，一个最为直观的感觉就是——简单易用,但对于复杂的效果他就无能为力了。与之相反，你会想到什么？我脑海里的第一映像是webGL,若是你使用过webGL，或是你对3D图形基础知识有所了解，你就会深入的感觉到——使用webGL建立一个3D程序不是那么的容易！css
要使用webGL来建立3D程序，你至少须要对基本的3D编程知识有所了解，它包括：java
3D坐标系css3
网格、多边形与顶点web
材质、纹理与光源编程
变换与矩阵canvas
相机、透视、视口与投影浏览器
着色器bash
也就是说，上面这些内容是你使用webGL编写3D程序，必须get的知识。而相比于webGL,使用CSS3来建立3D效果，就容易了不少。使用CSS3来建立3D效果主要包含如下几种技术：svg
CSS变换：做用于整个元素的3D操做（平移，旋转，缩放）
CSS过分：随着时间做用于CSS属性的简单变化，如补间
CSS动画：关键帧，随时间做用于CSS属性的复杂效果
而且这几种技术，只是对元素的属性值作简单的设定，与编写传统的CSS代码无异。这其中包含了一些3D动画的概念。好比：你会对相关的DOM元素设定它的
perspectiv: 800px
perspectiv其实就是3D动画里透视(或景深)的概念，还有经过矩阵来作图形的平移、变换、缩放等，都与3D程序有着类似的概念。相关的例子和用法在这我就不列举了，相信你看过的写过的比我多多了！
2.硬件渲染与软件渲染
在上面，咱们介绍了两种常见的在web领域编写3D程序的技术，webGL和CSS3。这两种技术有一个共同的特色：都是使用GPU来实现3D实时渲染，咱们管这叫硬件渲染。
经过硬件渲染的方式，能够极大的提升3D图形渲染的速度，对于交互式3D图形来讲极其重要（若是咱们但愿3D内容是交互式的，那么渲染的速度就要很是的快，至少每秒30帧，最好每秒60帧）。但它并非必需的，使用软件渲染一样能够创造很是惊叹的3D体验。
软件渲染也就是咱们所说的使用canvas API来渲染 3D 的效果。若是你使用过Three.js这样的webGL类库，那你应该知道在Three.js中内置了两种渲染器——Canvas渲染器和webGL渲染器。这两种渲染器提供了不一样的渲染模式，若是有兴趣，你能够本身去体验一下不一样的渲染器下图形的显示状况。
3.渲染流程
大部分软件渲染的实现都模仿了硬件渲染的流程，先将带颜色的三角形、线条、点从模型空间变换到屏幕空间，而后再进行绘制。以webGL为例，在使用3D硬件加速时，咱们使用GLSL着色器代码来进行计算。它有着强大的内建函数，而且会将代码编译为在GPU中执行的底层机器码。若是没有3D硬件加速，咱们就须要如今javascript中实现这些计算，而后再把上好的颜色和变换后的物体经过canvas API进行最终的渲染。
这些计算包括维护3D几何体、变换、光线、着色，以及将3D物体投射到2D视口上。这些工做须要大量的计算，想一想也是够了。这里给一个webGL渲染的示意图：
简单来讲,webGL的的渲染过程分为两个系统，一个是浏览器用于最终的显示，另外一个是webGL系统用于处理各类复杂的计算。软件渲染的过程模仿的就是硬件渲染的过程，只是咱们都把他放到一个系统来作。
4.为何要用Canvas 2D
你可能会问，既然webGL可以很好的实现3D效果，那还干吗费力不讨好的用canvas 2D去实现3D效果呢？其实，尽管webGL很普及，可是它并非全部的移动端浏览器都对其很好的支持（甚至一些PC端浏览器都不支持）。在这些平台上，若是你还想使用3D效果，那么你就能够使用Canvas 2D做为降级方案，尽管这可能牺牲性能，影响画质，但对于一些简单的3D效果彻底是ok的。另外，说实话，若是你的3D效果很简单，使用webGL就应了中国的那句古话——杀鸡焉用牛刀。
好了，本文就到这里，关于为何要使用canvas 2D来绘制3D效果，相信你也有必定的了解了。而且相对于硬件渲染，软件渲染在性能和画质上有比较大的损耗。可是，对于简单的3D效果，不支持webGL的平台，它却不失为一个好的降级方案。下一节，咱们进入正题，敬请期待。