Bump map example (Brick wall)

by asterix77

HTML

<!DOCTYPE html>
<html>

<script id="vertex-shader" type="x-shader/x-vertex">

/* bump map vertex shader */

varying vec3 L; /* light vector in texture-space coordinates */
varying vec3 V; /* view vector in texture-space coordinates */

attribute vec2 vTexCoord;
attribute vec4 vPosition;

uniform vec4 normal;
uniform vec4 lightPosition;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;
uniform vec3 objTangent; /* tangent vector in object coordinates */

varying vec2 fTexCoord;

void main()
{
    gl_Position = projectionMatrix*modelViewMatrix*vPosition;

    fTexCoord = vTexCoord;

    vec3 eyePosition = (modelViewMatrix*vPosition).xyz;
    vec3 eyeLightPos = (modelViewMatrix*lightPosition).xyz;

   /* normal, tangent and binormal in eye coordinates */

    vec3 N = normalize(normalMatrix*normal.xyz);
    vec3 T  = normalize(normalMatrix*objTangent);
    vec3 B = cross(N, T);

    /* light vector in texture space */

    L.x = dot(T, eyeLightPos-eyePosition);
    L.y = dot(B, eyeLightPos-eyePosition);
    L.z = dot(N, eyeLightPos-eyePosition);

    L = normalize(L);

    /* view vector in texture space */

    V.x = dot(T, -eyePosition);
    V.y = dot(B, -eyePosition);
    V.z = dot(N, -eyePosition);

    V = normalize(V);
    
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec3 L;
varying vec3 V;
varying vec2 fTexCoord;

uniform sampler2D bumpMap;
uniform sampler2D texMap;
uniform vec4 diffuseProduct;

void main()
{
   // vec4 N = vec4(0.0, 0.0, 1.0, 0.0); 
   vec4 N = texture2D(bumpMap, fTexCoord);
   vec3 NN =  normalize(2.0*N.xyz-1.0);
   vec3 LL = normalize(L);
   float Kd = max(dot(NN, LL), 0.0);
   
   vec4 texColor = texture2D(texMap, fTexCoord);
   // vec4 bumpColor = vec4(Kd*diffuseProduct.xyz, 1.0);
   vec4 bumpColor = vec4(Kd*texColor.xyz, 1.0);
   gl_FragColor = bumpColor; // * texColor;
}
</script>

<script type="text/javascript"...

JavaScript

var canvas;
var gl;

var numVertices = 6;

var pointsArray = [];
var texCoordsArray = [];

var texCoord = [vec2(0, 0), vec2(0, 1), vec2(1, 1), vec2(1, 0)];

var vertices = [
  vec4(-1.0, 0.0, -1.0, 1.0),
  vec4(1.0, 0.0, -1.0, 1.0),
  vec4(1.0, 0.0, 1.0, 1.0),
  vec4(-1.0, 0.0, 1.0, 1.0)
];

var modelViewMatrix, projectionMatrix, normalMatrix;

var eye = vec3(2.0, 2.0, 2.0);
var at = vec3(0.5, 0.0, 0.5);
var up = vec3(0.0, 1.0, 0.0);

var fovy = 40;
var aspect;
var near = 0.1;
var far = 1000;

var normal = vec4(0.0, 1.0, 0.0, 0.0);
var tangent = vec3(1.0, 0.0, 0.0);

var lightPosition = vec4(0.0, 2.0, 0.0, 1.0);
var lightDiffuse = vec4(1.0, 1.0, 1.0, 1.0);

var materialDiffuse = vec4(0.7, 0.7, 0.7, 1.0);

var program;

var time = 0;

// from glMatrix.js
// Put in MV.js
function mat4ToInverseMat3(mat) {
  dest = mat3();

  var a00 = mat[0][0],
    a01 = mat[0][1],
    a02 = mat[0][2];
  var a10 = mat[1][0],
    a11 = mat[1][1],
    a12 = mat[1][2];
  var a20 = mat[2][0],
    a21 = mat[2][1],
    a22 = mat[2][2];

  var b01 = a22 * a11 - a12 * a21;
  var b11 = -a22 * a10 + a12 * a20;
  var b21 = a21 * a10 - a11 * a20;

  var d = a00 * b01 + a01 * b11 + a02 * b21;
  if (!d) {
    return null;
  }
  var id = 1 / d;

  dest[0][0] = b01 * id;
  dest[0][1] = (-a22 * a01 + a02 * a21) * id;
  dest[0][2] = (a12 * a01 - a02 * a11) * id;
  dest[1][0] = b11 * id;
  dest[1][1] = (a22 * a00 - a02 * a20) * id;
  dest[1][2] = (-a12 * a00 + a02 * a10) * id;
  dest[2][0] = b21 * id;
  dest[(2)[1]] = (-a21 * a00 + a01 * a20) * id;
  dest[2][2] = (a11 * a00 - a01 * a10) * id;

  return dest;
}

function configureTexture(image, isImage, texSize, texNum) {
  texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0 + texNum);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 if (isImage) {
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, 
         gl.RGB, gl.UNSIGNED_BYTE, image ); 
  } else {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize,...