<< TOP



XSI ICE活用 頂点座標
:02 頂点アニメーションで旗
このドキュメントは


  • XSIはそこそこ触れる
  • ICEというものがどういうものか大体わかる
  • ICEが気になっているのだけど、どこから入ったら良いかわからない
    といったアーティスト、デザイナさん向けに作られています。



頂点座標をアニメーション編02
前回で、サインカーブを使用した頂点アニメーションを作ることが出来るようになりました。
でもアレだけだとだから何?っていう人も多いかと思います。
折角なのでどうやって実用にこぎつけていくのか、参考までにやっていきましょう~。

まずは物理を使わないそれっぽい「旗」、でどうでしょう??
※今回からこっそりSoftimage7.5で行きます。(XSIではなくSoftimageですw)

このページはFlashムービーを配置しています。
ActiveXをオンにしてご覧いただければ幸いです。

 1.データの準備
今回準備するデータは前回の頂点アニメーションデータで す。
 iceva2_image01.jpg
頂点カラーでマスクするというファンクションも使いたいのでとりあえず接続はこのままです。
サイズを旗っぽいサイズにするために、一旦縦横の比率がわかるようにfmt sinPointWaveをICETreeからはずします。
 iceva2_image02.jpg
スケールを使って横長の旗っぽいスケールにします。
 iceva2_image03.jpg
頂点カラーは今回は最終的には使いませんが、ICETreeがエラーにならないように残しておいてください。

これで準備は万全です!
この後一旦別のことをするので
、fmt sinPointWaveとICETreeの接続は外したままにしておいてください。
fmt sinPointWaveノードツリーは横にどかしておくと良いです。

 2.マップから頂点カラーに
さて、マスク用の頂点カラーですが、Softimage の頂点カラーはPhotoshopのようにグラデーションツールなどが充実していません。
なのでデザイナーが制御しやすいように、マスクをテクスチャで描くようにしたいと思います。

ICETReeビューのエクスプローラーで
ICETReeが「Modeling」の下にいたら、ドラッグアンドドロップで「Secondary Shape Modeling」に持ってきておいてください。
 ceva2_image09.jpg
これを後でやろうとすると、かなりの高確率でSoftimageが落ちます。w


まずは頂点カラーで確認するためにSetDataに頂点カラーを指定しておきます。
 iceva2_image04.jpg
この時、ICETreeビューのトップメニューから、ユーザーツール>オブジェクト名をSelf.で置き換え(ネストしたコンパウンド)
を実行して、Grid を Self にしておきましょう。
何かあるたびにこの動作を行っておくと、後のツリー再利用時に役に立ちます。

次にオブジェクトに対して「テクスチャマップ」を適用します。
「テクスチャマップ」オペレータがICEで取得できる唯一のテクスチャなんです。
XZ方向に平坦なグリッドなので、テクスチャマップ平面はXZを指定します。
 iceva2_image05.jpg
エクスプローラーで見ると、サンプルクラスターの下にTexture_Map、さらにその下にnoIcon_picという不思議な構成のオペレータが付き ます。
このnoIcon_picのテクスチャを任意のものに変えて、ICEで取得します。

次にICEに戻り、02 頂点カラーにコンバート編でやったように、 GetDataでまずNodeLocationを取得します。
 iceva2_image06.jpg
そしてもうひとつGetDataを用意して、NodeLocationのValueをSourceにつなぎ、GetDataノードをダブルクリックしたと ころの
プロパティの「Explorer」ボタンからPolygon Mesh > Clusters > UV_Cluster_Auto > と開いていき、Texture_Mapを指定します。
 iceva2_image07.jpg
出力ポートが赤くなれば、カラーが出力されている事になります。
これで、頂点カラーがテクスチャマップの
UV頂点の位置を元に設定されます。
 iceva2_image11.jpg
試しにTexture_MapのValueをSet DataのColorsのポートへ繋いでみてください。
iceva2_image10.jpg
ビューの表示をコンスタントにして見てください。
テクスチャの色が頂点カラーとして表示されているのが確認できるかと思います。
(メッシュがすごく細かく分かれていますのでほとんどnoIconと同じような絵になります。)

これをマスクとして利用します。



