前言

視差貼圖技術(shù)是相對(duì)于傳統(tǒng)的法線貼圖技術(shù)所做的一項(xiàng)改進(jìn)

視察貼圖技術(shù)可以給場(chǎng)景里要渲染的游戲物體增加物體表面的凹凸細(xì)節(jié)，在過去為了表現(xiàn)物體的表面細(xì)節(jié)，通常會(huì)使用法線貼圖，那么為什么又要使用視差貼圖呢？它跟法線貼圖有什么區(qū)別呢？下面來為大家講解

版權(quán)聲明

• 本文為“優(yōu)夢(mèng)創(chuàng)客”原創(chuàng)文章，您可以自由轉(zhuǎn)載，但必須加入完整的版權(quán)聲明
• 更多學(xué)習(xí)資源請(qǐng)加QQ：1517069595或WX：alice17173獲取（企業(yè)級(jí)性能優(yōu)化/熱更新/Shader特效/服務(wù)器/商業(yè)項(xiàng)目實(shí)戰(zhàn)/每周直播/一對(duì)一指導(dǎo)）
• 點(diǎn)贊、關(guān)注、分享可免費(fèi)獲得配套學(xué)習(xí)資源
• 點(diǎn)擊觀看完整視頻

文章目錄

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

視差貼圖與其他貼圖

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

視差映射算法的各種效果

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

硬幣會(huì)隨著鼠標(biāo)的擺動(dòng)往不同的方向進(jìn)行一定旋轉(zhuǎn)，但旋轉(zhuǎn)角度不能太大，因?yàn)槠浔旧碇皇且粡?D圖片，并不包含一個(gè)3D物體的完整信息，旋轉(zhuǎn)角度太大就會(huì)出現(xiàn)一些失真和穿幫

右圖本身是一幅畫，在經(jīng)過處理后看上去就像是在3D場(chǎng)景里一樣

• 視差貼圖技術(shù)在實(shí)際環(huán)境中也有廣泛應(yīng)用，大名鼎鼎的FaceBook網(wǎng)站就使用了視差映射技術(shù)來實(shí)現(xiàn)2D圖片的3D化，在FaceBook網(wǎng)站里只要上傳一張2D圖片就能夠把它做成一張3D效果圖
  • FaceBook網(wǎng)站在你上傳一張圖片時(shí)會(huì)自動(dòng)運(yùn)用一些人工智能算法生成一張視差貼圖，然后利用這張視差貼圖來對(duì)圖片進(jìn)行視差運(yùn)算以實(shí)現(xiàn)2D圖片的3D化
• 視差映射技術(shù)不僅僅可以用來操作圖片，它也能用來操作一些視頻
  
• 上圖是一個(gè)抖音短視頻，可以看到場(chǎng)景里的人物面部突出來了，這也是利用了視差貼圖技術(shù)，而且只需要兩個(gè)步驟就能實(shí)現(xiàn)
  • 1，利用人工智能技術(shù)識(shí)別視頻里的人眼和嘴巴的區(qū)域
    • 這和FaceBook里運(yùn)用的識(shí)別圖片是一個(gè)道理，但它做的更多一些，因?yàn)樗粌H僅是做出人物的視差效果，還區(qū)分了人物的不同的區(qū)域
  • 2，利用視差貼圖技術(shù)把識(shí)別出的兩塊區(qū)域抬高

視差貼圖究竟長(zhǎng)什么樣

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

如何表現(xiàn)物體表面凹凸

