2017-11

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

頂点カラーを使った表現術その2

先日に続いて頂点カラーを使ったテクニックを紹介したいと思います。現在露出している森ステージのバックにある光の筋(木漏れ日)の表現です。この光は板ポリに頂点カラーとテクスチャーを乗せ、実機上で加算合成で描画しています。
100211_LightImg2.jpg
≪一番左≫板ポリに頂点カラーを乗せた状態です。頂点の位置が表示されていませんが、縦に3分割されていて各頂点に黒やら白の頂点カラーを乗せています。
≪左から2番目≫同じポリゴンにテクスチャーだけを乗せた状態です。背景が黒なのは気にしないでくださいwww
≪右から2番目≫左2つを合成した状態です。最終的に加算合成するのでアルファで抜く必要はないのですが、当初は加算を予定しなかったのでこのようになっています。
≪一番右≫実機に乗せたときのイメージ図(PhotoShopで合成しました)です。

【100213追記】
読み直したら上の説明では不十分だったので補足します。画像の一番右以外は同じデータをツール上で表示の形式を切り替えています。つまり、一番左はテクスチャーの表示をOFFにした状態で、左から二番目は頂点カラーの表示をOFFにしています。そして、右から二番目では全てを表示した状態、というわけです。で、一番右はそれを実機で表示したときのイメージです。

なんで右のような結果になったのかを順を追って説明していきます。まず頂点カラーとテクスチャーの色の関係についてですが、これは多くの環境で乗算されることになるはずです。色の乗算の場合、次の特徴があります。白い頂点カラーはテクスチャーの色がそのままでる(どんな値に1を掛けても同じ)。黒い頂点カラーはテクスチャーの色に関係なく黒になる(どんな値に0を掛けてもかならず0になる)。
この計算された結果を画面に加算合成します。加算合成はゲームで光る表現でよく使われる合成方法で元の色に足し算することで画面が明るくなり派手な効果を生み出します。加算合成も乗算と似ていて以下の特徴があります。黒を加算しても元の絵は変化しない(どんな値に0を足しても変化しない)。白を加算するとかならず真っ白になる(上限を設けていれば、白以上の白にはなりません)。
つまり、隅の頂点は黒い頂点カラーですのでテクスチャーの色に関わらず黒を加算合成します。中央付近の白い頂点カラーはテクスチャーの色がそのままでます。なので、一番右の画像のように、隅にいくにしたがって透明度が高まることになります。
さて、これだけだったら『最初からテクスチャーのアルファで抜いておけばいいじゃん』で終わるのですが、ポイントはコレをUVスクロールするとどうなるか!?ということです。つまり、こうなります。
100211_UVscroll.gif
光の筋は動いているのに、隅にいくと透明であることは変わっていません。テクスチャーで抜いただけではこのような結果は得られません。本当は頂点カラーにアルファを入れられれば加算以外でも使えるのですが、私の環境では使えないため乗算+加算でやりました。この応用としては、炎や水しぶきの簡易表現などが考えられます。また、プログラムの介入がなくデザイナーの工夫で実現できるため、コスト分担できる点も良いかと思います。なんでもかんでもプログラマに頼むのも可愛そうですからねwww

● COMMENT FORM ●

頂点カラー(´д`;ハァハァですね!
これって、エフェクトファイル作って実現してたりしてます?

こんばんわ~OKIさん。

頂点カラーは使い方を工夫すると楽しいですよ~。
エフェクトファイルは自前のものですが、この表現のために特別なテクニックを用意しているわけではありません。一般モデルと同じエフェクトファイルを使っています。ていうか、ベーシックエフェクトだとUVのオフセット値は指定できなかったですよね??

>ベーシックエフェクトだとUVのオフセット値は指定できなかったですよね??

でしたっけ?あんまりあのメンバの中、見ていないんですよねぇ~。
ライトの方向が3種類とかあったのは覚えていますが…
私はエフェクト系がまだ弱いです。友人に担当させようと思っていた程ですw
友人はお話したとおり、アレとか作っているので、エフェクトファイル操作萌え男になっています。「なかなか面白いよ。エフェクトファイルのコーディングは。」とか言ってました。

ども~! シェーダー周りはかなり適当に済ませてしまったので、私ももっと研究してみたいのですが…。マカロニが終わったらかな…? いつの話だwww

毎回解説がすごくわかりやすいです!勉強になります(@ー@)
頂点カラーってこんな使い方ができたのですね!挑戦してみたくなりました^^

どうも~kohakuさん。

もう10年以上使われている技術ですので、いろいろなテクニックがあります。工夫次第でシーンの雰囲気が変わるので楽しいですよ!


管理者にだけ表示を許可する

トラックバック

http://karuduck.blog50.fc2.com/tb.php/175-1d7f560a
この記事にトラックバックする(FC2ブログユーザー)

NEW ENTRY «  | BLOG TOP |  » OLD ENTRY

プロフィール

Karu_gamo

Author:Karu_gamo
<メールアドレス>
karu_gamo#hotmail.co.jp
#を@に置き換えてえてください。

<自分リンク>
かるがも研究所【新】
YouTubeチャンネル
公開素材置き場
仕様書
旧ブログ(見るとこないです)
管理者ページ

リンク

YouTube動画

FC2カウンター

カテゴリー

Twitter

 

月別アーカイブ

RSSフィード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。