Tunnel

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4import { createPointerSource } from "../lib/pointerSource";5 6/**7 * An endless tunnel, built from a coordinate transform rather than geometry.8 *9 * The trick is that a tunnel is just polar coordinates with the radius10 * inverted: angle becomes the wall's horizontal axis, 1/radius becomes depth.11 * Feeding those into a repeating pattern gives infinite perspective from two12 * divisions — no mesh, no camera, no far plane, and no cost that scales with13 * how far down it you can see.14 *15 * Fog toward the centre is what makes it read as distance. Without it the16 * pattern converges to a hard singularity at the vanishing point, which reads17 * as a glitch rather than as depth.18 */19 20const VERTEX = `attribute vec2 position;21void main() { gl_Position = vec4(position, 0.0, 1.0); }`;22 23const FRAGMENT = `24precision mediump float;25uniform vec2  uResolution;26uniform float uTime;27uniform vec2  uPointer;28uniform vec3  uColorA;29uniform vec3  uColorB;30uniform float uTwist;31uniform float uRings;32 33void main() {34  vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution) / uResolution.y;35  /* Steering: shifting the centre is all a "camera" needs to be here. */36  uv -= (uPointer - 0.5) * 0.6;37 38  float radius = length(uv);39  float angle  = atan(uv.y, uv.x);40 41  /* 1/radius IS the depth axis. Points near the centre are far away, and the42     reciprocal gives exactly the foreshortening perspective would. */43  float depth = 1.0 / max(radius, 0.001) + uTime;44  angle += depth * uTwist * 0.08;45 46  /* Repeating bands along both axes: rings receding, ribs around the wall. */47  float rings = smoothstep(0.42, 0.5, abs(fract(depth * uRings * 0.12) - 0.5));48  float ribs  = smoothstep(0.35, 0.5, abs(fract(angle * 2.2) - 0.5));49  float pattern = max(rings, ribs * 0.55);50 51  vec3 colour = mix(uColorB, uColorA, pattern);52  /* Fog, so the vanishing point resolves into haze instead of a singularity. */53  colour *= smoothstep(0.0, 0.42, radius);54  gl_FragColor = vec4(colour, 1.0);55}`;56 57function compile(gl: WebGLRenderingContext, type: number, src: string) {58  const s = gl.createShader(type);59  if (!s) return null;60  gl.shaderSource(s, src);61  gl.compileShader(s);62  return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;63}64 65function toRgb(hex: string): [number, number, number] {66  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());67  if (!m) return [0, 0, 0];68  const n = parseInt(m[1], 16);69  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];70}71 72export interface TunnelProps {73  colorA?: string;74  colorB?: string;75  speed?: number;76  /** Rotation applied with depth — 0 is a straight tunnel. */77  twist?: number;78  /** Ring density along the depth axis. */79  rings?: number;80  still?: boolean;81  className?: string;82}83 84export function Tunnel({85  colorA = "#c3f53c",86  colorB = "#0a0b0e",87  speed = 1,88  twist = 1,89  rings = 1,90  still = false,91  className = "",92}: TunnelProps) {93  const ref = useRef<HTMLCanvasElement>(null);94 95  useEffect(() => {96    const canvas = ref.current;97    if (!canvas) return;98    const gl = canvas.getContext("webgl", { alpha: false, antialias: false });99    if (!gl) return;100 101    const vs = compile(gl, gl.VERTEX_SHADER, VERTEX);102    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);103    if (!vs || !fs) return;104    const program = gl.createProgram();105    if (!program) return;106    gl.attachShader(program, vs);107    gl.attachShader(program, fs);108    gl.linkProgram(program);109    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;110    gl.useProgram(program);111 112    const buffer = gl.createBuffer();113    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);114    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);115    const position = gl.getAttribLocation(program, "position");116    gl.enableVertexAttribArray(position);117    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);118 119    const uniform = (n: string) => gl.getUniformLocation(program, n);120    const uResolution = uniform("uResolution");121    const uTime = uniform("uTime");122    const uPointer = uniform("uPointer");123    gl.uniform3fv(uniform("uColorA"), toRgb(colorA));124    gl.uniform3fv(uniform("uColorB"), toRgb(colorB));125    gl.uniform1f(uniform("uTwist"), twist);126    gl.uniform1f(uniform("uRings"), rings);127 128    const reduced =129      still ||130      (typeof matchMedia === "function" &&131        matchMedia("(prefers-reduced-motion: reduce)").matches);132 133    // Owned by this effect run: the canvas keeps its size across re-runs while134    // a new program's uniforms start at zero.135    let uw = 0;136    let uh = 0;137    const resize = () => {138      const dpr = Math.min(devicePixelRatio || 1, 2);139      const w = Math.floor(canvas.clientWidth * dpr);140      const h = Math.floor(canvas.clientHeight * dpr);141      if (!w || !h || (w === uw && h === uh)) return;142      uw = w;143      uh = h;144      canvas.width = w;145      canvas.height = h;146      gl.viewport(0, 0, w, h);147      gl.uniform2f(uResolution, w, h);148    };149 150    const pointer = createPointerSource(canvas);151    let cx = 0.5;152    let cy = 0.5;153    const start = performance.now();154 155    const draw = (now: number) => {156      resize();157      const elapsed = (now - start) / 1000;158      const target = pointer.read(elapsed);159      cx += (target.x - cx) * 0.06;160      cy += (target.y - cy) * 0.06;161      gl.uniform2f(uPointer, cx, cy);162      gl.uniform1f(uTime, elapsed * speed);163      gl.drawArrays(gl.TRIANGLES, 0, 3);164    };165 166    let frame = 0;167    const loop = (now: number) => {168      draw(now);169      frame = requestAnimationFrame(loop);170    };171 172    draw(start);173    if (!reduced) frame = requestAnimationFrame(loop);174 175    const observer = new ResizeObserver(() => {176      resize();177      if (reduced) draw(start);178    });179    observer.observe(canvas);180 181    return () => {182      cancelAnimationFrame(frame);183      observer.disconnect();184      pointer.dispose();185      gl.deleteProgram(program);186      gl.deleteShader(vs);187      gl.deleteShader(fs);188      gl.deleteBuffer(buffer);189    };190  }, [colorA, colorB, speed, twist, rings, still]);191 192  return <canvas ref={ref} aria-hidden className={`block h-full w-full ${className}`} />;193}194