Three.js - 形态变换几何体和优化三角网格

4
我正在尝试使用Three.js将一个几何体变形为另一个。到目前为止,我已经完成了以下工作(请参见http://stemkoski.github.io/Three.js/Morph-Geometries.html以获得实时示例)。
我试图从一个小的多面体变形为一个更大的立方体(两者都是三角形且居中于原点)。动画是通过着色器完成的。较小多面体上的每个顶点都有两个相关属性:最终位置和最终UV坐标。为了计算每个顶点的最终位置,我从原点穿过每个小多面体的顶点进行了光线投射,并找到了与较大立方体相交的点。为了计算最终的UV值,我使用了重心坐标和较大立方体相交面的顶点处的UV值。
那导致了一个不太好但也不是很差的第一次尝试。由于通常较大立方体的顶点都不是较小多面体的任何顶点的最终位置,因此大块的立方体表面缺失。所以接下来我通过添加更多的顶点来改进较小的多面体:对于较大立方体的每个顶点,我向原点进行射线跟踪,并在每条射线与较小多面体的一个面相交时,删除该三角形面并添加交点和三个较小的面来替换它。现在变形效果更好了(这是上面链接的实时示例),但变形仍然不能填满整个立方体的体积。

我最好的猜测是,除了将较大立方体的顶点投影到较小的多面体上之外,我还需要投影边缘 - 如果 A 和 B 是在较大立方体上由边缘连接的顶点,则应该在较小多面体上连接这些顶点的投影。但是,当然可能会出现投影边缘跨越较小多面体网格中的多个预先存在的三角形,需要添加多个新顶点,重新三角化等操作。看起来我实际上需要的是计算两个三角网格的公共细化的算法。有没有人知道这样的算法和/或描述上述变形(在具有不同三角剖分的两个网格之间)的示例(带有代码)?

1个回答

8
作为一个事实,这是一个复杂的问题。在技术文献中,我感兴趣的算法有时被称为“地图叠加算法”;我正在构建的网格有时被称为“超级网格”。
一些有用的关于这个问题的著作包括:

我已经开始编写一系列演示程序,以构建实现上述文献中讨论的算法所需的机制,以解决我的原始问题。到目前为止,这些包括:

还有更多工作需要完成;我将定期更新此答案,以便在进行额外进展时进行更新,并仍然希望其他人有信息可供贡献!


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接