"use client"; import { useEffect, useRef } from "react"; import * as THREE from "three"; /** * A loom's warp, seen from inside it. Thousands of tensioned filaments run the * length of a corridor in banded fans of colour, and the observer travels down * the middle of it. * * Nothing in the field animates. Every filament is placed once and stays exactly * where it was put — the only value that changes per frame is how far the * observer has moved, so all of the motion you see is parallax. Threads stream * outward from the vanishing point because they are parallel and you are passing * them, which is also the only reason the picture converges at all. * * Filaments are drawn as instanced quads expanded in *screen space*, so a thread * is the same hairline width whether it is a metre away or at the far end of the * corridor — world-space tubes would shimmer down to nothing in the distance. * The whole field is accumulated additively into a half-float target, then tone * mapped in a second pass so the dense core stays coloured instead of clipping * to white. */ /* ------------------------------------------------------------------ */ /* The field */ /* ------------------------------------------------------------------ */ /** Depth of the corridor before it repeats. */ const SPAN = 1600; /** Radius of the empty channel the observer travels down, and of the outer wall. */ const RADIUS_INNER = 8; const RADIUS_OUTER = 320; /** Filament length. Kept well under SPAN so a thread re-seeds deep inside the haze. */ const LENGTH_MIN = 300; const LENGTH_MAX = 620; /** Filaments are dyed in bands, the way a warp is: neighbours share a colour. */ const SECTORS = 96; /** Reed frames — the lattice the threads pass through, out near the vanishing point. */ const FRAME_GAP = 260; const FRAME_PITCH = 13; const FRAME_EXTENT = 91; const WARM: [number, number, number][] = [ [1.0, 0.24, 0.14], // vermilion [1.0, 0.44, 0.15], // orange [1.0, 0.64, 0.24], // amber [0.96, 0.83, 0.56], // straw [0.9, 0.19, 0.31], // crimson [0.82, 0.22, 0.52], // magenta [0.58, 0.09, 0.13], // oxblood [0.95, 0.52, 0.44], // salmon ]; const COOL: [number, number, number][] = [ [0.08, 0.72, 0.64], // teal [0.15, 0.79, 0.83], // cyan [0.15, 0.6, 0.46], // sea green [0.2, 0.43, 0.68], // steel blue [0.12, 0.22, 0.5], // indigo [0.56, 0.6, 0.28], // olive ]; /** Small deterministic PRNG, so the weave is the same on every load. */ function rng(seed: number) { let s = seed >>> 0; return () => { s = (s + 0x6d2b79f5) >>> 0; let t = Math.imul(s ^ (s >>> 15), 1 | s); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } type Segments = { start: Float32Array; end: Float32Array; color: Float32Array; count: number; }; /** * Lays out the warp. Filaments are spread through a hollow cylinder with a * log-uniform radius, which packs them tightly around the channel the observer * travels down and thins them out toward the walls. */ function buildWarp(count: number): Segments { const random = rng(0x5eed1a); const start = new Float32Array(count * 3); const end = new Float32Array(count * 3); const color = new Float32Array(count * 3); // One base colour per angular band. Bands facing up run cool — the teal // shoulder in the reference — while the rest of the wheel stays warm. const bands: [number, number, number][] = []; for (let s = 0; s < SECTORS; s++) { const angle = ((s + 0.5) / SECTORS) * Math.PI * 2; const upness = Math.sin(angle) * 0.5 + 0.5; const coolChance = Math.pow(upness, 2.2) * 0.9; const palette = random() < coolChance ? COOL : WARM; bands.push(palette[Math.floor(random() * palette.length)]); } const ratio = RADIUS_OUTER / RADIUS_INNER; for (let i = 0; i < count; i++) { const sector = Math.floor(random() * SECTORS); const angle = ((sector + random()) / SECTORS) * Math.PI * 2; const radius = RADIUS_INNER * Math.pow(ratio, random()); const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; // z is the far end; the near end is one filament-length toward the observer. const z = -random() * SPAN; const length = LENGTH_MIN + random() * (LENGTH_MAX - LENGTH_MIN); const o = i * 3; start[o] = x; start[o + 1] = y; start[o + 2] = z; end[o] = x; end[o + 1] = y; end[o + 2] = z + length; // Mostly the band's colour, with a few strays borrowed from the next band // over and the odd near-black thread, so the fans read as dyed rather than // printed. const stray = random() < 0.16; const base = bands[stray ? (sector + 1) % SECTORS : sector]; const gain = random() < 0.18 ? 0.1 : 0.3 + random() * 0.8; color[o] = base[0] * gain; color[o + 1] = base[1] * gain; color[o + 2] = base[2] * gain; } return { start, end, color, count }; } /** * The reed frames: flat lattices strung across the corridor at regular depths. * They only ever show up out near the vanishing point — each one fades away * long before the observer would reach it. */ function buildFrames(): Segments { const lines: number[][] = []; const steps = Math.floor(FRAME_EXTENT / FRAME_PITCH); for (let z = 0; z > -SPAN; z -= FRAME_GAP) { for (let i = -steps; i <= steps; i++) { const at = i * FRAME_PITCH; lines.push([at, -FRAME_EXTENT, z, at, FRAME_EXTENT, z]); lines.push([-FRAME_EXTENT, at, z, FRAME_EXTENT, at, z]); } } const count = lines.length; const start = new Float32Array(count * 3); const end = new Float32Array(count * 3); const color = new Float32Array(count * 3); for (let i = 0; i < count; i++) { const line = lines[i]; const o = i * 3; start[o] = line[0]; start[o + 1] = line[1]; start[o + 2] = line[2]; end[o] = line[3]; end[o + 1] = line[4]; end[o + 2] = line[5]; color[o] = 0.1; color[o + 1] = 0.15; color[o + 2] = 0.19; } return { start, end, color, count }; } /* ------------------------------------------------------------------ */ /* Filaments */ /* ------------------------------------------------------------------ */ const lineVert = /* glsl */ ` precision highp float; attribute vec3 aStart; // far end of the segment attribute vec3 aEnd; // near end attribute vec3 aColor; uniform vec2 uRes; // drawing buffer size, in device pixels uniform float uTravel; // how far the observer has moved down the corridor uniform float uWidth; // half-width of a filament, in device pixels varying vec3 vColor; varying float vSide; varying float vDepth; void main() { // The one moving part. A segment holds its place until it has slipped // entirely behind the observer, then repeats a full span further out — // deep enough inside the haze that the jump is never visible. float z = mod(aStart.z + uTravel, ${SPAN}.0) - ${SPAN}.0; float shift = z - aStart.z; vec4 a = modelViewMatrix * vec4(aStart.xy, aStart.z + shift, 1.0); vec4 b = modelViewMatrix * vec4(aEnd.xy, aEnd.z + shift, 1.0); // Clip against the near plane by hand: an endpoint behind the lens projects // to the wrong side of the frame and would streak the quad across it. float nearZ = -0.5; if (a.z > nearZ && b.z > nearZ) { vColor = vec3(0.0); vSide = 0.0; vDepth = 0.0; gl_Position = vec4(0.0, 0.0, 2.0, 1.0); // outside clip space return; } if (a.z > nearZ) a = mix(a, b, (a.z - nearZ) / (a.z - b.z)); if (b.z > nearZ) b = mix(b, a, (b.z - nearZ) / (b.z - a.z)); vec4 ca = projectionMatrix * a; vec4 cb = projectionMatrix * b; // Widen the quad perpendicular to the segment *after* projection, so a // filament keeps the same pixel thickness at every depth. vec2 halfRes = uRes * 0.5; vec2 dir = (cb.xy / cb.w - ca.xy / ca.w) * halfRes; dir = length(dir) < 1e-4 ? vec2(1.0, 0.0) : normalize(dir); vec2 normal = vec2(-dir.y, dir.x); vec4 clip = mix(ca, cb, position.x); // position.x picks an endpoint: 0 or 1 clip.xy += normal * position.y * uWidth / halfRes * clip.w; vColor = aColor; vSide = position.y; vDepth = -mix(a.z, b.z, position.x); gl_Position = clip; } `; const lineFrag = /* glsl */ ` precision highp float; uniform float uFadeIn; // depth at which a segment is at full strength uniform float uFadeOut; // depth at which the haze has swallowed it uniform float uNear; // depth below which it fades off the lens uniform float uGain; varying vec3 vColor; varying float vSide; varying float vDepth; void main() { // Bright core with a soft shoulder — a hard-edged quad would alias badly // once thousands of them cross the frame. float profile = exp(-3.4 * vSide * vSide); float haze = smoothstep(uFadeOut, uFadeIn, vDepth); float lens = smoothstep(0.0, uNear, vDepth); gl_FragColor = vec4(vColor * profile * haze * lens * uGain, 1.0); } `; /* ------------------------------------------------------------------ */ /* Composite */ /* ------------------------------------------------------------------ */ const compositeVert = /* glsl */ ` varying vec2 vUv; void main() { vUv = position.xy * 0.5 + 0.5; gl_Position = vec4(position.xy, 0.0, 1.0); } `; const compositeFrag = /* glsl */ ` precision highp float; uniform sampler2D uScene; uniform vec2 uRes; uniform float uTime; varying vec2 vUv; const int TAPS = 12; void main() { vec3 col = texture2D(uScene, vUv).rgb; // Cheap bloom: a golden-angle spiral of taps around each pixel. Enough to // make the crowded centre glow without a separate blur chain. vec3 halo = vec3(0.0); for (int i = 0; i < TAPS; i++) { float a = float(i) * 2.399963; float r = (float(i) + 1.0) / float(TAPS); halo += texture2D(uScene, vUv + vec2(cos(a), sin(a)) * r * 9.0 / uRes).rgb; } col += halo / float(TAPS) * 0.5; // Roll the hot cores back down so dense fans keep their hue. col = col / (col + vec3(0.9)) * 1.45; vec2 p = vUv - 0.5; col *= 1.0 - 1.05 * dot(p, p); // Fine grain, at the level of sensor noise. float grain = fract(sin(dot(gl_FragCoord.xy + uTime, vec2(12.9898, 78.233))) * 43758.5453); col += (grain - 0.5) * 0.012; gl_FragColor = vec4(max(col, 0.0), 1.0); } `; /* ------------------------------------------------------------------ */ /* Scene */ /* ------------------------------------------------------------------ */ /** A unit quad: x picks the endpoint, y picks the side to widen toward. */ function quadGeometry(segments: Segments) { const geometry = new THREE.InstancedBufferGeometry(); geometry.setAttribute( "position", new THREE.BufferAttribute( new Float32Array([0, -1, 0, 1, -1, 0, 1, 1, 0, 0, 1, 0]), 3, ), ); geometry.setIndex([0, 1, 2, 0, 2, 3]); geometry.setAttribute("aStart", new THREE.InstancedBufferAttribute(segments.start, 3)); geometry.setAttribute("aEnd", new THREE.InstancedBufferAttribute(segments.end, 3)); geometry.setAttribute("aColor", new THREE.InstancedBufferAttribute(segments.color, 3)); geometry.instanceCount = segments.count; return geometry; } /** * Reduced motion is honoured by slowing the scene down rather than stopping it. * A background frozen dead still reads as a broken one, and at this rate the * drift stays under the threshold where it registers as animation at all. */ const REDUCED_MOTION_SCALE = 0.15; export function WarpThreads() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); let motionScale = motionQuery.matches ? REDUCED_MOTION_SCALE : 1; const onMotionPreference = (event: MediaQueryListEvent) => { motionScale = event.matches ? REDUCED_MOTION_SCALE : 1; }; motionQuery.addEventListener("change", onMotionPreference); const compact = window.matchMedia("(max-width: 767px)").matches; const renderer = new THREE.WebGLRenderer({ canvas, antialias: false, powerPreference: "high-performance", }); renderer.setClearColor(0x000000, 1); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.75)); // The observer sits at the origin and never leaves it — the corridor is what // slides past, which keeps the wrap arithmetic exact however long it runs. const camera = new THREE.PerspectiveCamera(compact ? 72 : 64, 1, 0.5, SPAN); const scene = new THREE.Scene(); const shared = { uRes: { value: new THREE.Vector2(1, 1) }, uTravel: { value: 0 }, }; const warpUniforms = { ...shared, uWidth: { value: 1 }, uFadeIn: { value: 520 }, uFadeOut: { value: 820 }, uNear: { value: 9 }, uGain: { value: 0.55 }, }; const frameUniforms = { ...shared, uWidth: { value: 0.8 }, uFadeIn: { value: 560 }, uFadeOut: { value: 900 }, uNear: { value: 320 }, uGain: { value: 0.55 }, }; const makeMaterial = (uniforms: Record) => new THREE.ShaderMaterial({ vertexShader: lineVert, fragmentShader: lineFrag, uniforms, transparent: true, blending: THREE.AdditiveBlending, depthTest: false, depthWrite: false, }); const warpGeometry = quadGeometry(buildWarp(compact ? 5600 : 8000)); const warpMaterial = makeMaterial(warpUniforms); const warp = new THREE.Mesh(warpGeometry, warpMaterial); warp.frustumCulled = false; scene.add(warp); const frameGeometry = quadGeometry(buildFrames()); const frameMaterial = makeMaterial(frameUniforms); const frames = new THREE.Mesh(frameGeometry, frameMaterial); frames.frustumCulled = false; scene.add(frames); // Accumulate into half-float so the crowded centre can run well past 1.0 and // be tone mapped back, rather than clipping to white in the framebuffer. const target = new THREE.WebGLRenderTarget(1, 1, { type: THREE.HalfFloatType, depthBuffer: false, stencilBuffer: false, }); const compositeScene = new THREE.Scene(); const compositeCamera = new THREE.Camera(); const compositeUniforms = { uScene: { value: target.texture }, uRes: shared.uRes, uTime: { value: 0 }, }; const composite = new THREE.Mesh( new THREE.PlaneGeometry(2, 2), new THREE.ShaderMaterial({ vertexShader: compositeVert, fragmentShader: compositeFrag, uniforms: compositeUniforms, depthTest: false, depthWrite: false, }), ); composite.frustumCulled = false; compositeScene.add(composite); const resize = () => { const width = canvas.clientWidth || window.innerWidth; const height = canvas.clientHeight || window.innerHeight; renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); const dpr = renderer.getPixelRatio(); shared.uRes.value.set(width * dpr, height * dpr); target.setSize(width * dpr, height * dpr); warpUniforms.uWidth.value = 0.95 * dpr; frameUniforms.uWidth.value = 0.75 * dpr; }; resize(); const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(canvas); // Accumulated per frame rather than measured from a start stamp, so a // change to the motion preference alters the rate without jumping the scene. let sceneTime = motionQuery.matches ? 30 : 0; let lastFrame = performance.now(); let animationFrame = 0; const render = () => { animationFrame = requestAnimationFrame(render); const now = performance.now(); sceneTime += ((now - lastFrame) / 1000) * motionScale; lastFrame = now; const t = sceneTime; shared.uTravel.value = t * 10; compositeUniforms.uTime.value = t; // A degree of drift over the better part of a minute — just enough that // the vanishing point isn't nailed to a pixel. camera.rotation.y = Math.sin(t * 0.061) * 0.012; camera.rotation.x = Math.sin(t * 0.043 + 1.7) * 0.008; renderer.setRenderTarget(target); renderer.render(scene, camera); renderer.setRenderTarget(null); renderer.render(compositeScene, compositeCamera); }; render(); return () => { cancelAnimationFrame(animationFrame); motionQuery.removeEventListener("change", onMotionPreference); resizeObserver.disconnect(); warpGeometry.dispose(); warpMaterial.dispose(); frameGeometry.dispose(); frameMaterial.dispose(); composite.geometry.dispose(); (composite.material as THREE.Material).dispose(); target.dispose(); renderer.dispose(); }; }, []); return

Warp Threads