高性能WebGL框架

Question

我有一个大约有108000个三角形的网格，应该用WebGL渲染。

目前，我没有使用任何框架，只使用纯WebGL。我已经通过id映射实现了对象识别，并使用回调功能和基本的相机操纵器进行拾取。

现在我想切换到WebGL框架来解决维护问题。

我已经尝试过Three.js了，但是它对于大网格来说太慢了。你知道适合大网格的WebGL框架吗？

编辑：

我尝试渲染一个有近10000个立方体节点的树状图，并希望对每个立方体节点进行拾取(总体目标是100000个立方体)。

下面是构建场景的函数：

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个)时，性能会急剧下降。所以我想我在这里传递了一些数组大小。

Answer 1

首先，我想说的是，如果你真的很关心最大的性能，你可能不想要一个框架。您选择的框架针对您的实际情况进行优化的机会很小，如果您已经使用直接的WebGL渲染您的应用程序，那么尝试清理您自己的代码以使其更美观可能是一个更好的想法。

也就是说，我很难相信Three.js会在渲染几十万个三角形时犹豫不决。(老实说，如果你只有一个模型，那就不是那么多了)。我很想知道您是如何构建Three.js场景的，因为我怀疑可能有一些简单的优化可以让您达到所需的性能级别。

如果您仍在尝试其他框架，我不确定它们在速度方面如何，但这些可能值得一看：

• GLGE
• SceneJS
• J3D

Answer 2

我同意Toji的观点，如果你想保持速度，你可能不应该转向框架。也就是说，如果你想摆脱所有的WebGL细节，你可以试试http://i-am-glow.com，它为你包装了这些细节。

渲染10000个对象可不是一件小事--你会受到CPU的限制，即使你只是改变，比方说，每次绘制调用之间的转换矩阵。我认为，对于普通用户的计算机来说，10000次状态更改确实是上限。尝试找出在一次调用中绘制多个长方体的方法，例如，将变换矩阵及其ID存储在浮点纹理中，您可以在顶点着色器中对其进行采样。或者，如果所有长方体都是静态的，并且可以合并为一大块多边形，则使用纹理来渲染它们的ID。