はじめに
今回は3DCGの画像入力による凹凸表現に関する情報をまとめます。
違いの概要は下記。
【バンプマップ】
・白黒画像で行うピクセル法線操作
・軽いが制度は低め
・古の時代に使われた技術
・いまはノーマルマップを使うのが主流
【ノーマルマップ】
・R,G,Bカラーをフルに使った画像で行うピクセル法線操作
・一般的な疑似陰影
【視差マップ（Parallax Mapping）】
・白黒画像で行う疑似形状変形
・面の表面の色が表示される位置をズラして疑似的な凹凸を作る
・輪郭に影響はなし
・パララックスマッピングと呼ばれることもある
・UE5では「バンプオフセット」と呼ばれる
【視差遮蔽マップ（POM）】
・進化版視差マップ
・疑似的な凹凸の中に "遮蔽" で見えなくなる部分を計算する
・処理負荷が上がるが凹凸がリアルになる
・Parallax Occlusion Mappingの略でPOMと呼ばれる
・Occlusionが遮蔽という意味
【インテリアマップ】
・POMの派生技で室内を再現する方法
・大きな凹みを計算し、テクスチャに特殊な操作を行い室内を再現
・ハイエンドゲームでビルの室内表現に使われることがある
・処理負荷はやや高め
・fake interiorと呼ばれることもある
【ディスプレメントマップ】
・白黒画像で行う本物の形状操作
・輪郭に影響を与えるが重いまた、記事内で使用したテクスチャはambient CGの「Rock028」です。
↓こちらを手元に用意し、実際に動かしながら学習すると理解が深まります。
この記事は全ての凹凸表現を実際に作る際に使った方法も紹介します。
陰影は必ずしも形状とは一致しない
この先の情報を理解するうえで重要になる考え方が…
「陰影は必ずしも形状とは一致しない」です。
↓このように設定次第で面の陰影を変えれます。
ポリゴンの場合は頂点にある「頂点法線」を操作すると陰影の見え方を変えれます。
↓このような挙動になります。
スムーズ/フラットシェードもこの「頂点法線」の操作です。
そしたら、3DCGの凹凸について見ていきます。
バンプマップ
バンプマップは白黒画像を使った「ピクセル法線操作」です。
↓先ほど紹介した頂点法線の操作を白黒の画像を使って行います。
普通の状態なら面表面の陰影は変わりません。
そこで高さ情報を白黒で書いたテクスチャを用意。
UV展開 → 面に割り当て。
この白黒画像を元に “高さ” を計算。
計算した高さを元に “ピクセルで” 法線操作を行います。
これで疑似的な面の傾き情報が生成されます。
あとは「ピクセル法線」の情報を面に割り当て。
そして陰影を操作すると疑似的な凹凸表現ができます。
バンプマップを使った凹凸がこちらです。
↓ちなみに、Blenderでこのようなマテリアルを作り表現しました。
Blenderのマテリアルは画面上部で「シェーディング」を開く。
適当なモデルを配置し、選択したまま「＋新規」を選択でマテリアル作成。
そして、ノード編集画面でShift＋A → 検索で必要なものを取り出し。（バンプだけ）
画像の追加はエクスプローラーからドラッグ＆ドロップ。
もしくは画像テクスチャを追加して「フォルダーマーク」を選択で行えます。
↓そして、このような配線を行ってください。
以上がバンプマップの解説です。
ノーマルマップ
ノーマルマップはバンプマップの進化版です。
バンプと本質的なところは同じ、法線操作です。
ちなみにUnityのマニュアルでは…
「ノーマル」は「バンプマップの1種」という定義になってます。
画像は２つの情報格納モードを選べます。（カラープロファイル）
・白～黒の１色格納モード（グレースケール）
・RGBの３色格納モード（カラー）↓一般的な画像はRGBの３色です。
そしてノーマルマップは「RGB」の３色をフルに使ってピクセル法線を操作する技です。
昔の私は “頂点法線” と表現しましたが…
「ピクセル法線」の方が言葉的に分かりやすかったですね…
と思って、この記事ではピクセル法線と表現してます。
その結果、紫色の画像が生成されます。
↓難しいことはこちらでまとめてます。
↓こちらを使うと、このような凹凸表現が作れます。
↓Blenderのシェーダーはこちら。
バンプとノーマルマップの比較
バンプとノーマルマップの違いは “陰影の細かさ” です。
バンプはグレースケールの（0～255）通りの情報しか使えません。
なのでアップで見ると陰影が荒いです。
ノーマルはカラーの情報が使えます。（0～255の3乗 = 16,777,216）
なのでデータ容量が増えますが、陰影の表現が滑らかになります。
ただしUVの向きまで考慮できないので注意。
よく見ると、陰影の向きが逆になったりします。
が… 「そんなに気にならないよね」ということで使われてます。
あくまで作れるのは…
ピクセル法線操作による「疑似的な凹凸」です。
以上がノーマルマップの解説です。
視差マップ（パララックスマッピング）
視差マップはピクセル法線の操作と別の考え方で陰影を作ります。
↓まず白黒画像で高さを出すまでは一緒です。
割り出した高さから「面の表示をズラす」処理を行います。
注意点は “元の形状” に影響を与えられないことです。
なので表現上は “凹ませる” だけになります。
凸を使うと元の面の外側に影響を与える必要がでてきます。
この操作は “形状自体” を操作しないと行えません。
具体的にどうやるかというと…
高さ情報を元に「面の色をズラす」処理で実現します。
この面のズラしは「UV座標」つまり、色の参照先操作で行われます。
なので、色の違いが無いと「差」を認識できません。
「変化前」と「変化後」のUV座標にある色が同じなので、ただの平面になります。
そこで、適当なカラー情報を入力。
これで初めて効果が分かる状態になります。
↓このような表現になります。
動かすと… ちょっと奥行を感じます。
不思議な表現。
「色だけ」と「色＋視差マップ」の比較がこちらです。
↓ Gif比較、ちょっと陰影が深まったのが分かります。
視差マップは形状の見え方を変えてるだけです。
“形状そのもの” は変わってないので注意してください。
“形状そのもの” は変わってないので輪郭線に変化は出ません。
以上が視差マップの解説です。
視差遮蔽マップ（POM）
視差遮蔽マップは視差マップの進化版です。
【言葉の整理】
◆視差マップ
→ パララックスマッピング
→ 英語表記で「Parallax Mapping」
→ Parallaxが "視差" という意味
◆視差遮蔽マップ
→ パララックオクルージョンスマッピング
→ 英語表記で「Parallax Occlution Mapping」
→ これの略称が「POM」
→ Occlutionが "遮蔽" という意味
→ 視差オクルージョンマッピングと呼ぶ人もいる「遮蔽」という要素が増えた視差マップという理解があれば大丈夫です。
視差マップは白黒の高さ情報から、UV座標を操作して面の色をズラして凹凸を表現してました。
これに謎の技術で「遮蔽」の計算が入りました。
↓そして見えない色が発生し、奥行がよりリアルになりました。
シェーダー芸人が「高さ」と「視線」の計算でうまいことやったんだと思います。
↓視差と視差遮蔽の比較がこちら。
奥行きが強まったのがわかります。
↓動かすと、このようになります。
視差に比べて、明確に立体感が上がりました。
ただし処理負荷が増えるので注意。
VRChatなどのゲームで使うなら…
「ノーマル」＋「普通の視差」の2を組み合わせるのが現実的と思います。
視差遮蔽は重すぎるかなという印象。
（時と場合による定期）
視差と視差遮蔽はBlenderだと再現がかなり大変でした。
そこで「Unity」で使えるシェーダーの「lilToon」を使いました。
lilToonは詳細設定を開くと「視差マップ」の項目が出てきます。
ここからいろいろ試せます。
VRChatユーザー向けの記事ですが…
↓UnityやlilToonの導入、マテリアルの設定などはこちらをご覧ください。
インテリアマッピング（Fake Interiors）
インテリアマッピングは視差マップの派生技です。
↓まず奥まった箱のような高さ情報をプログラムで作ります。
そして謎の技術で押し出した “側面” に色情報などを割り当てれるようにします。
すると「部屋っぽい」表現ができます。
これがインテリアマップやFake interiorと呼ばれるモノです。
先ほどの画像で行うと、このような表現になります。
静止画だとあまり違いが分かりません。
↓これは動かすと非常に分かりやすいです。
つまり「動画」や「ゲーム」などの動かすものに対して有効な表現になります。
こちらの説明画像は「【無料】Interior Mapping Shader」で作りました。
あとはUnityで使える無料だと「Fake Interiors FREE」あたりがおすすめ。
↓この２つを使った作成方法はこちらで解説。
以上がインテリアマッピング（Fake Interiors）の解説です。
ディスプレメントマップ
ディスプレメントマップは白黒画像を使って「 “本当に” 形状に変形」させます。
面の形が実際に変わります。
これを行うには、細分化などで面の分割をすごく増やす必要があります。
なのでポリゴン数が増えて処理負荷がすごく上がります。
白黒の高さ情報を「頂点の位置」に割り当てるイメージ。
なので頂点数を増やさないと、きれいな凹凸が作れません。
分割なしの形状ではディスプレメントマップは動作しません。
少ない頂点が少しだけ動く状態になります。
↓具体的には… これぐらい分割を増やす必要があります。
これで初めて動作します。
ただ「面」は綺麗に出ますが…
急激な面の変化が起こる「辺」ではうまく動作しません。
そして、処理負荷も高すぎるので…
結局は「実用的な技術ではないよね」という結論に至ります。
正直、覚えなくていいです。
使うのは音楽のMVで変わった表現が必要な時ぐらいかな…
やり方はこちらで解説しました。
↓ただ、覚えても実用性は無いので注意。
以上が、ディスプレイスメントマップの解説です。
まとめ
今回はバンプとノーマルと視差とPOMとインテリアマップの違いについて解説しました。
・バンプはグレースケール画像を使いピクセル法線を操作する
・ノーマルはカラー画像を使いピクセル法線を操作する
・視差はグレースケール画像から高さを計算し、表示する色をズラす処理（UV操作）
・視差遮蔽は視差マップの計算をより高度にしたもの
・インテリアマップは視差の応用技で面に疑似的な凹みを生成する処理
・ディスプレメントマップはグレースケール画像の高さでモデリングを行う処理（頂点操作）
また、他にもBlenderについて解説してます。
ぜひ、こちらもご覧ください。
コメント