Refraction

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4import { createPointerSource } from "../lib/pointerSource";5 6/**7 * A sheet of moulded glass over a colour field — the backdrop bends and8 * separates through it as the pointer moves.9 *10 * The surface is never modelled as geometry. A height field is evaluated per11 * pixel, its gradient gives a surface normal by finite differences, and the12 * normal refracts the lookup into the backdrop. That is real refraction maths13 * on a single quad, with no mesh to subdivide and no resolution at which the14 * facets become visible.15 *16 * Specular highlights come from the same normal, so the light moves correctly17 * as the surface deforms. That coupling is what sells it as glass; a18 * distortion effect with a separately-animated shine reads as two effects19 * happening near each other.20 */21 22const VERTEX = `23attribute vec2 position;24void main() { gl_Position = vec4(position, 0.0, 1.0); }25`;26 27const FRAGMENT = `28precision highp float;29 30uniform vec2  uResolution;31uniform float uTime;32uniform vec2  uPointer;33uniform float uThickness;34uniform float uDispersion;35uniform float uRoughness;36uniform vec3  uColorA;37uniform vec3  uColorB;38 39/* The backdrop being refracted. Generated rather than sampled from a texture,40   so the component needs no image and no second render pass. */41vec3 backdrop(vec2 uv) {42  float bands = sin(uv.x * 9.0 + uTime * 0.35) * 0.5 + 0.5;43  float glow = smoothstep(0.85, 0.0, distance(uv, vec2(0.35, 0.6)));44  vec3 base = mix(uColorB, uColorA, bands * 0.65 + glow * 0.5);45  /* A faint grid, because a flat gradient shows no distortion — you need46     straight lines to SEE that the glass is bending anything. */47  vec2 grid = abs(fract(uv * 14.0) - 0.5);48  float lines = smoothstep(0.48, 0.5, max(grid.x, grid.y));49  return base + lines * 0.06;50}51 52/* Height field: a couple of drifting lobes plus a bulge under the pointer. */53float height(vec2 p) {54  float h = 0.0;55  h += sin(p.x * 3.4 + uTime * 0.5) * cos(p.y * 2.9 - uTime * 0.42) * 0.5;56  h += sin(length(p - vec2(0.5)) * 7.0 - uTime * 0.8) * 0.25;57  float bulge = smoothstep(0.42, 0.0, distance(p, uPointer));58  h += bulge * 1.6;59  return h * uThickness;60}61 62void main() {63  vec2 uv = gl_FragCoord.xy / uResolution;64  float aspect = uResolution.x / uResolution.y;65  vec2 p = vec2(uv.x * aspect, uv.y);66  vec2 pointer = vec2(uPointer.x * aspect, uPointer.y);67 68  /* Surface normal by central differences. The epsilon is in the same units69     as p, so the normal stays consistent across aspect ratios. */70  float e = 0.004;71  float hx = height(p + vec2(e, 0.0)) - height(p - vec2(e, 0.0));72  float hy = height(p + vec2(0.0, e)) - height(p - vec2(0.0, e));73  vec3 normal = normalize(vec3(-hx, -hy, uRoughness));74 75  /* Refract the lookup. Each channel bends by a slightly different amount —76     that IS dispersion, the reason a prism makes a rainbow. */77  vec2 bend = normal.xy * 0.09;78  vec3 colour = vec3(79    backdrop(uv + bend * (1.0 + uDispersion * 0.35)).r,80    backdrop(uv + bend).g,81    backdrop(uv + bend * (1.0 - uDispersion * 0.35)).b82  );83 84  /* Specular from the SAME normal, so the highlight tracks the deformation. */85  vec3 light = normalize(vec3(0.4, 0.7, 0.6));86  float spec = pow(max(dot(normal, light), 0.0), 28.0);87  colour += spec * 0.55;88 89  /* Fresnel: glass is more mirror-like at grazing angles, which is what90     gives the edges of a lens their bright rim. */91  float fresnel = pow(1.0 - abs(normal.z), 3.0);92  colour += fresnel * 0.16;93 94  gl_FragColor = vec4(colour, 1.0);95}96`;97 98function compile(gl: WebGLRenderingContext, type: number, src: string) {99  const s = gl.createShader(type);100  if (!s) return null;101  gl.shaderSource(s, src);102  gl.compileShader(s);103  return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;104}105 106function toRgb(hex: string): [number, number, number] {107  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());108  if (!m) return [0, 0, 0];109  const n = parseInt(m[1], 16);110  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];111}112 113export interface RefractionProps {114  colorA?: string;115  colorB?: string;116  /** How much the surface deforms — effectively how thick the glass is. */117  thickness?: number;118  /** Channel separation. 0 is colourless glass. */119  dispersion?: number;120  /** Higher flattens the normal, giving a softer, more frosted surface. */121  roughness?: number;122  still?: boolean;123  className?: string;124}125 126export function Refraction({127  colorA = "#c3f53c",128  colorB = "#0a0b0e",129  thickness = 1,130  dispersion = 1,131  roughness = 1.4,132  still = false,133  className = "",134}: RefractionProps) {135  const ref = useRef<HTMLCanvasElement>(null);136 137  useEffect(() => {138    const canvas = ref.current;139    if (!canvas) return;140    const gl = canvas.getContext("webgl", { alpha: false, antialias: false });141    if (!gl) return;142 143    const vs = compile(gl, gl.VERTEX_SHADER, VERTEX);144    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);145    if (!vs || !fs) return;146    const program = gl.createProgram();147    if (!program) return;148    gl.attachShader(program, vs);149    gl.attachShader(program, fs);150    gl.linkProgram(program);151    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;152    gl.useProgram(program);153 154    const buffer = gl.createBuffer();155    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);156    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);157    const position = gl.getAttribLocation(program, "position");158    gl.enableVertexAttribArray(position);159    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);160 161    const uniform = (n: string) => gl.getUniformLocation(program, n);162    const uResolution = uniform("uResolution");163    const uTime = uniform("uTime");164    const uPointer = uniform("uPointer");165    gl.uniform1f(uniform("uThickness"), thickness);166    gl.uniform1f(uniform("uDispersion"), dispersion);167    gl.uniform1f(uniform("uRoughness"), roughness);168    gl.uniform3fv(uniform("uColorA"), toRgb(colorA));169    gl.uniform3fv(uniform("uColorB"), toRgb(colorB));170 171    const reduced =172      still ||173      (typeof matchMedia === "function" &&174        matchMedia("(prefers-reduced-motion: reduce)").matches);175 176    // Owned by this effect run — the canvas keeps its dimensions across177    // re-runs while a new program's uniforms start at zero, so comparing178    // against the DOM would skip the upload entirely.179    let uploadedWidth = 0;180    let uploadedHeight = 0;181 182    const resize = () => {183      // Capped at 1.5: this shader evaluates the height field five times per184      // pixel, so resolution is the dominant cost.185      const dpr = Math.min(devicePixelRatio || 1, 1.5);186      const w = Math.floor(canvas.clientWidth * dpr);187      const h = Math.floor(canvas.clientHeight * dpr);188      if (!w || !h) return;189      if (w === uploadedWidth && h === uploadedHeight) return;190      uploadedWidth = w;191      uploadedHeight = h;192      canvas.width = w;193      canvas.height = h;194      gl.viewport(0, 0, w, h);195      gl.uniform2f(uResolution, w, h);196    };197 198    /* On a phone there is no cursor to follow, so the source drifts the199       position along a slow path instead — the glass stays alive rather than200       freezing into a still frame. Tapping still moves it. */201    const pointer = createPointerSource(canvas);202    let currentX = 0.5;203    let currentY = 0.5;204 205    const start = performance.now();206 207    const draw = (now: number) => {208      resize();209      // Eased, so the bulge trails the cursor like something with viscosity210      // rather than teleporting to it.211      const target = pointer.read((now - start) / 1000);212      currentX += (target.x - currentX) * 0.08;213      currentY += (target.y - currentY) * 0.08;214      gl.uniform2f(uPointer, currentX, currentY);215      gl.uniform1f(uTime, (now - start) / 1000);216      gl.drawArrays(gl.TRIANGLES, 0, 3);217    };218 219    let frame = 0;220    const loop = (now: number) => {221      draw(now);222      frame = requestAnimationFrame(loop);223    };224 225    draw(start);226    if (!reduced) frame = requestAnimationFrame(loop);227 228    const observer = new ResizeObserver(() => {229      resize();230      if (reduced) draw(start);231    });232    observer.observe(canvas);233 234    return () => {235      cancelAnimationFrame(frame);236      observer.disconnect();237      pointer.dispose();238      gl.deleteProgram(program);239      gl.deleteShader(vs);240      gl.deleteShader(fs);241      gl.deleteBuffer(buffer);242    };243  }, [colorA, colorB, thickness, dispersion, roughness, still]);244 245  return <canvas ref={ref} aria-hidden className={`block h-full w-full ${className}`} />;246}247