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?

This page copyright James Fisher 2017. Content is not associated with my employer. Found an error? Edit this page.

Jim Fisher

CV

Speaking

Blogroll

RSS

TigYog

Kickabout