• 方法1，給模型增加更多頂點(diǎn)

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

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

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

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

  • 前面的方法只是貼一張圖上去，因?yàn)槲矬w表面的方向統(tǒng)一都是朝上的，自然表現(xiàn)不出細(xì)節(jié)，所以要增加一張法線貼圖，法線貼圖里存放的是物體的每一個(gè)像素點(diǎn)的方向信息
  • 比如上圖貼圖中的泥土的法線方向可能是朝著地面的，石塊表面因?yàn)楸容^光滑，它的法線方向就可能是朝上的，有了所有物體的表面細(xì)節(jié)后再進(jìn)行渲染就能得到更加精細(xì)的光照的效果
  • 燈光方向雖然是一致的，但它會(huì)根據(jù)物體表面的法線方向來計(jì)算反光，由于每個(gè)像素點(diǎn)的法線方向都不一樣，計(jì)算出的反射方向自然也不一樣，所以它能夠表現(xiàn)出更細(xì)致的光照細(xì)節(jié)

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

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

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

  • 這個(gè)規(guī)定是有一定原因的，因?yàn)榉ň€貼圖使用了切線坐標(biāo)系，切線坐標(biāo)系規(guī)定物體的平面是由切線坐標(biāo)和負(fù)切線坐標(biāo)構(gòu)成的，垂直于這個(gè)平面的就叫做法線（如上方最右方圖）
  • 法線的坐標(biāo)剛好與平面垂直，它的坐標(biāo)是（0，0，1），如果把它轉(zhuǎn)換成一張圖片里的顏色那么（0，0，1）就相當(dāng)于RGB里的B，也就是Blue，因此使用藍(lán)色來表示一個(gè)物體的表面法線方向
  • 比如左邊的貼圖中有些地方是石塊，這些石塊的表面方向是朝上的，但它的邊緣方向要么朝左、要么朝前，要么就是朝右，因此它的顏色就可能是綠色或者紅色，如果是綠色，就表示它的法線方向朝著負(fù)切線法線的方向，如果是紅色，就表示物體表面的方向是朝著切線方向

• 這僅僅只是理論上的了解，當(dāng)你要落到實(shí)處寫代碼時(shí)就會(huì)發(fā)現(xiàn)：

  • 在Unity里直接導(dǎo)入一張圖片，并對(duì)它進(jìn)行紋理采樣，所得到的采樣結(jié)果又會(huì)是不正確的，這就跟Unity對(duì)法線貼圖的編碼和壓縮有關(guān)系了

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

• 假設(shè)上圖中的眼睛圖標(biāo)是Unity里的攝像機(jī)，藍(lán)色的箭頭是攝像機(jī)觀察的前方向，在現(xiàn)實(shí)世界中，我們用眼睛看這塊磚塊時(shí)，磚塊有一些背面是不能被眼睛看見的，這部分就處于陰影區(qū)域

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

  • 因?yàn)榉ň€貼圖里不包含物體的高低信息，它只有每一個(gè)像素點(diǎn)的法線方向，所以只能計(jì)算出來物體表面的明暗信息，不能計(jì)算出這一塊區(qū)域是否被遮擋，體現(xiàn)不出來凹凸感
  • 從之前的使用法線貼圖的地面效果中也可以看出磚塊后面的陰影區(qū)域只是比較暗，并沒有被遮擋
    

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

• 上面的第3號(hào)圖是法線貼圖，每一條物體表面的法線朝向都不一樣，在計(jì)算物體光照的公式里會(huì)根據(jù)反光的夾角計(jì)算反光強(qiáng)度，由于每一個(gè)物體的表面的法線方向都不一樣，那么夾角的大小也不一樣，計(jì)算出的反射也不一樣，物體每一個(gè)像素點(diǎn)的光照強(qiáng)度系數(shù)也都不一樣

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

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

視差貼圖的具體實(shí)現(xiàn)細(xì)節(jié)可以加文末聯(lián)系方式領(lǐng)取

思考

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

寫在最后

• 更多學(xué)習(xí)資源請(qǐng)加QQ：1517069595或WX：alice17173獲取（企業(yè)級(jí)性能優(yōu)化/熱更新/Shader特效/服務(wù)器/商業(yè)項(xiàng)目實(shí)戰(zhàn)/每周直播/一對(duì)一指導(dǎo)）
• 點(diǎn)贊、關(guān)注、分享可免費(fèi)獲得配套學(xué)習(xí)資源
• 點(diǎn)擊觀看完整視頻

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。