2010年07月

2010年07月30日

Compositeのトラッカーを調べてみた その5 Composite 2011

日々更新の時間が遅れております・・・。

さて、トラッカーを使ってもなかなかうまくトラッキング出来なくてキレながら1フレームずつ手動トラッキングするのは良くある事・・・orz

そこで改善出来る道は無いかと思って以下のことをやってみたのでご報告。とは言えテストに使ったのは下のようなCG画像なのであまり役に立つかはわからない(汗)

fig01

この側面に画像を貼り付けたいので、側面の4点をトラッキングしようと思ったんだけど、動く物体の縁の場合、背景の画像が大きく変化するためにトラッキングがうまく働かない。

そこでToolsメニューからKeyerカテゴリのKeyerをトラッキングしたいフッテージに接続した。プレイヤーの表示はToolOutputにしておいてね(プレイヤー上のゲートメニューを下に抜けるとToolUIに出てくるよ)

fig02

Keyerのサンプルカラーをクリックして、

fig03

カラーを抜きたい部分をクリックする。

fig04

このままだとアバウトに抜けるだけなので、抜きたくないのに抜けかけている部分をクリックする。

fig05

するとキーのリファインスライダが出てくるので、これを調整して抜きたくない部分が抜けないようにする。

fig06

こんな感じ。

fig07

さらに場面を変えながら抜けを確認してみたらさらにコンテナの上が抜けていたので修正

fig08

こんな感じ。

fig09

アルファがどんな感じになってるかを確認するためにCleanupAlphaに切り替えてみると、

fig10

まあまあ抜けたかな。Cleanupの画面ではグラフでアルファのコントラスト調整が出来るので、エッジがうまく出るように調整する。

fig11

このほかエッジ調整やパスアニメーションを使ったガベッジマスクなんかも使える。

これで目的の部分を残して全部消せたんだけど、どうもトラッカーはアルファチャンネルにうまく反応してくれないようなので、ToolsのImageGenerationのColorSourceと、CompositionのBlend&Compをコンポジットに追加して、下のように組み立てて、アルファで抜けた部分に白いプレーンを表示させることにした。Keyerはアルファチャンネルのみ出力している真ん中の部分をBlend&CompのMaskingにつなぎ、ColorSourceはBlend&CompのFrontに繋いでいるよ。たぶんKeyerだけで同じ事が出来る気がするんだけど調べ切れなかった。おそらくKeyerのグループを開けば・・・なんじゃこりゃ!

fig12

そしてColorSourceの方のサイズをキーイングしたフッテージと同じサイズにして、色を白にした。

fig13

そしてBlend&CompのMaskingタブでInvertをONにして、キーングしてアルファになっている部分を反転して、白い画像をキーでくり貫いた。

fig14

これがその結果。

fig15

ここまでくればトラッキングは自動でもかなり楽勝で追従してくれる。この出力をTrackerに繋いでコーナー4つをトラッキングしてみた。

fig16

ノイズの少ないCGがソースってこともあるけど、とにかくトラッカーの気持ちになってトラッキングしやすい画像を作ってやるのは結構効果的かも。

今回はサンプルデータがでかすぎてアップできないので、5コマだけアップしておいたよ。これでも試すことは出来るはず・・・。

それではまた来週。

maxまとめページ 



take_z_ultima at 13:58|この記事のURLComments(0)TrackBack(0)Composite | 3ds Max

2010年07月29日

modoからFLASHへ書き出してみた その17 modo 401 SP4 ActionScript 3.0

急に涼しくなったら何か朦朧として眠い・・・zzz

さて、PaperVision3Dもペアレントまで調べたのでそろそろアニメーションにも手をつけようと思ってソースを眺めていたら、animationのパッケージがすぐ見つかって、探って行ったらAnimationController(org.papervision3d.core.controller.AnimationController )を組み込めば簡単にアニメーション出来そうな感じだ。そこで探り探り前回作ったクレーンのモデルにアニメーションの仕組みを組み込んでみることにした。

