Question

摘要

我目前正在Three.js中创建一个3D平铺六角形板。出于艺术和功能的原因，瓷砖每个都是自己的网格，由基本（不变）几何体组成，其材质中包含生成的地图数组：位移，漫反射，正常。

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

认为它可以解决性能问题，我重新设计了网格只包含30个面孔，整个场景共有6,750个面孔;惊人的改进。我很失望地发现，面部减少86％对性能几乎没有影响。

所以，我决定找到导致性能下降的原因。我建立了一个抽象的测试环境，并使用了一个3x10的平面网格（给它们30个面，就像我自己的模型一样）。我尝试了不同的网格尺寸（网格数）和应用不同复杂度的材料。这是我发现的：

材料测试

// /---------------------------------------------------\
// |      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()使用漫反射+法线+置换贴图时，性能下降了37％

列：

15x15（225 Meshes）是我的基线
20x20（400 Meshes）的性能下降了33％
25x25（625 Meshes）遭遇55％的性能影响

概要

所以我了解到我正在使用的着色器和我正在应用的地图有很大的影响。然而，“事物”的数量会产生更大的影响。我不确定这是面孔，网格还是其他因此我进行了另一次测试。使用我的基线材料（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

Synposis

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

考虑

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

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

在电路板上有200-400个单独的网格并且正在合并，这可能需要超过1000毫秒来处理并导致明显的视觉口吃。
大型效果，例如可能同时“摇晃”或“摇晃”所有瓷砖的效果，将与现在的电路板一样滞后，并且没有理由实施它们。

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

问题

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

Answer 1

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

当然可以。添加顶点属性，该属性是标识顶点所属的平铺的整数。然后，您可以根据您在顶点着色器中计算的任何内容单独移动切片。

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

对于像“摇晃”效果这样的东西，你甚至不需要纹理;只需添加一个给出当前时间的统一变量，并以瓦片索引修改的方式计算抖动。

Answer 2

我开始注意到FPS的减少，因为我添加了更多的纹理贴图......

通常，您希望最小化渲染的状态更改。更改纹理或着色器等内容需要向GPU发送新信息。这不是一个便宜的操作。

您可以尝试的“简单”事情是按材质渲染网格。我使用“简单”，因为如果您在树遍历中渲染网格，则必须重新构建渲染代码以通过材质渲染。

有关优化渲染以最大限度减少状态更改的其他各种方法，请参阅this post from Christer Ericson。

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

摘要

材料测试

行：

列：

概要

面部/网格计数测试

Synposis

考虑

问题

2 个答案: