? ? ? ? 這次來介紹很有用的湍流置換與置換圖是什么。圖1.01可以利用圖1.02變成圖1.03的樣子

這就是置換圖簡(jiǎn)單的應(yīng)用。置換圖(Displacement Map)有很多種名稱，比如置換貼圖、置換映射。對(duì)于三維模型來說，經(jīng)常可以利用置換圖讓模型頂點(diǎn)沿法線方向移動(dòng)，從而改變模型原本的形狀。但是當(dāng)然對(duì)于二維的情況，平面的一張圖不存在"高度"啥的，當(dāng)然此時(shí)置換圖就不是用來改高度了，而是可以使平面的點(diǎn)進(jìn)行相應(yīng)的平移、旋轉(zhuǎn)等等。

好吧，具體怎么用一張置換圖去改變另一張圖呢？假設(shè)有一張置換圖A，就先假設(shè)A是一張灰度圖吧，還是設(shè)0是黑色1是白色，圖A上每一個(gè)點(diǎn)當(dāng)然都對(duì)應(yīng)一個(gè)數(shù)值，那么就可以利用這個(gè)數(shù)值來改變另一張圖里像素點(diǎn)的位置了！假設(shè)圖A能完全覆蓋住另一張圖為B，也就是說，對(duì)于圖B里任意一個(gè)像素點(diǎn)(x,y)都可以知道它在圖A里對(duì)應(yīng)的數(shù)值(如灰度)，那就可以利用這個(gè)值來偏移(x,y)這個(gè)像素點(diǎn)的位置，比如這一點(diǎn)在A中對(duì)應(yīng)的數(shù)值是0.5(剛好是0到1中間)、那么(x,y)就不移動(dòng)；如果這一點(diǎn)在A中對(duì)應(yīng)的數(shù)值是0.3、那么就讓(x,y)在x方向上移動(dòng)0.3-0.5=-0.2個(gè)單位(不要在意浮點(diǎn)數(shù)坐標(biāo),這不是重點(diǎn))、當(dāng)然你也可以再乘以一個(gè)倍數(shù)、比如可以讓其在x方向上移動(dòng)47 * -0.2個(gè)單位；如果這一點(diǎn)在A中對(duì)應(yīng)的數(shù)值是0.88、那么就讓(x,y)在x方向上移動(dòng)0.88-0.5=0.38個(gè)單位、同樣的你覺得偏移太小也可以再乘同一個(gè)倍數(shù)。所以，對(duì)于圖B的每一個(gè)像素點(diǎn)，都可以獲取該點(diǎn)在圖A中對(duì)應(yīng)的數(shù)值，用該數(shù)值偏移圖B里的像素點(diǎn)坐標(biāo)即可。

????????比如圖A在右邊、圖B在左邊，原本是這樣的：

這里為了方便看，將兩個(gè)圖這樣擺的，但是當(dāng)然實(shí)際上圖A的位置應(yīng)該和圖B重合，因?yàn)閷?duì)于B里一點(diǎn)(x,y)要里用這一點(diǎn)在圖A里對(duì)應(yīng)的數(shù)值來進(jìn)行偏移，所以圖A和圖B的位置當(dāng)然會(huì)影響結(jié)果了。現(xiàn)在利用圖A改變圖B，讓圖B里的點(diǎn)在x、y方向上都有偏移吧，設(shè)定偏移程度是40(就是剛剛說的乘以的倍數(shù))，這樣就得到了：

先說為什么會(huì)這樣，再說一些其它的細(xì)節(jié)。首先圖B中，靠近頂部的點(diǎn)在A中偏黑，也就是對(duì)應(yīng)的數(shù)值小于0.5、那么這些點(diǎn)就會(huì)偏移一個(gè)負(fù)值、因?yàn)樵O(shè)定在x、y方向上都要偏移，所以靠近頂部的點(diǎn)朝左上移動(dòng)了，當(dāng)然越遠(yuǎn)離頂部的點(diǎn)偏移就越小了(因?yàn)槠鋵?duì)應(yīng)數(shù)值更接近0.5這個(gè)中間值)，同樣的，在越靠近底部的時(shí)候，A中的點(diǎn)數(shù)值越接近1、數(shù)值大于了0.5，所以偏移一個(gè)正值、那么靠近底部的點(diǎn)就往右下移動(dòng)了(因x和y都加了一個(gè)正數(shù)嘛)，當(dāng)然越靠近中間高度的點(diǎn)、偏移就越小、因?yàn)槟切c(diǎn)越接近中間的灰色、對(duì)應(yīng)的數(shù)值越接近0.5。然后，再講一些細(xì)節(jié)，就是說，如果圖B有寬高的限定(比如圖B就只是200X200的圖)，那么在圖B經(jīng)過了變形以后，有一部分的點(diǎn)可能已經(jīng)偏移出了圖的限定范圍外，如：

