XSI ICE活用 頂点座標
:02 頂点アニメーションで旗

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

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

今回準備するデータは前回の頂点アニメーションデータです。

頂点カラーでマスクするというファンクションも使いたいのでとりあえず接続はこのままです。
サイズを旗っぽいサイズにするために、一旦縦横の比率がわかるようにfmt sinPointWaveをICETreeからはずします。

スケールを使って横長の旗っぽいスケールにします。

頂点カラーは今回は最終的には使いませんが、ICETreeがエラーにならないように残しておいてください。

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

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

ICETReeビューのエクスプローラーで
ICETReeが「Modeling」の下にいたら、ドラッグアンドドロップで「Secondary Shape Modeling」に持ってきておいてください。

これを後でやろうとすると、かなりの高確率でSoftimageが落ちます。ｗ
まずは頂点カラーで確認するためにSetDataに頂点カラーを指定しておきます。

この時、ICETreeビューのトップメニューから、ユーザーツール > オブジェクト名をSelf.で置き換え（ネストしたコンパウンド）
を実行して、Grid　を　Self　にしておきましょう。
何かあるたびにこの動作を行っておくと、後のツリー再利用時に役に立ちます。

次にオブジェクトに対して「テクスチャマップ」を適用します。
「テクスチャマップ」オペレータがICEで取得できる唯一のテクスチャなんです。
XZ方向に平坦なグリッドなので、テクスチャマップ平面はXZを指定します。

エクスプローラーで見ると、サンプルクラスターの下にTexture_Map、さらにその下にnoIcon_picという不思議な構成のオペレータが付きます。
このnoIcon_picのテクスチャを任意のものに変えて、ICEで取得します。

次にICEに戻り、02 頂点カラーにコンバート編でやったように、GetDataでまずNodeLocationを取得します。

そしてもうひとつGetDataを用意して、NodeLocationのValueをSourceにつなぎ、GetDataノードをダブルクリックしたところの
プロパティの「Explorer」ボタンからPolygon Mesh > Clusters > UV_Cluster_Auto > と開いていき、Texture_Mapを指定します。

出力ポートが赤くなれば、カラーが出力されている事になります。
これで、頂点カラーがテクスチャマップの UV頂点の位置を元に設定されます。

試しにTexture_MapのValueをSet DataのColorsのポートへ繋いでみてください。

ビューの表示をコンスタントにして見てください。
テクスチャの色が頂点カラーとして表示されているのが確認できるかと思います。
（メッシュがすごく細かく分かれていますのでほとんどnoIconと同じような絵になります。）

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

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

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

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

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

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

Rチャンネル：X方向の揺れ	Gチャンネル：Y方向の揺れ	Bチャンネル：Z方向の揺れ

こんな感じになりました。
あまり意味がないですが、カラーでみるとこんな感じです。

 < マスクテクスチャダウンロード１ > 

このテクスチャを保存し、Softimageで読み込みます。
エクスプローラーでGridを展開し、exture_Mapのプロパティを開き、新規ボタンをクリックして、「ファイルから新規作成」を選びます。
そこで上のテクスチャを指定します。

アニメーションを再生すると、なんだか波打つ方向が逆です。
右から左に波打っているので自然に見えません。

これは fmt sinPointWaveの時間の与え方に問題があります。
時間による数値増加を反転させてあげればいいな、ということがわかると思います。

fmt sinPointWaveコンパウンドの上でマウスを右クリックし、コンパウンドの編集を選びます。

コンパウンドが開かれたら、Current TimeのTimeの出力先にMultiply by Scalarを使用して-1を掛けます。
これで数値が逆転し、左から右へのWaveアニメーションになりました。

さらに数値を修正して、どうでしょう？かなりそれっぽくなりました。

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

設定数値はこんな感じにしてみました。
参考にしていただければと思います。

※グリッドのオブジェクトサイズにより調整値は異なります。（このパラメータは８×８のグリッドサイズを基にしています）

こういう表現は際限がないのですが、やはりもう少し良くしたいなぁ、と思うのが性だと思います。
たとえば皺の方向にもうちょっと下図矢印のような向きを加えたいとか・・・。

具体的にどんな波を加えたいかナァと考えると、思いつくのはそう。
あるポイントをもとにそこから広がるような波紋です。
これは、fmt sinPointWave自身をベースに変更を加えることで意外と簡単に出来てしまいます。

fmt sinPointWaveコンパウンドを開いてScalar to 3D Vector以下のツリーを複製します。
Scalar to 3D Vectorノードをマウスの中クリックをすることで以下ツリーをツリー選択します。
そしてCｔｒｌ+C > Ctrl+V でコピーペーストします。

ペーストしたノードを使って変更していきます。
波紋はY軸方向の揺れしかいらないので、XとZ用の計算ノード群は削除しちゃいます。
下記枠内を選択してDeleteキーで消してしまいます。

次にCurrent TimeノードとMultiply by Scalarノード、GetDataのSelf.PoitPositionは同じものを使うので、複製もとの上のツリーから値を接続します。
複製されたツリーから同じものは削除します。

さて、PoitPositionを下のツリーの3D Vector to Scalarに一旦つなげましたが、波紋はVector（方向）ではなく位置からの距離を使うので、
Math > Basic > Vector から Lengthノードを持ってきて GetData の PointPosition につなぎ、下のツリーの時間に足すため、Addノードにさします。

一旦上側のツリーをSetDataから外して、下側のツリーのScalar to 3D Vectorの出力にツリー一番左のGetDataのPointPosition を足して繋いでみてください。

ローカルの中心点から波紋が広がるアニメーションを確認できますでしょうか？？メメタァ。

この波紋の右半分がニュアンスとしてつかえれば良いので、アニメーション開始の中心点を左にずらします。
今度はまたツリー全体の一番左に戻り、GetDataとLengthの間にAddノードを挟みます。

このノードの値によって中心点がずらせます。
このシーンの場合ですと、およそX方向に４でした。

上のもともとの波用のツリーを今回のツリーと足して、SetDataへ戻します。

これで当初の目的どおりのくにゃッとした弧形のニュアンスが追加できました。

後はこれ用のマスクを用意するのですが、今回追加したパラメーターを外に出す整理から始めましょう。
以下は何処のパラメータのことか、詳細を記載いたしません。探して指定することに挑戦してみて下さい。
まずはP Waveという名前でこの波紋のOn/Off切り替えスイッチを設定します。

次に波の高さをP Widthという名前で設定します。

今度はP Intervalという名前で波の細かさです。

最後にP Wave Startpos、波紋のスタート地点のオフセット位置です。
UIのバランスを考えてP Width の真下にしました。

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

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

 < マスクテクスチャダウンロード２ > 

こんな感じにしてみました。
そしてアルファまで持った状態でテクスチャを上書き保存し、Color to RGBAのAポートを先ほど作ったP Widthに繋ぎます。
※注意：マスクに使うテクスチャ画像はRGBA4チャンネル持てるデータで保存してください。（例：TGA32 Bits/Pixel、PSD等）

さらにそれっぽくなりました。
如何でしょうか？？

最後の仕上げです。

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

Wind velocityなどと大げさな名前にしてみましたすみません。

パラメーターを再調整してみました。

この調整値の結果のムービーは以下のようになります。
※グリッドのオブジェクトサイズにより調整値は異なります。（このパラメータは８×８のグリッドサイズを基にしています）

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

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

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

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

 < fmt_sinPoitnsWave v0.9 ダウンロード > 

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