我最近开始玩three.js。注意到即使有几千个简单的立方体，性能也会开始下降。
所以这带来了我的主要问题：有没有办法使用 three.js 进行实例化？我很确定这种性能下降与绘制调用有关，因此如果可以使用 three.js 以某种方式进行实例化，它可以帮助支持性能。
我知道缓冲区，但在这一点上，我不可能创建一个几何缓冲区，让我能够在运行时修改单个对象。如果有一个库来处理这一切，这也算是一种解决方案。
简而言之，我正在三个.js 中寻找与 object instancing 等效的功能。任何建议表示赞赏。
【问题讨论】：
标签： three.js
我知道可以使用着色器模拟/重新实现实例化。不确定也没有尝试过。
顺便说一句，这个旧的演示在 GPU 上有 150k 个单独的动画立方体，但是源被缩小了，所以很难看到发生了什么。也许不是一个适用于任何网格的适当的实例化解决方案，我不确定，甚至可能是。 http://alteredqualia.com/three/examples/webgl_cubes.html
我认为我们也需要它，因此会密切关注这一点。（现在已在演示中为 vizicities 添加了树）
【讨论】：
我只是想出了一个解决方案，还没有尝试过。我想实例化非常复杂的网格并使用骨架为它们设置动画。似乎 JSON 加载器仅加载为几何 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 中使用的内存。欢迎任何cmets。
【讨论】：
在尝试绘制数千个球体时，我也有同样的经历。
经过一些研究，我使用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 现在支持通过 InstancedMesh 进行实例化 https://threejs.org/docs/?q=instancedmesh#api/en/objects/InstancedMesh
请参见此处的示例： https://threejs.org/examples/webgl_buffergeometry_instancing.html
【讨论】：