6

概括

我目前正在 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()使用 Diffuse+Normal+Displacement 贴图的性能下降了 37%

列：

  • 15x15 (225 Meshes) 是我的基线
  • 20x20 (400 Meshes) 性能下降 33%
  • 25x25（625 个网格）的性能下降了 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

提要

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

注意事项

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

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

  1. 板上有 200-400 个单独的网格并被合并，这可能需要 1000 毫秒以上的时间来处理并导致明显的视觉卡顿。
  2. 大型效果，例如可能同时“摇晃”或“摆动”所有瓷砖的效果，将与现在的棋盘一样滞后，并且没有理由实施它们。

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

问题

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

4

2 回答 2

5

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

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

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

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

于 2012-10-12T00:55:15.133 回答
1

当我添加更多纹理贴图时，我开始注意到 FPS 降低了……

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

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

请参阅Christer Ericson 的这篇文章，了解可以优化渲染以最小化状态变化的其他各种方法。

于 2012-10-11T23:57:03.363 回答