Three.js を使用して、あるジオメトリを別のジオメトリにモーフィングしようとしています。これまでに行ったことを次に示します (実際の例については、 http://stemkoski.github.io/Three.js/Morph-Geometries.htmlを参照してください)。
小さな多面体から大きな立方体 (三角形分割され、原点を中心とする) に変形しようとしています。アニメーションはシェーダーを介して行われます。小さい多面体の各頂点には、最終位置と最終 UV 座標という 2 つの関連付けられた属性があります。各頂点の最終的な位置を計算するために、原点から小さい方の多面体の各頂点をレイキャストし、大きい方の立方体との交点を見つけました。最終的な UV 値を計算するために、重心座標と、大きな立方体の交差面の頂点での UV 値を使用しました。
それはひどいものではありませんが、素晴らしいものではない最初の試みにつながりました。(通常) 大きな立方体のどの頂点も、小さな多面体のどの頂点の最終位置でもなかったため、立方体の表面の大きなチャンクが欠落していました。次に、次のように頂点を追加して、小さな多面体を改良しました。大きな立方体の各頂点について、原点に向かってレイキャストし、各光線が小さな多面体の面と交差する場所で、その三角形の面を削除し、点を追加しました。交点とそれを置き換える 3 つの小さな面。これでモーフは改善されましたが (これは上記にリンクされた実際の例です)、モーフはまだ立方体のボリューム全体を埋めていません。
私の最善の推測は、大きな立方体の頂点を小さな多面体に投影することに加えて、エッジも投影する必要があるということです.AとBが大きな立方体のエッジで接続された頂点である場合、これらの頂点の投影より小さな多面体でもエッジで接続する必要があります。しかし、もちろん、投影されたエッジが小さい多面体のメッシュ内の複数の既存の三角形をまたぐ可能性があり、複数の新しい頂点の追加、再三角形化などが必要になります。実際に必要なのはアルゴリズムのようです2 つの三角形メッシュの共通の改良を計算します。上記のようなモーフィング (異なる三角形化を持つ 2 つのメッシュ間) のアルゴリズムや例 (コード付き) を知っている人はいますか?