一、 引言

在本文中，我們將使用WebGL技術(shù)來(lái)開發(fā)一款移動(dòng)游戲，本游戲能夠以60FPS的幀頻運(yùn)行于移動(dòng)設(shè)備上，此游戲的風(fēng)格類似于Flappy Bird和神廟大逃亡（Temple Run），起名叫Winter Rush。本文著重討論和游戲開發(fā)過(guò)程中所使用的WebGL相關(guān)的three.js技術(shù)。

下圖展示了此游戲開始時(shí)的一個(gè)快照。

游戲過(guò)程中，玩家可以使用左向與右向箭頭鍵（或者屏幕上左右點(diǎn)按）來(lái)左右移動(dòng)。

二、 為什么60 FPS很重要

幀速率越高，游戲內(nèi)容渲染效果將是越光滑。對(duì)于一款游戲產(chǎn)品來(lái)說(shuō)，運(yùn)動(dòng)效果的光滑度和控制的及時(shí)響應(yīng)是尤為重要的。電腦屏幕通常刷新的頻率是60hz，所以這是我們的***的約束。請(qǐng)注意，60幀/秒只是最理想的目標(biāo)，但實(shí)際上任何超過(guò)30 FPS的幀速率都有看上去還不錯(cuò)的效果。

Paul Lewis對(duì)這一方面展開了深入探討。為此，他開設(shè)了一個(gè)專門的網(wǎng)站進(jìn)行有關(guān)技術(shù)的探討，網(wǎng)站地址是http://jankfree.org/。

我可以非常自豪地告訴你，本文提供的示例工程能夠以60FPS的幀速率工作于/iPad 4th Gent和Nexus 4手機(jī)上。

為了實(shí)現(xiàn)我想要的FPS目標(biāo)，我采用了如下方案。

三、 簡(jiǎn)化3D場(chǎng)景

幾何體：通過(guò)減少網(wǎng)格數(shù)目和每個(gè)網(wǎng)格的頂點(diǎn)數(shù)來(lái)簡(jiǎn)化場(chǎng)景中的幾何體。切記：“低聚合”永遠(yuǎn)是很酷的！在這個(gè)游戲中，實(shí)現(xiàn)樹效果中實(shí)際上僅使用了兩個(gè)圓柱體︰一個(gè)用于實(shí)現(xiàn)樹葉，另一個(gè)用于實(shí)現(xiàn)樹干。在游戲中，當(dāng)在賽道上運(yùn)動(dòng)時(shí)，實(shí)際上僅在賽道上放置了10棵樹。

材質(zhì)：3D引擎計(jì)算成本的很大一部分是花費(fèi)在計(jì)算場(chǎng)景中每個(gè)幾何面的照明效果上。在場(chǎng)景中燈光越少，則計(jì)算成本越低。Three.js引擎中材質(zhì)運(yùn)算代價(jià)按照從低到高的順序依次分為：

（1）Basic材質(zhì)：這是***的材質(zhì)，不需要計(jì)算照明，你可以使用Basic材質(zhì)和圖像紋理做很多的事情。

（2）Lambert材質(zhì)：使用這種材質(zhì)能夠呈現(xiàn)并非那么富有光澤性的外觀效果。

（3）Phong材質(zhì)：使用這種材質(zhì)能夠?qū)崿F(xiàn)極富光澤性的外觀效果。在我的測(cè)試中，Phong材質(zhì)被證明比Lambert材質(zhì)昂貴得多。例如，在本文提供的實(shí)例中，如果從Lambert材質(zhì)切換到Phong材質(zhì)，在iOS平臺(tái)上FPS值會(huì)從60降到15。

四、 對(duì)象重用

這可能是為實(shí)現(xiàn)高性能web體驗(yàn)應(yīng)遵循的最重要的規(guī)則了。在初始化階段對(duì)象創(chuàng)建后，在游戲運(yùn)行期間盡量不要?jiǎng)?chuàng)建新對(duì)象。這將避免內(nèi)存“顛簸”——其可能會(huì)導(dǎo)致瀏覽器“窒息”。網(wǎng)站http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/
處提供了一篇使用JS對(duì)象池方面的極好的文章，你可以參考一下。在本文游戲中，我重用3D對(duì)象（例如樹）的方法是：當(dāng)它們位于攝影機(jī)后面時(shí)重置它們的位置。在每一幀中，都會(huì)檢查對(duì)象是否位于攝像機(jī)之后。如果對(duì)象位于攝像機(jī)之后，則把其位置重置于遠(yuǎn)離賽道的地方。另外需要說(shuō)明的是，在本游戲中，我使用了THREE.Fog技術(shù)實(shí)現(xiàn)遮擋樹目的。當(dāng)然另一方面，因?yàn)檫@也是一種相當(dāng)流行的解決方案。

