前言

視差貼圖技術是相對于傳統的法線貼圖技術所做的一項改進

視察貼圖技術可以給場景里要渲染的游戲物體增加物體表面的凹凸細節，在過去為了表現物體的表面細節，通常會使用法線貼圖，那么為什么又要使用視差貼圖呢？它跟法線貼圖有什么區別呢？下面來為大家講解

版權聲明

• 本文為“優夢創客”原創文章，您可以自由轉載，但必須加入完整的版權聲明
• 更多學習資源請加QQ：1517069595或WX：alice17173獲取（企業級性能優化/熱更新/Shader特效/服務器/商業項目實戰/每周直播/一對一指導）
• 點贊、關注、分享可免費獲得配套學習資源
• 點擊觀看完整視頻

文章目錄

• 前言
• 版權聲明
• 視差貼圖與其他貼圖
• 視差映射算法的各種效果
• 視差貼圖究竟長什么樣
• 如何表現物體表面凹凸
• 思考
• 寫在最后

視差貼圖與其他貼圖

• 上圖是本文的封面，封面上的三張圖片是采用不同渲染方法渲染出的墻體
  • 最左邊的圖片是不采用任何增加表面細節的方法渲染出的墻體
    • 它雖然有一張基本的細節貼圖，但這張貼圖并不能夠真實的反映物體表面的凹凸細節
  • 中間的圖片貼了一張法線貼圖
    • 法線貼圖可以增加物體表面的凹凸感，所以可以明顯看出中間的墻體比左邊墻體有更多的凹凸細節
  • 第三個圖片是在法線貼圖的基礎上增加了一張視差貼圖，并通過視差映射渲染算法處理進一步增強了凹凸細節表現
    • 視差貼圖只是一張圖，視差映射是利用視差貼圖的圖形學算法

視差映射算法的各種效果

• 視差映射算法除了可以用來增加物體表面細節以外，還能做出來很多有意思的效果
  
• 上圖就是利用視差貼圖技術把2D圖片3D化
  • 上圖中的小貓是一張2D圖片，不是模型，把這張圖片導入到Unity后，利用視差貼圖技術，就可以讓小貓動起來
    

硬幣會隨著鼠標的擺動往不同的方向進行一定旋轉，但旋轉角度不能太大，因為其本身只是一張2D圖片，并不包含一個3D物體的完整信息，旋轉角度太大就會出現一些失真和穿幫

右圖本身是一幅畫，在經過處理后看上去就像是在3D場景里一樣

• 視差貼圖技術在實際環境中也有廣泛應用，大名鼎鼎的FaceBook網站就使用了視差映射技術來實現2D圖片的3D化，在FaceBook網站里只要上傳一張2D圖片就能夠把它做成一張3D效果圖
  • FaceBook網站在你上傳一張圖片時會自動運用一些人工智能算法生成一張視差貼圖，然后利用這張視差貼圖來對圖片進行視差運算以實現2D圖片的3D化
• 視差映射技術不僅僅可以用來操作圖片，它也能用來操作一些視頻
  
• 上圖是一個抖音短視頻，可以看到場景里的人物面部突出來了，這也是利用了視差貼圖技術，而且只需要兩個步驟就能實現
  • 1，利用人工智能技術識別視頻里的人眼和嘴巴的區域
    • 這和FaceBook里運用的識別圖片是一個道理，但它做的更多一些，因為它不僅僅是做出人物的視差效果，還區分了人物的不同的區域
  • 2，利用視差貼圖技術把識別出的兩塊區域抬高

視差貼圖究竟長什么樣

• 左邊的貼圖沒有任何的凹凸細節表現，只是貼了一張普通的漫反射貼圖
  • 漫反射貼圖只能用來表現物體表面細節，無法沒有表現物體的受光，它的受光只是一塊灰蒙蒙的平面，正常的物體受光應該是凸的地方受光多一點，凹的地方不怎么受光
• 第二張貼圖是漫反射加法線貼圖，可以明顯看出它的受光效果，物體表面凹進去的部分受光會比較暗，凸出的部分受光比較明顯
  • 但漫反射加法線貼圖只是在受光上有了一些明暗變化，物體的凹凸細節并沒有表現出來，想要表現物體的凹凸細節需要再增加一張視差貼圖
    
• 右邊的貼圖就是在漫反射加法線貼圖的基礎增加了一張視差貼圖，它不僅僅能夠反映光照帶來的變化，還能反映出物體表面的凹凸細節

如何表現物體表面凹凸

• 方法1，給模型增加更多頂點

  • 如果想要做出右圖這樣的地平面，僅僅是用一些頂點去做的話，需要有非常非常多的頂點，也就是使用高模，但在游戲的實時渲染中，根本不可能用面數、三角形、頂點數量這么多的模型來進行實時渲染
  • 顯卡能進行實時渲染的性能指標是有限的，所以我們一般會使用另外一種方式

• 方法2，低模加上一張貼圖

  • 用一張專門表示物體表面細節的貼圖來繪制物體細節，物體表面只需要用一個平面模型就可以了，剩下的細節全部通過這張貼圖來進行表現（如上方右圖）
  • 但這種方式做出的細節非常有限，因為這張貼圖只是把這些凹凸畫上去了，光照在物體表面產生的反射比較粗糙，只是白花花的一片光亮
  • 一束燈光照射在貼圖上產生不同方向、不同強度的反射，才能使渲染出的結果更加真實、細膩，只是貼一張貼圖，沒有基于每一個像素點來計算光照，只是基于整個大三角形進行計算，肯定無法得到細致的物體表面細節

