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

【问题标题】：Rendering lots of similar but not identical meshes on scene在场景中渲染许多相似但不相同的网格
【发布时间】：2014-09-25 02:26:09
【问题描述】：

我们有 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 使用量。

【问题讨论】：

标签： javascript three.js webgl

【解决方案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 种几何形状。似乎屏幕上有多少对象并不重要。注意：我们在 5000 个几何图形中获得 15fps，所以我认为这是一个相当便宜的解决方案。

【讨论】：