如今，网页上也能制做专业级 3D 艺术字了

长久以来，浏览器都被认为是个上限偏低的平台，难以承载 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 方向上的形态，也但愿接下来能总结出更多的技术干货和你们分享。最后，欢迎志同道合的小伙伴们加入咱们噢～