サイバーパンクなホログラムUIや、氷の床表現などで、「ただのペラペラの1枚の板（ポリゴン）なのに、中を覗き込むと奥の方まで空間があるように見える」というエフェクトを見たことがありませんか？
あれ、一体どうやって作っているか気になりますよね。 3Dモデルで実際に奥まで箱を作っているわけではなく、実はマテリアルの「Parallax Offset（視差オフセット）」というテクニックを使って、目の錯覚を生み出しているんです！
Parallax Offsetには、単純なものから複雑なものまで、いくつかの種類や手法があるのですが、
その中でも今回は、一番単純な「1枚の板に奥行きを作るマテリアル」の組み方を、ステップ・バイ・ステップでご紹介します！
実践！Parallax Offsetのノードを組んでみよう
一見難しそうに見えますが、ノードの組み方自体はとってもシンプルです。
適当なマテリアルを作成し、お手持ちのテクスチャ（ロゴや模様など）を用意して、一緒に組んでいきましょう！
Step 1：カメラの向き（Camera Vector）を取得する
まずは、プレイヤー（カメラ）がそのメッシュを「どの角度から見ているのか」という情報を取得します。
マテリアルエディタ上で右クリックし、CameraVectorノードを出します。
Step 2：空間を変換する（World → Tangent）
次に、取得したカメラの向きを「メッシュの表面を基準とした空間」に変換します。ここが最大のポイントです。
TransformVectorノードを出し、詳細パネルの設定を以下のように変更します。
- Source: World Space
- Destination: Tangent Space
そして、先ほど出したCameraVectorをこのTransformVectorに繋ぎます。
Step 3：XY成分を取り出して、深さを調整する
変換したベクトル情報から必要な部分だけを取り出します。
ComponentMaskノードを出し、詳細パネルで「R」と「G」だけにチェックを入れます（これでX軸とY軸の情報だけが取り出せます）。
この取り出した値をそのまま足しても良いのですが、奥行きの深さを調整できるように、Multiply（乗算）ノードで数値を掛けます。例えば -0.1 などを掛けてみましょう。この数値が奥行きの深さ（オフセット量）になります。
Step 4：UVに足して、テクスチャに繋ぐ！
最後に、Add（加算）ノードを使って、元のテクスチャのUV（TexCoordノード）に、先ほど計算した数値を足し合わせます。
それをテクスチャのUVピンに繋げば……完成です！
いかがでしょうか？
プレビュー画面で板ポリゴンを斜めから覗き込んでみてください。カメラの角度に合わせてテクスチャがズルズルと動き、まるで板の奥にテクスチャが存在しているように見えるはずです！
ちなみに、Multiplyで掛ける奥行きの深さの値をプラス（例えば 0.1）にすると、ズレる向きが逆になり、今度はテクスチャが板から手前に出っ張って見えるようになります。
「マイナスなら奥に沈む、プラスなら手前に出っ張る」と覚えておくと、表現に合わせて使い分けられますよ！
疑問：なんでこのノードだけで「奥行き」が出るの？
さて、無事に奥行き表現を作ることはできました。 ……でも、ちょっと立ち止まって考えてみてください。
「なぜ、CameraVectorをTangent Spaceに変換してUVに足すと、奥行きがあるように見えるのか？」 この理屈、スッと説明できますか？
ネット上には「こう組めばParallax Offsetができるよ！」というTIPSはたくさんありますが、「なぜそうなるのか」という数学的な空間（Space）の仕組みを理解していないと、いざという時に応用が利きません。
また、このテクニックを使った実践的な作例として、「立体的なホログラムキューブ」を作りました。
このような実践的な制作をする上では、クオリティを高くするためにもう一工夫必要であったり、「半透明マテリアル特有の描画順の問題」といった壁にぶつかります。
箱を作ってこのマテリアルを貼ると、奥側（裏面）が手前側（表面）よりも上に描画されてしまい、一瞬で立体感が破綻してしまう問題が起きます。
【完全理解】理屈から実践的な作品制作まで、一気に学びたい方へ！
「Parallax Offsetのノードを組むだけじゃなく、背後にある空間変換の理論（Why）をしっかり理解したい！」
「描画順の問題の解決や、クオリティの高い作品を完成させたい！」
そんな方に向けて、私がColosoで出しているオンライン講座にて、このParallax Offsetの理論から実践的な仕上げまでをみっちり解説しています！
🔽 Coloso講座：仕組みから学ぶNiagara×Materialの高度VFX表現
https://coloso.jp/products/vfxartist-heyyo-jp
（※本記事の内容は、講座の【第25講・第26講】のセクションで詳しく取り扱っています。）
この講座では、今回飛ばしてしまった「World SpaceからTangent Spaceへの変換って、要するに何が起きているの？」という数学的な仕組みを図解で丁寧に解説しています。
さらに、キューブに適用した際に起きる半透明の描画バグを、Custom Depth（カスタムデプス）を使った高度な処理で美しく解決し、最終的な高品質エフェクトとして仕上げるまでの全工程を一緒に学べます。
「手っ取り早く完成データが欲しい！」という方へ
「講座をじっくり見る時間がない！」 「完璧にバグ修正されたホログラムキューブの完成データだけを、自分のプロジェクトですぐに使いたい！」
という方向けに、Gumroadにてプロジェクトデータ単体での販売も行っています。
🔽 Gumroad：プロジェクトデータ販売
https://heyyohanashima.gumroad.com/l/zrgie
「ノードのつなぎ方」を丸暗記する段階から一歩抜け出して、「なぜそうなるのか」という理屈を理解すると、マテリアル制作はもっともっと楽しくなります。
表現の幅をワンランク広げたい方は、ぜひ講座やデータを通じて、この魔法の仕組みを解き明かしてみてくださいね！
