抖音在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.www897cc.com/showinfo-26-83273-0.html2024 抖音歡笑中國年之渲染技術實踐與探索
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 國貨新風潮!買主機選攀升