你的位置:首页资讯canvas动画——从2D到3D

canvas动画——从2D到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的平台,它却不失为一个好的降级方案。

  

原文链接:https://segmentfault.com/a/1190000006192477

原文作者:我仍旧在这里

暂无评论!

发表评论

点击刷新验证码
站内搜索