【天諭日程介面特效】動態骨骼和玻璃烘培在UI介面的應用

天諭日程介面作為經常光顧的遊戲任務的中轉站，在設計上選用了玻璃風鈴作為活動條目的載體，希望它能夠營造一種放鬆隨意的氛圍。為此我們嘗試了運用動態骨骼外掛外加風場來模擬風鈴外微風中隨意搖曳的動態，並設計了一種用針對固定視角，利用環境貼圖快速製作的玻璃折射效果的方法。

動態骨骼

DynamicBone是一個基於彈簧振子的簡單物理外掛，用來實現樹狀柔體的物理模擬（比如任務的頭髮、衣袖、尾巴等裝飾物）。模組會在每幀根據父節點的運動，迭代設定的所有子節點的位置，模擬鏈條擺動的效果。

FrankZhou：動態骨骼Dynamic Bone演算法詳解

相比於手工K幀的動畫，動態骨骼使用物理模擬，可以自動適應父節點位移和微風疊加產生的各種變化，生成合理的過渡。在unity中，外掛透過驅動骨骼節點的transform產生運動，在介面上將UI圖片直接掛接在骨骼上也可以驅動簡單的鏈條擺動模擬。如果可以對素材形狀製作骨骼蒙皮，還可以製作物體的柔性形變。

透過設定子節點相對父節點的錨點位置，我們可以設定每個關節的距離。對於動態的控制，外掛提供了一組曲線，可以整體配置一組的節點的阻力、彈性、活動範圍和慣性。雖然為了效能對標準的物理模型做了一些簡化，但已足以應對大部分情況（節點之間質量相近）下的表現。

動態

佈置好動態骨骼以後，在頁籤就可以配合進場和出場的速度變化搖曳起來。但由於目前一組頁籤的移動速度都是同步的，而人眼對於協調一致的運動非常敏感。一組大小質量相同的物體，以相同速度同步移動時就會給人非常強烈的機械感。

為了打破這種機械感，頁籤的移動由勻速運動改為了更加平滑的變速運動。同時，在每個頁簽出現的時間配置了一個微小的時間間隔，這樣就錯開了同一時間各個頁籤的速度。儘管時間間隔幾乎難以察覺，卻很好地打破了協調運動的機械感。

風場

當頁簽入場完後由於沒有任何外力，當頁籤擺動能量散盡，畫面就會完全靜止而失去活力。而我們需要頁簽在靜止的時候也能保持在微風中輕微擺動的效果。

動態骨骼支援配置外部風力影響，可以控制風力大小和隨機變化的幅度和頻率。我們可以為每一個頁籤配置獨立的隨機抖動引數，這樣可以避免全域性抖動帶來的高度同步的機械感。我們可以透過為各個頁籤配置不同的變化頻率，但產生較為隨機的效果，但這種無序的效果，卻沒有自然的美感。想要表現微風吹拂的感覺，受風擺動的頁籤之間還需要有一定的聯絡，透過頁籤之間的連貫的運動傳遞來表現空氣的流動。

在開闊場景中表現風的流動通常會用到風場這種東西。其概念就是將場景分割為網格，每個格內儲存一個向量表示當時該區域風力的大小和方向，這樣就可以在每幀根據這些向量的變化來模擬風的流動。由於我們只考慮平面上的一組風鈴的擺動，我們可以使用一組一維彈性鏈來代表風場擬合風力變化的衰減和傳遞慣性。

方向在風場可以用數值正負表示，我們使用了一個長度為16的浮點陣列來表示風場，隨機風力從兩端產生並透過簡單的慣性彈性迭代向中心傳遞，產生微風。

藉助這個一維風場我們還可以接入玩家互動，由玩家在螢幕上划動來產生風。我們希望風力僅朝風向傳播，手指在朝一個方向划動時不會產生一個反方向的風。當手指在螢幕划動時，會將每幀划動的x軸速度乘以一個係數疊加到風場的陣列上。風場內的物體根據自身x軸位置查詢風場結算當前所受風力。

頁籤旋轉

為了表現頁籤輕盈的質感，我們還主觀地加上了y軸方向的旋轉。這在動態骨骼模組中並不支援，我們在結算風場的同時，根據風力對頁籤的旋轉做了一個簡單模擬。根據配置的頁籤轉動慣量和阻力模擬物理旋轉，同時根據當時角度的絕對值，加入一個彈性回彈力使頁籤最終總是恢復到正面面對鏡頭，保證介面資訊的可讀性。

玻璃渲染

為了增強代入感，我們為日程介面準備了許多不同的背景，來反映玩家所在場景當前的時間和天氣狀態。為了讓介面更好地與環境氛圍融合，我們這頁籤頂部風鈴嘗試了一種玻璃材質的渲染方法。

畫玻璃的要點是，表面的顏色大多來自環境中反光和折射。表現反光通常會使用一張球面貼圖，根據物體表面法線和相機視線方向計算反射角度計算反射角度，根據這個角度找到對應球面貼圖的位置獲取反光顏色。

同樣折射最終會也會產生一個射出角度，根據這個角度，就可以獲得球面貼圖上的顏色。

但折射穿透物體後還可能反覆進出物體，產生更多的折射和反射，產生難以預測的奇妙效果，追蹤光線產生大量計算，實時渲染非常困難。

光路烘培

但如果入射角不變，光路的終點也是固定的。也就是說如果視角固定不動，最終光路射出的角度應該是可以烘培儲存下來的。

按照這個思路，搜尋玻璃烘培，真的在論壇找到了一篇2009年的討論，這篇回答提到了將一張預設的紅綠uv貼圖放在玻璃後面，透過玻璃的扭曲渲染出的顏色就可以直接用來作為取樣用的uv貼圖，渲染在固定視角的背景扭曲效果。

Index

uv 的紅綠代表了二維xy軸的位置，而球面貼圖的座標也是由從0到1的xyz的三維座標，正好可以用rgb顏色表示。這樣如果我們在離線渲染工具中將這樣一張用顏色代表球面座標的球面貼圖作為渲染環境，放入想要烘培的玻璃材質模型，那麼在模型上渲染出的顏色就應該是折射以後的球面RGB座標！於是我們就可以用離線渲染工具烘培出固定視角高質量的折射貼圖。

首先如何獲得這樣一個顏色編碼的球面貼圖呢？嘗試若干方法以後，找到一個將cubemap立方座標轉換展開為極座標長方形貼圖的shader，將換算用的立方座標之間作為rgb 按照換算好的uv 座標之間畫到螢幕上，擷取下來作為極座標球面貼圖。

Mapiarz/CubemapToEquirectangular

有了渲染環境，在blender中根據GUI的設計手工建模了風鈴玻璃罩的基本形狀，設定預設的玻璃材質，擺好鏡頭，將渲染光路部分的追蹤次數都調到最大，就可以開始渲染了。

球面貼圖

將平面背景圖轉換成球面圖需要手動補充可視角度以外的內容，主要靠P圖拼接素材的能力，做了一些嘗試但效果並不理想。但如果背景來自遊戲中的場景，事情就好辦了。利用unity自帶的light probe 工具，我們可以愉快地在遊戲場景中烘培當前位置的cubemap環境貼圖：

這樣就完事具備，玻璃渲染的過程類似使用球面貼圖渲染反光，玻璃材質上的畫素根據對應的光路烘培貼圖找到視線在球面貼圖上對應的落點，提取顏色，便可以渲染出烘培的折射效果。由於折射結果是實時選取的，雖然有固定視角的限制，但如果給出物體中心點座標，渲染的折射效果可以適應物體在螢幕xy平面上的平移和z軸旋轉。