Bump Map的概念其實很簡單,在不增加geometry複雜度之下,讓物體表現更立體的樣子。我們需要兩張texture,一個color一個normal,color當然是做顏色,而normal則是表現凹凸(陰影)。做出來的結果並沒有增加model的polygon數,只是在視覺上巧妙地表現陰影(兩張texture合併),使得物體看起來凹凸不平(有著陰影)。
看著網路上的教學,許多人(包括橘皮書)都用tangent space來計算光源,需要用到TBN這個rotation matrix,推導過程可參考這裡。用這個方法是因為效能較好!不過我並沒有使用它,所以這裡不做討論。
橘皮書說做光源的計算必須在同一個座標空間才有意義,所以需要將光源位置或向量和頂點與法向量轉移到eye coordinate。
vertex shader程式碼:
void main() { gl_TexCoord[0] = gl_MultiTexCoord0; // Set the position of the current vertex gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; }
fragment shader程式碼:
uniform sampler2D color_texture; uniform sampler2D normal_texture; void main() { // Extract the normal from the normal map vec3 normal = normalize(texture2D(normal_texture, gl_TexCoord[0].st).rgb * 2.0 - 1.0); // Determine where the light is positioned vec3 light_pos = normalize(vec3(1.0, 1.0, 1.5)); // Calculate the lighting diffuse value float diffuse = max(dot(normal, light_pos), 0.0); vec3 color = diffuse * texture2D(color_texture, gl_TexCoord[0].st).rgb; // Set the output color of our current pixel gl_FragColor = vec4(color, 1.0); }
用OpenGL內建的teapot(glutSolidTeapot(0.5);)做出來的結果效果還不錯,可是sphere和cube卻呈現奇怪的結果。原本想使用obj檔的cow來實做,可是卻不知道要如何map每個face,使用內建model的好處是不需要知道model的vertex、normal等細節,因為隱藏了是如何將texture做map到model。
在OpenGL貼圖需要指定texture座標和model座標的對應關係:
glBegin(GL_QUADS);
glTexCoord2f(0.0f, 0.0f);
glVertex3f(-1.0f, -1.0f, 0.0f);glTexCoord2f(1.0f, 0.0f);
glVertex3f(1.0f, -1.0f, 0.0f);glTexCoord2f(1.0f, 1.0f);
glVertex3f(1.0f, 1.0f, 0.0f);glTexCoord2f(0.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, 0.0f);
glEnd();
以上是最簡單的texture和model對應設定。
參考:8. Bump Mapping in GLSL、Bump Mapping using GLSL、OpenGL:Tutorials:GLSL Bump Mapping、Normal Mapping Demo。
color_map.bmp:
– Created using Genetica Viewer 3.5
– http://www.spiralgraphics.biz/viewer/index.htm
normal_map.bmp:
– Created using Crazybump 1.2
– http://www.crazybump.com/
還有兩篇有關Bump Map的嘗試:Bump Map (2)、Bump Map (3)。
Comments on: "[GLSL] Bump Map" (4)
[…] – webgl normal map,我寫的GLSLBump Map、Bump Map2、Bump Map3和WebGLBump Map。 Share this:ShareEmailPrintFacebookTwitterLike […]
讚讚
[…] 已經寫過GLSL版的Bump Mapping,這次來寫WebGL版,一樣的概念、稍有差異的語法。 […]
讚讚
[…] 參考:Bump Map、Bump Map (2)。 Share this:ShareEmailPrintFacebookTwitterLike this:LikeBe the first to like this post. […]
讚讚
[…] 承我剛寫不久的Bump Map,這次要更仔細分析它表現出來的特性,除了bump map的效果之外,我還加了phong shading的diffuse和specular。 […]
讚讚