Performance 高性能WebGL框架

我有一个大约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;
};

所以我有一个父节点，它有近10000个子节点，因为我不知道如何使用单个对象进行拾取

如果你有任何建议，如何解决这个问题，欢迎你

我还看过scene.js：

---

多达4000个多维数据集性能非常好，但在特定数量的多维数据集（约4100个）下，性能会急剧下降。因此，我想我在这里传递了一些数组大小。

首先，我想说的是，如果您真正关心的是最大性能，那么您可能不需要框架。您选择的框架针对您的具体情况进行优化的可能性很小，如果您已经使用straight WebGL实现了应用程序渲染，那么最好尝试清理您自己的代码，使其更具表现力

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

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

---

我同意Toji的观点，如果你想保持速度，就不应该求助于框架。这就是说，如果你想摆脱所有的WebGL细节，你可以尝试为你包装

---

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

这里的“10.000状态更改”是什么意思？你是说每个渲染循环传递超过10000个三角形永远不够快吗？我想我在自己的项目中遇到了这个问题——但到目前为止，我看到的所有教程都要求每个周期都进行完全的重新招标。你知道有关于其他方法的公开材料吗？ThanksOne例如，状态更改是设置统一或调用绘图。

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;
};