抖音在2024年春节期间推出了欢笑中国年系列活动，为用户带来了全新的体验和乐趣。而SAR Creator则为该项目研发工作提供了重要的技术支持。SAR Creator是一款基于 Typescript 的高性能、轻量化的互动解决方案，目前支持了浏览器和跨端框架平台，服务于字节内部的各种互动业务。
这些绚烂多彩的互动场景当然也离不开实时渲染技术的支持，因此本文将专门介绍春节活动招财神龙和神龙探宝中SAR Creator渲染相关的业务实践经验以及技术探索和尝试。
春节—招财神龙
春节—神龙探宝
比如抖音欢笑中国年系列文章《招财神龙互动技术揭秘》中就有提到，项目中“家”场景就是由2D元素以及不同材质支持的3D元素共同组成的。出于性能和美术效果的考虑，各3D模型使用的材质会有所不同，比如无光照Unlit材质、基于物理的PBR材质。对于阴影这种移动端性能消耗比较大的特性，不同物体的接收也会做特殊处理。这些材质的选择以及光照阴影的支持都是依托于SAR Creator材质库能力的支持。如下图所示即为SAR Creator Unlit材质(左图)和PBR材质(右图)的示例。
ShaderGraph卡通水体
除了上述春节活动中顺利落地的渲染效果外，我们还尝试做了很多效果提升的技术探索，比如后处理辉光效果、凹凸贴图等。希望可以更好的提升美术设计师的设计体验和最终的渲染效果。
bloom辉光
“招财神龙”活动是2024年春节游戏化玩法之一，活动整体采用3D场景（龙在家场景）+ 2D场景（龙寻宝场景）结合的方式。在招财神龙的活动中，设计同学基于SAR Creator编辑器，进行场景搭建和效果还原工作；研发同学基于SAR Creator渲染能力，快速进行技术方案选型和实施。
对于活动中的“龙”和“小女孩”元素，我们采用3D模型，提供更为逼真的体验感。而针对场景中的房子、炮仗等，我们使用2D贴片来呈现。通过调整相机的远近平面、fov等参数，展示出小女孩在炮仗前、龙在房子前、龙在炮仗后的视觉假象。
SAR Creator提供了Unlit、PBR、Uber和NPR等多种材质的选择。
然后在Shader中根据点亮前后纹理采样颜色值，混合计算出最终像素颜色值，以实现每个区域的解冻/未解冻状态变化。具体计算逻辑如下所示：
落地实现
我们可以分析表格第三列中效果参考的构成，得出技术要点为: 几何拖尾+粒子拖尾+头部星光。头部星光较为简单，只需要一个Sprite/Plane+Tween增加下旋转动画即可。下面将主要介绍粒子拖尾和几何拖尾的技术实现。
大量粒子的位移动画通过Shader使用GPU并行算力完成，节约宝贵的CPU算力。
感兴趣代码实现，可查看
本文链接：http://www.28at.com/showinfo-26-83273-0.html2024 抖音欢笑中国年之渲染技术实践与探索
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 国货新风潮！买主机选攀升
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
