zOj28資訊網(wǎng)——每日最新資訊28at.com

前言

抖音在2024年春節(jié)期間推出了歡笑中國(guó)年系列活動(dòng)，為用戶帶來(lái)了全新的體驗(yàn)和樂(lè)趣。而SAR Creator則為該項(xiàng)目研發(fā)工作提供了重要的技術(shù)支持。SAR Creator是一款基于 Typescript 的高性能、輕量化的互動(dòng)解決方案，目前支持了瀏覽器和跨端框架平臺(tái)，服務(wù)于字節(jié)內(nèi)部的各種互動(dòng)業(yè)務(wù)。zOj28資訊網(wǎng)——每日最新資訊28at.com

這些絢爛多彩的互動(dòng)場(chǎng)景當(dāng)然也離不開(kāi)實(shí)時(shí)渲染技術(shù)的支持，因此本文將專門介紹春節(jié)活動(dòng)招財(cái)神龍和神龍?zhí)綄?/strong>中SAR Creator渲染相關(guān)的業(yè)務(wù)實(shí)踐經(jīng)驗(yàn)以及技術(shù)探索和嘗試。zOj28資訊網(wǎng)——每日最新資訊28at.com

春節(jié)—招財(cái)神龍zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

春節(jié)—神龍?zhí)綄?/span>zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

比如抖音歡笑中國(guó)年系列文章《招財(cái)神龍互動(dòng)技術(shù)揭秘》中就有提到，項(xiàng)目中“家”場(chǎng)景就是由2D元素以及不同材質(zhì)支持的3D元素共同組成的。出于性能和美術(shù)效果的考慮，各3D模型使用的材質(zhì)會(huì)有所不同，比如無(wú)光照Unlit材質(zhì)、基于物理的PBR材質(zhì)。對(duì)于陰影這種移動(dòng)端性能消耗比較大的特性，不同物體的接收也會(huì)做特殊處理。這些材質(zhì)的選擇以及光照陰影的支持都是依托于SAR Creator材質(zhì)庫(kù)能力的支持。如下圖所示即為SAR Creator Unlit材質(zhì)(左圖)和PBR材質(zhì)(右圖)的示例。zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

ShaderGraph卡通水體zOj28資訊網(wǎng)——每日最新資訊28at.com

除了上述春節(jié)活動(dòng)中順利落地的渲染效果外，我們還嘗試做了很多效果提升的技術(shù)探索，比如后處理輝光效果、凹凸貼圖等。希望可以更好的提升美術(shù)設(shè)計(jì)師的設(shè)計(jì)體驗(yàn)和最終的渲染效果。zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

bloom輝光zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

招財(cái)神龍渲染實(shí)踐

“招財(cái)神龍”活動(dòng)是2024年春節(jié)游戲化玩法之一，活動(dòng)整體采用3D場(chǎng)景（龍?jiān)诩覉?chǎng)景）+ 2D場(chǎng)景（龍尋寶場(chǎng)景）結(jié)合的方式。在招財(cái)神龍的活動(dòng)中，設(shè)計(jì)同學(xué)基于SAR Creator編輯器，進(jìn)行場(chǎng)景搭建和效果還原工作；研發(fā)同學(xué)基于SAR Creator渲染能力，快速進(jìn)行技術(shù)方案選型和實(shí)施。zOj28資訊網(wǎng)——每日最新資訊28at.com

2D&3D混合渲染

對(duì)于活動(dòng)中的“龍”和“小女孩”元素，我們采用3D模型，提供更為逼真的體驗(yàn)感。而針對(duì)場(chǎng)景中的房子、炮仗等，我們使用2D貼片來(lái)呈現(xiàn)。通過(guò)調(diào)整相機(jī)的遠(yuǎn)近平面、fov等參數(shù)，展示出小女孩在炮仗前、龍?jiān)诜孔忧啊堅(jiān)谂谡毯蟮囊曈X(jué)假象。zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

材質(zhì)庫(kù)

SAR Creator提供了Unlit、PBR、Uber和NPR等多種材質(zhì)的選擇。zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

然后在Shader中根據(jù)點(diǎn)亮前后紋理采樣顏色值，混合計(jì)算出最終像素顏色值，以實(shí)現(xiàn)每個(gè)區(qū)域的解凍/未解凍狀態(tài)變化。具體計(jì)算邏輯如下所示：zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

落地實(shí)現(xiàn)zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

我們可以分析表格第三列中效果參考的構(gòu)成，得出技術(shù)要點(diǎn)為: 幾何拖尾+粒子拖尾+頭部星光。頭部星光較為簡(jiǎn)單，只需要一個(gè)Sprite/Plane+Tween增加下旋轉(zhuǎn)動(dòng)畫即可。下面將主要介紹粒子拖尾和幾何拖尾的技術(shù)實(shí)現(xiàn)。zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

大量粒子的位移動(dòng)畫通過(guò)Shader使用GPU并行算力完成，節(jié)約寶貴的CPU算力。zOj28資訊網(wǎng)——每日最新資訊28at.com

zOj28資訊網(wǎng)——每日最新資訊28at.com

感興趣代碼實(shí)現(xiàn)，可查看

本文鏈接：http://www.tebozhan.com/showinfo-26-83273-0.html2024 抖音歡笑中國(guó)年之渲染技術(shù)實(shí)踐與探索