Javascript 在场景中渲染大量相似但不完全相同的网格

我们有1个几何体附着到场景中的每个网格

var geometry = new three.PlaneGeometry(1, 1, 1, 1),

每样东西都有一个纹理，我们生成并缓存它，为每个对象创建一个新材质和一个网格

this.material = new three.MeshLambertMaterial({
    transparent: true,
    emissive: 0xffffff
});
// get the cached texture
this.material.map = this.getTexture(this.attributes);
this.shape = new three.Mesh(geometry, this.material);

之后，我们将这些形状添加到各种Object3Ds中，以便移动大量形状

这一切在更好的设备和多达5000个圆圈上都非常有效，但随后我们的帧速率开始下降。在较弱的设备上，即使使用100个网格，速度也会显著减慢。我们知道合并几何体可以加快速度；但是，我们只有一个共享的几何体。可以合并网格吗？这有意义吗？注意：这些形状是交互式的（可移动/可单击）。我们的选择是什么

其他注意事项：

---

我们在移动设备上使用Ejecta，它在网格数较低时很好，但在100个网格后就不那么好了。我认为这不是Ejecta的错，而是我们缺乏关于如何优化的知识！而且，即使在桌面上，我们的应用程序也有一些CPU使用量，我们发现这是可疑的。

找到了答案！我们从能够以60fps的速度渲染5k的东西到以40fps的速度渲染100k的东西

我们遵循了大多数人关于合并网格的说法，但需要一些实验才能真正理解发生了什么，并让多种纹理/材质发挥作用

for (var i = 0; i < 100000; i++) {
    // creates a mesh from the geometry and material from the question and returns an object
    circle = ourCircleFactory.create(); 
    circle.shape.updateMatrix();
    sceneGeometry.merge(circle.shape.geometry, circle.shape.matrix, circle.cachedMaterialIndex);
}
var finalMesh = new three.Mesh(sceneGeometry, new THREE.MeshFaceMaterial(cachedMaterials));
scene.add(finalMesh);

for（变量i=0；i<100000；i++）{
//从问题的几何体和材质创建网格，并返回一个对象
circle=ourCircleFactory.create（）；
circle.shape.updateMatrix（）；
场景测量。合并（circle.shape.geometry、circle.shape.matrix、circle.cachedMaterialIndex）；
}
var finalMesh=新的三网格（场景测量法，新的三网格面材质（缓存材质））；
场景。添加（finalMesh）；

该代码将为每个缓存材质创建1个几何体

cachedMaterialIndex

是我们创建用来缓存纹理并指示要使用的材质的东西

此代码可能会为材质和几何体的每个组合创建1个几何体。如果你有5种几何图形，并且它们可以与5种材料互换，那么你将得到25种几何图形。看起来屏幕上有多少对象并不重要。注意：我们得到了5000个几何体的15fps，所以我认为这是一个相当便宜的解决方案