« ストレッチのすすめ | トップページ | 「かっこいい」の前にまずやるべきこと »

2013年10月21日 (月)ICEを使ってみる 第12回 テクスチャを頂点カラーに変換する

おはようございます。
本日の当番モーションデザイナーのY.Nです。

本日はテクスチャを頂点カラーに変換する方法を考えてみます。

頂点カラーについては以前デザイナーのH.Fさんが記事を書いていますので
興味がある方はこちらもご覧ください。

では本題。まずは今回の結果から。
左がテクスチャ表示、右が頂点カラー表示です。
2013_1020_01

テクスチャ表示と頂点カラー表示は、まぁ、大体似たような感じになってますね。

頂点カラーもテクスチャマップカラーもどちらも以前取り扱ったUVと同様、
nodeindexごとに値を持つデータのようです。
そこで第9回で作った別オブジェのUVを参照するコンパウンドと似たような
やり方でデータを取ってこれないかと試みたのが今回です。

今回説明しようとしている事柄
・TextureMap
・Locationの使い方
・色データの扱い方

以下、本日の流れです。
1.参照元オブジェクトのvertex位置に合うカラーXをTexturemapから求める
2.Xを参照元のオブジェクトの頂点のカラー値に入れる
3.おまけ カラー値をいじる

まずはIceTreeの全体図を載せておきます。
2013_1020_02

■1.参照元オブジェクトのvertex位置に合うカラーXをTexturemapから求める
テクスチャの色をどう取得するか。
これはテクスチャマップから取得できます。
というわけで、今回も別オブジェクトのテクスチャの色を取るのに
GetClosestLocationを使って、LocationからTexturemapのカラー値を取ってきます。
今回はcube1をテクスチャで色付け、cube2を頂点カラーで色付けしています。
2013_1020_03


こうすることで、頂点位置を元に補間計算されたTexturemapカラー値を取得できます。


■2.Xを参照元のオブジェクトの頂点のカラー値に入れる
取得したカラー値をnodeindexごとに頂点カラーに割り当てます。
しかし、その前の方で、頂点ごとに共有しているnodeindexに対して同じカラー値を
割り当てているので、結局頂点ごとにカラーを割り振っているという状態になっています。
2013_1020_04

第9回で似たようなことをもうちょっと詳しくやってますので興味がある方はコチラも
見てみてください。


■3.おまけ カラー値をいじる
取得したカラー値をそのまま入れてもいいですが、値をいじることで
絵柄を操作できます。
2013_1020_05_2
2013_1020_06

上図はRGBカラーのR値の分布をFカーブでいじってます。
今回は単に値の分布をテキトーに変えただけですが、
例えば凸凹のあるメッシュの凹部分に黒を刺して影を表現するといったことも
ICEなら容易にできるので試してみるのも面白そうです。

頂点/エッジを境にして色違いがあると、ちゃんと色を再現できないという粗があるのには目をつぶって今回はここまでとさせていただきます。

follow us in feedly
result = encodeURIComponent( "http://www.accessgames-blog.com/blog/2013/10/ice12-e784.html" );document.write( "result = " , result );&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">

| | コメント (0) | トラックバック (0)

« ストレッチのすすめ | トップページ | 「かっこいい」の前にまずやるべきこと »

モーションデザイナー」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック


この記事へのトラックバック一覧です: ICEを使ってみる 第12回 テクスチャを頂点カラーに変換する:

« ストレッチのすすめ | トップページ | 「かっこいい」の前にまずやるべきこと »