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 特效的同学；

  回复1030，获取课程链接！