至此,我们对 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 资源,供大家学习: