2024 抖音欢笑中国年之渲染技术实践与探索

SAR Creator是一款基于 Typescript 的高性能、轻量化的互动解决方案，目前支持了浏览器和跨端框架平台，服务于字节内部的各种互动业务。

前言

抖音在2024年春节期间推出了欢笑中国年系列活动，为用户带来了全新的体验和乐趣。而SAR Creator则为该项目研发工作提供了重要的技术支持。SAR Creator是一款基于 Typescript 的高性能、轻量化的互动解决方案，目前支持了浏览器和跨端框架平台，服务于字节内部的各种互动业务。

这些绚烂多彩的互动场景当然也离不开实时渲染技术的支持，因此本文将专门介绍春节活动招财神龙和神龙探宝中SAR Creator渲染相关的业务实践经验以及技术探索和尝试。

春节—招财神龙

春节—神龙探宝

比如抖音欢笑中国年系列文章《招财神龙互动技术揭秘》中就有提到，项目中“家”场景就是由2D元素以及不同材质支持的3D元素共同组成的。出于性能和美术效果的考虑，各3D模型使用的材质会有所不同，比如无光照Unlit材质、基于物理的PBR材质。对于阴影这种移动端性能消耗比较大的特性，不同物体的接收也会做特殊处理。这些材质的选择以及光照阴影的支持都是依托于SAR Creator材质库能力的支持。如下图所示即为SAR Creator Unlit材质(左图)和PBR材质(右图)的示例。

无光照Unlit材质示例

基于物理的PBR材质示例

此外，SAR Creator支持使用ShaderGraph插件制作自定义材质，帮助用户制作更多可定制化的特效。神龙探宝项目中实现了多种基于ShaderGraph的特殊效果，包括：入场溶解特效、分区解冻特效、拖尾特效等。下图展示了利用ShaderGraph定制卡通风格水体的效果。

ShaderGraph卡通水体

除了上述春节活动中顺利落地的渲染效果外，我们还尝试做了很多效果提升的技术探索，比如后处理辉光效果、凹凸贴图等。希望可以更好的提升美术设计师的设计体验和最终的渲染效果。

bloom辉光

招财神龙渲染实践

“招财神龙”活动是2024年春节游戏化玩法之一，活动整体采用3D场景（龙在家场景）+ 2D场景（龙寻宝场景）结合的方式。在招财神龙的活动中，设计同学基于SAR Creator编辑器，进行场景搭建和效果还原工作；研发同学基于SAR Creator渲染能力，快速进行技术方案选型和实施。

2D&3D混合渲染

对于活动中的“龙”和“小女孩”元素，我们采用3D模型，提供更为逼真的体验感。而针对场景中的房子、炮仗等，我们使用2D贴片来呈现。通过调整相机的远近平面、fov等参数，展示出小女孩在炮仗前、龙在房子前、龙在炮仗后的视觉假象。

材质库

SAR Creator提供了Unlit、PBR、Uber和NPR等多种材质的选择。

例如，这次“招财神龙”中的白天/黑夜场景场景，小女孩和龙的皮肤颜色等需要有不同的表现，就是基于材质的“颜色贴图”能力来实现的。

针对PBR材质来说，设计同学还基于SAR Creator提供的金属度、粗糙度来进行小女孩身体细节的调整。

为了追求更佳的视觉体验，在小女孩的模型上，设计同学为不同的部位（身体、头发和衣服）赋予了不同的PBR材质的实例，再通过调整不同PBR材质的金属度、粗糙度属性，微调受光条件下，不同部位的表现细节。

这次活动，我们不仅使用了PBR材质，综合性能和实用性的角度，还使用了Sar Creator提供的Unlit材质。比如“龙”模型中的身体、胡须、眼睛等模块。Unlit材质是一种简单的、不受光源影响的材质，在技术选型时，为了平衡性能和效果，通常是活动开发的首选。

光照阴影

除了上述所说的这些材质，为了实现场景中元素的真实性，设计同学借助SAR Creator提供的渲染能力，利用灯光、阴影来优化渲染场景。

SAR Creator提供了平行光的方向、颜色、强度等属性，使得设计同学可以调整出不同效果。

为了更好的光照效果，我们这次使用了两个平行光，利用PBR受光的特性，可以实现更贴近真实世界的效果。

只使用了环境光

使用了一个平行光(小女孩鞋子、脸、手部等部分都收到了光照影响)

使用了两个平行光微调(小女孩背部收到了光照，更贴近真实效果)

只有光照，没有阴影的话，同样也不符合物理世界的客观规律。SAR Creator通过在光源上设置“投射阴影”，在需要显示阴影的物体上，设置“接受阴影”，即可快速的实现阴影的效果。

无阴影

有阴影

利用SAR Creator提供的ShadowMaterial这种自实现的材质，我们还能通过调整颜色、透明度等常用属性，快速调整出设计师想要的阴影效果。

神龙探宝渲染实践

