淘寶人生專屬小屋-虛擬人和虛擬場景技術(shù)探索

D2D2終端技術(shù)大會淘寶人生專屬"小屋"梵昀阿里巴巴淘寶互動娛樂前端工程師我們有什么我們想做什么目錄RDDD2終端技術(shù)大會前端前端&客戶端合作伙伴ALIBABACLOUDDEVELOPERCOMMUNALIBABACLOUDDEVELOPERCOMMUND2D2終端技術(shù)大會我們想做什么?首11840首11840措相關(guān)JJ旅行有收獲啦②運(yùn)勢快照毛班立即上身口家具店口家具店體驗(yàn)館個生小屋圖鑒兌換運(yùn)勢快照□□返回人生主頁③20你的新家上線啦，快來領(lǐng)取喬遷禮物~開始旅行去衣櫥>邀請好友全部>還未添加好友換這套下查看更多旅行攻略同體驗(yàn)館倉庫同體驗(yàn)館倉庫我們想做什么:人生小屋戊們一起來創(chuàng)作D2D2終端技術(shù)大會D2TerminalTechnolo室內(nèi)場景房間模型室內(nèi)場景房間模型家具模型游戲邏輯碰撞檢測動作交互選中拖拽人物控制人物控制人物動畫人物陰影術(shù)框架內(nèi)幕→→D2D2終端技術(shù)大會furnitureANoderIenderthescenewithca光源光源視場1yfarfar遠(yuǎn)平面距離投影變換個視口變換稱為modal-view矩陣。變換后的坐標(biāo)=視口矩陣x投影矩陣變換后的坐標(biāo)=視口矩陣x投影矩陣xx模型矩陣×模型點(diǎn)坐標(biāo)向量投影坐標(biāo)中的位置 世界空間：WorldSpace,世界坐標(biāo)作為一個更大空間范圍的坐標(biāo)系統(tǒng)網(wǎng)格模型FOVFOV:視場角，相機(jī)視錐體的兩端的夾角。視場角的大小決定了視野范圍，視場角越大，視野就越大。目標(biāo)物體超過這個角就不會被收在鏡頭farStep3:相機(jī)如何圍繞場景中心旋轉(zhuǎn)?OrbitControlD2終端技術(shù)大會D2終端技術(shù)大會Step3trick:相機(jī)視野變換?FOV疑問? 點(diǎn)擊家具獲得同款在家露營體驗(yàn)館在家露營體驗(yàn)館清單D2D2終端技術(shù)大會Z人精心32前填技木能精心虛擬偶像誕生記人物動起來問?相機(jī)沒有跟隨移動，人走出視野Step3:相機(jī)跟隨場景的相機(jī)，掛載到人物node父節(jié)點(diǎn)上，人物在中心子節(jié)點(diǎn)設(shè)置的坐標(biāo)位置是相對于父節(jié)點(diǎn)的局子節(jié)點(diǎn)設(shè)置的坐標(biāo)位置是相對于父節(jié)點(diǎn)的局部空間坐標(biāo)，相機(jī)始終位于人物node正前Joystick操控人物node移動場景相機(jī)同步移動，場景視角改變，人物始終在中心D2D2終端技術(shù)大會6.相交的物體按照深度排序，并返回如何選中家具?D2終端技術(shù)大會核心點(diǎn)：如何得知鼠標(biāo)拖拽位置的世界坐標(biāo)?D2終端技術(shù)大會格子格子 檢測物體：家具大量家具時，低端機(jī)達(dá)不到看不見的邏輯層：tilelnfo ·.將地板劃分為n*n二維數(shù)組形式具所占地磚x*y位置地磚保存該家具信息旋轉(zhuǎn)個生小屋個生小屋游戲邏輯與家具動作交互 旋轉(zhuǎn)人物轉(zhuǎn)向(基于家具自轉(zhuǎn)角度+觸發(fā)點(diǎn)位置)動作觸發(fā)點(diǎn)視效優(yōu)化貼圖疊加。傳統(tǒng)的實(shí)時渲染?1.使用第1個燈光spotlight渲染一次整個場景，產(chǎn)生一2.使用第2個燈光directionallight產(chǎn)生一個shadow最終將n次渲染的陰影結(jié)果進(jìn)行合并，每個mesh渲染大量計算和性能?D2D2終端技術(shù)大會Part1:家具陰影渲染如何提升陰影所需性能?方案1:可以有多個燈光，但只有一個平行光可產(chǎn)生陰影面光源方案2:使用光照貼圖或環(huán)境光照遮擋貼圖來面光源離線渲染離線渲染方案3:使用假陰影，添加一個平面放到物體下片材質(zhì)離線渲染·方案3,面光源投影，人物下方添加一個陰影材質(zhì)的平面·更好的效果：模糊處理D2終端技術(shù)大會人物陰影渲染APP為什么會使用離屏渲染?實(shí)時渲染人物陰影：離屏渲染，單獨(dú)在內(nèi)存中創(chuàng)建一個屏幕外緩沖區(qū)并進(jìn)行渲染D2TerminalTec