《移动端的真实感渲染-慎思》演讲视频 + 文字版

原创慎思支付宝体验科技

编者按：本文是蚂蚁集团 Oasis 图形工程师慎思在 SEE Conf 2022 的演讲内容，包括演讲视频及文字内容，欢迎享用。

大家好，我是来自数字金融线-体验技术部-互动科技组的慎思，取自《礼记.中庸》- “博学之，审问之，慎思之，明辨之，笃行之”。我有5年图形学、前端相关经验，专攻实时渲染领域，比较擅长PBR、离线烘焙、OIT、折射反射、全屏特效后处理等技能。

今天我想跟大家分享的话题是“移动端的真实感渲染”。在3D世界中，真实感能够显著提升用户留存率和活跃度，那什么是真实感渲染？为什么要针对移动端来讲？我想先说明一下实时渲染和离线渲染的差异。

实时渲染与离线渲染的差异

我们先看一个案例：

这是一个花呗营销活动的页面，应用了大量3D模型材质和动画，是一个典型的移动端渲染场景，开发这样一个应用需要注意几点：

运算快。60FPS，16毫秒/帧。一般实时帧率达到60FPS，也就是 16ms/帧，才能使渲染画面看起来不卡顿，这也是和离线渲染不同的地方，离线渲染可以耗费几小时甚至几天去渲染一帧画面，但是实时渲染的实时性要求我们在性能和效果中间作出取舍和平衡。
效果好。渲染效果真实，符合物理。所谓的符合物理，是指不管真实感渲染还是卡通渲染，都要遵循自然界中的光线与物体交互的物理规则，遵循吸收、反射、折射、金属度、粗糙度、能量守恒等现象，即使美术资源风格不一样，也能保证渲染效果是真实的。

生态丰富。前端生态友好，能对接业界标准。3D场景的构成非常复杂，灯光材质动画等概念，使得上手门槛比较高，需要有一套面向前端的生态，能够快速进入开发，并且能够对接业界标准，比如 glTF、C4D、Blender。
易上手。不用学习渲染管线等复杂理论。图形学的底层渲染管线非常复杂，画一个三角形就需要上百行代码，直接用来开发项目是不切实际的，需要有个功能完善的引擎框架帮助我们绕过这些复杂理论，快速上手。

那可能有人会问，这个渲染风格不逼真，为什么在移动端没有那种影视效果的实时渲染应用：

没错，这个画面非常牛X，但是在移动端想要实时渲染达到这种水平，还有很长的路要走，当时离线渲染这种画质的电影，一共调用了4000台服务器，35000个CPU，平均2小时每帧，总耗时 288万个小时。

所以，这次分享主要聊聊在移动端上，如何利用传统的光栅化渲染管线，达到性能和真实感的提升。

如何高性能地提升真实感

移动端条件有限，提升真实感的同时需要极致性能

材质模型

在移动端，一般有两种通用的材质模型，一种叫 Unlit 材质，即不受光照影响的材质，优点非常明显，可以直接采样影视级别的离线资源，如穿上上面的阿凡达皮肤，真实感和性能都非常优异；但是缺点也很明显，因为不受光照影响，导致无论周围场景怎么变化，材质都不会发生动态响应，即看起来是“死的”，如下图：

因此，我们推荐使用另外一种 PBR 材质，能够利用金属粗糙度等物理属性，使渲染效果更加真实自然，且受全局光照等影响，能够模拟现实世界，显示阴影、反射等动态环境响应，如下图：

渲染方程

伟大的数学家们早就为我们列出了真实感渲染的答案-解渲染方程。只要能足够逼近理论值，就越能逼近现实。

但是在移动端实时渲染，想要实现这个复杂的递归方程是不可能的，因此，我们一般会使用各种比较接近现实世界的真实结果的光照模型来实现，比如下面这个 Cook-Torrance 算法模型，只要针对每一个像素，对漫反射、镜面反射分别求出积分结果，就能够达到不错的真实感渲染效果。

