Just My Life & My Work

[GLSL] Bump Map

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);
}
colormap

Color Map

normalmap

Normal Map

bump map

square的結果。

bump map

square的結果,承上圖,光源朝+x移動。

bump map

teapot的結果。

bump map

teapot的結果,承上圖,光源朝+x移動。

用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 GLSLBump Mapping using GLSLOpenGL:Tutorials:GLSL Bump MappingNormal 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)

  1. […] – webgl normal map,我寫的GLSLBump Map、Bump Map2、Bump Map3和WebGLBump Map。 Share this:ShareEmailPrintFacebookTwitterLike […]

  2. […] 已經寫過GLSL版的Bump Mapping,這次來寫WebGL版,一樣的概念、稍有差異的語法。 […]

  3. […] 參考:Bump Map、Bump Map (2)。 Share this:ShareEmailPrintFacebookTwitterLike this:LikeBe the first to like this post. […]

  4. […] 承我剛寫不久的Bump Map,這次要更仔細分析它表現出來的特性,除了bump map的效果之外,我還加了phong shading的diffuse和specular。 […]

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: