Skip to content

至此,我们对 WebGL 的学习就告一段落了,坦白的说,我们还有一些 WebGL 细节没有在本小册呈现。但我相信,拥有了3D 数学的相关功底,你已经不再惧怕那些函数式 API 了,毕竟你连那么复杂的数学公式的推导过程都已经经历了。

当你看到本节时,我假设你已经掌握了以下内容:

  • WebGL 的开发要素。
  • 光照、颜色相关知识。
  • GLSL 语言。
  • 3D 数学算法实现。

此时你再去看一些 3D 框架,会对其中的概念有一见如故的感觉。不仅如此,我相信你会更容易地读懂它的源码。

下一步如何走 ​

有的读者会问了,学完这些技术,下一步我该怎么走呢?我不能只是为了学习而学习吧。

首先,我必须要表扬你,你是有思想的同学。

学以致用是我们学习的目的。如果只学不用,那岂不是浪费我们宝贵的青春。

如果你并不专职 WebGL 领域 ​

如果不打算转向 WebGL 领域,那么建议你使用数学库配合 CSS3 中的 3D 属性,为自己的页面增加一些令人耳目一新的 3D 效果,比如 3D 照片墙, WebVR 等。

使用 CSS 技术实现 3D 效果 ​

如果你不想使用 webgl 技术,那你仍然可以使用 css3 中的 transform 和 perspective 等 3D 属性来实现三维效果。

还记得吗?transform 属性是用来对 dom 进行变换的。它接收两类值,分别是 matrix 和 matrix3d,其中 matrix 代表 2D 变换,是一个 3 阶矩阵,我们需要为其传入 9 个数字。 matrix3d 代表 3D 变换,是一个 4 阶矩阵,我们需要为其传入 16 个数字。

在中级进阶阶段,我们学习了变换矩阵的推导公式。大家只需利用这些推导算法,计算出变换矩阵,然后将其转化成 matrix 或者 matrix3d 所接收的字符串格式,赋值给 transform 即可。

但请注意, matrix中包含 6 个数字,而非 3 阶矩阵中的 9 个数字。

css 中的摄像机 ​

perspective 属性用来设置摄像机和屏幕之间的远近,通常是在 Z 轴 上的距离,关于摄像机的原理,我们也在坐标系变换章节中也进行了详细的讲解,相信大家不会再惧怕这个概念了。

我们可以对父容器的 perspective 设置视距,transform-style:preserve-3d 设置成 3D 显示效果。

如果你打算踏入 WebGL 编程领域 ​

如果你真的打算专职 WebGL 编程领域,建议你按照下面的步骤进行深入学习。

  • 深入了解 OpenGL 的底层知识。
  • 熟练掌握 ThreeJS、Babylon 等框架提供的 API,如果有多余精力,再去深入学习它们的底层实现,相信你会有更多收获。
  • 学会使用框架提供的模型拾取、碰撞检测等交互相关的关键技术。
  • 做实际项目,只有在实战中才能大幅提升自己的技术。

3D 小游戏 ​

每一个前端同学的心里都有过做一款属于自己的游戏的想法,只是苦于自己能力有限,只能望洋兴叹。

但是现在的你,是有能力实现一些 3D 小游戏了,只要有了创意,就去试试吧。

一些学习网站 ​

另外,提供一些 3D 资源,供大家学习: