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 */

attribute vec2 vTexCoord;
attribute vec4 vPosition;

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

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.xyz);
    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);
}
</script>

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

precision mediump float;

varying vec3 L;
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" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
<script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/InitShaders.js"></script>
<script type="text/javascript"...

JavaScript

var canvas;
var gl;

var numVertices = 6;

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

var texCoordsBase = [
    vec2(0.0, 0.0),
    vec2(1.0, 0.0),
    vec2(1.0, 1.0),
    vec2(0.0, 1.0)
];

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

var normal;
var objTangent;

function makeCube() {
  pointsArray = [vertices[5], vertices[6], vertices[2], 
                 vertices[5], vertices[2], vertices[1]];
  texCoordsArray = [texCoordsBase[0], texCoordsBase[1], texCoordsBase[2], 
                    texCoordsBase[0], texCoordsBase[2], texCoordsBase[3]];
  normal = vec4(0.0, 1.0, 0.0, 0.0);
  objTangent = vec4(1.0, 0.0, 0.0, 0.0);
}
  
var modelViewMatrix, projectionMatrix, normalMatrix;

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

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

var lightPosition = vec4(0.0, 5.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] =...