Shadertoy over 1920 frames

by Gregg Tavares

HTML

<canvas width="1920" height="1080"></canvas>
<div id="info"></div>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

CSS

body { margin: 0; }
canvas { display: block; }
#info {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
}

JavaScript

const ctx = document.querySelector('canvas').getContext('2d');
const gl = document.createElement('canvas').getContext('webgl2');
if (!gl) {
  alert('needs webgl2 because example shader is GLSL ES 3.00');
}
gl.canvas.width = ctx.canvas.width;
gl.canvas.height = ctx.canvas.height;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

const vs = `#version 300 es
in vec4 position;
void main() {
  gl_Position = position;
}
`;
const fs = `#version 300 es
precision highp float;
uniform float iTime;
uniform int iFrame;
uniform vec2 iResolution;

#define HW_PERFORMANCE 1

// Created by inigo quilez - iq/2019
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
//
//
// An animation test - a happy and blobby creature jumping and
// looking around. It gets off-model very often, but it looks
// good enough I think.
//
// Making of and related math/shader/art explanations (6 hours
// long): https://www.youtube.com/watch?v=Cfe5UQ-1L9Q
//
// Video capture: https://www.youtube.com/watch?v=s_UOFo2IULQ


#if HW_PERFORMANCE==0
#define AA 1
#else
#define AA 2  // Set AA to 1 if your machine is too slow
#endif


//------------------------------------------------------------------


// http://iquilezles.org/www/articles/smin/smin.htm
float smin( float a, float b, float k )
{
    float h = max(k-abs(a-b),0.0);
    return min(a, b) - h*h*0.25/k;
}

// http://iquilezles.org/www/articles/smin/smin.htm
vec2 smin( vec2 a, vec2 b, float k )
{
    float h = clamp( 0.5+0.5*(b.x-a.x)/k, 0.0, 1.0 );
    return mix( b, a, h ) - k*h*(1.0-h);
}

// http://iquilezles.org/www/articles/smin/smin.htm
float smax( float a, float b, float k )
{
    float h = max(k-abs(a-b),0.0);
    return max(a, b) + h*h*0.25/k;
}

// http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
float sdSphere( vec3 p, float s )
{
    return length(p)-s;
}

// http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
float sdEllipsoid( in vec3 p, in vec3 r ) //...