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 .

Similar posts

More by Jim

Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

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