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 . All content copyright James Fisher 2017. This post is not associated with my employer.
TigYog