まず、このモデルで稼動するのはアームの上下方向の回転と本体の旋回方向の回転だけだ。これらの各フレームでの角度をアニメーションのデータとして何かの形でどこかに格納しなくちゃならない。
AnimationControllerのソースを読んで行くと、どうやら動きのデータはクリップ(org.papervision3d.core.animation.clip.AnimationClip3D)というモーションデータのかたまりか、チャンネル(org.papervision3d.core.animation.channel.Channel3D)というアニメーションさせるプロパティの個別のデータかのどっちかで扱うようになっているようだ。まあいきなりクリップはハードルが高いので、今回はチャンネルを定義することでクレーンを動かしてみることにした。そこで設定したのがアームを上下させるLIFTチャンネルと全体を旋回させるTURNチャンネルだ。チャンネルは複数のカーブデータ(org.papervision3d.core.animation.curve.Curve3D)が格納出来て、時間経過に対して値がどう変化するかを表現出来る。そのカーブデータは複数のキーデータ(org.papervision3d.core.animation.key.CurveKey3D)で出来ていて、org.papervision3d.core.animation.keyパッケージを見ると、ベジェ、線形、ステップなどのキー形式が使える。このあたりはCGのグラフ編集ではおなじみの話だね。

以上の道具を使って0秒の時点で角度0度、1秒の時点で角度120度、2秒のところで角度0度になるベジェカーブデータを持ったチャンネルを作成するには、

   var curve:Curve3D=new Curve3D( );
   curve.addKey(new BezierCurveKey3D(0,0));
   curve.addKey(new BezierCurveKey3D(1,120));
   curve.addKey(new BezierCurveKey3D(2,0));
   var channel:Channel3D=new Channel3D( );
   channel.addCurve(curve);

とやればいいみたいだ。addCurve( )でわかる通り、チャンネルには複数のカーブが格納出来、追加した順に配列に格納される。このチャンネルをAnimationControllerに格納するには、

var _animation:AnimationController=new AnimationController();

        :

_animation.addChannel(channel);

でOKだ。このaddChannel( )メソッドには現在登録されている全チャンネルのキーの時間範囲を調べてアニメーションのスタート時刻と終了時刻を自動的に設定する機能も付いている。

こうやって作ったカーブとそれを追加するために作ってアニメーションコントローラに追加したチャンネルはどちらも追加順に配列に格納されるだけなので、追加した順番を覚えておかないと、わけのわからない事になるから注意が必要だよ。名前くらい付けられるといいんだけどね。

チャンネルとカーブデータがAnimationControllerに設定されて、AnimationControllerのplay( )メソッドを実行すると、経過時間を見ながらイベント(org.papervision3d.events.AnimationEvent)を発生する事が出来るようになる。ただ、その仕組みを動かすには、AnimationControllerのupdate( )メソッドを定期的に実行する必要がある。このへんの仕組みはどうなっているのかまだ把握出来ていないので、とりあえずMainクラスのEvent.ENTER_FRAMEイベントで、フレームが更新されるたびに呼び出すようにしてみた。

あとはAnimationControllerから発生するイベントを捉えてモデルのプロパティーを変更するイベントハンドラを定義して、それをリスナ登録してやればOKだ。例えばNEXT_FRAMEイベントに以下のようなハンドラを作って

  private function next_frame(e:AnimationEvent){
   if(_animation.numChannels!=0){
    var ch:Channel3D=_animation.channels[0];
    ch.update(e.time);
    body.rotationY=ch.output[0];
    ch =_animation.channels[1];
    ch.update(e.time);
    arm.rotationZ=ch.output[0];
   }
  }

登録するには、

_animation.addEventListener(AnimationEvent.NEXT_FRAME,next_frame);

としてやればいい。ハンドラに渡されるイベントオブジェクトにはアニメーションさせるための時刻timeプロパティが入っているのでこれを使ってチャンネルに対して

ch.update(e.time);

としてやると、その時刻でのチャンネルの値がカーブを登録した順にoutputプロパティに出力され、その値をアニメーションさせたいモデルのプロパティに設定してやれば(カーブは1つしか登録していないのでoutput配列の最初にそのカーブの値が格納されるからそれを取り出すのにoutput[0]としているよ)、

body.rotationY=ch.output[0];

