optimization - 有没有更有效的方法来渲染大量的单个网格？

Question

概括

我目前正在 Three.js 中创建一个 3D 平铺六角板。出于艺术和功能的原因，每个瓷砖都是自己的网格，由基本(不变)几何体组成，在其 Material 中生成了一组贴图:置换、漫反射、法线。

当我添加更多纹理贴图时，我开始注意到 FPS 降低，这促使我查看源代码。我有一个 15x15 的游戏板，这意味着每帧渲染 225 个单独的网格。由于设计不佳，当时每个网格由 215 个面组成，导致场景中有 48,375 个面。

考虑到它会解决性能问题，我重新设计了网格，使其仅包含 30 个面，整个场景中总共有 6,750 个面；一个惊人的改进。我很失望地发现 86% 的面孔减少对性能几乎没有影响。

因此，我决定找出导致性能下降的确切原因。我建立了一个抽象的测试环境，并使用了一个 3x10 的平面网格(给它们 30 个面，就像我自己的模型一样)。我尝试了不同的网格尺寸(网格数)并应用了不同复杂性的 Material 。这是我发现的:

Material 测试

// /---------------------------------------------------\
// |      Material       |  15x15  |  20x20  |  25x25  |
// |---------------------|---------|---------|---------|------\
// | Flat Lambert Color  |  60FPS  |  48FPS  |  30FPS  | -00% |
// | Lambert Diffuse     |  57FPS  |  41FPS  |  27FPS  | -10% |
// | Blank Shader        |  51FPS  |  37FPS  |  24FPS  | -20% |
// | Full Shader (-H)    |  49FPS  |  32FPS  |  21FPS  | -30% |
// | Full Shader (+H)    |  42FPS  |  28FPS  |  19FPS  | -37% |
// \----------------------------------------------------------/
//                       |   -00%  |   -33%  |   -55%  |
//                       \-----------------------------/

行:

MeshLambertMaterial({color})是我的基线

MeshLambertMaterial({map})遭受大约 10% 的性能损失

ShaderMaterial()使用默认设置遭受大约 20% 的性能损失

ShaderMaterial()使用漫反射贴图遭受了大约 30% 的性能损失

ShaderMaterial()使用 Diffuse+Normal+Displacement 贴图的性能下降了 37%

列:

15x15(225 个网格)是我的基线

20x20 (400 Meshes) 性能下降 33%

25x25 (625 Meshes) 性能下降 55%

概要

所以我了解到我正在使用的着色器和我正在应用的 map 产生了重大影响。然而，“事物”的数量带来了更大的冲击。我不确定这是面部、网格还是其他，所以我又进行了一次测试。使用我的基线 Material ( MeshLambertMaterial({ color: red }))，我决定测试两个变量:边数和网格数。这是我发现的:

面/网格数测试

// 15x15 (225)  Meshes @ 30 Faces =   6,750 Faces   = 60 FPS
// 20x20 (400)  Meshes @ 30 Faces =  12,000 Faces   = 48 FPS
// 25x25 (625)  Meshes @ 30 Faces =  18,750 Faces   = 30 FPS
// 30x30 (900)  Meshes @ 30 Faces =  27,000 Faces   = 25 FPS
// 40x40 (1600) Meshes @ 30 Faces =  48,000 Faces   = 15 FPS
// 50x50 (2500) Meshes @ 30 Faces =  75,000 Faces   = 10 FPS

// 15x15 (225) Meshes @ 100 Faces =  22,500 Faces   = 60 FPS
// 15x15 (225) Meshes @ 400 Faces =  90,000 Faces   = 60 FPS
// 15x15 (225) Meshes @ 900 Faces = 202,500 Faces   = 60 FPS

综合

这似乎非常明确地表明所涉及的面部数量不会对帧速率产生太大影响，如果有的话。相反，被绘制到场景中的单个网格的数量几乎会造成所有的性能拖累。我不确定究竟是什么导致了这种滞后；我想每个网格会有大量的开销。也许可以消除一些这种开销？

注意事项

我已经考虑过合并我的几何图形。这几乎完全消除了帧速率的下降。但是，正如我在本文开头所述，我需要每个图块都可以单独翻译、旋转、可扩展和可修改。据我所知，这对于合并的几何图形是不可能的。

我还考虑过默认为合并几何图形并在调用更改图块的函数时重新创建几何图形/场景。但是，这种方法存在两个问题:

板上有 200-400 个单独的网格并被合并，这可能需要 1000 毫秒以上的时间来处理并导致明显的视觉卡顿。

大型效果，例如可能同时“摇动”或“摆动”所有瓷砖的效果，将与现在的棋盘一样滞后，并且没有理由实现它们。

我希望找到一种解决方案来消除这种性能损失，而不是试图避免它。

题

这让我想到了我的问题:有没有更有效的方法来渲染大量的单个网格？

Answer 1

I have already considered merging my geometries. This does almost completely eliminate the drop in frame rate. However, as I stated in the beginning of this article I need each tile to be individually translatable, rotatable, scalable and otherwise modifiable. To my knowledge, this is not possible with merged geometries.

就是这样。添加一个顶点属性，它是一个整数，用于标识顶点所属的图块。然后，您可以根据可以在顶点着色器中计算的任何内容单独移动图块。

如果您需要每个图块的单独数据，例如转换，您可以将其加载到纹理中并使用图块索引从纹理中查找值 - 您甚至可以安排使纹理看起来像您的(倾斜)副本十六进制网格，便于调试!

对于“摇晃”效果之类的东西，您甚至不需要纹理；只需添加一个给出当前时间的统一变量，并以由瓷砖索引修改的方式计算抖动。