Three.js - 变形几何和精化三角网格

Question

我试图使用Three.js将一个几何变形为另一个.这是我到目前为止所做的事情(请参阅http://stemkoski.github.io/Three.js/Morph-Geometries.html以获取实例).

我试图从一个小的多面体变形到一个更大的立方体(三角形和居中的中心).动画是通过着色器完成的.较小的多面体上的每个顶点都有两个相关的属性,即最终位置和最终的UV坐标.为了计算每个顶点的最终位置,我从原点通过较小的多面体的每个顶点进行了射线扫描,并找到了与较大立方体的交点.为了计算最终的UV值,我使用了重心坐标和较大立方体相交面顶点的UV值.

这导致了一次不可怕但不是很好的第一次尝试.由于(通常)较大立方体的顶点都不是较小多面体的任何顶点的最终位置,因此缺少立方体表面的大块.接下来我通过添加更多顶点来改进较小的多面体,如下所示:对于较大立方体的每个顶点,我向原点射线,并且每条射线与较小多面体的面相交,我移除了那个三角形面并添加了点交叉点和三个较小的面来替换它.现在变形更好(这是与上面链接的实例),但变形仍然没有填满立方体的整个体积.

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

Answer 1

事实证明,这是一个复杂的问题.在技​​术文献中,我感兴趣的算法有时被称为"地图叠加算法"; 我正在构建的网格有时被称为"超级网格".

我一直在阅读有关此问题的一些有用的工作包括:

• 网格的变形:艺术与概念的现状.
  博士学位.Jindrich Parus的论文
  http://herakles.zcu.cz/~skala/MSc/Diploma_Data/REP_2005_Parus_Jindrich.pdf
  (第4章特别有帮助)

• 计算几何:算法和应用(书)
  Mark de Berg等
  (第2章特别有帮助)

• 多面体对象的形状转换(文章)
  计算机图形学,1992年7月26日,
  作者James R. Kent等人
  http://www.cs.uoi.gr/~fudos/morphing/structural-morphing.pdf

我已经开始编写一系列演示来构建实现上面引用的文献中讨论的算法所需的机器来解决我原来的问题.到目前为止,这些包括:

• 网格的球形投影@ http://stemkoski.github.io/Three.js/Sphere-Project.html
• THREE.Geometry的拓扑数据结构@ http://stemkoski.github.io/Three.js/Topology BEI.html

还有更多工作要做; 我会定期更新这个答案,因为我会取得额外的进展,并且仍然希望其他人可以提供相关信息!