《每周一点canvas动画》——从2D到3D
前面的章节我们介绍了2D层面的canvas动画，基本上如果你对原理和概念都理解了，一般的2D层面的动画对你来说都是小菜一碟。从这一章开始我们介绍如何使用2D的canvas来渲染3D系统。
1.CSS3与webGL
提到3D效果，你可能首先会想到css3中的3D动画。通过它，单个元素或是整个页面都可以通过动画，图片滤镜，以及2D或3D的变换变得生动起来。使用它来构建3D效果，一个最为直观的感受就是——简单易用,但对于复杂的效果他就无能为力了。与之相反，你会想到什么？我脑海里的第一映像是webGL,如果你使用过webGL，或是你对3D图形基础知识有所了解，你就会深刻的感受到——使用webGL创建一个3D程序不是那么的容易！
要使用webGL来创建3D程序，你至少需要对基本的3D编程知识有所了解，它包括：
3D坐标系
网格、多边形与顶点
材质、纹理与光源
变换与矩阵
相机、透视、视口与投影
着色器
也就是说，上面这些内容是你使用webGL编写3D程序，必须get的知识。而相比于webGL,使用CSS3来创建3D效果，就容易了很多。使用CSS3来创建3D效果主要包含以下几种技术：
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的平台，它却不失为一个好的降级方案。下一节，我们进入正题，敬请期待。
关键字：JavaScript, html5, canvas, webgl
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！