日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
基于Three.js+WebGL開發(fā)移動3D游戲

一、  引言

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

10年積累的成都網(wǎng)站設(shè)計、成都做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有拜泉免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

下圖展示了此游戲開始時的一個快照。

游戲過程中，玩家可以使用左向與右向箭頭鍵（或者屏幕上左右點按）來左右移動。

二、  為什么60 FPS很重要

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

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

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

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

三、  簡化3D場景

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

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

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

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

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

四、  對象重用

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

五、  移動賽道

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

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

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

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

六、  簡化碰撞檢測

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

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

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

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

八、  時間控制

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

 
 
 
 
    
  
  
  
  
  1. //kick off animation
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. var clock = new THREE.Clock();
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. clock.start();
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. gameLoop();
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. function gameLoop(){
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     requestAnimationFrame(gameLoop );
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     var delta = clock.getDelta();
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.     //use delta to determine all distances travelled
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.     movePlayer(MOVE_SPEED * delta);
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. }
    20.

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

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

十、  移動開發(fā)的JS庫

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

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

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

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

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

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

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

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

十三、  小結(jié)

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


文章標(biāo)題：基于Three.js+WebGL開發(fā)移動3D游戲
網(wǎng)址分享：http://www.dlmjj.cn/article/dppheii.html