詳解如何利用最新OpenGL ES 3.0技術(shù)演示生動(dòng)貓咪

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

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

基于PowerVR Rogue GPU的貓咪演示

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

可愛(ài)貓咪共由近20萬(wàn)個(gè)三角形渲染而成

這只小貓毛茸茸，在歐式鄉間小屋內頑皮地追逐激光指示筆。

技術(shù)特點(diǎn)

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

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

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

使用OpenGL ES 3.0的兩個(gè)功能變換反饋和實(shí)例渲染繪制的貓咪

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

貓模型的線(xiàn)框圖

開(kāi)發(fā)過(guò)程中遇到的挑戰

我們先啟動(dòng)了在移動(dòng)系統中制作貓咪殼體毛皮效果的實(shí)驗。其中所需的大量混合是很多移動(dòng)圖像架構的巨大挑戰，盡管如此，我們仍打算證明在執行大量的阿爾法混合時(shí)，PowerVR Series6 GPU 可維持高性能。

初步演示的圖形

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

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

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

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

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

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

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

最終場(chǎng)景內的窗戶(hù)

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

執行中期開(kāi)發(fā)的同事提出了一個(gè)演示名稱(chēng)，但最終未被采用。

渲染順序

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

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

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

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