建站
咨詢
售后
建站咨詢
新聞中心
一、 引言
在本文中，我們將使用WebGL技術(shù)來開發(fā)一款移動(dòng)游戲，本游戲能夠以60FPS的幀頻運(yùn)行于移動(dòng)設(shè)備上，此游戲的風(fēng)格類似于Flappy Bird和神廟大逃亡（Temple Run），起名叫Winter Rush。本文著重討論和游戲開發(fā)過程中所使用的WebGL相關(guān)的three.js技術(shù)。
10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有拜泉免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
下圖展示了此游戲開始時(shí)的一個(gè)快照。
游戲過程中，玩家可以使用左向與右向箭頭鍵（或者屏幕上左右點(diǎn)按）來左右移動(dòng)。
二、 為什么60 FPS很重要
幀速率越高，游戲內(nèi)容渲染效果將是越光滑。對于一款游戲產(chǎn)品來說，運(yùn)動(dòng)效果的光滑度和控制的及時(shí)響應(yīng)是尤為重要的。電腦屏幕通常刷新的頻率是60hz，所以這是我們的***的約束。請注意，60幀/秒只是最理想的目標(biāo)，但實(shí)際上任何超過30 FPS的幀速率都有看上去還不錯(cuò)的效果。
Paul Lewis對這一方面展開了深入探討。為此，他開設(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)，我采用了如下方案。
三、 簡化3D場景
幾何體：通過減少網(wǎng)格數(shù)目和每個(gè)網(wǎng)格的頂點(diǎn)數(shù)來簡化場景中的幾何體。切記：“低聚合”永遠(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ì)算場景中每個(gè)幾何面的照明效果上。在場景中燈光越少，則計(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)極富光澤性的外觀效果。在我的測試中，Phong材質(zhì)被證明比Lambert材質(zhì)昂貴得多。例如，在本文提供的實(shí)例中，如果從Lambert材質(zhì)切換到Phong材質(zhì)，在iOS平臺上FPS值會從60降到15。
四、 對象重用
這可能是為實(shí)現(xiàn)高性能web體驗(yàn)應(yīng)遵循的最重要的規(guī)則了。在初始化階段對象創(chuàng)建后，在游戲運(yùn)行期間盡量不要?jiǎng)?chuàng)建新對象。這將避免內(nèi)存“顛簸”——其可能會導(dǎo)致瀏覽器“窒息”。網(wǎng)站http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/
處提供了一篇使用JS對象池方面的極好的文章，你可以參考一下。在本文游戲中，我重用3D對象（例如樹）的方法是：當(dāng)它們位于攝影機(jī)后面時(shí)重置它們的位置。在每一幀中，都會檢查對象是否位于攝像機(jī)之后。如果對象位于攝像機(jī)之后，則把其位置重置于遠(yuǎn)離賽道的地方。另外需要說明的是，在本游戲中，我使用了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）程序中，我們會檢查是否地板已經(jīng)移動(dòng)到攝影機(jī)后面并超過一個(gè)預(yù)定義的STRIP_WIDTH量。如果是這樣，我們會沿賽道向后重置地板STRIP_WIDTH大小的位置。然后，我們重新計(jì)算地形高度——這是通過把Perlin噪聲位置增加到STRIP_WIDTH值大小實(shí)現(xiàn)的。
在游戲中，大致效果如下面的截圖所示。
六、 簡化碰撞檢測
在Three.js編程中，你完全可以通過使用Raycasters方法實(shí)現(xiàn)非常精確的針對于每一個(gè)面的碰撞檢測。有關(guān)這一方法，Lee Stemkoski就提供了一個(gè)不錯(cuò)的例子（http://stemkoski.github.io/Three.js/Collision-Detection.html）。然而，這種方法可能代價(jià)昂貴，需要針對每一對有可能發(fā)生碰撞的對象進(jìn)行測算。在許多情況下，你完全可以簡化碰撞檢測；辦法是，假設(shè)每個(gè)對象都是一個(gè)球體，那么，只需要簡單地測量這些對象之間的距離即可。
請注意，您可能需要手動(dòng)調(diào)整碰撞距離和碰撞盒位置，從而實(shí)現(xiàn)更可玩性的感覺。但是，也有一個(gè)問題，就是當(dāng)掃射的時(shí)候玩家可能擊中了關(guān)閉相機(jī)的對象。針對這一問題的解決辦法是，把玩家射擊盒從鏡頭前移出一點(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è)超級著色器（SuperShader）。當(dāng)然，實(shí)現(xiàn)這一點(diǎn)僅需要把每一個(gè)著色器代碼復(fù)制并粘貼即可，但還要考慮適當(dāng)?shù)捻樞颉τ谖覀兊腤inter Rust游戲來說，我們把Vignette，Brightness/Contrast和Hue/Saturation著色器結(jié)合為一個(gè)大的著色器。此外，需注意，有些效果對于移動(dòng)設(shè)備來說GPU消耗太大，最引人注目的是模糊相關(guān)技術(shù)。
八、 時(shí)間控制
在動(dòng)畫循環(huán)方面，我們應(yīng)使用requestAnimationFrame方法并為動(dòng)畫應(yīng)用時(shí)間偏移量。這樣可以使動(dòng)畫速度獨(dú)立于游戲幀速率。旅行距離應(yīng)取決于已經(jīng)過去實(shí)際的時(shí)間而不是幀數(shù)量。這種技術(shù)不會提高你的游戲的FPS值，但如果FPS值實(shí)在太低時(shí)會提高你的游戲玩家的速度知覺。請參考如下有關(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è)備，那么你會不斷地在這些設(shè)備上進(jìn)行測試并不斷關(guān)注FPS值。OS X中的IOS模擬器是一個(gè)在桌面開發(fā)時(shí)調(diào)試iOS問題的優(yōu)秀工具；但要注意，模擬器并不反映實(shí)際設(shè)備的性能。Adobe的Edge Inspect是另一個(gè)優(yōu)秀的工具，它使你能夠輕松地將多個(gè)移動(dòng)設(shè)備連接到本地網(wǎng)頁。當(dāng)頁面更改時(shí)它將自動(dòng)重新加載該頁面，并且還允許您訪問Android控制臺錯(cuò)誤。
十、 移動(dòng)開發(fā)的JS庫
本小節(jié)給出開發(fā)我的游戲時(shí)使用的幾個(gè)著名的js庫，它們是：
- Three.js：這個(gè)不用多說；
- Zepto.js：這是一個(gè)jQuery的***替代品，共25K大小，而且在移動(dòng)設(shè)備上速度很快；
- Howler.js：這是一個(gè)優(yōu)秀的聲效庫，它能夠應(yīng)付多種移動(dòng)設(shè)備的聲音問題；
- TweenLite：使用該庫可以很容易地實(shí)現(xiàn)緩動(dòng)效果，在移動(dòng)設(shè)備上效率不錯(cuò)。
十一、 哪些設(shè)備可以運(yùn)行WebGL
支持WebGL的設(shè)備數(shù)量正在快速增長。除了在所有主流的桌面瀏覽器上運(yùn)行外，現(xiàn)在WebGL內(nèi)容運(yùn)行于iOS和Android設(shè)備上沒有大的問題。
然而，不是所有的支持WebGL功能的設(shè)備都是生而平等的。WebGL是一種要求苛刻的技術(shù)，因此在一些相對較舊的設(shè)備上運(yùn)行時(shí)建議主要運(yùn)行一些最基本的內(nèi)容。例如，iPad 2在2011年推出，它能夠運(yùn)行WebGL，但能力非常有限。WebGL在近兩年制造的移動(dòng)設(shè)備上通常運(yùn)行很好。我主要的移動(dòng)測試設(shè)備是一臺第4代iPad（2013年生產(chǎn)）和一臺Nexus 4（2012年生產(chǎn)），這就是一個(gè)相對很好的參考基準(zhǔn)。
十二、 待改進(jìn)的地方
建議有興趣的各位朋友，在學(xué)習(xí)本文提供實(shí)例項(xiàng)目過程中可以嘗試向此項(xiàng)目添加以下項(xiàng)︰
- 移動(dòng)設(shè)備上的傾斜控制。我選擇使用點(diǎn)按方式來實(shí)現(xiàn)在手機(jī)上的傾斜移動(dòng)，因?yàn)檫@樣可以更匹配桌面體驗(yàn)。請注意：使用傾斜加速度計(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場景上面，也許還可以添加一些漂亮的著色器擺動(dòng)過渡效果，等等。
十三、 小結(jié)
本文簡述了使用Three.js開發(fā)一款移動(dòng)設(shè)備3D游戲的要點(diǎn)。***，真誠希望讀者能夠開發(fā)出在移動(dòng)設(shè)備上具備良好性能的WegGL游戲產(chǎn)品。
網(wǎng)站標(biāo)題：基于Three.js+WebGL開發(fā)移動(dòng)3D游戲
網(wǎng)站路徑：http://fisionsoft.com.cn/article/dppheii.html
