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

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

转载作者：行者123 更新时间：2023-12-03 15:52:28

25

4

概括

我目前正在 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 毫秒以上的时间来处理并导致明显的视觉卡顿。

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

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

题

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

最佳答案

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.

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

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

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

关于optimization - 有没有更有效的方法来渲染大量的单个网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12848271/

25

4

0

文章推荐： hibernate - 如何避免 HQL 和 Criteria 中不必要的选择和连接

文章推荐： delphi - 如何使用 Indy 的 cookie 来启动 TWebBrowser cookie？

文章推荐： delphi - 关闭后如何释放TFrame

文章推荐： haskell - 在 Haskell 中优化 Perlin 噪声

Ruby 方法() 方法
我想了解 Ruby 方法 methods() 是如何工作的。我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。我也看过 ruby-doc.org，但我没有找到这种方法。
VBS教程：方法-Test 方法
Test 方法对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个
VBS教程：方法-Replace 方法
Replace 方法替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。
VBS教程：方法-Raise 方法
Raise 方法生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为
VBS教程：方法-Execute 方法
Execute 方法对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string
VBS教程：方法-Clear 方法
Clear 方法清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。说明在错误处理后，使用 Clear 显式地清除 Err 对象。此
VBS教程：方法-CopyFile 方法
CopyFile 方法将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选
VBS教程：方法-Copy 方法
Copy 方法将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F
VBS教程：方法-Close 方法
Close 方法关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。说明下面例子举例说明如何使用 Close 方
VBS教程：方法-BuildPath 方法
BuildPath 方法向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称
VBS教程：方法-GetFolder 方法
GetFolder 方法返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy
VBS教程：方法-GetFileName 方法
GetFileName 方法返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为
VBS教程：方法-GetFile 方法
GetFile 方法返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject
VBS教程：方法-GetExtensionName 方法
GetExtensionName 方法返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应
VBS教程：方法-GetDriveName 方法
GetDriveName 方法返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec
VBS教程：方法-GetDrive 方法
GetDrive 方法返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO
VBS教程：方法-GetBaseName 方法
GetBaseName 方法返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必
VBS教程：方法-GetAbsolutePathName 方法
GetAbsolutePathName 方法从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object
VBS教程：方法-FolderExists 方法
FolderExists 方法如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项
VBS教程：方法-FileExists 方法
FileExists 方法如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS

首页

博学

6Ren·AI

商城

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