Question

我最近开始玩three.js。注意到即使有几千个简单的立方体，性能也开始下降。

所以这带来了我的主要问题：有没有办法使用three.js实例？我很确定这种性能下降与drawcalls有关，因此如果以某种方式使用three.js进行实例化，它可以帮助支持性能。

我知道缓冲区但是在这一点上我不可能创建一个几何缓冲区，它可以让我在运行时修改单个对象。如果有一个库来处理所有这些，这也算作一个解决方案。

很快，我正在寻找在three.js中等效的对象实例化。任何建议都表示赞赏。

Answer 1

我已经了解可以使用着色器模拟/重新实现实例化。我不确定，但没试过。

这个旧的演示版在GPU上有150k个独立的动画立方体，但是源头已经缩小，所以很难看出发生了什么。也许不是适用于任何网格的适当的实例解决方案，我不确定，甚至可能。 http://alteredqualia.com/three/examples/webgl_cubes.html

我会一直睁大眼睛，因为我们也需要它......（现在已经在演示中添加了树木）

Answer 2

我只想到了一个解决方案，但尚未尝试过。我想实例化非常复杂的网格，并使用骨架对它们进行动画处理。似乎JSON加载器只加载为Geometry G.我想转换为BufferGeometry BG1，而不是生成另一个BufferGeometry BG2。然后将BG2中的顶点属性等的引用分配给BG1

//load mesh
...
var mesh = loadMesh();

//convert to buffer geometry
var BG1 = new BufferGeometry();
BG1.fromGeometry(mesh);

var BG2 = new BufferGeometry();
BG2.addAttribute('position', G1.attributes['position']);
BG2.addAttribute('normal', G1.attributes['normal']);
BG2.addAttribute('uv', G1.attributes['uv']);
BG2.addAttribute('color', G1.attributes['color']);

BG2.drawcalls = BG1.drawcalls;
BG2.boundingBox = BG1.boundingBox;
BG2.boundingSphere = BG1.boundingSphere;

我的理解是webgl将共享这些缓冲区而不是复制VRAM中使用的内存。欢迎提出任何意见。

Answer 3

在尝试绘制成千上万的Spheres时，我有同样的经历。

经过一些研究后，我使用PointCloud对象获得了更好的性能（高达一百万个项目）。基本上，您可以从几何体创建PointCloud对象（可以在此示例中使用raw创建，也可以使用Three.js中现有的一个）和PointCloudMaterial，您可以在其中修改每个项目的属性。

示例如下（添加10分）

var geo = new THREE.Geometry();
var mat = new THREE.PointCloudMaterial({size: 1, color:0xff0000});

//assign different positions to the points
for (var i=0 ; i<10 ; i++){
  var point = new THREE.Vector3(3*i,0,0);
  geo.vertices.push(point);
}

system = new THREE.PointCloud(geo, mat);
scene.add(system);

要修改外观，您可以使用PointCloudMaterial属性，或加载纹理以使每个点获得所需的形状（在您的情况下为立方体）。

如果您分享更多详细信息（例如，为什么需要多维数据集）或某些代码，那么我可能会更有帮助

Three.js实例等效

3 个答案: