javascript - 在场景中渲染许多相似但不相同的网格

Question

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

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

一切都有我们生成和缓存的纹理，以便为每个对象创建新 Material 和网格。

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

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

这一切在更好的设备和多达 5000 个圈子上都运行良好，但随后我们的帧率开始下降。在较弱的设备上，即使有 100 个网格，这也会非常慢。我们知道合并几何可以加快速度；但是，我们只有一个共享的几何体。是否可以合并网格？这有意义吗？注意:这些形状是交互式的(可移动/可点击)。我们有哪些选择？

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

Answer 1

想通了!我们从能够以 60fps 渲染 5000 个东西到以大约 40fps 渲染 100000 个东西。

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

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

该代码将为每个缓存 Material 创建 1 个几何体。 cachedMaterialIndex 是我们创建的用于缓存纹理并指示要使用的 Material 的东西。

此代码很可能会为每个 Material 和几何体组合创建 1 个几何体。 EG:如果您有 5 个几何体并且它们可以与 5 种 Material 互换，那么您将获得 25 个几何体。屏幕上有多少对象似乎并不重要。注意:我们使用 5000 个几何图形获得 15fps，所以我认为这是一个相当便宜的解决方案。