五、 移動(dòng)賽道

游戲中賽道的雪地板是一個(gè)平面網(wǎng)格。我們使用Perlin噪聲算法生成地形高度（例如頂點(diǎn)的Y-坐標(biāo)）。這種辦法能夠?qū)崿F(xiàn)隨機(jī)但平滑變化的坑洼效果。為了實(shí)現(xiàn)自然運(yùn)動(dòng)的賽道外觀效果，我們使用了以下技術(shù)︰

（1）在每幀中，我們向照相機(jī)移動(dòng)整個(gè)地板一小段距離，至于移動(dòng)速度則基于玩家的操作速度。

（2）程序中，我們會(huì)檢查是否地板已經(jīng)移動(dòng)到攝影機(jī)后面并超過(guò)一個(gè)預(yù)定義的STRIP_WIDTH量。如果是這樣，我們會(huì)沿賽道向后重置地板STRIP_WIDTH大小的位置。然后，我們重新計(jì)算地形高度——這是通過(guò)把Perlin噪聲位置增加到STRIP_WIDTH值大小實(shí)現(xiàn)的。

在游戲中，大致效果如下面的截圖所示。

六、 簡(jiǎn)化碰撞檢測(cè)

在Three.js編程中，你完全可以通過(guò)使用Raycasters方法實(shí)現(xiàn)非常精確的針對(duì)于每一個(gè)面的碰撞檢測(cè)。有關(guān)這一方法，Lee Stemkoski就提供了一個(gè)不錯(cuò)的例子（http://stemkoski.github.io/Three.js/Collision-Detection.html）。然而，這種方法可能代價(jià)昂貴，需要針對(duì)每一對(duì)有可能發(fā)生碰撞的對(duì)象進(jìn)行測(cè)算。在許多情況下，你完全可以簡(jiǎn)化碰撞檢測(cè)；辦法是，假設(shè)每個(gè)對(duì)象都是一個(gè)球體，那么，只需要簡(jiǎn)單地測(cè)量這些對(duì)象之間的距離即可。

請(qǐng)注意，您可能需要手動(dòng)調(diào)整碰撞距離和碰撞盒位置，從而實(shí)現(xiàn)更可玩性的感覺(jué)。但是，也有一個(gè)問(wèn)題，就是當(dāng)掃射的時(shí)候玩家可能擊中了關(guān)閉相機(jī)的對(duì)象。針對(duì)這一問(wèn)題的解決辦法是，把玩家射擊盒從鏡頭前移出一點(diǎn)距離。

七、 實(shí)現(xiàn)陰影效果

在Three.js編程中，EffectComposer類允許你依次執(zhí)行多個(gè)后處理著色器（post-processing shader）。這種方法需要使用多個(gè)脫屏緩沖（off-screen buffer），從而把上一個(gè)著色器結(jié)果傳遞到下一個(gè)。在手機(jī)設(shè)備上，這種方法給出并不理想的性能表現(xiàn)。解決方法是：把我們編寫的多個(gè)著色器合并成一個(gè)超級(jí)著色器（SuperShader）。當(dāng)然，實(shí)現(xiàn)這一點(diǎn)僅需要把每一個(gè)著色器代碼復(fù)制并粘貼即可，但還要考慮適當(dāng)?shù)捻樞?。?duì)于我們的Winter Rust游戲來(lái)說(shuō)，我們把Vignette，Brightness/Contrast和Hue/Saturation著色器結(jié)合為一個(gè)大的著色器。此外，需注意，有些效果對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)GPU消耗太大，最引人注目的是模糊相關(guān)技術(shù)。

八、 時(shí)間控制

在動(dòng)畫循環(huán)方面，我們應(yīng)使用requestAnimationFrame方法并為動(dòng)畫應(yīng)用時(shí)間偏移量。這樣可以使動(dòng)畫速度獨(dú)立于游戲幀速率。旅行距離應(yīng)取決于已經(jīng)過(guò)去實(shí)際的時(shí)間而不是幀數(shù)量。這種技術(shù)不會(huì)提高你的游戲的FPS值，但如果FPS值實(shí)在太低時(shí)會(huì)提高你的游戲玩家的速度知覺(jué)。請(qǐng)參考如下有關(guān)代碼：

//kick off animation 
 
var clock = new THREE.Clock(); 
 
clock.start(); 
 
gameLoop(); 
 
function gameLoop(){ 
 
    requestAnimationFrame(gameLoop ); 
 
    var delta = clock.getDelta(); 
 
    //use delta to determine all distances travelled 
 
    movePlayer(MOVE_SPEED * delta); 
 
} 

