高性能WebGL框架

我有一個應該使用WebGL呈現的大約108000個三角形的網格。高性能WebGL框架

目前我沒有使用框架，只是純粹的WebGL。我已經通過id映射實現了對象識別功能以及基本的相機操作器。

現在我想切換到WebGL框架的維護問題。

我已經嘗試Three.js，但它是減慢大網格。你知道一個適合大網格的WebGL框架嗎？

編輯：

我嘗試呈現近10000立方節點樹圖，並希望做每一個選擇（總的目標是10萬個立方）。

下面是函數，是建立現場：

BP2011.Treemap.prototype.buildScene = function() { 
    // ... [create scene, camera and lights] 
    var nodesParentNode = new THREE.Object3D(); 
    scene.add(nodesParentNode); 
    var nodes = this._nodes; 
    for(var i = 0; i < nodes.length; i++) { 
    nodesParentNode.add(nodes[i].buildSceneObject()); 
    } 
    this.threejs.nodesParentNode = nodesParentNode; 
};

這裏的功能，即構建一個多維數據集：

BP2011.Treemap.Node.prototype.buildSceneObject = function(buildGeometry, buildMaterial) { 
    // ... 
    if (buildGeometry || (self.sceneObject && self.sceneObject.geometry === undefined)) { 
    // ... [compute cube position and extension] 
    geometry = new THREE.CubeGeometry( 
      maxX - minX, 
      maxY - minY, 
      maxZ - minZ); 
    } else { 
    geometry = this.sceneObject.geometry; 
    } 

    mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({color: 0x4444DD})); 

    mesh.position.x = (maxX + minX)/2; 
    mesh.position.y = (maxY + minY)/2; 
    mesh.position.z = (maxZ + minZ)/2; 

    // testing for performance 
    mesh.matrixAutoUpdate = false; 
    mesh.updateMatrix(); 
    mesh.geometry.__dirtyVertices = true; 
    mesh.geometry.__dirtyElements = true; 

    // backwards reference for handling 
    this.sceneObject = mesh; 
    this.sceneObject.behaviorObject = this; 

    return this.sceneObject; 
};

所以我有近10000子節點父節點，因爲我不知道如何選擇一個物體。

如果您有任何建議，如何解決此問題，歡迎您。

我也已經看過scene.js：多達4000個立方體的表現真的很好，但是在特定數量的立方體（大約4100）下急劇下降。所以我想我通過了一些數組大小。

來源

2012-03-05 Stefan Ramson

首先，我想說，如果你真的關心最高性能，你可能不需要一個框架。您選擇的框架將根據您的確切情況進行優化的機會很渺茫，如果您已經使用直WebGL呈現應用程序，那麼簡單地嘗試並清理自己的代碼以使其更易於呈現可能是一個更好的主意。這就是說，我很難相信Three.js在渲染幾十萬個三角形的時候會變得非常笨拙。（說實話，如果你只有一個型號，那不是那麼多）。我很想知道你是如何構建Three.js場景的，因爲我懷疑可能有一些簡單的優化可以使你達到你需要的性能水平。

如果你還在尋找嘗試其他框架，我不知道他們是如何在速度方面疊加起來，但這些可能是值得一試：

來源

2012-03-05 18:15:56 Toji

謝謝，我編輯了我的問題。 – 2012-03-06 09:20:44

我與東寺同意，如果你想保持速度可達你可能不應該變成一個框架。也就是說，如果你想擺脫所有的WebGL細節，你可以試試http://i-am-glow.com，它爲你包裝。

要渲染10000個對象不是小小的成就 - 你會得到CPU綁定，即使你只是改變了，比方說，每個繪製調用之間的變換矩陣。我認爲10000個狀態變化確實在普通用戶計算機的上限內。嘗試找出在一次調用中繪製多個框的方法，例如，將變換矩陣和它們的ID存儲在您在頂點着色器中進行採樣的浮點紋理中。或者，如果所有框都是靜態的，並且可以合併爲一大塊多邊形，則使用紋理來呈現其ID。

來源

2012-03-09 10:11:21 MikaelEmtinger

這裏「10.000狀態變化」是什麼意思？你是否說每個渲染循環傳遞超過10.000個三角形永遠不夠快？我認爲我在自己的項目中遇到了這個問題 - 但我迄今爲止看到的所有教程都是爲了在每個週期完全重新渲染。你知道有關其他方法的任何已發表材料嗎？謝謝 – virtualnobi 2013-11-20 08:56:52

例如，一種狀態變化是設置統一或調用繪製。 – MikaelEmtinger 2013-11-26 13:42:56

高性能WebGL框架

回答

相關問題