實現(xiàn)實時圖形毛皮效果歷來難度較大。最新桌面技術(shù)使用了Direct3D 11曲面細(xì)分(tessellation)技術(shù)才創(chuàng)建出飛奔中的小貓動態(tài)皮毛的效果。

在移動平臺上，由于性能受限，開發(fā)人員必須要顯著降低內(nèi)存帶寬。為了完成這些圖形效果，移動設(shè)備的解析度正與桌面系統(tǒng)越相當(dāng)甚至超過桌面系統(tǒng)。

基于PowerVR Rogue GPU的貓咪演示

盡管如此，我們近期所做的OpenGL ES 3.0可愛貓咪演示表明，使用最新 PowerVR Series6 GPU，可能在移動設(shè)備上實時呈現(xiàn)生動的貓毛效果。最新演示的運(yùn)行速度>30fps，解析度大于PowerVR Rogue GPU驅(qū)動的全高清。

可愛貓咪共由近20萬個三角形渲染而成

這只小貓毛茸茸，在歐式鄉(xiāng)間小屋內(nèi)頑皮地追逐激光指示筆。

技術(shù)特點

該演示利用了OpenGL ES 3.0 變換反饋和實例渲染在移動系統(tǒng)上制成貓毛效果。

貓和環(huán)境都采用了基于物理的渲染模式，將軟性陰影投射在貓和環(huán)境周圍。實時照亮貓的外形;但是環(huán)境使用的是預(yù)計算的紋理貼圖。在轉(zhuǎn)換反饋通路中執(zhí)行角色動畫，貓的基礎(chǔ)網(wǎng)格是在影響各個頂點的12骨架上加上貓皮。利用實例渲染和殼體紋理渲染輸出效果，創(chuàng)建毛皮效果。

應(yīng)用變換反饋中可以使應(yīng)用程序計算一次網(wǎng)格中貓蒙皮后的位置，然后再次使用各個殼體的位置。結(jié)合這個實例輸出必須轉(zhuǎn)換至GPU，在頂點著色器中計算殼體偏移。各個頂點骨架計算啟動實時模型中維持的大量細(xì)部，但需要使用Uniform Buffer Object(OpenGL ES 3.0新版本)，將所有數(shù)據(jù)傳輸至變換反饋著色器。

使用OpenGL ES 3.0的兩個功能變換反饋和實例渲染繪制的貓咪

為在演示中增加流行文化元素，箱子后面的肖像是物理學(xué)家薛定諤，其著名的思想實驗是按照量子理論證明疊加原理。

貓模型的線框圖

開發(fā)過程中遇到的挑戰(zhàn)

我們先啟動了在移動系統(tǒng)中制作貓咪殼體毛皮效果的實驗。其中所需的大量混合是很多移動圖像架構(gòu)的巨大挑戰(zhàn)，盡管如此，我們?nèi)源蛩阕C明在執(zhí)行大量的阿爾法混合時，PowerVR Series6 GPU 可維持高性能。

初步演示的圖形

經(jīng)過初步概念驗證實驗后，我們確信我們可以創(chuàng)建在一個模型上創(chuàng)建令人信服的靜態(tài)毛皮效果。我們開始策劃圍繞動畫貓的場景。集成毛皮和卡通貓的特性是難度較大的技術(shù)挑戰(zhàn)。

使用基本的動畫模型，我們開始開發(fā)一些優(yōu)化技術(shù)來渲染帶毛皮的動畫角色。在這個階段使用變換反饋和實例渲染來優(yōu)化整個開發(fā)設(shè)計。

最終采用的動畫模型是最初為離線渲染設(shè)計的模型，因此需要進(jìn)行高面多邊形計算。這個動畫在各個頂點采用大量的骨架執(zhí)行蒙皮。我們很快發(fā)現(xiàn)，建立在各個頂點采用4個骨架蒙皮是不夠的，原因是這會造成貓尾部和背部畸形。為了解決這個問題，我們將模型與動畫數(shù)據(jù)隔離，創(chuàng)建自定義各個頂點12骨架蒙皮系統(tǒng)。

經(jīng)實驗創(chuàng)建這個系統(tǒng)面臨數(shù)個方面的挑戰(zhàn)：從建模程序包中導(dǎo)出數(shù)據(jù)，以自定義存儲格式保存，將這個數(shù)據(jù)加載到演示，利用網(wǎng)格數(shù)據(jù)重新整合這些數(shù)據(jù)，然后應(yīng)用執(zhí)行蒙皮。同時我們還要處理場景，利用預(yù)計算的光照圖為四處走動的貓創(chuàng)建舒適的環(huán)境

上圖顯示最終貓模型的前期版本，在最終場景上我們把所設(shè)置反光地板上的基本光照移除了。

在執(zhí)行每頂點12骨架系統(tǒng)時所出現(xiàn)的一些問題，尤其是在原有網(wǎng)格中重新集成動畫數(shù)據(jù)時。這段開發(fā)部分被戲稱為 “多邊形集合階段”

當(dāng)蒙皮系統(tǒng)完成后，我們能夠繼續(xù)開發(fā)其他部分的演示，增加功能，如激光筆、線框模式和慢動作系統(tǒng)。靜態(tài)場景處理得很順利，在演示結(jié)束時增加天空景色增加了更自然的感覺。

最終場景內(nèi)的窗戶

另外的挑戰(zhàn)是為貓補(bǔ)光。為了將貓與預(yù)計算場景整合在一起，我們最終決定利用BRDF (雙向反射分布函數(shù))渲染貓的毛皮 。我們還投射小貓所處位置的軟陰影，這個陰影與整體陰影融為一體。

執(zhí)行中期開發(fā)的同事提出了一個演示名稱，但最終未被采用。

渲染順序

可以按照一些過程構(gòu)建場景。利用變換反饋，必須對高多邊形貓網(wǎng)格蒙皮一次，隨后的位置可以用于陰影傳遞、各個殼體和皮毛傳遞。胡須是在我們認(rèn)為需要對整體場景細(xì)部進(jìn)行添加時最后添加的。

查看利用高級OpenGL ES 3.0功能制作貓咪圖形演示

最終演示已經(jīng)進(jìn)行了數(shù)月，我們對結(jié)果很滿意。

2014年移動世界大會上我們進(jìn)行了首次演示，反響強(qiáng)烈。在2014GDC、 SIGGRAPH 2014 和其他主要會議上也進(jìn)行了演示。