九、 運(yùn)行于目標(biāo)設(shè)備

一旦你確定了目標(biāo)設(shè)備，那么你會(huì)不斷地在這些設(shè)備上進(jìn)行測(cè)試并不斷關(guān)注FPS值。OS X中的IOS模擬器是一個(gè)在桌面開發(fā)時(shí)調(diào)試iOS問(wèn)題的優(yōu)秀工具；但要注意，模擬器并不反映實(shí)際設(shè)備的性能。Adobe的Edge Inspect（https://creative.adobe.com/products/inspect）是另一個(gè)優(yōu)秀的工具，它使你能夠輕松地將多個(gè)移動(dòng)設(shè)備連接到本地網(wǎng)頁(yè)。當(dāng)頁(yè)面更改時(shí)它將自動(dòng)重新加載該頁(yè)面，并且還允許您訪問(wèn)Android控制臺(tái)錯(cuò)誤。

十、 移動(dòng)開發(fā)的JS庫(kù)

本小節(jié)給出開發(fā)我的游戲時(shí)使用的幾個(gè)著名的js庫(kù)，它們是：

• Three.js：這個(gè)不用多說(shuō)；
• Zepto.js：這是一個(gè)jQuery的***替代品，共25K大小，而且在移動(dòng)設(shè)備上速度很快；
• Howler.js：這是一個(gè)優(yōu)秀的聲效庫(kù)，它能夠應(yīng)付多種移動(dòng)設(shè)備的聲音問(wèn)題；
• TweenLite：使用該庫(kù)可以很容易地實(shí)現(xiàn)緩動(dòng)效果，在移動(dòng)設(shè)備上效率不錯(cuò)。

十一、 哪些設(shè)備可以運(yùn)行WebGL

支持WebGL的設(shè)備數(shù)量正在快速增長(zhǎng)。除了在所有主流的桌面瀏覽器上運(yùn)行外，現(xiàn)在WebGL內(nèi)容運(yùn)行于iOS和Android設(shè)備上沒(méi)有大的問(wèn)題。

然而，不是所有的支持WebGL功能的設(shè)備都是生而平等的。WebGL是一種要求苛刻的技術(shù)，因此在一些相對(duì)較舊的設(shè)備上運(yùn)行時(shí)建議主要運(yùn)行一些最基本的內(nèi)容。例如，iPad 2在2011年推出，它能夠運(yùn)行WebGL，但能力非常有限。WebGL在近兩年制造的移動(dòng)設(shè)備上通常運(yùn)行很好。我主要的移動(dòng)測(cè)試設(shè)備是一臺(tái)第4代iPad（2013年生產(chǎn)）和一臺(tái)Nexus 4（2012年生產(chǎn)），這就是一個(gè)相對(duì)很好的參考基準(zhǔn)。

十二、 待改進(jìn)的地方

建議有興趣的各位朋友，在學(xué)習(xí)本文提供實(shí)例項(xiàng)目過(guò)程中可以嘗試向此項(xiàng)目添加以下項(xiàng)︰

• 移動(dòng)設(shè)備上的傾斜控制。我選擇使用點(diǎn)按方式來(lái)實(shí)現(xiàn)在手機(jī)上的傾斜移動(dòng)，因?yàn)檫@樣可以更匹配桌面體驗(yàn)。請(qǐng)注意：使用傾斜加速度計(jì)可是一種完全不同的控制系統(tǒng)，讀者可另外嘗試一下這種方案。
• 開發(fā)發(fā)燒友類型的桌面版。因?yàn)槲蚁氡M量使這個(gè)游戲在較慢的設(shè)備上也能運(yùn)行良好，所以我不得不放棄使用一些漂亮的效果和幾何體。因此，在構(gòu)建桌面版本時(shí)使用更豐富的圖形，效果應(yīng)當(dāng)更好。
• 使用Android全屏API
• 把程序中使用的HTML菜單技術(shù)浮動(dòng)到WebGL場(chǎng)景上面，也許還可以添加一些漂亮的著色器擺動(dòng)過(guò)渡效果，等等。

十三、 小結(jié)

本文簡(jiǎn)述了使用Three.js開發(fā)一款移動(dòng)設(shè)備3D游戲的要點(diǎn)。***，真誠(chéng)希望讀者能夠開發(fā)出在移動(dòng)設(shè)備上具備良好性能的WegGL游戲產(chǎn)品。

附：本文中實(shí)例游戲Winter Rush的下載地址是https://github.com/felixturner/winter-rush。

【51CTO.com獨(dú)家譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明來(lái)源】