カーブで定義されたアニメーションの現在時刻での状態が再現できるわけだ。

そんな仕組みで作ったのが下のコード(Crane.as)だ。

package  {
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.core.animation.IAnimationProvider;
 import org.papervision3d.core.controller.AnimationController;
 import org.papervision3d.core.geom.TriangleMesh3D;
 import org.papervision3d.core.proto.MaterialObject3D;
 import org.papervision3d.events.AnimationEvent;
 import org.papervision3d.core.animation.channel.Channel3D;
 import org.papervision3d.core.animation.curve.Curve3D;
 import org.papervision3d.core.animation.key.BezierCurveKey3D; 

 public class Crane extends DisplayObject3D{
  public static const TURN:int = 0;
  public static const LIFT:int = 1;
  var base:TriangleMesh3D;
  var body:TriangleMesh3D;
  var arm:TriangleMesh3D;
  var _animation:AnimationController;
  public function Crane(material:MaterialObject3D=null) {
   base=new Base(material);
   body=new Body(material);
   arm=new Arm(material);
   body.addChild(arm);
   base.addChild(body);
   this.addChild(base);
   arm.x=0.095;
   arm.y=0.564;
   body.y=0.182;
   _animation=new AnimationController();
   //Body Turn channel
   var ch:Channel3D=new Channel3D();
   var curve:Curve3D=new Curve3D();
   curve.addKey(new BezierCurveKey3D(0,0));
   curve.addKey(new BezierCurveKey3D(1,120));
   curve.addKey(new BezierCurveKey3D(2,0));
   ch.addCurve(curve);
   _animation.addChannel(ch);

   //Arm Lift channel
   ch=new Channel3D();
   curve=new Curve3D();
   curve.addKey(new BezierCurveKey3D(0,0));
   curve.addKey(new BezierCurveKey3D(0.5,30));
   curve.addKey(new BezierCurveKey3D(1,0));
   ch.addCurve(curve);
   _animation.addChannel(ch);

   _animation.addEventListener(AnimationEvent.START,start_anim);
   _animation.addEventListener(AnimationEvent.NEXT_FRAME,next_frame);
   _animation.addEventListener(AnimationEvent.COMPLETE,complete_anim);
  }
  
  public function update(){
   _animation.update();
  }
  
  public function play(){
   _animation.play();
  }
  private function start_anim(e:AnimationEvent){

  }
  private function next_frame(e:AnimationEvent){
   if(_animation.numChannels!=0){
    var ch:Channel3D=_animation.channels[TURN];
    ch.update(e.time);
    body.rotationY=ch.output[0];
    ch =_animation.channels[LIFT];
    ch.update(e.time);
    arm.rotationZ=ch.output[0];
   }
  }
  private function complete_anim(e:AnimationEvent){

  }
 }
}

そしてこれをシーンに登録して動かすMainコードがこれ。基本的にクレーンのインスタンスを作ってplayメソッドを実行し、定期的にupdateメソッドを実行しているだけだ。

package  {
 import org.papervision3d.view.BasicView;
 import org.papervision3d.objects.primitives.Sphere;
 import flash.events.Event;
 import org.papervision3d.objects.primitives.Plane;
 import org.papervision3d.core.geom.renderables.Vertex3D;
 import flash.display.DisplayObject;
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.core.geom.TriangleMesh3D;
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.lights.PointLight3D;
 import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
 import org.papervision3d.materials.shadematerials.PhongMaterial;
 


 public class Main extends BasicView{
  var crane:Crane;
  public function Main() {

   var light:PointLight3D=new PointLight3D(true,false);
   var material:FlatShadeMaterial=new FlatShadeMaterial(light,0xffffff,0x111111,50);
   light.x=2;
   light.z=-2;
   light.y=2;
   crane=new Crane(material);
   scene.addChild(crane);
   var ct:DisplayObject3D=new DisplayObject3D();
   camera.x=1.2;
   camera.y=1.5;
   camera.z=-7;
   ct.y=1.6;
   camera.target=ct;
   startRendering();
   crane.play();
   addEventListener(Event.ENTER_FRAME,loop);
  }
  
  private function loop(e:Event){
   crane.update();
  }
 }
}

