XSI ICE活用 頂点カラー
:01 頂点カラーとICEの関係

●頂点カラーとICEの関係編
CEといえばパーティクルがなんか凄いとか、スクリプトの知識がある程度ないと入れないとかそういったイメージがあると思います。
でも、パーティクル以外でもいろいろと用途はあり、その中でもここでは頂点カラーの要素に注目しています。
昨今の日本のゲーム会社では、頂点カラーは欠かせない頂点データの要素となっています。

この部分は比較的スクリプトの知識が無くても入れるところでもあり、ここからスクリプト要素を少しずつ理解できるのではないかと妄想しています。
それでは、ぐだぐだと考えを述べていても仕方ないので基本的なところから行きましょ～。

※頂点カラーって何に使えるの？
頂点カラーは頂点ごとに格納できる頂点データのひとつです。
色情報としても使えるほか、RTシェーダ、レンダリング用シェーダ等の要素としても使用可能です。

レンダリングの使用例
頂点カラーのレンダリングと他のシェーダとのミキシングについて（v2.0.x）
他にもゲームの使用例もたくさんありますので、検索エンジンでゲーム、頂点カラー等で検索してみると面白いかもしれません。

まずは頂点カラーをオブジェクトに適用します。
取得 > プロパティ > 頂点カラーマップとここはいつもの頂点カラーを割り当てる要領です。
視認しやすいようにビューをコンスタントにしておきましょう・・・。

※1ディスプレイオプションのシェーディングモードの頂点カラーがRGBカラー表示となっていることを確認しておいてください。

次にICEのビューを起動します。
表示 > 一般 > ICE TreeかAltを押しながら９キーを押します。

ICEツリーのビューが起動します。
上記オブジェクトが選択されていればそれが右側に、エクスプローラー表示になっていると思います。

ビューのメニュー内の作成 > ICEツリーでオブジェクトにICEノードを適用します。

オブジェクトにICE Treeオペレーターがスタックされ、ツリービュー上にはICETreeノードが出現します。
これでオブジェクトにICEツリーを組んでいく準備は整いました。
※パーティクルの場合はシミュレートICEツリーを使います。

 

次にオブジェクトに割り当てた頂点カラーとIceツリーを接続します。
接続しますと、言っても手順は簡単でSetDataノードを取得してICETreeに接続し、Dataを頂点カラーにするだけです。
それでは、なぞらえていってみましょう。
Data Access > Set Dataをツリービューの中にドラッグアンッドロップをします。
すると赤いSetDataノードがツリービューの中にできます。
赤いのは現在そのノードがICETree内でデータが正しく流せていないという意味で、SetDataが何のデータをセットするのか設定されていないからです。↓

Set Dataノードをダブルクリックしてプロパティを開きます。
頂点カラーはとっても深いところにあるので「ピック」ではなく、「Explorer」を選びます。
オブジェクトデータの階層をたどっていって頂点カラー”Vertex_Color”のColorsを選びます。

リファレンスのテキストフィールドに頂点カラーのColorまでがフルパスで記載され、ノードの色が青くなりました。
これで、ICEツリー内でも生きたノードとして使えます。
テキストボックスの上に、カラーボックスも同時に出現したのにも注目しておいてください。

そしてSet Dataノードの「Execute」をICETreeのPort1に接続して・・・

オブジェクトがSet Dataノードのカラーボックスの色になれば接続成功です！！

ここまでだと、単純に頂点カラーを一色塗るだけじゃないか・・・。と言われる方も多いと思います。
では、かる～くやってみましょう～♪

デフォルトプリミティブではいまいち面白くないので、siggraph等でおなじみのStanford Bunnyを使ってみましょう。

Bunnyにレンダーマップを使って、アンビエントオクルージョンとランバートのイルミネーションカラーを焼き付けてみます。

・頂点カラーのレンダーマップ作成方法 オブジェクトを選択して、取得 > プロパティ > レンダーマップを選びます。 サンプリングの設定を頂点のみにして、頂点カラーをそれぞれ新規から作ります。 そして作成した新規の頂点カラーにマップをアンビエントオクルージョン、サーフェイスカラーとイルミネーションと切り替えて1回ずつレンダリングをします。 （マップ再生成ボタンを押す）

「Occlsion」と「SurfaceColor」という二つの頂点カラーが設定されています。

 

二つの頂点カラーをブレンドした結果を表示するために、頂点カラー「Vertex_Color」をもうひとつ新規に作成します。
マテリアルのOGL表示オプション > 頂点カラー表示プロパティは、「Vertex_Color」にしてブレンド結果を表示させるようにしておきます。

それでは上まででやったようにICEツリーをBunnyに設定して、SetDataをVertex_ColorのColorに設定します。

次にSetDataと同じ場所の Data Access > Get Dataを二つツリービューに入れ、それぞれ「Occlsion」 と「SurfaceColor」を指定します。

ここで気づいたかと思いますが、SetDataノードのColorsのInPortとGetDataのそれぞれのValueのOutPortが赤くなっていると思います。
これは色を入出力しているという意味です。
ICEはポートの色によって何が入出力できるかがわかります。

