长久以来，浏览器都被认为是个上限偏低的平台，难以承载 3D 渲染等高性能要求的应用。但 Web 打开即用的便捷性，又无疑具备着巨大的想象空间。作为研发在线图形设计应用的团队，我们在稿定一直致力于推动 Web 上专业级设计能力的落地。而 3D 文字能力，就是我们最新交出的答卷。

相信不少在 XP 年代做过 PPT 的同学，都知道那时 Office 是可以默认在 PPT 里渲染出 3D 形式的文字的。像这样：

不过大家对这种效果最近的印象，更可能是在中老年表情包里这样的：

确实是听起来高大上的 3D 呀！但你是否也能感受到这样的 3D 效果，有种比较浓厚的「土味」或者「廉价感」呢？这类功能确实早已有之，但效果一直有些……好吧，一言难尽。从 Office WordArt 诞生到现在，很难说这个领域的进步足够大，甚至它自身的不少 3D 效果都慢慢被雪藏起来了。然而，技术的发展是存在成熟度的曲线周期的。在迎来一些虽小但关键的突破后，一项技术才能真正地更新换代。在 9102 年的今天，可以认为我们赶上了两个时间点：

1. 浏览器的 WebGL 技术几乎完全覆盖。这标志着国内普通用户所安装的浏览器，几乎都能直接用来渲染 3D 效果。
2. 源于电影和游戏工业的基于物理渲染 (PBR) 技术基本标准化，它大大提升了实时渲染效果的上限和易用性。

在这个时间点上，我们实现了：

• 将长久以来必须下载安装才能体验的 3D 效果，在普通人所使用的浏览器页面上渲染了出来，而不是只有高端显卡配最新浏览器才能用。
• 引入工业界基于物理渲染的工作流，提供更好的表现力和易用性。我们还为此搞了个渲染引擎来着 XD

结合了这两者之后，我们就能够在网页里对质感有更精确的控制了。从这样的金属质感：

到这样的岩石质感：

再到这样的鲜艳光泽质感：

这都是通过我们的编辑器，在浏览器里实时渲染得到的。

那什么是质感呢？真实世界中，你所看到的物体颜色，并非由物体表面的 “RGB 色值” 直接决定，而会在光照影响下，具备微妙的过渡——譬如对口红的色号来说，真正重要的绝不是直男眼里的 RGB 数值，而应该是涂上后整体的光面、雾面等质感（好吧其实我不懂口红）。这种质感，我们也称之为「材质」。在我们所采用的 PBR 工作流中，最核心的材质效果是由金属度和粗糙度控制的。

什么是金属度和粗糙度呢？这是两个范围为 0～1 的数值，用来控制物体的质感。一些物理学上的规律，简单说来是这样的：

• 金属能更强地反射出彩色（或自身颜色）的镜面色彩，非金属（绝缘体）反射出的颜色则更接近灰色（或单色）。
• 金属会吸收一部分光能（漫反射），非金属则不会。
• 没有绝对光滑的物体，所有物体表面都像是由非常多微小的镜面组成的。越粗糙的物体，这些平面的排布就越杂乱。

因此，粗略地说有以下现象：

• 金属度越高，物体越能反射出多彩的颜色，而不只有自己本身的颜色。
• 金属度越高，物体整体的亮度就会越低一些。
• 粗糙度越高，物体就越不能当镜子用，亦即镜面反射的方向越杂乱。

这些现象在我们引擎的渲染算法中都得到了体现。以被单个点光源照亮的红色球体为例，在不同的金属度和粗糙度参数下，我们渲染得到的效果就存在着明显的质感区别：

我们可以发现以下现象：

• 高金属度（右侧整体）的球，普遍整体更暗淡一些，但反射出的光源（亮点）的亮度更强，也更接近自身颜色（更红）一些。
• 低粗糙度（下方整体）的球，有强烈的镜面效果，能看到点光源的位置。
• 高粗糙度（上方整体）的球，普遍镜面效果更低一些，磨砂的质感更强。

上面的例子只使用了一个点光源。在此基础上，我们还支持环境光，亦即将一张 360 度的全景图作为光源，全方位地照亮物体。比如，我们可以把下面这张全景图作为光照的输入：

保持点光源打开，把同样的这些红色球体「放在」这个环境中，就能获得这样的渲染效果了：

在更复杂的光照情况下，也能感受到这些球体的质感，仍然分别是红色的，或磨砂或光滑的，塑料球或金属球。我们线上的模板素材里，同样充分应用了不同的材质，从而用一套代码渲染出多样化的质感效果。

材质算法其实只是浏览器中整个 3D 文字绘制流程的一部分。在 Web 浏览器里，我们控制了如下的一条链路，覆盖了从请求字体文件到绘制屏幕像素的整个过程：

概括而言包括这么一些关键步骤：

1. 请求压缩过的字体文件，作为起点
2. 将字体文件中的字形数据，转换为 2D 路径
3. 将 2D 路径转换为 3D 几何数据，也就是所谓的 Mesh 网格
4. 基于 WebGL，渲染 3D 文字到 Canvas 上
5. 在我们的平面编辑器中管理这些 3D 文字的状态，实现平滑的编辑体验

走通这个过程后，我们做到了在浏览器的 DOM 环境下，让 3D 文字与其他内容良好地共存，还能够快捷地切换它的材质。就像这样：

可以看到，现在我们的 Web 编辑器中，用户不需要复杂的图形理论基础，也能轻松地为文字添加 3D 效果啦～移步这里即可体验免费的 稿定 3D 文字模板

作为一个前端工程师，这应该是我做过的最能结合技术和人文的项目了。从文字排印到到摄影理论，从立体几何到着色算法，从 Web 浏览器到图形渲染管线，来自各个领域的知识被串联了起来，最后实现了业界中的全新体验——你无需下载安装，只要打开链接，就能轻松制作出富有质感的精美 3D 文字。许多小伙伴们的支持在这个过程里都至关重要，这里也再次表示感谢！

当然，现阶段的 3D 文字还有很多可以改进的地方，现在的效果「专业」程度比起工业级 3D 渲染软件，也还有许多差距。我们会继续保持学习，优化体验，提升效果和易用性，探索 Web 设计在 3D 方向上的形态，也希望接下来能总结出更多的技术干货和大家分享。最后，欢迎志同道合的小伙伴们加入我们噢～