WebGL shaders with color

Above you should see a rockface. There’s a matte rockface, and a shiny one. As you move the mouse around, a light illuminates the rockface. This is achieved with a WebGL fragment shader, which consults a normal map and a color map:

precision mediump float;
uniform mediump vec2 mouse_pos;
uniform sampler2D normal_map;
uniform sampler2D color_map;
void main(void) {
  float intensity = /* consult normal_map */;
  gl_FragColor = vec4(vec3(texture2D(color_map, frag))*intensity, 1.0);
}

By multiplying the color by an intensity, we are simulating a perfectly white light. Soon I’ll look at simulating other light colors more accurately.

To me, the effect of the shader looks weird. The rockface warps strangely when I move the mouse. I can’t quite explain it. Can you?

Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.