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