WebGL 几何交互

Question

我在 WebGL 中有一个动态表面，它在顶点着色器中进行动画处理。我希望其他对象与此表面交互（例如，骑在动态地形上的对象）。最好的方法是什么？所有这些计算都应该在 CPU 上完成吗？有没有办法在 GPU 上计算这些东西？

基本上，我想要的是可以访问其他（已经转换的）顶点的顶点着色器——这将是完美的。

Answer 1

不幸的是，我不确定您是否可以在着色器上执行此操作。我能想到的最接近的是传入第二组属性，但是顶点数必须相同，并且您只能针对具有相同索引的顶点验证一个模型的一个顶点另一个模型（因为您无法遍历所有模型）。不知何故，我认为这不是您要寻找的。​​p>

最好的办法是在 CPU 上实现这些事情（例如碰撞检测）。它在 JavaScript 中非常慢，您需要长时间认真地思考用于场景的最佳算法，但这是我能想到的唯一可行的方法。

使用空间分区是一个好的开始（例如：octree、BSP -- binary space partitioning -- tree）。我还没有做过任何类型的基准测试，但是我预感在大多数 JavaScript 场景中 BSP 树会比八叉树更有效。总体检查通常较少，并且递归可能要少得多。此外，BSP 树为您提供了几乎独特的能力，可以相对于空间中的任意点从后到前或从前到后处理几何图形，而无需不断地对几何图形进行排序和重新排序。 BSP 树的缺点（以及八叉树在较小但仍然不平凡的范围内）是它们的几何形状必须保持静态。也就是说，动态移动单个三角形对这些树的效果并不好，因为几何确实必须重新排序。如果您的网格动画相对简单、轻微且可预测（例如在风中飘扬的旗帜），但如果它们更复杂（例如摇摇欲坠建造或落石），那么这些类型的空间分区可能根本不适合您。

更新：如果您的模型由部分静态和部分动态三角形组成，例如风车（其塔是静态的，鳍是动态的），那么您可以对静态部分使用空间分区，这样如果您只取对动态三角形造成不必要的性能损失，并为那些移动不太多的三角形获得空间分区的好处。

更新：实际上，您可以通过一种方法“有点”至少部分在着色器上执行此操作。具体参考您在动态地形上的对象示例，您可以将该动态地形渲染到屏幕外帧缓冲区，然后将对象的位置绘制到同一帧缓冲区上，并使用 readpixels() 读取地形的高度那个位置。这仅适用于高度图，并且帧缓冲区显然需要在每次地形变化时更新（如果有的话）。然而，这是一种相对简单的方法来查看对象应该在动态地形上定位多高，而无需在 CPU 上自行生成地形。不过，这不是真正的碰撞检测，并且对象仍会受到其他问题的影响（例如，一个轮子在地形之上或之下，一个轮子在半空中）。您可以解决这些问题，但解决方案并不简单，可能涉及对帧缓冲区数据的多次检查。