漫反射-球谐烘焙

先假设我们处在这样一个环境里面，一般在游戏场景中我们称之为天空盒，由立方体6张图片组成；周围的环境是会影响到模型的漫反射表现的，在物理现象上可以解释为，金属度越小，漫反射越强；当金属度为1时，只有镜面反射。对应到现实可以理解为金属物体的反射非常光泽，像镜子一样；而那些绝缘体，漫反射非常强，基本没有光泽度。

漫反射可以理解为光线从一个半球面均匀反射，因此我们针对环境贴图进行半球采样，运用一些烘焙算法，可以得到烘焙结果：

可以看到，漫反射烘焙的结果像一张经过高斯模糊的图片，但是高斯模糊是针对周边像素的一个加权平均模糊算法，而漫反射烘焙是针对该像素半球面进行采样的一个结果，且权重受 Lambert 效应影响，越垂直影响越大。

得到烘焙结果后，在移动端，我们可以使用一种叫做“球谐函数”的优化手段，具体细节可以参阅论文（地址：https://graphics.stanford.edu/papers/envmap/envmap.pdf），我们可以使用3阶球谐，即9个不同方向上的信号，来编码低频信号，在运行时再通过解码还原本来的低频信号。因为漫反射的烘焙结果是一个比较低频变化的颜色结果，因此，我们恰好能够使用9个颜色值来优化这种结果。

可以来看一下漫反射球谐烘焙在真实情况下的一个表现：

镜面反射-预烘焙

还是同一张环境贴图，漫反射是半球烘焙，镜面反射则是随着粗糙度逐渐分散的波瓣采样：

在绝对光滑的平面下，即粗糙度为0时，烘焙结果和原环境贴图是一致的，因为光线直接反射了，但随着粗糙度的递增，反射波瓣如上图所示，越来越分散，我们利用蒙特卡洛积分和低差异随机采样等数学方法，可以得到如下烘焙结果：

与漫反射同理，不同于高斯模糊是针对周边像素的一个加权平均模糊算法，镜面反射烘焙是针对该像素进行波瓣采样的一个结果，且权重受 Lambert 效应影响；当粗糙度为1 时，波瓣接近于半球面，烘焙结果接近漫反射烘焙结果。

在显存中，一张纹理可以保存 mip 数量级别的纹理结果，比如 512 * 512 分辨率的环境贴图，可以保存 10 张 mipmap ，我们可以分别保存0.1、0.2 、0.3...1.0 粗糙度下的烘焙结果，最终的这张纹理，我们一般称之为：预滤波环境贴图。

不同粗糙度下的镜面反射烘焙结果如下：

美术资源

在准确地计算光线与表面的交互结果，即漫反射、镜面反射之后，我们可以使用法线纹理、粗糙度纹理、阴影纹理等各种功能的纹理，在视觉上产生不同的效果。比如有了法线贴图，我们可以在每个像素（片元）上采样得到相应的法线方向，从而在视觉上形成凹凸感；比如金属粗糙度贴图，用来模拟现实世界中金属粗糙度不同的表面。

HDR 色彩空间

普通的RGB格式的色彩空间只能保存0～1范围的色彩空间，我们称之 LDR （低动态范围）。这种色彩空间的最大弊端就是无法表现曝光区域的色彩空间，在视觉上可能表现为一片白色，如上图曝光处；对应的，我们推荐使用 HDR（高动态范围）格式的环境贴图，并在引擎中处理HDR色彩空间，能够保证曝光区域的细节也能够反射出来。

如下图对比可以发现，随着反射亮度的变化，LDR 的环境反射只是整体颜色值的增减，而 HDR 的环境反射不仅整体亮度发生了变化，并且曝光区域和对应的细节也发生了变化：

LDR HDR

更多手段和覆盖人群

