three.js‎ > ‎

モーフターゲット(Morph Target)


モーフターゲットとはThree.jsでアニメーションする方法の1つです。
モーフィング(Morphing)という、人の顔が別の顔(動物など)に変化する映像を見たことがあると思います。
これは写真と写真の間を計算して作る技法です。
それと同じ概念を使います。指定のモデルの動きの中間を計算して、動きがスムーズになります。

問題点としては、そのままの形の座標情報もってますので、ボーンアニメに比べるとファイルサイズが大きくなります。
ただボーンアニメがまだ実験段階ですので、唯一のアニメーション方法ではないだろうか。(テクスチャー使ったちょっとしたアニメーション技法とかいろいろありそうだけど)


単純なアニメーションとして使う場合
  • 3Dアニメーションを連番OBJとして出力する。
  • 連番OBJをThree.jsで読み込めるJSONに変更
  • JSONをローダーで読み込む
  • MorphAnimMeshを使うか、MeshのmorphTargetをいろいろいじる。
  • ループでUpdateする
モーフターゲット自体、複数の状態をミックスできるが、MorphAnimMeshなどでは、単純にターゲットを2つだけに絞って、モーフィングしている。
Three.jsで読めるColladaを出力できるソフトを持っていれば、ColladaLoaderを使うとファイルサイズが縮小できていいかも

サンプルコード

モーフターゲットを使った変形の簡単な例
http://mrdoob.github.com/three.js/examples/webgl_morphtargets.html

モーフターゲットで単純にフレームを表示
http://mrdoob.github.com/three.js/examples/webgl_morphtargets_horse.html

モーフターゲットで顔のアニメーション

読み込みに非常に時間かかるが、MorphAnimMeshを使った実例
http://mrdoob.github.com/three.js/examples/webgl_shading_physical.html

Comments