合并几何体/网格而不会损失任何收益

11

在three.js中，我们可以简单地合并几何图形以限制绘制调用的数量，从而提高性能。在使用一种材料进行的简单测试中，我可以在GTX660 GPU上以60fps的速度绘制50.000立方体+阴影。如果不合并几何，则5.000个多维数据集已经引起问题。

我想知道如何保留自己渲染每个立方体网格的好处。例如，当所有内容合并为一个几何时，如何选择一个立方体网格？默认情况下，这当然是不可能的。

有什么通用技术可以解决这个问题吗？毕竟，即使合并后，我也确实拥有所有未合并的网格对象。因此，必须有某种方法可以利用它们进行拣选？

three.js

— 用户名
source

我不确定这是否对您有用，但出于完整性考虑，我会提及。Simplygon为独立开发人员提供了一种基于版税的定价模型，并且可以在设计时进行大量的网格合并和分区。

— steeveeet '16

11

好，我知道了。将整个几何合并在一起后，我仍然将单个网格放置在阵列中。因此，即使这些网格甚至都没有渲染，我也可以简单地使用它们进行光线投射。花了我一段时间才意识到这一点。

在此处输入图片说明

这使每次更新的相交测试从50.000降低到〜500。没有八叉树，fps将大幅降低。

您看到的橙色采摘船体实际上是现在渲染的网格物体（+1绘制调用），其材质已更改且尺寸已更改。

在此处输入图片说明

所以我想下一步是实现某种地图分区。也就是说，将合并的几何体分成几部分。原因是合并的几何图形具有大量顶点。这意味着，如果我将地图移出屏幕99％，则图形卡仍必须处理所有顶点，因为几何仍在视图中，至少占其1％。因此，如果将其分解，则仅需要渲染可见的部分。

— 用户名
source

非常感谢您的见解。我一直在尝试找到一种实现此目的的方法，我认为您在这里的解决方案是最出色的！但是，一个简单的问题是：对于您的本地对象列表（即Three.Object3D），rayCaster.intersectObjects（）所需的属性是什么？

— AlvinfromDiaspar 2014年

做得非常好。

— ClassicThunder 2014年

我有一个类似的问题，但是以某种方式无法使用r70进行光线投射。在创建和合并框时，您做了什么特别的事情吗？我使用以下代码（pastebin.com/PStaAF3P）创建和合并节点，但是为了使raycaster正常工作，可能缺少一些东西吗？

— 法哈恩2015年

快速问题：我正在做与您非常相似的事情（基于geoJSON数据的3d地图）。使用您的方法，每当旋转摄像机时，是否还需要旋转预先存在的建筑网格？还是只将单个盒子添加到场景中但不渲染它们？

— 斯宾塞

@Spencer不需要旋转。我将单个盒子保留在全局数组中，仅将合并的几何体添加到场景中。然后，您可以使用全局数组中的对象进行光线投射，因为光线投射器取决于相机矩阵和每个盒子的位置。最有可能不是最好的方法，这对我来说只是概念证明。此时不再执行Three.js。

— user990827 2015年

1

为了进行选择，您还可以将每个多维数据集的ID渲染到另一个渲染目标，然后只需检查光标处的ID值是多少。这样做的好处是，拾取是像素完美的，并且对于更复杂的几何图形也可以有效地工作。

如果所有对象都具有相同的几何形状，则可以使用实例渲染。一个流定义几何，而另一个流定义每个实例的属性（例如，变换）。对于平截头体剔除，您需要根据可见性测试为每个帧构建实例流。如果您有大量物体，则可能需要将这些物体放到松散的八叉树或其他东西中以加快剔除速度。

— 雅克科尔
source

0

我不确定Three.js的细节，但是在普通OpenGL中会想到两个可能的性能消耗：

— Bogglez
source

0

您可以采用的另一种方法是在几何图形中构建一些顶点属性，并将高亮逻辑放入片段着色器中。当您不希望在内存中有两个数据副本时，这将非常有用，并且您将可以更好地控制突出显示的实现方式。

— CS
source