なんとか動くようになったけど、チャンネル1つにカーブを2つ登録してもいいわけで、このあたりはどう扱うのが正解なのかな?

それではまた次回。

modoカテゴリー別ページ



take_z_ultima at 13:29|この記事のURLComments(0)TrackBack(0)modo | FLASH

2010年07月28日

Compositeのトラッカーを調べてみた その4 Composite 2011

暑くてパソコンの電源を入れるのも辛くなってきた・・・。

さて、前回は2D Transform toolを使って2Pointトラッキングをやってみた。今回はReaction Toolを使ってみたい。

まずは前提として前回同様Trackerがハートとクラウドのマークをトラッキングしている状態にしといてね。アナライザにはそれぞれHeart、Cloudと名前を付けるのも前回同様だ。

fig04

そして中ボタンを押してゲートメニューを出して、これを右に抜けてToolsメニューを出し、そこからReactionを選んで、下のToolメニューからReactionをスケマティックビューにドラッグ&ドロップして、このように接続した。

fig01

次にTool UIのReactionタブで、タイプメニューから「Plane」を選んで「Create」ボタンを押してレイヤーをひとつ作る。

fig02

Reactionツールにレイヤー1の入力ポイントが現れるので、これにArrowを接続する。

fig03

これで背景にfig01_のハートとクラウドのムビーフッテージが表示され、その上に平面(Plane)に貼り付けられたArrowフッテージが現れ、それがカメラで撮影されたものがOutputに出力される。

fig04

次にプレイヤービューで中ボタンを押してゲートメニューを出して下に抜けて、

fig05

ToolUIのDisplayタブで「Tool Output」を選ぶ。これで選択中のツールの出力がプレイヤーに表示されるようになる。こうしておかないと、リアクションツールの移動や回転の時に表示されるギズモがプレイヤーに表示されないので注意が必要だ。

fig06

これでスケマティックビューでReactionツールを選んでToolUIで先に追加したレイヤーを選択すると、レイヤーのPosition・Rotation・Scale・Pivotの欄が出てくる。そしてレイヤーの右側に縦に並ぶ移動・回転・スケールの3つのボタンによってプレイヤービューにそれに対応するギズモが表示されて、そのギズモを操作する事によって3次元的にレイヤーを操作できるようになる。下の画像は移動ツールがONになっている。

fig07

このままこのレイヤーにトラッカーからの情報をインプットしたいところだけど、回転方向にオフセットを与えたりしたいので、ローカル座標系をひとつ追加して、レイヤーをそのローカル座標にペアレントする。

スケマティックビューのReactionツールを右クリックして、ポップアップメニューからEditを選択する(またはツールをダブルクリックすればいいんだけど、なかなかうまく反応してくれないので素直にメニューから選んだ方が早い)。

fig08

これでスケマティックビューはグループ編集モードに切り替わる。リアクション内部のスケマティックビューの表示だ。

fig09

ToolUIのAxesタブで、「Add」ボタンを押してローカル座標を1つ追加する(または、中ボタンを押してゲートメニューを出して右に抜けてToolsメニューからReactionを選ぶと、下のToolメニューの中にAxisが出てくるので、これをドラッグ&ドロップで挿入してもOK)。そしてLayer(1)からAxis(1)に接続する。

fig10

これでAxisのローカル座標の上にLayerが乗る形でペアレントされる。

fig11

このAxisを選択したままToolUIのPositionのラベルを右クリックし、TrackPositionを選択する。ToolUIにこの表示が出ない時はAxesタブの一番左にあるAxesリストに追加されたAxis(1)をクリックしてみてね。

fig12

TrackerSelectorパネルでHeartを選択し、UseOffsetをONにしてCopyボタンを押す。これでハートマークと矢印が重なって動くようになる。

fig13

同様にRotationのZの値を右クリックして「Track Rotation」を選択する。

fig15

Tracker SelectorパネルでHeart、CloudをCTRLを押しながらクリックし、2つを選択状態にしてCopyボタンを押す。これでビューポートに対して垂直な軸まわりの回転をトラッカーの2つの点から取得して、矢印が回転するようになる。

