高性能 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;
};

这里是构建单个 Cube 的函数：

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。