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?

I just released Vidrio, a free app for macOS and Windows to make your screen-sharing awesomely holographic. Vidrio shows your webcam video on your screen, just like a mirror. Then you just share or record your screen with Zoom, QuickTime, or any other app. Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions. #1 on Product Hunt. Available for macOS and Windows.

With Vidrio

With generic competitor

More by Jim

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