Learn more about Russian war crimes in Ukraine.

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.

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

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