基于Three.js+WebGL開發移動3D游戲
譯文一、 引言
在本文中，我們將使用WebGL技術來開發一款移動游戲，本游戲能夠以60FPS的幀頻運行于移動設備上，此游戲的風格類似于Flappy Bird和神廟大逃亡（Temple Run），起名叫Winter Rush。本文著重討論和游戲開發過程中所使用的WebGL相關的three.js技術。
下圖展示了此游戲開始時的一個快照。
游戲過程中，玩家可以使用左向與右向箭頭鍵（或者屏幕上左右點按）來左右移動。
二、 為什么60 FPS很重要
幀速率越高，游戲內容渲染效果將是越光滑。對于一款游戲產品來說，運動效果的光滑度和控制的及時響應是尤為重要的。電腦屏幕通常刷新的頻率是60hz，所以這是我們的***的約束。請注意，60幀/秒只是最理想的目標，但實際上任何超過30 FPS的幀速率都有看上去還不錯的效果。
Paul Lewis對這一方面展開了深入探討。為此，他開設了一個專門的網站進行有關技術的探討，網站地址是http://jankfree.org/。
我可以非常自豪地告訴你，本文提供的示例工程能夠以60FPS的幀速率工作于/iPad 4th Gent和Nexus 4手機上。
為了實現我想要的FPS目標，我采用了如下方案。
三、 簡化3D場景
幾何體：通過減少網格數目和每個網格的頂點數來簡化場景中的幾何體。切記：“低聚合”永遠是很酷的！在這個游戲中，實現樹效果中實際上僅使用了兩個圓柱體︰一個用于實現樹葉，另一個用于實現樹干。在游戲中，當在賽道上運動時，實際上僅在賽道上放置了10棵樹。
材質：3D引擎計算成本的很大一部分是花費在計算場景中每個幾何面的照明效果上。在場景中燈光越少，則計算成本越低。Three.js引擎中材質運算代價按照從低到高的順序依次分為：
（1）Basic材質：這是***的材質，不需要計算照明，你可以使用Basic材質和圖像紋理做很多的事情。
（2）Lambert材質：使用這種材質能夠呈現并非那么富有光澤性的外觀效果。
（3）Phong材質：使用這種材質能夠實現極富光澤性的外觀效果。在我的測試中，Phong材質被證明比Lambert材質昂貴得多。例如，在本文提供的實例中，如果從Lambert材質切換到Phong材質，在iOS平臺上FPS值會從60降到15。
四、 對象重用
這可能是為實現高性能web體驗應遵循的最重要的規則了。在初始化階段對象創建后，在游戲運行期間盡量不要創建新對象。這將避免內存“顛簸”——其可能會導致瀏覽器“窒息”。網站http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/
處提供了一篇使用JS對象池方面的極好的文章，你可以參考一下。在本文游戲中，我重用3D對象（例如樹）的方法是：當它們位于攝影機后面時重置它們的位置。在每一幀中，都會檢查對象是否位于攝像機之后。如果對象位于攝像機之后，則把其位置重置于遠離賽道的地方。另外需要說明的是，在本游戲中，我使用了THREE.Fog技術實現遮擋樹目的。當然另一方面，因為這也是一種相當流行的解決方案。
五、 移動賽道
游戲中賽道的雪地板是一個平面網格。我們使用Perlin噪聲算法生成地形高度（例如頂點的Y-坐標）。這種辦法能夠實現隨機但平滑變化的坑洼效果。為了實現自然運動的賽道外觀效果，我們使用了以下技術︰
（1）在每幀中，我們向照相機移動整個地板一小段距離，至于移動速度則基于玩家的操作速度。
（2）程序中，我們會檢查是否地板已經移動到攝影機后面并超過一個預定義的STRIP_WIDTH量。如果是這樣，我們會沿賽道向后重置地板STRIP_WIDTH大小的位置。然后，我們重新計算地形高度——這是通過把Perlin噪聲位置增加到STRIP_WIDTH值大小實現的。
在游戲中，大致效果如下面的截圖所示。
六、 簡化碰撞檢測
在Three.js編程中，你完全可以通過使用Raycasters方法實現非常精確的針對于每一個面的碰撞檢測。有關這一方法，Lee Stemkoski就提供了一個不錯的例子（http://stemkoski.github.io/Three.js/Collision-Detection.html）。然而，這種方法可能代價昂貴，需要針對每一對有可能發生碰撞的對象進行測算。在許多情況下，你完全可以簡化碰撞檢測；辦法是，假設每個對象都是一個球體，那么，只需要簡單地測量這些對象之間的距離即可。
請注意，您可能需要手動調整碰撞距離和碰撞盒位置，從而實現更可玩性的感覺。但是，也有一個問題，就是當掃射的時候玩家可能擊中了關閉相機的對象。針對這一問題的解決辦法是，把玩家射擊盒從鏡頭前移出一點距離。
七、 實現陰影效果
在Three.js編程中，EffectComposer類允許你依次執行多個后處理著色器（post-processing shader）。這種方法需要使用多個脫屏緩沖（off-screen buffer），從而把上一個著色器結果傳遞到下一個。在手機設備上，這種方法給出并不理想的性能表現。解決方法是：把我們編寫的多個著色器合并成一個超級著色器（SuperShader）。當然，實現這一點僅需要把每一個著色器代碼復制并粘貼即可，但還要考慮適當的順序。對于我們的Winter Rust游戲來說，我們把Vignette，Brightness/Contrast和Hue/Saturation著色器結合為一個大的著色器。此外，需注意，有些效果對于移動設備來說GPU消耗太大，最引人注目的是模糊相關技術。
八、 時間控制
在動畫循環方面，我們應使用requestAnimationFrame方法并為動畫應用時間偏移量。這樣可以使動畫速度獨立于游戲幀速率。旅行距離應取決于已經過去實際的時間而不是幀數量。這種技術不會提高你的游戲的FPS值，但如果FPS值實在太低時會提高你的游戲玩家的速度知覺。請參考如下有關代碼：
- //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);
- }
九、 運行于目標設備
一旦你確定了目標設備，那么你會不斷地在這些設備上進行測試并不斷關注FPS值。OS X中的IOS模擬器是一個在桌面開發時調試iOS問題的優秀工具；但要注意，模擬器并不反映實際設備的性能。Adobe的Edge Inspect（https://creative.adobe.com/products/inspect）是另一個優秀的工具，它使你能夠輕松地將多個移動設備連接到本地網頁。當頁面更改時它將自動重新加載該頁面，并且還允許您訪問Android控制臺錯誤。
十、 移動開發的JS庫
本小節給出開發我的游戲時使用的幾個著名的js庫，它們是：
- Three.js：這個不用多說；
- Zepto.js：這是一個jQuery的***替代品，共25K大小，而且在移動設備上速度很快；
- Howler.js：這是一個優秀的聲效庫，它能夠應付多種移動設備的聲音問題；
- TweenLite：使用該庫可以很容易地實現緩動效果，在移動設備上效率不錯。
十一、 哪些設備可以運行WebGL
支持WebGL的設備數量正在快速增長。除了在所有主流的桌面瀏覽器上運行外，現在WebGL內容運行于iOS和Android設備上沒有大的問題。
然而，不是所有的支持WebGL功能的設備都是生而平等的。WebGL是一種要求苛刻的技術，因此在一些相對較舊的設備上運行時建議主要運行一些最基本的內容。例如，iPad 2在2011年推出，它能夠運行WebGL，但能力非常有限。WebGL在近兩年制造的移動設備上通常運行很好。我主要的移動測試設備是一臺第4代iPad（2013年生產）和一臺Nexus 4（2012年生產），這就是一個相對很好的參考基準。
十二、 待改進的地方
建議有興趣的各位朋友，在學習本文提供實例項目過程中可以嘗試向此項目添加以下項︰
- 移動設備上的傾斜控制。我選擇使用點按方式來實現在手機上的傾斜移動，因為這樣可以更匹配桌面體驗。請注意：使用傾斜加速度計可是一種完全不同的控制系統，讀者可另外嘗試一下這種方案。
- 開發發燒友類型的桌面版。因為我想盡量使這個游戲在較慢的設備上也能運行良好，所以我不得不放棄使用一些漂亮的效果和幾何體。因此，在構建桌面版本時使用更豐富的圖形，效果應當更好。
- 使用Android全屏API
- 把程序中使用的HTML菜單技術浮動到WebGL場景上面，也許還可以添加一些漂亮的著色器擺動過渡效果，等等。
十三、 小結
本文簡述了使用Three.js開發一款移動設備3D游戲的要點。***，真誠希望讀者能夠開發出在移動設備上具備良好性能的WegGL游戲產品。
附：本文中實例游戲Winter Rush的下載地址是https://github.com/felixturner/winter-rush。
【51CTO.com獨家譯稿，合作站點轉載請注明來源】