fig16

これを再生してみるとこんな感じ。ハートマークに重なって赤い矢印が回転しながらアニメーションしている。

fig14

今度はスケマティックビューでLayer(1)を選択してToolUIのReactionタブを表示させ、PivotのY座標を−50にして基点を下方向に50移動して矢印の下に基点が来るようにする。そしてPositionのYに50を入力して矢印を上に50移動して、基点がハートの中心に来るようにする。そしてScaleのY値を右クリックして、「Track Scale Y」を選択して、これもHeartとCloudの両方をCTRLを押しながら選択し、Copyを押してハートとクラウドのフレーム1での距離を基準としたスケーリング値をScale Yに割り当てる。

fig17

これでハートの中心を基点として、スケーリングと回転が行われるようになる。

次に回転ツールボタンをONにしてプレイヤー上の回転ギズモをドラッグするか、RotationのZ値を−44程度に設定して矢印をクラウドマーク方向に向ける。

fig18

再びスケマティックビューでAxisを選択して、Scaleの下のLinkをONにしてからScaleのXYZの値のうちのひとつを4にする。LinkがONになっているので3つの値ともに4になり、矢印の大きさが4倍になる。

fig19

今のところ矢印はハートとクラウドの距離によって伸びたり縮んだりするアニメーションが付いているけど幅方向のスケールはアニメーションしていない。そこで幅の方は長さ方向のスケールの変化を数式で変換して作ってやることにする。
再びスケマティックビューでLayer(1)を選択してLayer(1)に戻り、ScaleのX値を右クリックして「Set Expression」を選択する。

fig20

Expression Calculatorが出たら

0.7/

と入力する。

fig21

ScaleのYの値を右クリックし、「Copy Path」を選択する。こうするとExpressionに入力するパラメータのパス名をクリップボードに取得出来る。

fig22

先に入力した0.7/の後ろでクリックして挿入ポイントを一番後ろに持って来て、CTRL+Vを押して先にクリップボードに取得したLayer(1)のScale Yのパスを入力する。式が入力し終わったらApplyを押して適用する。

fig23

これで0.7をScaleYの値で割った数値がScaleXにセットされるようになり、ScaleYの値が大きくなればScaleXの値が小さくなり、ScaleYが小さくなればScaleXの値が小さくなるような関係がセットされた。0.7という値は初期状態の矢印の縦の長さに対する横の長さの比だ。だから数値を小さくするほど矢印は細くなるよ。

これでセットアップは終了したので再生してみるとこのようになる。矢印が伸びると細くなり、縮むと太くなるのがわかる。

fig25


ちなみに先にグループ編集モードに切り替えたスケマティックビューを元に戻すには、スケマティックビューをダブルクリックするか、右クリックして「Exit Group」を選べばOKだ。

fig24

それではまた次回。

maxまとめページ 



take_z_ultima at 11:30|この記事のURLComments(0)TrackBack(0)3ds Max | Composite

2010年07月27日

modoからFLASHへ書き出してみた その16 modo 401 SP4 ActionScript 3.0

前回作ったモーファーだけどPapervision3Dの中をあちこち見ていたら、org.papervision3d.core.controller.MorphControllerというのを見つけた。ウーム、これ使った方がいいのかな?

さて、PaperVision3Dの提供するDisplayObjectContainer3Dクラスを継承しているクラスはペアレント設定が出来る。modoから書き出したクラスはTriangleMesh3Dを継承していて、その親の親のそのまた親のクラスがDisplayObjectContainer3Dだから当然これもペアレントできる。

この機能を使うのはとても簡単で、ペアレントしたい親のオブジェクトのaddChild( )メソッドに子のオブジェクトを渡してやればいいだけだ。

でもその前に、PaperVision3Dのデフォルトの座標系とmodoの座標系は左手系・右手系の違いがあって、座標値をそのまま持ってくると裏返っちゃうので、前回まで使っていたExportPapervision3D.pyはX軸方向を反転して書き出していた。

fig06


