Unity：嘗試製作可相交的視差遮蔽貼圖 Shader (Trying to Create an Parallax Occlusion Mapping Shader with Pixel Depth Offset)

 警告，本文只是分享摸索的過程，並不是完善的技術文。

此文在計算深度位移有錯誤，後續有所更新，詳見此文

 
 
視差貼圖(Parallax Mapping)是一種改進後的凹凸貼圖的技術，可以用極少的面數模擬複雜模型的表面凹凸，因為介紹視差貼圖這個技術的文章很多了此處就不詳細介紹，本文只大概說明使用視差貼圖要怎麼讓模型與一般的物件產生正確的陰影投射和相交的效果。

 一般的視差貼圖的做法是依照切線空間的視線相量位移貼圖採樣的 UV 座標而產生立體感，物件本身的幾何形狀並未更改，因此各個像素的深度也是原有形狀的位置，因此相交時無論畫面上的物體因為視差貼圖產生凹凸的樣貌為何，相交還是依照原有的幾何形狀，而接收物件陰影投射亦有相同狀況。(如下圖)

物件相交

Unity 中的 HDRP 中內建的 Lit Shader 提供的像素深度位移(Pixel Depth Offset)的功能，可以讓各個像素的深度位置依照視差貼圖位移的量產生位移，進而讓視差貼圖凹凸的效果也能對應到物件的相交上。(如下圖)

需要提到的是 Unreal 引擎的 Shader 也有同個功能，但無論是 Unity 和 Unreal 引擎的做法我都無法取得夠詳細的資料，雖然 Unity 的 Lit Shader 可以找到原始碼，但是太複雜了，目前暫時還是沒有辦法理清做法。(ﾟ∀。)

為了產生正確的物件相交與陰影投射勢必要計算出正確的深度，那麼怎麼計算正確的深度呢？我的做法就是直接將像素的世界空間座標依照凹凸的位移量計算出位移後的世界座標，然後再計算剪裁空間的座標，然後就得出深度了。

需要說的是我採用的視差貼圖技術是視差遮蔽貼圖(Parallax Occlusion Mapping，POM) ，原先是在 Shader Graph 中用 Custom Function 節點製作的，結果如下方的影片。 

參考了 Unity 的做法，使用的是高度圖而非深度圖，因此高度(深度)最低為0，最高為1，需要特別注意。


取得視差位移後的深度首先第一步是求出視差位移後的高度(深度)。這個很簡單，回傳位移後的 UV 時一並回傳目前的高度(深度)，如下圖可以看到高度最低至最高由 0 到 1 灰階漸層。

一旦取得高度後便可以取得世界空間的座標位移量，算法如下。

offsetDistance 在本文中指的都是最大的凹凸位移量。

  1. float3 worldPosOffset = viewDirWS * height * offsetDistance;

最後將世界空間的像素座標加上位移量後轉換到剪裁空間後得出像素在視差位移後的深度值，將深度值寫入(輸入至SV_Depth)後即可正常的產生相交的效果。

視差位移後的深度值算法如下。 

  1. positionWS += worldPosOffset;
  2. float4 positionCS = TransformWorldToHClip(positionWS);
  3. float depth= positionCS.z / positionCS.w;

到此應該就能夠產生正確的相交效果，然而某些狀況會發現問題，像是渲染出來的凹凸深度與相交的深度不吻合。如下圖的狀況，相交的深度位移量比實際渲染出來的小非常多。

這是因為UV被拉伸的關係，因為UV拉伸會影響視差貼圖UV的位移量，拉伸UV的比例越大在畫面上UV的位移量也會被拉伸更大，但是計算世界空間座標的位移量卻沒有跟著縮放的結果。Unity HDRP的Shader也會有相同狀況，如果不處理深度位移這種狀況不會造成困擾。

頂點UV座標的變化量必須等同世界空間座標的變化量，而且不會隨著物件縮放而改變這個比例，也就是1：1。要避免 UV 拉伸造成深度計算錯誤的方法最好是使用尺寸 1 * 1 單位的平面，而且各頂點的 UV 剛好範圍落在 [0,1] 的區間內， Unity 預設的 Cube 是最好的例子。