前面说过，我们通过某些算法计算漫反射和镜面反射只是为了求出渲染方程的解，在移动端还有很多复杂的材质是无法仅通过这两种光线交互来实现的，比如玉石、皮肤等次表面散射材质，有一部分光线入射到物体表面进行吸收，又会从不同的地方出射出来，这种时候，又得使用另外的算法模型，因此，在前面介绍的一些基础上，还有很多的手段去提高移动端的真实感渲染。

在项目开发中，由于图形学涉及范围广泛，存在一个上手门槛和覆盖人群的问题，对于应用开发来说，不了解美术资源的制作和烘焙过程，对于设计来说，不知道如何高性能提升真实感和算法原理等，对于技美来说，需要有一个完善的工程体系来搭建桥梁。

因此，我们先围绕 Oasis 引擎（地址：https://oasisengine.cn/）来看看是如何尝试解决这些问题的。

Oasis 的美术工作流

Oasis 简介

在介绍 Oasis 的美术工作流之前，先简单介绍一下 Oasis。

Oasis 是一款移动优先的高性能 Web 图形引擎，采用组件化设计，前端生态丰富，能够使没有接触过图形学的前端开发也能快速上手，绕过复杂的渲染管线等知识。

官网提供了大量文档和游乐场，随时 Coding，所见即所得。

可以轻松支持 NFT 等渲染应用、跑酷打年兽、营销大促等互动应用。

编辑器

为了解决上面说的高性能真实感问题和覆盖人群的问题，我们提供了在线编辑器。编辑器相当于一个桥梁，能够把开发、美术、技美在一个统一的 IDE 环境下面进行开发项目，并抹平知识代沟，保留各自领域的能力。

一般来说，如下图操作演示，开发一个简单的项目，我们只需要把模型（glTF、FBX 3D格式）拖拽到编辑器中进行绑定，场景中就已经渲染了3D模型，只需要再调整一下 HDR 环境贴图（上传贴图后会自动烘焙）或者材质即可下载项目到网页端或者小程度等平台；如果美术资源不满意，可以让美术通过 Substance Painter 等软件精细化制作，然后在编辑器中替换相应功能的贴图即可；如果还有一些特殊业务逻辑，开发还可以添加脚本，编写相应的代码。

官网在线工具

如果只是为了离线烘焙相应的 HDR 环境贴图，得到相应的球谐烘焙、预烘焙等结果，我们还在官网提供了 IBL-Baker 的能力，可以先在 Poly Haven （地址：https://polyhaven.com/hdris）等网站下载喜欢的 HDR 环境贴图，然后直接拖拽到官网的 glTF 查看器（地址：https://oasisengine.cn/gltf-viewer/），即可自动下载烘焙文件 .env，如下图所示：

拿到烘焙文件 .env 后，可以通过资源加载器（地址：https://oasisengine.cn/0.6/docs/resource-manager-cn）进行解析：

engine.resourceManager
  .load<AmbientLight>({
    type: AssetType.Env,
    url: "***.env"
  })
  .then((ambientLight) => {
    scene.ambientLight = ambientLight;
  });

展望未来

至此，我们已经简单介绍了移动端的真实感渲染的手段，并基于 Oasis 的美术工作流用来举例。在未来，我们还会围绕更多手段，在真实感和性能上面分别展开行动。

协同式云渲染

利用实时与离线的结合，将高负载工作放在云端执行，实时采样离线资源，实现男女搭配，干活不累。

实时光线追踪

我们会同时研究 WebGPU、光追管线等前沿技术，在不断优化光栅化渲染管线的基础上，拥抱未来。

更多选择

正如前面提到的，光线与物体的交互方式还有许多，需要靠不同的算法模型去实现，现在的手段是远远不够的，在未来，我们会提供更加全面，更多的选择，欢迎关注我们并与我们随时交流。

感谢你阅读本文，如果你对 SEE Conf 2022 的演讲内容感兴趣，欢迎关注支付宝体验科技公众号。

继续滑动看下一个