でもちょっとやっぱり不自然なので今回からはZ軸を反転する事にしたよ。Plane.asなどのソースコードを読むと、org.Papervision3D.useRIGHTHANDEDってプロパティがあって、これをtrueにすると右手系になったりするみたいだけど、なるべくならデフォルトの状態で使いたいよね。でもそのせいでZ軸座標値とX・Y軸回転角度を符号反転して使わなくちゃならない。そこはまあいろんなCGソフトを使えばよくある事ではあるけどね。

例えば次の3つのアイテムを作って(黄色い点が中心点)、

Base

fig03

Body

fig04

Arm

fig05

fig02
これらのペアレント関係を左のようにして、
各アイテムをこんな感じに配置するとクレーン風のオブジェが出来る。

fig01

これをFlash上で再現するために、各アイテムをExportPapervision3D.pyでBase.as、Body.as、Arm.asで書き出し、Main.asと同じフォルダに入れておく。

次に各アイテムを収めるための変数をTriangleMesh3D型で用意して

  var base:TriangleMesh3D;
  var body:TriangleMesh3D;
  var arm:TriangleMesh3D;

それぞれの変数にアイテムパーツのインスタンスを生成して割り当て、

  base=new Base();
  body=new Body();
  arm=new Arm();

armはbodyにペアレントし、bodyはbaseにペアレントし、baseはsceneにペアレントして、

  body.addChild(arm);
  base.addChild(body);
  scene.addChild(base);

各アイテムの位置はmodoの各アイテムのトランスフォームプロパティをもとにarmの基点はbodyの基点に対してbodyのローカル座標で(0.095,0.564,0.0)の位置に、bodyはbaseのローカル座標で(0,0.182,0)の位置に設定する(Z座標値は全部ゼロだから符号反転を気にする必要が無いなw)。

  arm.x=0.095;
  arm.y=0.564;
  body.y=0.182;

このようにして組み立ててみたのが下のFLASHムービーだ。フレームイベントでbodyとarmの角度を変えてみている。

Adobe Flash Player を取得

これがMain.asのソース。今回はポイントライトを1灯つけてフラットシェードマテリアルを付けてみた。動きにあわせて陰影が変化しているのがその効果だ。

package  {
 import org.papervision3d.view.BasicView;
 import org.papervision3d.objects.primitives.Sphere;
 import flash.events.Event;
 import org.papervision3d.objects.primitives.Plane;
 import org.papervision3d.core.geom.renderables.Vertex3D;
 import flash.display.DisplayObject;
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.core.geom.TriangleMesh3D;
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.lights.PointLight3D;
 import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
 import org.papervision3d.materials.shadematerials.PhongMaterial;
 
 public class Main extends BasicView{
  var base:TriangleMesh3D;
  var body:TriangleMesh3D;
  var arm:TriangleMesh3D;
  private var offset:Number=0.0;
  public function Main() {
   var light:PointLight3D=new PointLight3D(true,false);
   var material:FlatShadeMaterial=new FlatShadeMaterial(light,0xffffff,0x111111,50);
   base=new Base(material);
   body=new Body(material);
   arm=new Arm(material);
   body.addChild(arm);
   base.addChild(body);
   scene.addChild(base);
   arm.x=0.095;
   arm.y=0.564;
   body.y=0.182;
   light.x=2;
   light.z=-2;
   light.y=2;
   scene.addChild(light);
   var ct:DisplayObject3D=new DisplayObject3D();
   camera.x=1.2;
   camera.y=1.5;
   camera.z=-7;
   ct.y=1.6;
   camera.target=ct;
   startRendering();
   addEventListener(Event.ENTER_FRAME,loop);
  }
  
  private function loop(e:Event){
   var v:Number=Math.sin(offset);
   var v2:Number=Math.sin(offset/5);
   body.rotationY=v2*180;
   arm.rotationZ=v*30+30;
   offset+=0.1;
  }
 }
}

もし他のオブジェクトのペアレントを解除して、オブジェクトを除去したければ、removeChild( )を使えばいいみたいだ。

public function removeChild(child:DisplayObject3D):DisplayObject3D

例えば

body.removeChild(arm);