色の確認が出来たら、頂点カラーのSetDataを一旦外します。
そして
sinPointWaveの接続に戻すのですが、こちらはSampleのSetDataではなく、頂点の SetDataなので、NodeLocationをPointLocationに変換します。
NodeLocationのプロパティからPointLocationを選択 しておきます。
Texture_Mapは変更ありません。
 iceva2_image12.jpg

そしてTexture_MapのValue色をRGBに分解して、
sinPointWaveのそれぞれに繋ぎます。
最初の状態のツリーがとってあるのでしたら、GetDataの頂点カラーをTextureMapに変更しただけになります。
 iceva2_image13.jpg

この時点だとTextureMapがnoIconなので、Gridはかなりヒステリックな状態になります。w
 iceva2_image14.jpg

 3.マスクテクスチャのと調整
そ れではマスク用のテクスチャを作ってみます。

RをX方向の揺れ、GをY方向の揺れ、BをZ方向の・・・と使います。
さて・・・旗の左側をポールに括りつけられている部分と想定して・・・
各チャンネル色の黒が頂点が全く移動しない(揺れない)、白い部分が通常通り移動する(揺れる)といった認識になります。

Rチャンネル:X方向の揺れ
Gチャンネル:Y方向の揺れ
Bチャンネル:Z方向の揺れ
iceva2_image15x.jpg iceva2_image16.jpg
iceva2_image17.jpg

こんな感じになりました。
あまり意味がないですが、カラーでみるとこんな感じです。
 iceva2_image18.jpg
マスクテクスチャダウンロード 1

このテクスチャを保存し、Softimageで読み込みます。
エクスプローラーでGridを展開し、exture_Mapのプロパティを開き、新規ボタンをクリックして、「ファイルから新規作成」を選びます。
そこで上のテクスチャを指定します。
 iceva2_image19.jpg
アニメーションを再生すると、なんだか波打つ方向が逆です。
右から左に波打っているので自然に見えません。
 iceva2_image20.jpg
これは
fmt sinPointWaveの時間の与え方に問題があります。
時間による数値増加を反転させてあげればいいな、ということがわかると思います。

fmt sinPointWaveコンパウンドの上でマウスを右クリックし、コンパウンドの編集を選びます。
 iceva2_image21.jpg
コンパウンドが開かれたら、Current TimeのTimeの出力先にMultiply by Scalarを使用して-1を掛けます。
これで数値が逆転し、左から右へのWaveアニメーションになりました。
 iceva2_image22.jpg

さらに数値を修正して、どうでしょう?かなりそれっぽくなりました。
<gifアニメダウン ロード>



設定数値はこんな感じにしてみました。
参考にしていただければと思います。
 iceva2_image24.jpg
※グリッドのオブジェクトサイズにより調整値は異なります。(このパラメータは8×8のグリッドサイズを基に しています)

 4.もう少し良くしたい
こういう表現は際限がないのですが、やはりもう少し良く したいなぁ、と思うのが性だと思います。

たとえば皺の方向にもうちょっと下図矢印のような向きを加えたいとか・・・。
 iceva2_image25.jpg
具体的にどんな波を加えたいかナァと考えると、思いつくのはそう。
あるポイントをもとにそこから広がるような波紋です。
これは、
fmt sinPointWave自身をベースに変更を加えることで意外と簡単に出来てしまいます。

fmt sinPointWaveコンパウンドを開いてScalar to 3D Vector以下のツリーを複製します。
Scalar to 3D Vectorノードをマウスの中クリックをすることで以下ツリーをツリー選択します。
そしてCtrl+C > Ctrl+V でコピーペーストします。
 iceva2_image26.jpg
ペーストしたノードを使って変更していきます。
波紋はY軸方向の揺れしかいらないので、XとZ用の計算ノード群は削除しちゃいます。
下記枠内を選択してDeleteキーで消してしまいます。
  iceva2_image27.jpg
次にCurrent TimeノードとMultiply by Scalarノード、GetDataのSelf.PoitPositionは同じものを使うので、複製もとの上のツリーから値を接続します。
複製されたツリーから同じものは削除します。
 iceva2_image28.jpg
