3分钟打开Web 3D图形学的大门

前端图形学和前端架构师是现在前端两大重点方向，而当前市场人才紧缺。

进入3D图形世界可能是非常令人生畏的。无论你是想创建一个交互式的 3D logo，还是设计一个完全成熟的游戏，如果不了解3D渲染的原理，你将会陷入泥潭——使用抽象度很高的库。

使用库可能是正确的做法，同时 JavaScript 有一个令人惊奇的开源库 three.js。不过使用预制的解决方案还有一些缺点：

• 它们有许多你用不到的功能。基于three.js特性的简化版的大小约为500kB，任何额外的功能（例如：加载模型文件）会使有效载荷更大。传输这么多的数据只是为了在你的网站上显示一个旋转的logo将是一种浪费。
• 额外的抽象层会使本来就很繁杂的维护工作更加困难。您可以在屏幕上直接以对象的方式进行创造，也可以花费几十个小时把自己的工作合并到库的抽象中。
• 虽然库在大多数情况下都做到了良好的优化，可以帮你裁剪出许多花里胡哨的东西。渲染器可能需要在你的显卡上运行几百万次特定的程序操作。如果想要在性能较差的显卡上毫无问题地处理你的内容，那就意味着要从这些操作中删除一些处理指令。

即使你打算使用高级图形库，掌握基本知识也可以让您更有效地使用它。库也可以具有高级功能，例如 three.js 中的 ShaderMaterial 。了解图形渲染的原理会帮你打开新世界的大门。

我们的目标是要学会渲染 3D 图形背后的所有关键概念，并能够使用WebGL实现它们。 你将通过最司空见惯的东西来掌握他们。

表示一个 3D 模型

你需要了解的第一件事是如何表示 3D 模型。 模型是由许多三角形网格组成的。 每个三角形由三个顶点表示，在顶点上附加了三个最常见的属性。

顶点位置

位置是顶点最直观的属性。 它是 3D 空间中的位置，由坐标的 3D 矢量表示。 如果你知道空间中三个点的精确坐标，那么就能确定在它们之间绘制一个简单三角形所需要的所有信息。 为了使模型在渲染时看起来很逼真，还需要为渲染器提供更多的东西。

顶点法线

我们来看上面的两个模型。 它们是由相同的顶点位置组成的，但是渲染后的效果完全不一样。这是怎么回事呢？

除了告诉渲染器顶点所在的位置之外，还需要告诉它一个关于曲面在这个位置是怎么倾斜的。 这就是在模型上特定点上的表面法线，它用3D矢量表示。 下图描述了它的处理方式。

上图分别对应于前之前图中的两个球体。 红色箭头表示为顶点指定的法线，而蓝色箭头表示渲染器的法线应该怎样对顶点之间的其它所有点进行计算。 尽管该图是2D 形式的，但它的原理适用于3D 图形。

法线是计算灯光照射物体表面时反射的辅助。 光线的方向越接近法线，照射点越亮。 照射方向在法线方向上的变化会导致光线的变化，虽然在模型的顶点处出现了突然的变化，但是实际上法线和光照之间的角度应该是逐渐变化的，所以在渲染出的光照效果应该是渐变的。

纹理坐标

最后一个重要属性是纹理坐标，通常被称为UV贴图。 假设你有一个模型和一个要作用在其上的纹理，纹理上有各种区域，表示我们想要作用在模型上的不同部分的图像。必须有一种方法来标记纹理应该贴在模型上的哪个部分。 这就是纹理映射的用武之地。

加载OBJ模型

OBJ文件格式非常简单，只需要几行代码就可以实现。信不信由你，这就是创建一个简单的模型加载器所需要做的一切。

执行空间变换

在我们加载的模型中，所有点都和它的坐标系相关。 如果想要做到转换、旋转和缩放模型这些操作，我们需要做的就是在其坐标系上执行空间变换。

转换过程示意

缩放过程示意

旋转过程示意

摄像机视角

这是在屏幕上呈现对象的关键部分：摄像机。 摄像机有两个关键点： 1、位置。2、它是怎样把观察到的物体投射到屏幕上的。

摄像机位置可以通过一个简单的技巧处理。把摄像机向前移动一米和把整个世界向后移动一米之两种操作并没有什么不同。这些可以通过矩阵运算来实现。

第二个关键点是被观察的物体被投射到镜头上的方式。 在WebGL中，屏幕上可见的所有内容都位于一个框中。可见的一切都在一个盒子里。 可以使用相同的矩阵变换方法来创建投影矩阵。

最简单的投影是正投影。 你在空间中取一个方框，假设它的中心位于立体坐标系的零点位置。 然后调整框的大小使其适合前面所描述的框，WebGL 就能在其中观察对象了。

使用WebGL图形管道绘制对象

您可以绘制的最简单的表面是三角形。 实际上，您在3D空间中绘制的大部分内容都包含大量三角形。

在这里你需要知道的概念是：

• 默认帧缓冲区
• 顶点缓冲对象
• 着色器
• 顶点着色器
• 片段着色器

还需要这样几个步骤：

• 绘制模型
• 添加光照
• 添加纹理

最后就能得到我们想要的效果了：

以上，就是我今天想要分享给大家的内容，相信你对前端有了一些新的感受。

以上内容选自我的专题课《前端图形学开发实践指南》，这仅仅是这门课程的冰山一角。

如果感兴趣，可以关注京程一灯公众号：jingchengyideng，后台回复“1”，报名免费试听活动。