vec3 iColor // color picker
vec2 iResolution // canvas resolution, with scale [.25 => 2]
vec2 iMouse // NDC mouse position [-1 => +1]
vec2 iDelta // panning offset from [0, 0] (not clamped)
float iTime // time scale. 0.001 converts iTime to "seconds"
float iZoom // exp zoom [exp(10) => exp(-10)] centered at exp(0) = 1
float iLinearZoom // lin zoom. [1 => 0] centered at 0.5*iDelta only works at 100% zoom on desktop browsers!*
iDelta requires aspect correction on the shader side to work correctly.
This is because panning speed is the same for width and height.
// Common
uniform vec2 iResolution, iMouse, iDelta;
uniform float iZoom;
out vec4 o;
#define F gl_FragCoord.xy
#define R iResolution
// Mouse cursor demo
void main() {
// vec2 f = ((2.*F/R) - 1. - iMouse)*iZoom; // NDC
vec2 f = (2.*F - R - iMouse*R)*iZoom/R.y; // aspect-corrected
o = vec4(dot(f,f), f*f, 1);
}
// Panning demo
void main() {
vec2 f = (2.*F-R)*iZoom/R.y + iDelta;
o = vec4(dot(f,f), f*f, 1);
}