としてやれば、アームが消える。詳しくはDisplayObjectContainer3Dのリファレンスを見てね。

また、ペアレントされているオブジェクトを他のオブジェクトにペアレントしてみたら、最後にペアレントした方にオブジェクトのペアレントが移った。

それではまた次回。

modoカテゴリー別ページ



take_z_ultima at 12:00|この記事のURLComments(0)TrackBack(0)modo | FLASH

2010年07月26日

Compositeのトラッカーを調べてみた その3 Composite 2011

前回は1ポイントをトラッキングしたデータを使って他のフッテージをアニメーションさせるのをやってみた。今回は2ポイントを使ったものをやってみたい。2ポイントあれば位置だけじゃなくて方向やサイズなんかもアニメーションさせる事ができる。

fig01

今回は、前回使った2DTransformを使った方法を試してみたい。

まずは前回と同じようにスケマティックビューでこのようにコンポジションを構成した。

fig02

前回使ったフッテージはハートだけ動いていたけど今回は2つのマークが共に動いているものを使った。

fig06


そしてTrackerで前回同様ハートマークをトラッキングし、さらにAddボタンを押してTrackerAnalyzerをもう一つ追加して、

fig03

もうひとつのマークもトラッキングした。

fig04

トラッキングの項目が2つになったので、どっちがどれだかわからなくならないように、各アナライザをToolUIの左側のリストから選択して、ToolUIの右側のToolPresetのName欄に出てくる名前を入力しなおして、HeartとCloudという名前にしてみた。

fig05

次にスケマティックビューで2DTransformを選択し、ToolUIでTransformTypeを「2Point」に設定した。

fig07

このモードの場合、Sourceの2つのポイントを底辺とする長方形がDestinationの2つのポイントを底辺とする長方形に重なるようにソースフッテージのサイズと方向が変換される。この時長方形の縦横比は保たれたままスケーリングされる。

fig08

そこでまず、Sourceの下にある「Fit To Source」ボタンを押して、ソースフッテージである矢印の画像の左下の座標値と右下の座標値をSourceとして設定する。矢印のフッテージは100×100なので、中心点が(0,0)だとすると、左下の座標が(−50,−50)、右下の座標が(50,−50)になる。この時点でDestinationはコンポジションの底辺の左右の点の座標になっていたりするので矢印が大きくなる。

fig09

今度はDestinationを設定する。Destinationのラベルを右クリックして、出てきたポップアップメニューの「Set Trackers」をクリックする。

fig10

これでTracker Selectorパネルが出てくるので、Trackerを展開して、先に名前を付けた2つのアナライザをCTRLを押しながらクリックして2つ選択し、「UseOffset」をONにして「Copy」ボタンを押す。この時、クリックする順番でどっちのアナライザがどっちのDestinationに割り当てられるかが決まるからHeartをDestination1に、CloudをDestination2に割り当てたければHeart→Cloudの順に選択してね。

fig11

これでDestinationの方にトラッカーからキーポイントがコピーされる。再生してみると2つのマークを繋ぐ線を底辺として矢印がアニメーションしているのがわかる。

fig12

これをハートからクラウドへの矢印にしたければ、2DTransformでもうひとつTransformを追加して、

fig13

プレイヤーに出てくる2DTransformのギズモを操作したり

fig14

ToolUIのパラメータを入力したりして矢印の位置や方向、大きさを調整して矢印がハートからクラウドに向くようにする。

fig15

これでこのように矢印をハートからクラウドに向けてアニメーションさせることが出来た。

fig16

この方法を使った場合、角度とサイズの両方が一度に変換されてしまうので、回転だけとかサイズだけとか縦と横のサイズを別々に設定したい(伸びたら細くなって縮むと太くなるなど)とかいった容貌には応えられない。マニュアルによると、そんな場合はReactionToolを使うといいようで、最初に表示したGIFアニメはReactionToolとExpressionを組み合わせて組み立ててある。

次回はReactionToolを使った方法をやってみたい。

それではまた次回。

maxまとめページ 



take_z_ultima at 11:30|この記事のURLComments(0)TrackBack(0)Composite | 3ds Max
Archives