さて、
PoitPositionを下のツリーの3D Vector to Scalarに一旦つなげましたが、波紋はVector(方向)ではなく位置からの距離を使うので、
Math > Basic > VectorからLengthノードを持ってきてGetDataのPointPositionにつなぎ、下のツリーの時間に足すため、Addノードにさし ます。
 iceva2_image29.jpg
一旦上側のツリーをSetDataから外して、下側のツリーのScalar to 3D Vectorの出力にツリー一番左のGetDataのPointPosition
を足して繋いでみてください。
 iceva2_image30.jpg
ローカルの中心点から波紋が広がるアニメーションを確認できますでしょうか??メメタァ。
 iceva2_image31.jpg
この波紋の右半分がニュアンスとしてつかえれば良いので、アニメーション開始の中心点を左にずらします。
今度はまたツリー全体の一番左に戻り、GetDataとLengthの間にAddノードを挟みます。
 iceva2_image32.jpg
このノードの値によって中心点がずらせます。
このシーンの場合ですと、およそX方向に4でした。
 iceva2_image33.jpg
上のもともとの波用のツリーを今回のツリーと足して、SetDataへ戻します。
 iceva2_image34.jpg
これで当初の目的どおりのくにゃッとした弧形のニュアンスが追加できました。
 iceva2_image35.jpg
後はこれ用のマスクを用意するのですが、今回追加したパラメーターを外に出す整理から始めましょう。
以下は何処のパラメータのことか、詳細を記載いたしません。探して指定することに挑戦してみて下さい。
まずはP Waveという名前でこの波紋のOn/Off切り替えスイッチを設定します。
 iceva2_image36.jpg
次に波の高さをP Widthという名前で設定します。
 iceva2_image37.jpg
今度はP Intervalという名前で波の細かさです。
 iceva2_image38.jpg
最後にP Wave Startpos、波紋のスタート地点のオフセット位置です。
UIのバランスを考えてP Widthの真下にしました。
  iceva2_image39.jpg

上でやったように、出力ポートの順番を各名 前のところで右クリック>上に移動/下に移動で上下入れ替えが可能です。
コンパウンドのプロパティ表示でも順番が入れ替わるので、UIの整理をするときに便利です。
iceva2_image45.jpg

コンパウンドを閉じ、今度はマスクを作成します。
上で作ったテクスチャはRGBまでしか使っていませんね。
アルファが空いているのでこれを活用します。
 iceva2_image40.jpg
マスクテクスチャダウンロード 2

こんな感じにしてみました。
そしてアルファまで持った状態でテクスチャを上書き保存し、Color to RGBAのAポートを先ほど作ったP Widthに繋ぎます。
※注意:マスクに使うテクスチャ画像はRGBA4チャンネル持てるデータで保存してください。(例:TGA32 Bits/Pixel、PSD等)
 iceva2_image41.jpg
さらにそれっぽくなりました。
如何でしょうか??
 iceva2_image42.jpg
最後の仕上げです。

確認のため再生してみると、ちょっと再生速度が遅いかナァと思いませんか??
再生速度に強弱をつけるためにコンパウンドを最後にもう一回開いて、Current Timeに-1を掛けているところの間に、
倍率用のMultiply by Scalarを繋ぎ、コンパウンドの外に値を出力します。

Wind velocityなどと大げさな名前にしてみましたすみません。
 iceva2_image43.jpg
パラメーターを再調整してみました。
 iceva2_image44.jpg
この調整値の結果のムービーは以下のようになります。
※グリッドのオブジェクトサイズにより調整値は異なります。(このパラメータは8×8のグリッドサイズを基にしています)

<gifアニメダウン ロード>






物理計算を一切伴わない、エセのハタメキアニメーションですが、理解するのに時間のかかる物理パラメータを使うよりも
もしかしたらこの方法で思ったような効果が出せるかもしれません。

髪の毛のはためきや、服のすそが風ではためくなど、いろいろ挑戦してみると面白そうです。

それでは実用例の第1弾はここで終了とさせていただこうと思います。
ここまでのコンパウンドも公開いたしますので、いろいろ試したり追加したりして遊んでください。

fmt_sinPoitnsWave v0.9 ダウンロード

※ノードの共有化で実はまだまだ最適化ができますので、バージョン1はまだ振らないでおきます。
利用例など、教えてくれた非常にらうれしいです。

<前 へ
おわり