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场景的，因为我怀疑可能会有一些简单的优化可以让你达到你需要的性能水平。

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

Answer 2

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

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

高性能的WebGL框架

2 个答案: