高性能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框架

回答

相关问题