Plane則否，因為Plane的尺寸是10 * 10 單位，UV座標卻是落在[0,1]間，變化量只有10：1，這樣算出來的深度位移量會變成十分之一，這種狀況下必須手動將深度的位移量乘10才是正確的深度位移量。因此如果UV或物件有拉伸縮放導致UV變化量與世界空間的座標變化量不等於1：1時有兩種做法。

  1. 縮放 UV 的視差位移量：將 UV 的視差位移量鎖定成世界空間的長度，不隨 UV 拉伸與縮放改變。
  2. 縮放深度的位移量：UV 拉伸時跟著縮放深度的位移量， UV 的視差位移量隨 UV 拉伸與縮放改變。
如下是計算出物件的縮放後(拉伸UV也是相同作法)，縮放視差貼圖的 UV 位移量，只要考慮 XZ 方向的最大縮放量(UV 空間的 XY 軸)，縮放 UV 的位移量後計算世界空間的座標位移量則以原有未經縮放的位移量計算即可。要注意此計算在頂點階段執行即可，雖然可以用 ddx 、ddy 計算出拉伸的量，但是在像素階段開銷較大，在一般平面沒有必要。 
  1. float CalculateUVOffsetDistance(float offsetDistance)
  2. {
  3.     float3 objectScale = float3(length(float3(UNITY_MATRIX_M[0].x, UNITY_MATRIX_M[1].x, UNITY_MATRIX_M[2].x)),
  4.                                 length(float3(UNITY_MATRIX_M[0].y, UNITY_MATRIX_M[1].y, UNITY_MATRIX_M[2].y)),
  5.                                 length(float3(UNITY_MATRIX_M[0].z, UNITY_MATRIX_M[1].z, UNITY_MATRIX_M[2].z)));                         
  6.     return offsetDistance / max(objectScale.x, objectScale.z);
  7. }

 

如何處理投射陰影的部分只需要額外寫一個渲染 ShadowMap 的 Pass 即可。採樣投射的陰影時則使用位移過後的世界空間座標即可。

因為視差位移貼圖本質上是下凹的凹凸貼圖(本文雖然使用高度圖也一樣)，所以地平面會變成向法線相反方向偏移，為了處理物理碰撞會出現浮在空中的狀況，我將頂點向法線方向推出同樣距離以抵銷偏移。

到此，目前摸索可相交視差遮蔽貼圖 Shader 的過程告一段落。

留言

張貼留言

₍₍ς(OωO ς)⁾⁾

這個網誌中的熱門文章

Unity：製作可相交的視差遮蔽貼圖 Shader 續 (Parallax Occlusion Mapping Shader with Pixel Depth Offset)