神龙探宝是2024年春节系列活动中的一个以2D场景为主的互动玩法，其尝试并成功落地了多种特效渲染技术。本章节主要有三个特效渲染技术点可分享给大家。分别是：入场溶解特效、分区解冻特效、拖尾特效。

入场溶解

实现入场溶解特效核心是采样一张溶解图(可低分辨率128x128)，通过动画step.edge即可。该方案主要通过ShaderGraph可视化界面开发Shader帮助实现美术预期效果，具体节点实现实现如下图所示：

如想了解更多技术细节，各位同学可用WebGPU版ShaderGraph在线体验(https://deepkolos.github.io/shader-graph-wgsl/?graph=demoSummberDissolve)(PC Chrome113+)，也欢迎内部同学直接体验SAR Creator。

地图分区解冻

地图分区解冻需要实现的效果是支持分区块单独控制其处于解冻/未解冻状态。表现效果会随着解冻状态的变化而变化。

如果按照传统前端实现估计需要7个区域小图+1张底图=8张图片去实现，即需要消耗8个绘制指令(DrawCall)。虽然传统方式可以通过动态合批的方式优化绘制指令(DrawCall)为1个，但合批操作本身也有耗时，且每次资源替换+小图位置调整，会带来额外工作量。而利用ShaderGraph插件定义支持图片存储特定贴图IDMap的Shader可解决这些问题，只需一张JPG 一张PNG 即可。首先我们需要将区域信息存储在A通道，比如区域A = 0.9 区域B = 0.8 以此类推。

未点亮

已点亮

解冻过程

然后在Shader中根据点亮前后纹理采样颜色值，混合计算出最终像素颜色值，以实现每个区域的解冻/未解冻状态变化。具体计算逻辑如下所示：

如想了解更多技术细节，该例子也可用WebGPU版ShaderGraph在线体验(https://deepkolos.github.io/shader-graph-wgsl/?graph=demoCustomMap)(PC Chrome113+)。

然而在上述效果的实现基础上，设计同学提出了更高的渲染需求，要求冰冻区域沿边缘浸染已解冻区域，来避免硬边缘。由于项目时间节奏比较紧张，综合考虑时间成本和收益后，边缘浸染需求最终没有推进支持。通过简单的调研，该效果可能的一个解法是：增加7个2D光照，通过光照计算范围来实现冰冻浸染效果，但问题在于没法实现沿边缘浸染。各位如果有什么好的思路也可以分享下，也许可以通过ShaderGraph插件快速支持这种定制需求。

粒子拖尾+几何拖尾

设计效果

落地实现

我们可以分析表格第三列中效果参考的构成，得出技术要点为: 几何拖尾+粒子拖尾+头部星光。头部星光较为简单，只需要一个Sprite/Plane+Tween增加下旋转动画即可。下面将主要介绍粒子拖尾和几何拖尾的技术实现。

粒子拖尾

目前SAR Creator现有非常强大的粒子系统，可快速实现粒子效果，提效非常明显。

但完整的粒子系统在功能强大的同时包体积也相对较大，为了兼顾粒子效果的同时也避免包体积问题，需实现简易版拖尾粒子。通过ShaderGraph结合EmitOverDisatance，抽离出的粒子拖尾特效资源打包后只有7.66KB。下图左为: 简易版粒子拖尾+EmitOverDistance+ShaderGraph联动，下图中/右为: 粒子系统示例和ShaderGraph定制材质的参数设置。

目前粒子拖尾已集成进SAR Creator以及ShaderGraph插件，方便用户更加直观的调试材质特效。

GPU Instancing是一个DrawCall绘制大量相同几何，姿态不同的技术。

所以简易版拖尾粒子本质上是一个GPU Instancing几何更新器。

大量粒子的位移动画通过Shader使用GPU并行算力完成，节约宝贵的CPU算力。

感兴趣代码实现，可查看👉开源实现(https://github.com/deepkolos/three-js-trail) or 线上Demo(https://deepkolos.github.io/three-js-trail/)，或者SAR Creator中直接体验。

几何拖尾

几何拖尾本质上也是一个几何更新器，不过并非更新Instanced数据，而是几何本身数据Position+Index，使用下图可直观了解几何拖尾的关键逻辑。

如上图左所示为几何拖尾的几何部分实现，参考效果的游动效果则需要在Shader中增加UV动画+拖尾沿Brush重心缩小，所以几何拖尾同样支持ShaderGraph扩展材质。

如感兴趣代码实现，可查看👉开源实现(https://github.com/deepkolos/three-js-trail) or 线上Demo(https://deepkolos.github.io/three-js-trail/)，或者SAR Creator中直接体验。

ShaderGraph探索

ShaderGraph自定义Shader相较于研发编写定制材质而言主要优势在于更高的自由度。SAR Creator通过ShaderGraph插件可以边看中间结果，边理解特效的实现方式。同时帮助用户更好的调试渲染结果高度不可控的特效。此外，ShaderGraph插件实现思路和节点能力实现方式与Unity ShaderGraph基本一致，用户可以以极低成本的方式参考Unity已有特效并搬运到SAR Creator上。

比如抖音故障效果：