three.js所使用對象

的數量有關的性能比較我最近在WebGL的一個項目，使用JavaScript和3D庫three.js所three.js所使用對象

但是它的性能比較很差，一開始慢，充其量獲得接近好的。

我的比賽對象是：1輛車，6個橙子，161個小甜餅，1個桌子，1把叉子，6支蠟燭。

您可以在賽車遊戲（WASD或方向鍵）中控制賽車，您可以通過賽車運動限制賽道駕駛賽車。該車由幾個three.js幾何形狀（箱，圓環，圓柱體，球體）組成。如果橙子與汽車碰撞，玩家會回到軌道的起點並失去1點生命。
所有的橘子均勻直線移動，如果碰撞，可以殺死汽車。橙色模型由three.js幾何球體和圓柱體組成。
該表格是以xyz座標縮放爲300x1x300的立方體。
每根蠟燭都是一個點光源，其亮度變化會產生閃爍的感覺。
除了6個點光源，還有環境光線和1個定向光源，全部由three.js創建。
作爲類似廣告牌行爲的叉子，旋轉爲始終指向當前活動相機，由飛機表示。
每當橙色達到其軌跡末端並暫時消失，或汽車完成一圈時，就會發生粒子爆炸。
每個爆炸可以有幾個粒子（至少100個），每個粒子是一個非常小的平面與廣告牌般的行爲。
創建爆炸後，其所有粒子將單獨創建並添加到場景中。
每次爆炸也有一段時間以毫秒爲單位生存，通常爲1000.當爆炸到期時，爆炸將從現場移除。
遊戲的所有對象都有自己的紋理，並不是所有的紋理都具有「好」的尺寸，即尺寸爲2的權力（32x32,256x256，1024x1024等）。每個紋理都加載了一個不推薦的方法THREE.ImageUtils.loadTexture（URL）。
一切都是用three.js構建的，從場景，照相機和燈光到網格，幾何形狀和材質。

我注意到，加入這麼多小遊戲後性能急劇下降，所以問題可能源於每幀大量的cheerios渲染。因爲他們都共享相同的模型（一個簡單的紋理簡單的環面），是否有任何方式只使用1個模型的所有cheerios（很像在OpenGL與VS庫）？

如何提高性能？

如果您需要關於此問題的更多具體信息，請告訴我。

來源

2015-12-21 Razraal

將cheerios放在容器對象的內部？我不確定你正在使用的性能的確切問題，但也許你可以通過將它們作爲單個項目對其進行批處理來批量處理一些計算。 –

您是否在使用物理？你怎麼做碰撞。我猜這個問題不是three.js，它是你的碰撞和物理系統。關掉所有的碰撞，看看它是否運行得很快。之後檢查你的粒子系統。 – gman

@gman我目前正在使用蠻力衝突檢查（我們的老師要求某種類型的衝突檢測並提出了AABB算法）。因此，每次我更新遊戲時，我還要檢查所有可能的碰撞，這顯然沒有通過任何更高級的碰撞技術進行優化（遺憾的是，我們並沒有在我們的課程中處理這些事情）。 – Razraal

我會猜測它沿着你所稱的昂貴的（在計算能力方面）three.js方法的次數太多了。我會首先分析你的遊戲，以確定問題是在CPU綁定還是GPU綁定。

除了6個pointlights，還存在環境光以及1 定向光，全部用three.js所創建的。

照明計算每個像素單獨使用昂貴，並且必須爲每個像素完成。考慮削減光源。

每個爆炸可以有幾個粒子（至少100個），每個粒子都是一個非常小的平面，具有類似廣告牌的行爲。

我希望這是通過一個廣告牌粒子系統來完成，而不是作爲單獨的飛機。否則三個js可能會爲每架飛機做一次平局。

來源

2015-12-22 00:41:21

它是作爲單獨的飛機完成的。你能告訴我如何以廣告牌粒子系統的方式做到這一點？ – Razraal

嘗試threejs.org/examples/#webgl_points_dynamic，threejs.org/examples/#webgl_gpu_particle_system –

創建幾何。然後創建cheerios網格。創建網格不要將其與

var globalCheeriosGeometry = new THREE.Geometry(); 
// create 161 cherios meshes and add them to global geometry 
globalCheeriosGeometry.mergeMesh(cheeriosMesh);

添加到現場，但將其合併成幾何參數後這樣你會創建一個包含所有從現場cherios一個幾何體。然後用這個幾何體創建一個網格物體並將其添加到場景中。這將顯着減少來自場景的繪製調用次數。

來源

2015-12-22 08:57:30 kaigorodov

這確實有幫助，它可能是多次實例化相同網格的答案，但看起來程序仍然很慢，很可能由於我實施了粒子爆炸。 – Razraal

至少它有點幫助=） – kaigorodov

three.js所使用對象

回答

相關問題