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.