已經寫過GLSL版的Bump Mapping，這次來寫WebGL版，一樣的概念、稍有差異的語法。
左右兩圖分別為Bumpy Ice的color map和normal map。
以上兩張圖可以從這裡取得軟體來製作：
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/
在Firefox上的結果，使得只是平面的color map，因為normal map的效果使得看起來有立體感。
Vertex Shader程式碼：
<script id="vs" type="x-shader/x-vertex">
attribute vec3 aPositionL;
attribute vec3 aNormalL;
attribute vec3 aTangentL;
attribute vec2 aTexCoord;
uniform mat4 uMatrixMVP;
uniform mat4 uMatrixMV;
varying vec4 vPositionV;
varying vec3 vNormalV;
varying vec3 vTangentV;
varying vec2 vTexCoord;
void main(void) {
gl_Position = uMatrixMVP * vec4(aPositionL, 1.0);
vPositionV = uMatrixMV * vec4(aPositionL, 1.0);
vNormalV = (uMatrixMV * vec4(aNormalL, 0.0)).xyz;
vTangentV = (uMatrixMV * vec4(aTangentL, 0.0)).xyz;
vTexCoord = aTexCoord;
}
</script>
fragment Shader程式碼：
<script id="fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D uColorSampler;
uniform sampler2D uNormalSampler;
uniform float uTime;
varying vec4 vPositionV;
varying vec3 vNormalV;
varying vec3 vTangentV;
varying vec2 vTexCoord;
void main(void) {
vec3 colorT = texture2D(uColorSampler, vTexCoord).rgb;
vec3 normalT = texture2D(uNormalSampler, vTexCoord).xyz;
normalT.y = 1.0 - normalT.y;
normalT = 2.0 * normalT - vec3(1.0, 1.0, 1.0);
normalT.z *= 10.0;
vec3 binormalV = cross(vNormalV, vTangentV);
vec3 normalV = normalT.x * vTangentV + normalT.y * binormalV + normalT.z * vNormalV;
normalV = normalize(normalV);
//normalT = normalize(normalT);
vec3 lightV = normalize(vec3(10.0 * cos(uTime), 10.0, 10.0 * sin(uTime)));
float d = max(dot(normalV, lightV), 0.0);
float s = pow(dot(normalize(reflect(-lightV, normalV)), normalize(-vPositionV.xyz)), 50.0);
vec3 color = colorT * d + s;
gl_FragColor = vec4(color, 1.0);
}
</script>
- 發現用Javascript撰寫讀取檔案除了可用.raw、.bmp之外，現今尋常可見的.jpg、.png等影像格式亦可使用。
- 發現要在網頁伺服器上才能在Javascript載入影像。
- 發現不需要載入WebGL相關.js檔，即可使用
gl.clearColor(0.0, 0.0, 0.1, 1.0);
gl.clearDepth(1.0);
gl.depthFunc(gl.LEQUAL);
gl.enable(gl.DEPTH_TEST);
gl.frontFace(gl.CCW);
gl.cullFace(gl.BACK);
等函式功能、常數定義。在GPU端的程式有矩陣計算的功能，但是在CPU端就需要自己實作矩陣計算的基本演算法了。如：MatrixTranslate、MatrixFrustum、MatrixIdentity、MatrixScale、MatrixZero、MatrixTranspose、MatrixToFloat32Array等矩陣計算函式。
參考：我寫的GLSL版的Bump Mapping、Bump Mapping2、Bump Mapping3、Normal Mapping in WebGL、Bump mapping、Bumpy Tunnel、three.js – webgl normal map、three.js webgl – materials – normal map [Lee Perry-Smith]。
逍遙文工作室 
Comments on: "[WebGL] Bump Mapping" (1)
[…] – webgl normal map，我寫的GLSLBump Map、Bump Map2、Bump Map3和WebGLBump Map。 Share this:ShareEmailPrintFacebookTwitterLike this:LikeBe the first to like this […]
讚讚