之前研究Bump Mapping就覺得效果超好！把texture (color map和normal map)貼到model上去，就可以產生很有立體感的視覺效果。然而BM有些缺點，在近距離看model會發現陰影和立體只是假象，尤其在model邊緣地方特別容易穿幫。Displacement Mapping進一步改變model的頂點位置，讓model在任何角度看都像真的一樣。
左為bump map，右為displacement map。從model邊緣和影子就可以分辨出誰真誰假:P
BM在fragment shader中使用normal map做，而DM則在vertex shader中使用height map做。為了可以表現self-shadowing and silhouettes，DM花費更多時間在處理幾何運算上。
color map
兩者都需要使用texture，以上這一張是color map，純粹顏色。
normal map
這張是normal map，方向朝z軸 (blue)，因此texture偏藍，由color[0,1]變成normal[-1,1]，只要以*2-1即可辦到。至於normal map的來源有兩種：一使用高ploygon的model（DCC應用程式可計算高tesselation的model的normal），二是使用model的height map（經過數學計算轉換）。
displacement map
這張是displacement (height) map，高度大的偏白，高度小的偏黑。Height map來源只不過是color map的灰階。
Bump Mapping和Displacement Map的差別可由上圖清楚看出來，BM不改變幾何，DM改變幾何。
我參考AlteredQualia網站的WebGL例子，它使用了normal + ambient occlusion + displacement的map來實做。
右為原本的model，左為加了normal + ambient occlusion + displacement的map。
接下來就是normal + ambient occlusion + displacement的map影像。
normal map
ambient occlusion (AO) map
displacement map
這些影像看起來還挺怪可怕的呢：Ｐ
參考：three.js – webgl normal map，我寫的GLSLBump Map、Bump Map2、Bump Map3和WebGLBump Map。
逍遙文工作室 
Comments on: "[WebGL] Displacement Mapping" (2)
Hello! I simply want to give an enormous thumbs up for the great information you have here on this post. I will be coming again to your weblog for more soon.
讚讚
Hi, thank you for admiring. You are welcome to visit my blog again. I am curious about you name “SEO公司". Is SEO your job? I’m trying to master the technique. Thus, my blog will go more popularity. If you have some advice, please tell me more, thank you again. 🙂
讚讚