22、《每周一点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编程知识有所了解,它包括:

  1. 3D坐标系

  2. 网格、多边形与顶点

  3. 材质、纹理与光源

  4. 变换与矩阵

  5. 相机、透视、视口与投影

  6. 着色器

也就是说,上面这些内容是你使用webGL编写3D程序,必须get的知识。而相比于webGL,使用CSS3来创建3D效果,就容易了很多。使用CSS3来创建3D效果主要包含以下几种技术:

  1. CSS变换:作用于整个元素的3D操作(平移,旋转,缩放)

  2. CSS过度:随着时间作用于CSS属性的简单变化,如补间

  3. 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的平台,它却不失为一个好的降级方案。下一节,我们进入正题,敬请期待。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页