圖片
前言 在 幾年前的文章 曾有提到嘗試製作可相交的視差遮蔽貼圖(以下都簡稱 POM) Shader，然而當時一直留下一個疑問，就是計算深度偏移的量一直不是很正確。 本文新的實現方法，與幾年前的看起來相似，但是有穩定的深度位移 多年後終於有能力重新整理過一次，看了 Unity 的原始碼才發現當年已經離問題的所在很接近了，在後來版本的 Unity 裡面可以看到解決方法，在 Shader Graph Parallax Occlusion Mapping 這個 Node 的參數可以看到問題的所在。 POM 控制垂直偏移高度的參數(Unity 中為 Amplitude)在本文章使用的是物件空間座標，如果偏移高度參數是 0.6，代表著表面到最底部距離在物件空間的座標下相差 0.6 公尺。   原始碼 有關原始碼，請詳見 Github 專案 。    問題根源-如何計算逐像素的世界空間座標偏移量 這個問題關鍵就在於 UV 空間座標的 U軸 和 V 軸這兩個基向量在物件空間的長度。當要計算各個像素位移後的深度時必須知道各個像素在偏移後的世界座標是多少，然後再計算出深度。 提醒一點：U 軸 和 V 軸基向量在某些條件對應到切線與副切線，但不是絕對，因為 U軸 和 V 軸可以沒有正交，切線與副切線卻必須正交，這個限制了使用 POM 的模型不能有太多 UV 扭曲和法線調整 從 POM 的計算裡會得到射線(viewDir)與位移後表面交點的高度(Tp 點的高度)，可以藉此高度值計算 T0 到 Tp 的位移向量 T0Tp ，如果這個位移向量的長度正好就是世界空間的長度，那麼只需要將是世界空間的射線向量乘以這個長度，然而在將射線的向量轉換的過程中會令這個長度可能沒有符合世界空間的長度，所以要在轉換過程中確保轉換後的長度一致。 Unity 版本的視差遮蔽，由物件表面為 1 起始 Created by modifying " LearnOpenGL " (©  JoeyDeVries ( Licensed under CC BY 4.0 ))   用來計算 POM 的射線一開始為世界空間的單位向量(viewDirWS)，如果使用此向量，得到的偏移高度會是世界空間，無法跟隨物體縮放，於是一開始先除以...
閱讀完整內容

Blender：Geometry Node 應用於營造法式生成大木作構件初探-梭柱篇

圖片
摘要 本文初步探索了透過使用 Blender 內建 Geometry Node 來程序化生成建築構件。 前言 最近正在學習 Blender 的 Geometry Node，使用程序化生成模型非常的吸引我，看了一些教學後在想時不是要做些什麼當作練習。第一個想到的其實是應用在建築構件的生成。 營造法式的大木作構件感覺就是一個很好的題材，因為大木作構建本身在營造法式中已經很詳細載明了做法。所以很適合做成程序化生成模型，此外我想到另一個優點是可以快速透過調整參數控制品質，例如曲線的段數和榫卯可以透過參數調整，便於處理 LOD 或是不同使用情境。 這次初探會針對梭柱嘗試製作程序化生成模型，首先我們要了解營造法式中針對梭柱的規則，再來藉由這些規格轉化成程程序化生成模型的邏輯。  該專案也有上傳至 Github 術語簡單介紹 因為再來會很常使用到中國傳統建築的一些術語，所以先在此簡單解釋： 卷殺：是指對構件砍削出折線或曲線的行為，藉以柔化外觀 材分 ：宋代《營造法式》中使用的這個建築尺度單位，主要用來控制建築構件尺寸的模數。1 材可細分為 15 分，但是這個一材的大小隨著等級可大可小。另外還有栔，為 10 分。 梭柱的規格 梭柱的規定在 《營造法式》第五卷·大木作制度二 有敘述，這邊只擷取與梭柱相關，亦不擷取與升起側腳相關的部分。 凡用柱之製，若殿閣即徑兩材兩栔至三材，若廳堂柱即徑兩材一栔，餘屋即徑一材一栔至兩材。若廳堂等屋內柱，皆隨舉勢定其短長，以下檐柱為則。（若副階廊舍，下檐柱雖長，不越間之廣。 …… 凡殺梭柱之法，隨柱之長，分為三分。上一分又分為三分，如栱卷殺，漸收至上，徑比櫨枓底四周各出四分；又量柱頭四分，緊殺如覆盆樣，令柱頭與櫨枓底相副。其柱身下一分殺令徑圍與中一分同。 …… 從以上敘述可以知道柱子有三個主要的參數，直徑與高（長）、材分等級來決定一分(U)的大小，然而高卻沒有非常詳細的規定，此處以實例常見的直徑(D)與高度(H)比為 1:9 假定。 H = 9 * D D = 42 ~ 45 * U 有關卷殺，柱身上方寫的非常清楚，柱身下方卻不是很明瞭，我們此處假設只有上方有卷殺，也就是如上敘述的柱身上方 1/3 的部分進行卷殺。 另外一個問題來了「徑比櫨枓底四周...
閱讀完整內容