それでは「Occlsion」と「SurfaceColor」を乗算させるためにノードを組みます。

乗算はMultiplyと訳しますね。ということでMultiplyノードを探します。
Math>Basic>Multiplyにありました。

早速ドラッグしてツリービューに入れて、ポートの仕様を見てみます。
ポートの上にカーソルを合わせてしばらくボーっとすると、そのポートの仕様がポップアップします。

みたところColor、RGBには対応していないみたいですね。
というわけでColorをRGBにそれぞれ分解し、Scalarに化けさせます。
Conversion>Color to RGBAを使うと色をRGBAに分解できます。
「Color to RGBA」ノードを二つ呼び出し、それぞれの頂点カラーにつなぎます。

ここでようやく「Multiply」ノードが使えます。
R,G,Bそれぞれ分用意します。
3回ドラッグしても良いのですが、コピーペーストのコマンドが使えますので、
一回ドラッグしてノードを選択 > Ctrl+C > Ctrl+V×2回 だと早いんではないでしょうか・・・？
（これでちょっとICEをマスターした気分にもなれますね？ｗ）

それぞれR、G、Bを各ノードにつなぎ乗算をさせます。

最後にRGBが分解されちゃっているのでそれぞれを合体させColorに戻してあげるため、Conversion>RGBA to Colorを使います。
ひとつのColorになったデータをSetDataにつないでVertex_Colorに返して終了です。

毎回上のように色を分解して、乗算して合体というのを繰り返すのは結構面倒くさいです。
ここでICEのメイン機能の一つである、コンパウンドを作りましょう。

まとめたいノードを選択して、メニューの　コンパウンド > コンパウンドの作成　を選ぶか、右クリックのメニューからコンパウンドを作成を選んでください。

CompoundNodeという名前のノードひとつにまとまりました。（入力の接続がなぜか上下交差しているのはいったん無視します。）

そして、コンパウンドノードの上で右クリックをしてコンパウンドの書き出し...を選べば外部ファイルに保存できますが、そのまえにこのコンパウンドにいろいろ付属情報をつけます。

右クリックメニューの中に、コンパウンドのプロパティというものがあると思いますので選びます。
すると以下のウィンドウが出てきます。

ここで名前をつけたり、バージョンを設定したり、ノードカラーを設定したり出来ます。
カテゴリにプリセットマネージャに存在するカテゴリ名を入れ、コンパウンドの書き出しをするとそこにコンパウンドが出現したりします。
必要な情報を入れたら書き出しで書き出します。
今回は「ColorBlend Mul」と名づけました。（あとで ColorBlend Addとか増やしてみようかなーと思っています。）

この時点でのコンパウンドのサンプルをダウンロードできるようにしておきます。
ご自由にお使いください。
 < ColorBlend Mul v0.5 ダウンロード > 

もう少しブレンドを便利にしたいと思いませんか？
たとえばそれぞれの頂点カラーの割合率を変えたいとか。

それでは、作ったコンパウンドを編集してみましょう。
右クリックメニューからコンパウンドの編集を選ぶと、コンパウンドの中に入り、ツリービューが以下の画面になります。

左が入力パラメータで右が出力パラメータです。
今回は乗算なのでそれぞれの色が白になれば、ブレンド率が変更できているといえます。
なのでブレンド用のノードはColor>Blend Colorを使います。

Blend Colorノードを二つ呼び出してColor0とColor1をValue1につなぎます。
この時Pass Throughノードも出来ますが、特に気にしないでください。※ PassThroughノードは外部公開入力を保持するために自動で作成されます。
（正規化のチェックはONにします。）h

Value1のWeight値と Value2のWeight値を外部公開入力に接続します。※念のためここでも Pass Throughノードを使います。

Value2のWeight値にはMath>Subtractノードを使い、Secondにポートをつなぎ、Firstを「1」にしておきます。

※ここでちょっとRTシェーダ的な色のアルファブレンディングを使用しています。
色Aと色Bをアルファブレンディングしたい場合は、色A×アルファ＋色B×（1－アルファ）という概念を使って、
アルファの部分を外部接続のWeightに使用して、色Bを白としています。
この計算を使うと Weight値が０のときに頂点カラーは真っ白に、１になると頂点カラー自身の色にということになります。

Weight値は0～1の範囲である必要があるので、外部公開入力のWeightそれぞれの文字の上で右クリックメニューを出して、プロパティで最大値を１に設定します。

これでそれぞれの頂点カラーにブレンド値が存在するコンパウンドノードが出来ました。

さて、後半ちょっと複雑だったかもしれませんが、ここのハードルを越えるとまたいっそういろいろ考えられるようになると思うので、ちょっと頑張って、周りのプログラマさんにも相談したりして、超えることをオススメします。

それではこのバージョンのコンパウンドをVer1.0として公開します。

 < ColorBlend Mul v1.0 ダウンロード > 

まだまだこのコンパウンドも改良点があると思います。
皆さんでご自由に使いやすいように改良していってください。