在THREE.js中，如何不使用单独的Mesh对象来改变单个物体的材质？

Question

我们已经使用THREE.js创建了一个PCB查看器，并且现在正计划为其添加一些选择功能。这并非一项艰巨的任务，实际上我已经实现了这一功能，但遇到了性能问题。为了实现PCB各层（形状）的所有特征均可单独点击和选择（选中时颜色会发生变化），我认为每个形状都需要有自己的THREE.js网格，以便我们可以独立控制它们的材质。确实如此，这种方式按预期运行良好，但由于现在不是将同一PCB层上的所有形状合并为一个网格，而是拥有成千上万个网格，自然会导致严重的性能问题。

我明白大量网格会导致性能下降，这是显而易见的事实。不知是否有任何人可以提供一些关于如何更高效地实现这一目标的建议？目前，我们仅需在点击时改变各个形状的颜色。在我修改代码之前，所有形状都在同一个几何体中，属于同一个THREE Mesh。是否有一种方法，能够保持这种较为简单的结构，同时仍然能够分别操作各个形状/对象呢？虽然对我来说这听起来有些牵强，但我在THREE.js方面的经验尚不丰富。

Stephen Canon · Answer

问题的关键不在于网格（meshes）的数量，而在于绘制调用（draw calls）的数量。每次绘制调用都包括一块几何体数据（由THREE.Geometry表示）和一个着色器程序（由THREE.Material表示）。虽然three.js允许在一个网格中使用多个材质，但绘制调用的总数并不会因此减少，所以仅靠这种方法本身并不能解决您的性能问题。

您可能需要的是在没有为每个“对象”创建单独的THREE.Mesh和THREE.Material实例的情况下操作这些概念上的“对象”。例如，如果您知道选中的顶点范围，可以修改该对象的顶点颜色以突出显示它，或者修改顶点位置来移动它。

另外，您也可以为每个对象存储一个原始对象ID作为顶点属性，然后通过自定义着色器材质，在不同的对象上应用特定材质变化。

示例：

https://threejs.org/examples/#webgl_interactive_cubes_gpu

sarnold · Answer

我最终采用了以下解决方案：

我在实际场景中渲染“简单”网格，其中许多对象共享相同的几何体（主要是相同的材质）。
我维护了一个从未真正渲染过的“虚拟场景”，在这个场景上执行射线投射并检查交点。在虚拟场景中，每个独立的对象都有各自的网格。
当我在虚拟场景中找到一个交点时，我会克隆那个网格对象，并将其添加到实际场景中，赋予“选择材质”。同时，我还对其应用一个微小的偏移量，使其比原始对象稍大一些，以防止Z轴冲突（z-fighting）。
当对象被取消选择时，我从实际场景中移除这些选择对象。通过用户自定义属性来识别它们的身份。每个选择对象也包含一个“回溯链接”，指向虚拟场景中其被克隆来源的网格。这样我可以检查是否已经对某个特定对象进行了选择。
为了知道在实际场景中的哪个位置添加我的对象（加入哪个组——我们的树状结构相当复杂），我还在虚拟场景中保留了一个用户自定义属性，该属性通过ID“指向”实际世界中父级对象。如果对象被选中，则会将选择对象添加到这个指定的父级。

希望这个方案能说得通，并且也能帮助到其他人。