WebGL distortion panel

<!-- Page settings → Before </body> tag. The GLSL is in a script type="x-shader". --> <script id="frag" type="x-shader/x-fragment"> precision mediump float; varying vec2 vUv; uniform sampler2D uTex0, uTex1; uniform float uProgress, uVelocity, uTime; uniform vec2 uRes, uImg; // object-fit: cover, in a shader vec2 cover(vec2 uv, vec2 res, vec2 img) { float rs = res.x / res.y, ri = img.x / img.y; vec2 s = rs < ri ? vec2(ri / rs, 1.0) : vec2(1.0, rs / ri); return (uv - 0.5) * s + 0.5; } float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } float noise(vec2 p){ vec2 i = floor(p), f = fract(p), u = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i), hash(i + vec2(1,0)), u.x), mix(hash(i + vec2(0,1)), hash(i + vec2(1,1)), u.x), u.y); } void main() { vec2 uv = cover(vUv, uRes, uImg); float v = clamp(uVelocity, -1.0, 1.0); // scroll velocity bends the frame, strongest through the middle uv.x += sin(uv.y * 3.14159) * v * 0.055; uv.y += sin(uv.x * 6.2831 + uTime) * v * 0.018; // hover sweeps a threshold across noise — a dissolve with a SHAPE float n = noise(uv * 4.0 + uTime * 0.06); float grad = (uv.x + uv.y) * 0.5; float mask = smoothstep(uProgress - 0.18, uProgress + 0.18, mix(grad, n, 0.55)); float edge = 1.0 - abs(mask - 0.5) * 2.0; float shift = abs(v) * 0.008 + edge * uProgress * 0.006; // chromatic split vec3 a = vec3(texture2D(uTex0, uv + vec2(shift,0)).r, texture2D(uTex0, uv).g, texture2D(uTex0, uv - vec2(shift,0)).b); vec3 b = vec3(texture2D(uTex1, uv + vec2(shift,0)).r, texture2D(uTex1, uv).g, texture2D(uTex1, uv - vec2(shift,0)).b); gl_FragColor = vec4(mix(b, a, mask), 1.0); } </script> <script> document.addEventListener("DOMContentLoaded", async () => { gsap.registerPlugin(ScrollTrigger); if (matchMedia("(prefers-reduced-motion: reduce)").matches) return; const VERT = "attribute vec2 aPos; varying vec2 vUv;" + "void main(){ vUv = aPos * 0.5 + 0.5; gl_Position = vec4(aPos, 0.0, 1.0); }"; const FRAG = document.getElementById("frag").textContent; // ONE velocity value, shared by every panel on the page. const vel = { v: 0 }; const setVel = gsap.quickTo(vel, "v", { duration: 0.6, ease: "power3.out" }); ScrollTrigger.create({ onUpdate: self => setVel(gsap.utils.clamp(-1, 1, self.getVelocity() / 2600)) }); const panels = []; for (const holder of document.querySelectorAll("[data-panel]")) { const canvas = holder.querySelector("canvas"); const gl = canvas.getContext("webgl", { antialias: false, alpha: false }); if (!gl) continue; // no WebGL: the fallback img stays const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(s)); return null; } return s; }; const prog = gl.createProgram(); gl.attachShader(prog, sh(gl.VERTEX_SHADER, VERT)); gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FRAG)); gl.linkProgram(prog); gl.useProgram(prog); // one full-screen triangle — cheaper than two, and no seam down the middle gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW); const loc = gl.getAttribLocation(prog, "aPos"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); // Rasterise to a 2D canvas first: works for SVG, avoids tainting, and // guarantees power-of-two-friendly dimensions. const load = src => new Promise(res => { const i = new Image(); i.crossOrigin = "anonymous"; i.onload = () => { const c = document.createElement("canvas"); c.width = c.height = 1024; c.getContext("2d").drawImage(i, 0, 0, 1024, 1024); res(c); }; i.src = src; }); const [ca, cb] = await Promise.all([load(holder.dataset.a), load(holder.dataset.b)]); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); [ca, cb].forEach((src, unit) => { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, gl.createTexture()); // CLAMP_TO_EDGE: the distortion pushes uv outside 0–1; tiling would show a seam gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src); }); const u = n => gl.getUniformLocation(prog, n); gl.uniform1i(u("uTex0"), 0); gl.uniform1i(u("uTex1"), 1); gl.uniform2f(u("uImg"), 1024, 1024); const resize = () => { const dpr = Math.min(devicePixelRatio || 1, 2); // cap at 2 or you burn a phone's battery canvas.width = Math.round(canvas.clientWidth * dpr); canvas.height = Math.round(canvas.clientHeight * dpr); gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform2f(u("uRes"), canvas.width, canvas.height); }; resize(); new ResizeObserver(resize).observe(canvas); // GSAP drives the hover value. The shader never decides anything. const p = { v: 0 }; const to = gsap.quickTo(p, "v", { duration: 0.9, ease: "power3.out" }); holder.addEventListener("mouseenter", () => to(1)); holder.addEventListener("mouseleave", () => to(0)); holder.dataset.gl = "on"; // now the fallback can hide panels.push({ gl, prog, u, p }); } // ONE ticker for every panel. Never one requestAnimationFrame per canvas. gsap.ticker.add(time => { for (const pan of panels) { pan.gl.useProgram(pan.prog); pan.gl.uniform1f(pan.u("uProgress"), pan.p.v); pan.gl.uniform1f(pan.u("uVelocity"), vel.v); pan.gl.uniform1f(pan.u("uTime"), time); pan.gl.drawArrays(pan.gl.TRIANGLES, 0, 3); } }); }); </script>