Question

我们有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);

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

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

其他说明：
我们在移动设备上使用Ejecta，它在低网格数量下非常出色，但在100个网格后效果不是很好。我不认为它是Ejecta的错，而是我们缺乏关于如何优化的知识！即使在桌面上，我们的应用程序也有一些我们发现可疑的CPU使用量。

Answer 1

想出来！我们从能够以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);

该代码将为每个缓存材质创建1个几何体。我们创建了cachedMaterialIndex来缓存纹理并指出要使用的材质。

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

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

1 个答案: