摘要

本文主要介绍了抖音 2024 年春节欢笑中国年活动中 SAR Creator 在招财神龙和神龙探宝项目里的渲染业务实践、技术探索，包括 2D & 3D 混合渲染、材质库的运用、光照阴影处理等，也分享了特效渲染技术，并对后处理和材质方面的渲染技术进行了探索，还提及了存在的不足和未来展望

一、活动背景与 SAR Creator

抖音 2024 年春节推出欢笑中国年系列活动，SAR Creator 为项目提供重要技术支持。它是基于 Typescript 的高性能、轻量化互动解决方案，支持浏览器和跨端框架平台，服务字节内部互动业务。春节活动中的绚烂互动场景离不开实时渲染技术，所以本文将重点介绍相关业务实践经验和技术探索。

二、招财神龙渲染实践

（一）2D & 3D 混合渲染

• 在“招财神龙”活动中，采用 3D 场景（龙在家场景） + 2D 场景（龙寻宝场景）结合方式。对于活动中的“龙”和“小女孩”元素使用 3D 模型以提供逼真体验，场景中的房子、炮仗等使用 2D 贴片呈现。通过调整相机参数，如远近平面、fov 等，展示出特定的视觉假象。

（二）材质库

• SAR Creator 提供 Unlit、PBR、Uber 和 NPR 等多种材质。例如“招财神龙”中的白天/黑夜场景里，小女孩和龙的皮肤颜色等基于材质的“颜色贴图”能力实现。设计同学根据 PBR 材质的金属度、粗糙度调整小女孩身体细节，还为小女孩不同部位赋予不同 PBR 材质实例来微调受光条件下的表现细节。此外，出于平衡性能和效果的考虑，“龙”模型中的身体、胡须、眼睛等模块使用 Unlit 材质。

（三）光照阴影

• 除了上述材质，设计同学借助 SAR Creator 的渲染能力，利用灯光、阴影优化渲染场景。SAR Creator 提供平行光的方向、颜色、强度等属性，此次活动使用两个平行光，利用 PBR 受光特性实现更贴近真实世界的效果。同时，SAR Creator 在光源设置“投射阴影”，在需显示阴影的物体上设置“接受阴影”来实现阴影效果，还能通过 ShadowMaterial 调整阴影的颜色、透明度等属性。

三、神龙探宝渲染实践

（一）入场溶解特效

• 实现入场溶解特效的核心是采样一张溶解图（可低分辨率 128x128），通过动画 step.edge 即可。主要通过 ShaderGraph 可视化界面开发 Shader 帮助实现美术预期效果，更多技术细节可通过 WebGPU 版 ShaderGraph 在线体验（https://deepkolos.github.io/shader - graph - wgsl/?graph = demoSummberDissolve）（PC Chrome113 +），内部同学也可直接在 SAR Creator 体验。

（二）地图分区解冻

• 传统前端实现地图分区解冻可能需要 8 张图片（7 个区域小图 + 1 张底图），消耗 8 个绘制指令（DrawCall），虽可通过动态合批优化为 1 个，但合批操作耗时且资源替换和小图位置调整会带来额外工作量。利用 ShaderGraph 插件定义支持图片存储特定贴图 IDMap 的 Shader，只需一张 JPG 和一张 PNG 即可。先将区域信息存储在 A 通道，然后在 Shader 中根据点亮前后纹理采样颜色值，混合计算出最终像素颜色值以实现每个区域的解冻/未解冻状态变化。更多细节也可通过 WebGPU 版 ShaderGraph 在线体验（https://deepkolos.github.io/shader - graph - wgsl/?graph = demoCustomMap）（PC Chrome113 +）。此外，设计同学提出冰冻区域沿边缘浸染已解冻区域的需求，但由于项目时间紧张，综合考虑后未推进，还简单调研了一种可能解法（增加 7 个 2D 光照通过光照计算范围实现冰冻浸染效果，但无法沿边缘浸染）。

（三）粒子拖尾 + 几何拖尾

