2018年12月25日火曜日

モデリング不要な立体視マテリアルのお話(前編)

※ この記事は Blender Advent Calendar 2018 に合わせて作成しました

ゲームでビル等の建物を表現する時に 建物の中をポリゴンで作りこむのではなく
壁面の見え方を計算で作りだしてそれっぽく見せてしまう「インテリアマッピング」
という手法があります。

ゲームエンジンでゲーム作る人にはある程度知られた手法ですが
アニメ等の他の界隈の人の話題にも出ることも多くなったのと
Blenderでもできるのを確認したかったので試してみていました

やってみた後 街中の景色を見ていて作ってみたのがこれ
こちらのバルコニーのようにマッピングする簡易版がリツイートが伸びたこともあり記事にしてみます
この解説ではアニメの背景のような陰影付けをテクスチャに描いてしまう
作画主体の作業のものを扱います

2回に分ける予定で今回は 基本的な考え方を取り扱うので、使い方だけ知りたい方は後編へどうぞ

まず 複数の物が奥行きを持って見えるというのはどういうことでしょうか?

  1. 奥まっているところは陰った感じになっている
  2. 視線を動かした時には手前のものと動く幅が違う
  3. 遠くのものほど小さく見える
  4. 空気遠近法

といったものが考えられると思います
1に関しては初めからテクスチャの陰影で表現することに 4は無視します
2と3に関しては視界の中の変化と見る角度の変化の違いで実際には同じものです
奥まったものが見えることを図にして考えてみて見ます

平行な面F1 F2があった時に
F1のある点Aから見通した場合 目線の先のA’では少しだけずれた位置のものが見えることになります
つまりF1の面上で見る角度に応じて、ちょっとだけずらしたテクスチャを表示すると奥まって見えないでしょうか
どう計算すればいいでしょうか?



ここでベクトルというものでてきます
調べると「ベクトルとは大きさだけでなく、向きももった量」 と出てきます
三次元の座標も「位置ベクトル」と言いますし、画像のピクセルの座標(x,y)もベクトルです
3Dで面がどちらの方向を向いているのかという表すものを「法線ベクトル」と言ってXYZ軸それぞれの大きさで表現されます
細かいことは抜きにして、数字の組み合わせで向きや位置が表現されていると考えてください
そしてコンピューターの計算では ベクトルの向きや大きさを使う色々な便利な計算が用意されています

因みにBlenderでは画像の座標を
左下を基準の0に 画像の端を1.0になるものとしています
一般に画像の縦横の大きさを1.0として(0.0~1.0)の間で画像内の座標を表すものをUV座標(UVベクトル)と言います



3Dのデータの見た目を設定する仕組みをシェーダーと言いますが
ここからBlenderでそれを設定するための「ノードエディッタ」の使い方を順を追ってみていきたいと思います
Cyclesレンダー利用していきますので レンダーエンジンをCyclesに変更してください
(Blender2.8以降ではShaderEditorで Eeveeレンダーでも同じ操作でできるようになっています)

下準備に 平面を作成してUVを作成しておいてください
また、効果を確認するためにカラーグリッド画像を作成しておきます
平面を選択した状態で
ノードエディッタに移ってマテリアルタブを選択して「新規」ボタンを押します

四角いものが2つが 曲線でつながれた状態になっているかと思います
四角いもの一つ一つがノードと言って、掛け算割り算といった感じの処理をしたりしてくれるもので,
ノードの左右に付いた丸がソケットと言って 左側のソケットから入った情報を処理して右側のソケットに出力します
ノードによってシーンから直接情報を取得するので入力のないものもあって
「マテリアル出力」に入った情報が3Dの形状の見た目を設定します

ソケット部分からドラッグ操作をすると 曲線が出るので 別のソケットまで引っ張るってつなげると情報が伝わる状態になります

まずは テクスチャを表示してみます
最初に設定されてる設定は使用しないので左側のノードは消去して
追加メニュー(Shift+A)から  シェーダー>放射テクスチャ>画像テクスチャを選んで図のように並べてつなげます

画像テクスチャノードの写真アイコンを押して 先に作ったテクスチャのグリッドを選んで
3Dビューのシェーディングマテリアルレンダーにするとカラーグリッドが表示されるかと思います


さて、画像テクスチャノードの左側に「ベクトル」のソケットがありますがこれは何に使うものでしょう?
これは画像のどの座標を3Dの面上にどう対応させるかを決める "UVベクトル"を指定するものになります
今は何も指定していないので アクティブなUVが自動的に設定されています
Blenderは複数のUVマップを持つことができますが
テクスチャのベクトルに入力>UVマップのノードを追加することで利用するUVを指定することができます


さて 見る角度によって画像をずらすノードの簡単なのを作ってみます
先にノードは掛け算割り算といった感じの処理をしたりしてくれるものだと言いましたが
UVに角度によって変わる値を加えることができればできそうです

入力>ジオメトリ ベクトル>ベクトル変換 コンバーター>ベクトル演算のノードを追加して図のようにつないでみてください
(図中で"追加"となっているノードはベクトル演算を選択した時に作られるもので ノード内のプルダウンで名前が変わります)
ジオメトリ"ノーマル"は面がどの方向を向いているかの情報で "ベクトル演算"の下のプルダウンを"カメラ"にすることで
ビューの方向から見て面がどういった方向を向いているのかといって情報が出力されます

3Dビューの表示を回転させてみてください テクスチャが移動しているでしょうか

長くなったしまったので今回の記事はここまで
次回後編は グループ化したノードを使って 実用に即したものを解説したいと思います

0 件のコメント:

コメントを投稿