22、《每周一点canvas动画》——从2D到3D

14人阅读 评论(0) 收藏 举报
分类:

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

查看评论

11、《每周一点canvas动画》 —— 弹性动画

本系列文章代码文件 在上一章我们介绍了缓动动画,并且对弹性动画的概念做了简单的介绍。弹性动画(spring)与缓动动画都是基于距离的百分比动画,两者的不同之处在于,一个作用于速度(ease), ...
  • qq_39759115
  • qq_39759115
  • 2018-01-15 17:20:02
  • 100

8、《每周一点canvas动画》——边界检测与摩擦力(2)

到目前为止,我们最常见的两种情形: 物体按照一定的速度做任意运动直到碰上边界 物体自身,或者通过外部的作用力,运用加速度来改变物体的速度 不管怎样,除非我们...
  • qq_39759115
  • qq_39759115
  • 2018-01-03 09:56:51
  • 90

7、《每周一点canvas动画》——边界检测与摩擦力(1)

本章已经是《Canvas 动画系列》动画的第七篇了,我保证这一章不会再有难的数学公式和物理概念。鉴于有的同学并不是从第一章开始看这个系列,我将会把本文所用到的一些 类...
  • qq_39759115
  • qq_39759115
  • 2018-01-02 11:49:18
  • 117

HTML5之Canvas 2D入门5 - 事件与动画

Canvas & SVG & DOM   Canvas与SVG都是2D绘图的利器,除此之外,使用CSS、DOM也可以实现某些性状的绘制,而且在动画中,也都可以使用这些技术实现动画效果。这里就简单比较一...
  • pyx61198
  • pyx61198
  • 2016-08-31 15:39:42
  • 1841

14、《每周一点canvas动画》——碰撞检测(1)

每周一点canvas动画代码文件 在前面的几章中我介绍了一些动画效果,这些动画效果都相对基础。但是通过这些基础的动画形式和概念,你可以设计出更复杂的动画。本章将介绍在动画中相对来说比较难的物理概...
  • qq_39759115
  • qq_39759115
  • 2018-01-15 17:22:53
  • 113

html5 canvas酷炫3D背景打开动画特效

html5 canvas酷炫3D背景打开动画特效点击跳转到演示地址点击进入资源下载地址...
  • qq_34173549
  • qq_34173549
  • 2018-03-24 10:31:33
  • 124

7 款基于 HTML5 Canvas 的超炫 3D 动画效果

在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了。遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari...
  • sinat_25330173
  • sinat_25330173
  • 2015-03-26 16:58:16
  • 494

HTML5 canvas 3D文字云动画

  • 2017年06月27日 12:32
  • 11KB
  • 下载

原生js html5 canvas 3D云动画效果

  • 2013年12月27日 12:39
  • 112KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 786
    排名: 6万+
    最新评论