WebGL fragment shader animation

Above you should see a pulsating colored square. It’s implemented as a WebGL fragment shader. The pulses are a pure function of time. The shader has one uniform parameter, millisecs:

uniform mediump float millisecs;
void main(void) {
  mediump float osc = (sin(millisecs/1000.0) + 1.0) / 2.0;
  gl_FragColor = vec4(osc, osc, osc, 1.0);

The uniform is updated every frame with the new time, then we redraw. So the loop body is only two lines:

const start = new Date().getTime();
window.setInterval(function() {
  gl.uniform1f(millisecsPtr, (new Date().getTime())-start);
  gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);  // draw over the entire viewport
}, 50);

This may not look very exciting, but it’s the core of lots of shader animations. For example, this shader animation renders the current time as a clock.

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.