這種時(shí)候可以從圖像的另一側(cè)環(huán)繞像素，就是說漏掉的像素可以再以某種計(jì)算方式補(bǔ)回來。再來理解一下，假設(shè)圖A圖B都是像素圖，用圖A改變圖B里像素點(diǎn)的位置，比如讓圖B里的(x,y)變到(x1,y1)的位置，但這樣導(dǎo)致的問題是，(x1,y1)不一定在圖B內(nèi)部了、圖B里原本的像素點(diǎn)位置移動(dòng)跑來跑去以后，可能圖B里不是每個(gè)坐標(biāo)上都有一個(gè)像素點(diǎn)了，所以說，此時(shí)可以用一些各種各樣的計(jì)算方式、來選擇補(bǔ)齊剩下的位置都"填充"成什么樣。

? ? ????再舉例，如果圖A是全黑的話，如果原本是這樣的：

然后偏移圖B的點(diǎn)，x、y方向上都偏移、偏移程度為40，就有

為什么會(huì)這樣，當(dāng)然就很好理解了，黑色的話，對(duì)應(yīng)0、小于0.5，偏移的數(shù)值為負(fù)的，由于圖B里每一個(gè)(像素)點(diǎn)對(duì)應(yīng)的數(shù)值都是一樣的0(圖A里的)，所以B里每一個(gè)點(diǎn)的偏移數(shù)值都是一樣的，所以說，每一個(gè)點(diǎn)在x方向上偏移了(0-0.5)*40 = -20像素、在y方向上偏移了(0-0.5)*40?= -20像素，理所當(dāng)然的圖B里的文字形狀沒有發(fā)生改變。

? ? ? ??再來舉例，如果原本是這樣的：

然后偏移圖B的點(diǎn)，x、y方向上都偏移、偏移程度為20，就有

因?yàn)槲淖值挠疑喜糠执蟾旁趫DA的圓心附近，所以看到這一部分向左上有明顯的偏移(因?yàn)樵O(shè)定在x、y方向上都偏移、越黑當(dāng)然就越往左上了)，然后比如文字下面的部分，這些點(diǎn)對(duì)應(yīng)的數(shù)值接近1、所以就朝著右下偏移了。

????????所以，對(duì)于這樣的偏移，計(jì)算的方法當(dāng)然都是一樣的，假設(shè)置換圖的每個(gè)點(diǎn)都對(duì)應(yīng)一個(gè)0到1的數(shù)字val，假設(shè)x方向的偏移程度是sx、y方向的偏移程度是sy，那么被改變的圖像的每個(gè)像素點(diǎn)會(huì)在x方向偏移(val-0.5)*sx，會(huì)在y方向偏移(val-0.5)*sy

? ? ? ? 除了簡(jiǎn)單的移動(dòng)像素以外，還可以利用置換圖用其它方式改變另一張圖。比如進(jìn)行縮放和旋轉(zhuǎn)的處理。

如上圖，黑一些的部分縮小了白一些的地方放大了。

? ? ? ? 當(dāng)然除了這種"黑白"的置換圖以外，置換圖也可以是彩色的，也就是說置換圖有RGBA(紅綠藍(lán)透明度)，利用這個(gè)置換圖去改變另一張圖。其實(shí)也一樣的簡(jiǎn)單，比如可以設(shè)定x方向按照R通道來偏移、y方向按照G通道來偏移，或者x方向按照R通道來偏移、y方向按照B通道來偏移等等等等。其實(shí)很簡(jiǎn)單，仔細(xì)想想就相當(dāng)于用兩張"黑白"的置換圖來改變一張圖而已。

? ? ? ? 因?yàn)榭梢杂弥脫Q圖改變另一張圖的每一個(gè)像素，所以也可以用置換圖改變一個(gè)矢量繪圖(實(shí)際上前面示例圖都是改變的文字矢量圖而不是一堆像素)，當(dāng)然這樣直接變形矢量繪圖的效果和改變像素圖的效果是不一樣的，因?yàn)樽冃问噶繄D只是改變了矢量圖的命令點(diǎn)的位置而已，和改變每個(gè)像素的效果有偏差很正常。但是就單純地扭曲矢量繪圖也能做出不少的效果了：