文章中的描述若有誤，歡迎指正。

1-先展示下最終的效果(動圖)

2-製作緣由

有朋友發來一個網上有人用Blender實現的用貼圖來實現具有空間感的星空效果（

https：//www。

youtube。com/watch？

v=iSQGp6zHdyM&t=628s

），覺得這種視差貼圖挺有意思的，而且可以做很多延伸。

3-UE4節點圖

（材質節點圖）

（自定義DepthOffset材質函式節點）

4-原理

想象有兩塊具有相同數字圖案的玻璃平行放置，如圖。

·當眼睛視線E1往平面A的A3處觀察時（視線垂直於平面A），此時A3與B3重疊；

·當眼睛視線E2往平面A的A2處觀察時，A2與B1重疊，此時若將平面B向上移動使得平面B的高度與平面A一致，則需將點B1向右偏移d距離才能令A2與B1重疊，此時視線觀察到A2處的內容與平面B高度移動前的內容一致；

如上圖右邊所示，若想在平面A上顯示平面B的內容且不存在平面B，則需在平面A上的紅色區域對應畫上平面B的圖案，且圖案隨眼睛位置變化而不斷進行適應（即依據眼睛位置進行計算）。總的來說即是需要求出每一點的偏移值d，已知眼睛觀察至目標點的單位向量E，自定義的平面B距離平面A的距離值H且平面A與平面B平行，可求得d的值，如下圖。

5-涉及知識

·UV座標系

我理解的UV座標系是一個在模型表面上的用於查詢貼圖中對應位置RGBA值的二維座標系

·切線空間

我的理解是以模型的頂點為原點，法線方向為z軸，切線方向為x軸建立的一個三維座標系TBN（xyz），每個頂點都對應著一個切線空間（在這裡只要知道它是一種區域性座標系就行）。可以透過以下連結更加深入的去了解切線空間：

1-

https：//

zhuanlan。zhihu。com/p/13

9593847

（切線空間（Tangent Space）完全解析-作者：謎之裙襬）

2-

https：//www。

zhihu。com/question/2370

6933/answer/161968056

（作者：Richard Pan）

·簡單向量運算（向量的加減法及向量與常數的乘法，單位向量）

6-UE4中實現詳解

視差材質的關鍵是如何將底層的畫面顯示在第一層（即渲染平面）上，按照上文所講的原理轉化為UE4中的術語如下：

按照其原理自定義一個材質函式DepthOffset以方便之後多層深度疊加在一起，材質函式節點圖如下：

其中CameraVector可由CameraVector節點獲得，但這個向量是世界空間的，需要透過transform節點將其轉換到切線空間。

因為深度h，貼圖尺寸及貼圖是可變的，所以我們需要從材質函式外部輸入（在材質中將設定對應的變數）

最後材質圖如下：

這裡我做了五層高度（層數沒有限定），所以使用了五次上面自定義的DepthOffset節點，設定了5個深度變數，5個顏色變數分別對應每一層，因為這個材質中我使用的貼圖都是同一張，所以貼圖和貼圖大小隻設定了一個變數同時用於五個層。

值得注意的一點是，我在最後合成五個層的時候因為我想讓每一層都會遮擋下面的圖案，所以我

從第一層往下計算，而且是使用lerp而不是相加

（假如直接相加的話最終的效果會類似透明的感覺）。比如我計算第三層的顏色的時候，我先將兩層的遮罩值相加並將最終的值限定在0到1之間，再透過lerp疊加上第三層，這樣得出來的結果就不會有圖案的重疊，看上去不透光的感覺。

7-參考連結

https：//www。

youtube。com/watch？

v=iSQGp6zHdyM&t=628s

（用Blender實現的基於貼圖的視差星空效果）

https：//www。

youtube。com/watch？

v=X5WASspig3g

（用UE4實現的體積冰塊的效果，這是我做的視差材質的主要原理參考來源 @奶牛貓 ）