• 粒子拖尾：SAR Creator 现有强大粒子系统可快速实现粒子效果，但完整粒子系统包体积大。为兼顾粒子效果和避免包体积问题，实现简易版拖尾粒子。通过 ShaderGraph 结合 EmitOverDisatance，抽离出的粒子拖尾特效资源打包后只有 7.66KB。简易版拖尾粒子本质上是一个 GPU Instancing 几何更新器，大量粒子的位移动画通过 Shader 使用 GPU 并行算力完成，节约 CPU 算力。可查看开源实现（https://github.com/deepkolos/three - js - trail）或线上 Demo（https://deepkolos.github.io/three - js - trail/）或在 SAR Creator 中直接体验。
• 几何拖尾：几何拖尾本质上也是一个几何更新器，不过是更新几何本身数据 Position + Index。游动效果需要在 Shader 中增加 UV 动画 + 拖尾沿 Brush 重心缩小，同样支持 ShaderGraph 扩展材质。感兴趣可查看开源实现（https://github.com/deepkolos/three - js - trail）或线上 Demo（https://deepkolos.github.io/three - js - trail/）或在 SAR Creator 中直接体验。

四、ShaderGraph 探索

• ShaderGraph 自定义 Shader 相比研发编写定制材质有更高自由度。SAR Creator 通过 ShaderGraph 插件可边看中间结果边理解特效实现方式，帮助用户更好调试渲染结果高度不可控的特效。其实现思路和节点能力实现方式与 Unity ShaderGraph 基本一致，用户可低成本参考 Unity 已有特效并搬运到 SAR Creator 上，例如抖音故障效果、卡通水体（可通过 WebGPU 版 ShaderGraph 在线预览 https://deepkolos.github.io/shader - graph - wgsl/?graph = demoCartoonWater）。

五、渲染技术探索

（一）后处理篇

• 以“招财神龙”的龙须增加辉光 bloom 效果为例。bloom 是屏幕后处理效果中常用的一种，表现为高光物体带有泛光效果，通常搭配 HDR。技术实现上，首先引入亮度阈值，筛选原场景图，保留大于等于亮度阈值的像素（即龙须区域）；然后对龙须区域进行模糊操作达到光溢出效果；最后将处理后的图像和原图像叠加得到最终效果。后处理中图像模糊算法优劣直接影响最终渲染品质和消耗性能，SAR Creator 中 bloom 的模糊算法采用双重模糊（dual blur），其核心思路是模糊过程中的降采样和升采样。此外，SAR Creator 提供多种 blur kernel，设计师可切换对比调整光晕效果，所有模糊算法都是利用周遭像素值加权叠加计算结果，权重取决于距离，还给出了部分模糊算法的 shader 实现。

（二）材质篇

• 在互动活动场景中，3D 地形若通过建模软件生成三角形面片几何体的方式，会存在三角面片数过高消耗性能大、设计师难得到所需凹凸起伏建模且设计调整成本过高的问题。位移贴图（DisplacementMap）技术可通过一张灰度图表示相应区域高低，在材质顶点着色器 VertexShader 中基于原始顶点信息、结合位移贴图对顶点偏移计算得到实际展示的顶点位置。与位移贴图不同，凹凸贴图（BumpMap）技术通过在材质片元着色器 FragmentShader 中基于原始顶点/法线信息、结合凹凸贴图计算出调整后的法线结果，使渲染结果呈现出细致的凹凸感。

六、未来展望

• SAR Creator 材质库、ShaderGraph 特效、后处理等渲染能力在 24 年春节活动中得到完善和项目验证，但也存在不足之处。如后处理可选效果不够多、功能不够完善，目前只初步支持 bloom 和 fxaa 后处理；美术工作流不够高效，美术资产制作和落地过程存在卡点，需要多方沟通协调。后续将与美术设计师更紧密沟通，深入了解用户需求，提供更多材质特性、后处理效果和 ShaderGraph 特效能力。

七、团队介绍

• 抖音前端架构 - 互动体验技术团队，为字节跳动业务提供互动技术解决方案。技术产品包含 SAR Creator、Simple Engine、AnnieX 互动容器，与抖音前端 - 互动创作团队、跨端框架团队、开放平台小游戏团队、用户增长 - 激励前端团队一同推进技术建设与业务落地，探索字节跳动应用生态下的创新业务形态。

八、下期预告

• 下期主题是 Wasm、WebGL 在互动技术中的创新应用，重点介绍如何利用它们对前端互动技术（如 Lottie、渲染引擎、动画图片等）进行创新和实践，提升业务性能和流畅度，给用户带来更好体验。