performance - 高性能 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