スポンサーサイト

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

法線ブレンドによる「いいとこ取り」シェーダー

前々から課題として心に引っかかっていたローコストかつ見栄えのするなゲーム背景用ブロック、
昨日参加したJUNKIさんのXSI男忘年会での会話で良さそうな方法を思いついたのを試してみたらできたんでメモ。

まずは結果:
1401230a_block.jpg
わりといい感じのブロックになったとおもう。エッジ部分の光の回り込み具合とか。
ノーマルマップなし、超シンプルなメッシュでこの結果ならひとまずは成功じゃないか。

●素材
・ワイヤーフレームは↓な感じで、ごくシンプルなトポロジ。面の中心に頂点があるのがポイント。
1401230a_block_wire.jpg
・UVはこんな感じでシンプル。UVの切れ目でタイリングテクスチャがずれてしまうのは目をつぶる。
1401230a_block_UV.jpg

●前提
ゲームの背景で無造作かつ大量に配置できる汎用性の高いブロックが欲しかった。
量産が容易で、かつ見た目はそこそこ見れるレベルが望ましい。
今の時代のZブラシとかでハイメッシュを作ってノーマルマップ作ってローポリモデルに貼るっていう
ワークフローが「常識」だと思うんだけど、自分基準ではこれは作業コストがかかりすぎなので、
もっと簡単な方法がないかと模索していた。

・ハードエッジ:明暗のエッジがさすがにちょっと直線的すぎてうそ臭い。
1401230a_block_hard.jpg
・スムースエッジ:立体がヌルく見えてしまうのはNG
1401230a_block_soft.jpg

・この二つを「いいとこ取り」できないか
1401230a_block_blend_final_20141231145339c35.jpg
エッジ付近の自然なつながりと面の立体感を両立するために、この二つの結果をシェーダー上でブレンドしてやればいいのではないか、というのは実は前からちょっと考えていたのだけれど、そのためにはハードエッジ状態の法線と、スムースエッジ状態の法線の両方を保持しなくてはならないのがネックになっていた。法線情報は基本的に一つしか持てないので。
なのだけど、実は先日公開されたSoftimage用の法線編集ツール「UserNormalTranslator」を使えばできることに、飲み会の会話中にふと気づいたのです。
UserNormalTranslatorには法線情報を頂点カラーに変換する機能があるので、それをつかってスムースエッジ状態の法線を一旦頂点カラーに格納してその数値をシェーダー内では法線として扱うようにすればいい。
1401230a_block_blendmap_20141231145337f40.jpg

そしてシェーダー内でエッジ付近はスムースエッジの結果を、面の部分はハードエッジの結果を使えば、理想的な結果が得られるのではないか。

・エッジ部分の指定
とはいえシェーダー内ではどこがエッジでどこが面なのかなんてのは判定できないので、なんらかの方法でエッジ付近をマスクする必要がある。テクスチャでやってもいいのだが、そうするとUV展開などにも頭を捻らなくてはならないし手数も増えてしまうので、ここはやはり頂点カラーを使って指定する。
エッジ部分の頂点カラーを1に、それ以外を0に。別にRGBA全部を使う必要は無いので今回はAチャンネルを使用。
1401230a_block_vcol.jpg
ただコレだとグラデーションが広すぎてエッジ付近のマスクとして扱うには不適切なので、ピクセルシェーダー内で頂点カラーを累乗する。だいたい20乗くらいするとこんな感じの分布になってくれる。
1401230a_block_vcol_pow.jpg
で、このマスクをつかってハードエッジ法線とスムースエッジ法線のライティング結果をシェーダー内でブレンドしてやればめでたく以下の結果が得られた。
1401230a_block.jpg

我ながら回りくどいことをしていると思うw
でも結果にはわりと満足。実戦投入するにはまだもう少し不安があるけれども。
すなおにノーマルマップを使えばいいじゃない、という考えも分かるが
みんなと同じ方法をとったら同じような結果しか手に入らないしね。多様性大事。
かの名言「楽をするためならどんな苦労をも厭わない」の精神で今後もがんばりたい。
それでは来年もよろしくお願いします。
スポンサーサイト
プロフィール

JNY

Author:JNY
某ゲーム会社勤務
趣味と修行をかねて個人製作中
Softimage & Cgfx & Unity

最新記事
最新コメント
月別アーカイブ
カテゴリ
カウンター
twitter

Twitter Updates

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