• 方法3，方法3仍然是使用低模，保留漫反射貼圖，只是增加了一張法線貼圖
  

  • 前面的方法只是貼一張圖上去，因為物體表面的方向統一都是朝上的，自然表現不出細節，所以要增加一張法線貼圖，法線貼圖里存放的是物體的每一個像素點的方向信息
  • 比如上圖貼圖中的泥土的法線方向可能是朝著地面的，石塊表面因為比較光滑，它的法線方向就可能是朝上的，有了所有物體的表面細節后再進行渲染就能得到更加精細的光照的效果
  • 燈光方向雖然是一致的，但它會根據物體表面的法線方向來計算反光，由于每個像素點的法線方向都不一樣，計算出的反射方向自然也不一樣，所以它能夠表現出更細致的光照細節

• 這就是法線貼圖的原理，但不是法線貼圖的全部，只是一些皮毛，法線貼圖的知識點還有很多，比如

  • 法線貼圖是怎么樣生成出來的？
  • 法線貼圖為什么是藍色的？
  • 為什么法線貼圖除了大部分都是藍色以外，還會出現有紅色、綠色，它們都代表什么？

• 法線貼圖有一個約定：如果一個物體表面的方向是垂直朝上的，那么它在法線貼圖里就會用藍色表示，為什么會用藍色呢？
  

  • 這個規定是有一定原因的，因為法線貼圖使用了切線坐標系，切線坐標系規定物體的平面是由切線坐標和負切線坐標構成的，垂直于這個平面的就叫做法線（如上方最右方圖）
  • 法線的坐標剛好與平面垂直，它的坐標是（0，0，1），如果把它轉換成一張圖片里的顏色那么（0，0，1）就相當于RGB里的B，也就是Blue，因此使用藍色來表示一個物體的表面法線方向
  • 比如左邊的貼圖中有些地方是石塊，這些石塊的表面方向是朝上的，但它的邊緣方向要么朝左、要么朝前，要么就是朝右，因此它的顏色就可能是綠色或者紅色，如果是綠色，就表示它的法線方向朝著負切線法線的方向，如果是紅色，就表示物體表面的方向是朝著切線方向

• 這僅僅只是理論上的了解，當你要落到實處寫代碼時就會發現：

  • 在Unity里直接導入一張圖片，并對它進行紋理采樣，所得到的采樣結果又會是不正確的，這就跟Unity對法線貼圖的編碼和壓縮有關系了

• 使用法線貼圖渲染出的結果就會更加貼近真實，但還不夠，法線貼圖只能模擬表面上不同的法線方向帶來的明暗變化，并不能模擬凹凸
  

• 假設上圖中的眼睛圖標是Unity里的攝像機，藍色的箭頭是攝像機觀察的前方向，在現實世界中，我們用眼睛看這塊磚塊時，磚塊有一些背面是不能被眼睛看見的，這部分就處于陰影區域

• 如果用法線貼圖的話，那么這部分就不處于被遮蔽的陰影區域，它仍然是可見的，為什么呢？

  • 因為法線貼圖里不包含物體的高低信息，它只有每一個像素點的法線方向，所以只能計算出來物體表面的明暗信息，不能計算出這一塊區域是否被遮擋，體現不出來凹凸感
  • 從之前的使用法線貼圖的地面效果中也可以看出磚塊后面的陰影區域只是比較暗，并沒有被遮擋
    

• 如果使用低模的話，那么物體表面的法線方向都是跟這個物體的表面垂直的，就是我們現在看到這個呃紫色或者藍色的，因此一束光照射過來時產生的光線反射也是一樣，并不能反映物體表面的明暗變化（如上方1號圖）

• 上面的第3號圖是法線貼圖，每一條物體表面的法線朝向都不一樣，在計算物體光照的公式里會根據反光的夾角計算反光強度，由于每一個物體的表面的法線方向都不一樣，那么夾角的大小也不一樣，計算出的反射也不一樣，物體每一個像素點的光照強度系數也都不一樣

• 但這并不是正確的結果，正確的結果是什么呢？
  

• 由于物體表面是凹凸的，那么一束光照射在凹陷區域前方的平面上，那么凹陷區域應該是不受光的，這是真實的凹凸效果模擬

視差貼圖的具體實現細節可以加文末聯系方式領取

思考

什么時候要用到切線空間？
什么時候用物體的局部空間？
什么時候用世界空間？
切線空間的概念是什么樣的？
如何通過書寫算法調用Unity里的法線貼圖資源？

寫在最后

• 更多學習資源請加QQ：1517069595或WX：alice17173獲取（企業級性能優化/熱更新/Shader特效/服務器/商業項目實戰/每周直播/一對一指導）
• 點贊、關注、分享可免費獲得配套學習資源
• 點擊觀看完整視頻

總結

以上是生活随笔為你收集整理的视差映射：更逼真的纹理细节表现（上）：为什么要使用视差映射的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。