掘金小册WebGL 入门与实践

小册介绍

本小册介绍 WebGL 以及 CSS 3D 属性的关键技术，每一个知识点基本上都有对应的演示 Demo ，Demo 不依赖框架，使用原生 JavaScript 实现，Demo 辅以理论的主要目的是为了让大家能够理解 WebGL API 的作用，以及坐标系变换背后的图形学算法，巩固读者的 3D 编程基础。

写作背景

随着硬件设备以及浏览器性能的提升，越来越多的 App 或网站开始大量使用 3D 效果向用户突出自己的品牌，那么这时就需要各个端的开发者掌握 3D 技术的核心原理。

但是 3D 开发入门不易，需要掌握相对枯燥的图形学知识。但这也许正是你的不可替代之处。当凛冽寒冬到来时，你就有一定的资本不被选中成为那个被优化的人，又或在面试时，你就会有更多的资本从众多面试者中脱颖而出。

实现一个基于 WebGL 的 3D 应用或使用 CSS 实现一个复杂的 3D 特效对前端同学的要求相对高一些，除了熟练掌握 JavaScript、CSS 以外，还需要掌握图形学的相关内容、 着色器编程语言 GLSL。而图形学涉及到的数学知识比较枯燥且难以理解，相信有一部分前端同学曾尝试去学习，但最终因其短期无法见成效遂望而却步。

相当多的聪明同学放弃学习基础知识转而采用框架。的确，框架为我们带来了很大的便利，比如稳定性、开发效率等，但如果基础不牢的话，注定也不会走太远：

• 只能用框架按照一些官方示例做些 Demo，离开了官方教程的引导，很多东西还是无法做出来，甚至没有一点思路。
• 虽然能很熟练地使用框架，但是碰到一些底层问题时，因不明白底层原理，所以不知道怎样定位问题，当然也就无法解决。
• 框架不能满足业务需求，需要写一个适应业务的精简框架，但却不知从何处下手。
• 性能出现问题时，不知道从何处下手进行优化。

我想，不只是 WebGL 框架，使用任何框架时都会有很多人陷入这种困境。

由此可见基础的重要性。

基于这个原因，我决定写一本关于 WebGL、CSS3 3D 属性、常用图形学算法的小册，涵盖 WebGL 基本开发流程、CSS中 3D 属性的原理与高级使用、以及图形学算法的原理与实现。

• 坐标系变换原理与算法实现。
• 3D 数学知识。

我想，这是横亘在刚入门 WebGL 的同学面前的两座大山。

事实上，这些难点不单单是 WebGL 的开发同学会碰到，使用 IOS、安卓或者桌面程序的开发同学也会碰到，所以本小册在中级进阶章节，重点对坐标系变换原理进行了讲解，并演示推导过程。

其实它们并不难，难的是我们能不能静下心去学习它们，能否拿出纸笔尝试推导这些数学公式。
我相信，一旦动手实践了变换矩阵的推导过程，你会有醍醐灌顶的感觉，再也不会对变换矩阵犯怵了。真正掌握了这两块内容，你的 3D 编程功底会实现质的飞跃。

如果不做 WebGL 开发，这本小册还值得前端同学学习吗？

有的同学会说，我又不做 WebGL 开发，学这些图形学知识有什么用？

大家是否记得 CSS3 推出了几个和 3D 相关的属性：

• transform： 变换
• perspective： 摄像机距离屏幕的距离
• perspective-origin： 摄像机在X轴和Y轴的坐标
• transform-style： 变换方式
• backface-visibility： 背面是否显示

有很多同学会经常使用 transform 实现一些基本动画，比如 平移translate、缩放scale、旋转rotate，但这些只是变换的皮毛，深入一点的内容则是 matrix、matrix3d、perspective、perspective-origin 等属性的底层原理与使用技巧。

其实它们和 WebGL 的很多概念相同，比如摄像机perspective、空间变换transform等。

学完本小册，你会真正理解这些属性背后所涉及的图形学原理，之后你就可以灵活使用这些 CSS 属性实现各种 3D 特效了。

但如果你不理解这些 CSS 属性背后的原理，那么很难随心所欲地实现各种复杂的 3D 特效。

要想做到灵活运用，还是应该学习一些图形学知识。

掌握多数人不擅长的技术，同时别人很难学会你所掌握的技术，方能体现你的核心竞争力。

作者介绍

lucefer，某大型互联网公司高级前端开发工程师，从事过 Windows 桌面开发、C# 服务端开发，目前专职互动营销领域的前端开发，在互动特效与动画领域有大量的研究与实践，对 3D 框架 ThreeJS 的源码进行过细致的剖析。

你会学到什么？

• WebGL 核心技术，诸如顶点、索引、缓冲区、法线、光照、纹理、层级建模、帧缓冲、混合等；
• GLSL 的常用语法；
• 图形学算法的数学原理与实现；
  • 图形学基本变换的原理与实现；
  • 模型 – 视图 – 投影三大变换的原理与实现；
  • 用于表示高级旋转的欧拉角和四元数的原理与应用。
• CSS 3D 属性的底层原理与高级使用技巧；
  • 基本变换用法；
  • matrix、matrix3d 的使用方法；
  • 组合变换的使用技巧；
  • perspective 结合 perspective-origin ；
  • 数学库结合 CSS3 属性实现复杂 3D 效果。

你应该具备什么

• 基础数学计算能力，比如 加减乘除、三角函数求值；
• JavaScript 基础。

适宜人群

• 想用 CSS 或者 WebGL实现 3D 特效的前端同学；
• 从未接触过 WebGL，对 WebGL 感兴趣的同学；
• iOS、Android 开发者，期望入门或巩固 3D 数学算法的同学。
• 对 3D 数学感兴趣的同学；
• 想要彻底搞懂 CSS 中 transform、perspective 等 3D 属性的底层原理，期望写出高级 3D 特效的同学；