3d retro graphics

Copy a demo, drop it on a page. Old workstation tricks, WebGL 1 or a 2D canvas. Licensed CC0.

Experiments

<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Color-field oscillator running as a fullscreen fragment shader." /> <link rel="canonical" href="https://3d-retro.com/experiments/plasma" /> <title>Plasma · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", speed: 1, scale: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [0.43, 0.91, 0.72]; return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); function fail(message) { fallback.hidden = false; fallback.textContent = message; } const gl = canvas.getContext("webgl", { alpha: false, antialias: false, powerPreference: "high-performance" }); if (!gl) { fail("WebGL is not available in this browser. Try a current Firefox, Chrome, Safari, or Edge."); return; } const VERT = `attribute vec2 a_pos; void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }`; const FRAG = `precision mediump float; uniform float u_time; uniform vec2 u_resolution; uniform vec3 u_color; uniform float u_speed; uniform float u_scale; void main() { vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / min(u_resolution.x, u_resolution.y); uv *= u_scale; float t = u_time * 0.55 * u_speed; float v = 0.0; v += sin(uv.x * 9.0 + t); v += sin(uv.y * 8.0 + t * 1.15); v += sin((uv.x + uv.y) * 6.0 + t * 0.7); vec2 c = uv + vec2(sin(t * 0.31), cos(t * 0.27)) * 0.45; v += sin(length(c) * 14.0 - t * 1.4); v *= 0.25; float r = 0.55 + 0.45 * sin(v * 6.28318 + t); float g = 0.45 + 0.45 * sin(v * 6.28318 + t * 1.3 + 2.1); float b = 0.55 + 0.45 * sin(v * 6.28318 + t * 0.7 + 4.2); vec3 col = vec3(r, g, b); col = mix(vec3(0.05, 0.18, 0.22), col, 0.92); col = mix(col, vec3(0.43, 0.91, 0.72), 0.12 * (0.5 + 0.5 * sin(v * 12.0))); vec2 q = gl_FragCoord.xy / u_resolution; col *= 0.65 + 0.35 * pow(16.0 * q.x * q.y * (1.0 - q.x) * (1.0 - q.y), 0.32); col = mix(col, u_color, 0.32); gl_FragColor = vec4(col, 1.0); }`; function compile(type, src) { const sh = gl.createShader(type); gl.shaderSource(sh, src); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(sh) || "Shader compile failed"); } return sh; } const prog = gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG)); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(prog) || "Program link failed"); } gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); const loc = gl.getAttribLocation(prog, "a_pos"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); const uTime = gl.getUniformLocation(prog, "u_time"); const uRes = gl.getUniformLocation(prog, "u_resolution"); const uColor = gl.getUniformLocation(prog, "u_color"); const uSpeed = gl.getUniformLocation(prog, "u_speed"); const uScale = gl.getUniformLocation(prog, "u_scale"); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let raf = 0; function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } gl.viewport(0, 0, canvas.width, canvas.height); } function frame(now) { resize(); const t = reduced ? 2.4 : now * 0.001; const rgb = hexToRgb(PARAMS.color); gl.uniform1f(uTime, t); gl.uniform2f(uRes, canvas.width, canvas.height); gl.uniform3f(uColor, rgb[0], rgb[1], rgb[2]); gl.uniform1f(uSpeed, PARAMS.speed); gl.uniform1f(uScale, PARAMS.scale); gl.drawArrays(gl.TRIANGLES, 0, 6); if (!reduced) raf = requestAnimationFrame(frame); } canvas.addEventListener("webglcontextlost", function (e) { e.preventDefault(); cancelAnimationFrame(raf); fail("The WebGL context was lost. Reload to restore the demo."); }); try { raf = requestAnimationFrame(frame); } catch (err) { fail(err && err.message ? err.message : String(err)); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
01. Demoscene · 1992
Plasma
Color-field oscillator running as a fullscreen fragment shader.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Perspective starfield that stretches into a hyperspace tunnel." /> <link rel="canonical" href="https://3d-retro.com/experiments/starfield" /> <title>Retro 3d starfield · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#baffe6", speed: 1, trail: 0.2 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [186, 255, 230]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function rgbCss(hex, a) { const r = hexToRgb(hex); return "rgba(" + r[0] + ", " + r[1] + ", " + r[2] + ", " + a + ")"; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const COUNT = 720; const stars = new Array(COUNT); for (let i = 0; i < COUNT; i++) { stars[i] = { x: Math.random() * 2 - 1, y: Math.random() * 2 - 1, z: Math.random(), }; } const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const look = { x: 0, y: 0 }; const target = { x: 0, y: 0 }; let last = 0; let raf = 0; function onPointer(e) { const rect = canvas.getBoundingClientRect(); target.x = ((e.clientX - rect.left) / rect.width) * 2 - 1; target.y = ((e.clientY - rect.top) / rect.height) * 2 - 1; } canvas.addEventListener("pointermove", onPointer, { passive: true }); function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { resize(); const dt = Math.min(0.1, last ? (now - last) * 0.001 : 0.016); last = now; const t = now * 0.001; look.x += (target.x - look.x) * (1 - Math.exp(-dt * 6)); look.y += (target.y - look.y) * (1 - Math.exp(-dt * 6)); const w = canvas.width; const h = canvas.height; const warp = reduced ? 0.12 : 0.18 + 0.82 * (0.5 + 0.5 * Math.sin(t * 0.32)); const speed = (reduced ? 0 : 0.22 + warp * 1.55) * PARAMS.speed; if (reduced) { ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); } else { ctx.fillStyle = "rgba(11, 12, 14, " + PARAMS.trail + ")"; ctx.fillRect(0, 0, w, h); } const cx = w * 0.5 + look.x * w * 0.1; const cy = h * 0.5 + look.y * h * 0.1; const fov = Math.min(w, h) * 0.52; for (let i = 0; i < COUNT; i++) { const s = stars[i]; const pz = s.z; s.z -= speed * dt; if (s.z <= 0.02) { s.x = Math.random() * 2 - 1; s.y = Math.random() * 2 - 1; s.z = 1; } const sx = cx + (s.x / s.z) * fov; const sy = cy + (s.y / s.z) * fov; const px = cx + (s.x / pz) * fov; const py = cy + (s.y / pz) * fov; const bright = (1 - s.z); const a = 0.25 + bright * (0.45 + warp * 0.5); ctx.strokeStyle = rgbCss(PARAMS.color, a); ctx.lineWidth = Math.max(1, bright * (1.1 + warp * 2.4)); ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(sx, sy); ctx.stroke(); } if (!reduced) raf = requestAnimationFrame(frame); } if (reduced) frame(performance.now()); else raf = requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
02. Hyperspace · 1993
Retro 3d starfield
Perspective starfield that stretches into a hyperspace tunnel.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Flat-shaded torus, wire overlay, and a ground grid. Drag to orbit." /> <link rel="canonical" href="https://3d-retro.com/experiments/lowpoly" /> <title>Retro torus · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#c7cccf", accent: "#6ee7b7", speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [0.43, 0.91, 0.72]; return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); function fail(message) { fallback.hidden = false; fallback.textContent = message; } const gl = canvas.getContext("webgl", { alpha: false, antialias: true }); if (!gl) { fail("WebGL is not available in this browser. Try a current Firefox, Chrome, Safari, or Edge."); return; } const VERT = `attribute vec3 a_pos; attribute vec3 a_nrm; uniform mat4 u_mvp; uniform mat4 u_model; varying vec3 v_nrm; varying vec3 v_pos; void main() { vec4 world = u_model * vec4(a_pos, 1.0); v_pos = world.xyz; v_nrm = mat3(u_model) * a_nrm; gl_Position = u_mvp * vec4(a_pos, 1.0); }`; const FRAG = `precision mediump float; varying vec3 v_nrm; varying vec3 v_pos; uniform vec3 u_cam; uniform vec3 u_color; uniform vec3 u_accent; void main() { vec3 n = normalize(v_nrm); vec3 v = normalize(u_cam - v_pos); vec3 l1 = normalize(vec3(0.55, 0.85, 0.35)); vec3 l2 = normalize(vec3(-0.75, 0.25, 0.2)); float d1 = max(dot(n, l1), 0.0); float d2 = max(dot(n, l2), 0.0); float rim = pow(1.0 - max(dot(n, v), 0.0), 2.8); vec3 col = u_color * (0.10 + 0.78 * d1); col += u_accent * d2 * 0.38; col += u_accent * rim * 0.22; gl_FragColor = vec4(col, 1.0); }`; const LINE_VERT = `attribute vec3 a_pos; uniform mat4 u_mvp; void main() { gl_Position = u_mvp * vec4(a_pos, 1.0); }`; const LINE_FRAG = `precision mediump float; uniform vec3 u_accent; void main() { gl_FragColor = vec4(u_accent, 0.28); }`; function compile(type, src) { const sh = gl.createShader(type); gl.shaderSource(sh, src); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(sh) || "Shader compile failed"); } return sh; } function program(vs, fs) { const p = gl.createProgram(); gl.attachShader(p, compile(gl.VERTEX_SHADER, vs)); gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(p); if (!gl.getProgramParameter(p, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(p) || "Program link failed"); } return p; } function mul(a, b) { const o = new Float32Array(16); for (let c = 0; c < 4; c++) { for (let r = 0; r < 4; r++) { o[c * 4 + r] = a[r] * b[c * 4] + a[4 + r] * b[c * 4 + 1] + a[8 + r] * b[c * 4 + 2] + a[12 + r] * b[c * 4 + 3]; } } return o; } function perspective(fovy, aspect, near, far) { const f = 1 / Math.tan(fovy / 2); const nf = 1 / (near - far); const o = new Float32Array(16); o[0] = f / aspect; o[5] = f; o[10] = (far + near) * nf; o[11] = -1; o[14] = 2 * far * near * nf; return o; } function translate(x, y, z) { const o = new Float32Array([1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]); o[12] = x; o[13] = y; o[14] = z; return o; } function rotateXY(ax, ay) { const cx = Math.cos(ax), sx = Math.sin(ax); const cy = Math.cos(ay), sy = Math.sin(ay); const rx = new Float32Array([1,0,0,0, 0,cx,sx,0, 0,-sx,cx,0, 0,0,0,1]); const ry = new Float32Array([cy,0,-sy,0, 0,1,0,0, sy,0,cy,0, 0,0,0,1]); return mul(ry, rx); } function torus(major, minor, R, r) { const pos = []; const nrm = []; const lines = []; function point(i, j) { const u = (i / major) * Math.PI * 2; const v = (j / minor) * Math.PI * 2; const cx = Math.cos(u), sx = Math.sin(u); const cy = Math.cos(v), sy = Math.sin(v); return [ (R + r * cy) * cx, r * sy, (R + r * cy) * sx, ]; } function tri(a, b, c) { const ux = b[0] - a[0], uy = b[1] - a[1], uz = b[2] - a[2]; const vx = c[0] - a[0], vy = c[1] - a[1], vz = c[2] - a[2]; let nx = uy * vz - uz * vy; let ny = uz * vx - ux * vz; let nz = ux * vy - uy * vx; const len = Math.hypot(nx, ny, nz) || 1; nx /= len; ny /= len; nz /= len; for (const p of [a, b, c]) { pos.push(p[0], p[1], p[2]); nrm.push(nx, ny, nz); } } for (let i = 0; i < major; i++) { for (let j = 0; j < minor; j++) { const a = point(i, j); const b = point(i + 1, j); const c = point(i + 1, j + 1); const d = point(i, j + 1); tri(a, b, c); tri(a, c, d); lines.push(a[0], a[1], a[2], b[0], b[1], b[2]); lines.push(a[0], a[1], a[2], d[0], d[1], d[2]); } } return { pos: new Float32Array(pos), nrm: new Float32Array(nrm), count: pos.length / 3, lines: new Float32Array(lines), lineCount: lines.length / 3, }; } function grid(size, step) { const pts = []; for (let i = -size; i <= size; i += step) { pts.push(-size, 0, i, size, 0, i); pts.push(i, 0, -size, i, 0, size); } return { data: new Float32Array(pts), count: pts.length / 3 }; } const mesh = torus(16, 10, 1.05, 0.42); const floor = grid(4.5, 0.5); const meshProg = program(VERT, FRAG); const lineProg = program(LINE_VERT, LINE_FRAG); function bindAttrib(prog, name, buffer, size) { const loc = gl.getAttribLocation(prog, name); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); } function makeBuf(data) { const b = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, b); gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); return b; } const posBuf = makeBuf(mesh.pos); const nrmBuf = makeBuf(mesh.nrm); const lineBuf = makeBuf(mesh.lines); const gridBuf = makeBuf(floor.data); gl.enable(gl.DEPTH_TEST); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.clearColor(0.043, 0.047, 0.055, 1); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let yaw = 0.7; let pitch = 0.45; let auto = true; let dragging = false; let lastX = 0, lastY = 0; let last = 0; let raf = 0; canvas.addEventListener("pointerdown", function (e) { dragging = true; auto = false; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { dragging = false; }); canvas.addEventListener("pointermove", function (e) { if (!dragging) return; yaw += (e.clientX - lastX) * 0.008; pitch += (e.clientY - lastY) * 0.008; pitch = Math.max(-0.2, Math.min(1.2, pitch)); lastX = e.clientX; lastY = e.clientY; }); function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } gl.viewport(0, 0, canvas.width, canvas.height); } function frame(now) { const dt = Math.min(0.1, last ? (now - last) * 0.001 : 0.016); last = now; if (auto && !reduced) yaw += dt * 0.45 * PARAMS.speed; resize(); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); const aspect = canvas.width / canvas.height; const proj = perspective(Math.PI / 4, aspect, 0.1, 40); const view = mul(translate(0, -0.15, -5.2), rotateXY(-0.35, 0)); const model = mul(translate(0, 0.55, 0), rotateXY(pitch, yaw)); const mvp = mul(mul(proj, view), model); const gridModel = translate(0, -0.85, 0); const gridMvp = mul(mul(proj, view), gridModel); const cam = [0, 1.6, 5.2]; gl.useProgram(meshProg); gl.uniformMatrix4fv(gl.getUniformLocation(meshProg, "u_mvp"), false, mvp); gl.uniformMatrix4fv(gl.getUniformLocation(meshProg, "u_model"), false, model); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_cam"), cam); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_color"), hexToRgb(PARAMS.color)); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_accent"), hexToRgb(PARAMS.accent)); bindAttrib(meshProg, "a_pos", posBuf, 3); bindAttrib(meshProg, "a_nrm", nrmBuf, 3); gl.enable(gl.CULL_FACE); gl.drawArrays(gl.TRIANGLES, 0, mesh.count); gl.useProgram(lineProg); gl.uniform3fv(gl.getUniformLocation(lineProg, "u_accent"), hexToRgb(PARAMS.accent)); gl.uniformMatrix4fv(gl.getUniformLocation(lineProg, "u_mvp"), false, mvp); bindAttrib(lineProg, "a_pos", lineBuf, 3); gl.disable(gl.CULL_FACE); gl.drawArrays(gl.LINES, 0, mesh.lineCount); gl.uniformMatrix4fv(gl.getUniformLocation(lineProg, "u_mvp"), false, gridMvp); bindAttrib(lineProg, "a_pos", gridBuf, 3); gl.drawArrays(gl.LINES, 0, floor.count); if (!reduced) raf = requestAnimationFrame(frame); } canvas.addEventListener("webglcontextlost", function (e) { e.preventDefault(); cancelAnimationFrame(raf); fail("The WebGL context was lost. Reload to restore the demo."); }); try { if (reduced) frame(performance.now()); else raf = requestAnimationFrame(frame); } catch (err) { fail(err && err.message ? err.message : String(err)); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
03. GL workstation · 1993
Retro torus
Flat-shaded torus, wire overlay, and a ground grid. Drag to orbit.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Raymarched metaballs with a studio chrome environment." /> <link rel="canonical" href="https://3d-retro.com/experiments/metaballs" /> <title>Chrome blobs · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#66dbc0", speed: 1, size: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [0.4, 0.86, 0.74]; return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); function fail(message) { fallback.hidden = false; fallback.textContent = message; } const gl = canvas.getContext("webgl", { alpha: false, antialias: false }); if (!gl) { fail("WebGL is not available in this browser. Try a current Firefox, Chrome, Safari, or Edge."); return; } const VERT = `attribute vec2 a_pos; void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }`; const FRAG = `#ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif uniform float u_time; uniform vec2 u_resolution; uniform vec3 u_color; uniform float u_speed; uniform float u_size; float smin(float a, float b, float k) { float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); } vec3 blob0(float t) { return vec3(sin(t * 0.70) * 0.52, cos(t * 0.48) * 0.22, sin(t * 0.41) * 0.32); } vec3 blob1(float t) { return vec3(cos(t * 0.62) * 0.48, sin(t * 0.79) * 0.28, cos(t * 0.51) * 0.38); } vec3 blob2(float t) { return vec3(sin(t * 0.91 + 2.0) * 0.38, cos(t * 0.67 + 1.1) * 0.32, sin(t * 0.58 + 2.6) * 0.28); } float map(vec3 p, float t) { float d = length(p - blob0(t)) - 0.42 * u_size; d = smin(d, length(p - blob1(t)) - 0.35 * u_size, 0.42); d = smin(d, length(p - blob2(t)) - 0.31 * u_size, 0.42); return d; } vec3 calcNormal(vec3 p, float t) { vec2 e = vec2(0.0016, 0.0); return normalize(vec3( map(p + e.xyy, t) - map(p - e.xyy, t), map(p + e.yxy, t) - map(p - e.yxy, t), map(p + e.yyx, t) - map(p - e.yyx, t) )); } vec3 envMap(vec3 dir) { vec3 zenith = vec3(0.62, 0.78, 0.84); vec3 horizon = vec3(0.16, 0.18, 0.20); vec3 ground = vec3(0.035, 0.038, 0.042); vec3 col = mix(ground, horizon, smoothstep(-0.45, 0.06, dir.y)); col = mix(col, zenith, smoothstep(0.04, 0.92, dir.y)); vec3 key = normalize(vec3(0.42, 0.74, 0.32)); col += vec3(1.0, 0.93, 0.82) * pow(max(dot(dir, key), 0.0), 52.0) * 1.55; vec3 fill = normalize(vec3(-0.62, 0.22, 0.48)); col += u_color * pow(max(dot(dir, fill), 0.0), 18.0) * 0.42; return col; } void main() { vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y; float t = u_time * u_speed; vec3 ro = vec3(0.0, 0.12, 2.55); vec3 rd = normalize(vec3(uv, -1.45)); float dist = 0.0; float hit = 0.0; vec3 p = ro; for (int i = 0; i < 72; i++) { p = ro + rd * dist; float d = map(p, t); if (d < 0.001) { hit = 1.0; break; } dist += d; if (dist > 10.0) break; } vec3 col = envMap(rd) * 0.42; if (hit > 0.5) { vec3 n = calcNormal(p, t); vec3 r = reflect(rd, n); vec3 chrome = envMap(r); float fres = pow(1.0 - max(dot(n, -rd), 0.0), 2.4); col = mix(chrome * 0.52, chrome, fres); col *= 0.82 + 0.18 * n.y; } vec2 q = gl_FragCoord.xy / u_resolution; col *= 0.72 + 0.28 * pow(16.0 * q.x * q.y * (1.0 - q.x) * (1.0 - q.y), 0.28); gl_FragColor = vec4(col, 1.0); }`; function compile(type, src) { const sh = gl.createShader(type); gl.shaderSource(sh, src); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(sh) || "Shader compile failed"); } return sh; } const prog = gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG)); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(prog) || "Program link failed"); } gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); const loc = gl.getAttribLocation(prog, "a_pos"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); const uTime = gl.getUniformLocation(prog, "u_time"); const uRes = gl.getUniformLocation(prog, "u_resolution"); const uColor = gl.getUniformLocation(prog, "u_color"); const uSpeed = gl.getUniformLocation(prog, "u_speed"); const uSize = gl.getUniformLocation(prog, "u_size"); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let raf = 0; function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 1.75); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } gl.viewport(0, 0, canvas.width, canvas.height); } function frame(now) { resize(); const rgb = hexToRgb(PARAMS.color); gl.uniform1f(uTime, reduced ? 1.7 : now * 0.001); gl.uniform2f(uRes, canvas.width, canvas.height); gl.uniform3f(uColor, rgb[0], rgb[1], rgb[2]); gl.uniform1f(uSpeed, PARAMS.speed); gl.uniform1f(uSize, PARAMS.size); gl.drawArrays(gl.TRIANGLES, 0, 6); if (!reduced) raf = requestAnimationFrame(frame); } canvas.addEventListener("webglcontextlost", function (e) { e.preventDefault(); cancelAnimationFrame(raf); fail("The WebGL context was lost. Reload to restore the demo."); }); try { raf = requestAnimationFrame(frame); } catch (err) { fail(err && err.message ? err.message : String(err)); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
04. Metaballs · 1995
Chrome blobs
Raymarched metaballs with a studio chrome environment.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A Whitted raytracer: three spheres, checkerboard, shadows, three bounces." /> <link rel="canonical" href="https://3d-retro.com/experiments/raytracer" /> <title>Reflective spheres · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { metal: "#f0f0f0", red: "#bd291f", mint: "#51d19e", speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [0.94, 0.94, 0.94]; return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); function fail(message) { fallback.hidden = false; fallback.textContent = message; } const gl = canvas.getContext("webgl", { alpha: false, antialias: false }); if (!gl) { fail("WebGL is not available in this browser. Try a current Firefox, Chrome, Safari, or Edge."); return; } const VERT = `attribute vec2 a_pos; void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }`; const FRAG = `#ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif uniform vec2 u_resolution; uniform float u_time; uniform vec3 u_metal; uniform vec3 u_red; uniform vec3 u_mint; uniform float u_speed; float sph(vec3 ro, vec3 rd, vec3 ce, float ra) { vec3 oc = ro - ce; float b = dot(oc, rd); float c = dot(oc, oc) - ra * ra; float h = b * b - c; if (h < 0.0) return -1.0; return -b - sqrt(h); } vec3 checker(vec3 p) { float g = mod(floor(p.x) + floor(p.z), 2.0); return mix(vec3(0.12, 0.125, 0.13), vec3(0.76, 0.74, 0.68), g); } void main() { vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y; float t = u_time * 0.22 * u_speed; float ct = cos(t); float st = sin(t); vec3 ta = vec3(0.0, 0.42, 0.0); vec3 ro = vec3(3.55 * st, 1.28, 3.55 * ct); vec3 ww = normalize(ta - ro); vec3 uu = normalize(cross(vec3(0.0, 1.0, 0.0), ww)); vec3 vv = cross(ww, uu); vec3 rd = normalize(uv.x * uu + uv.y * vv + 1.65 * ww); vec3 light = vec3(2.6, 5.2, 1.4); vec3 col = vec3(0.0); vec3 att = vec3(1.0); vec3 sky = mix(vec3(0.58, 0.66, 0.72), vec3(0.04, 0.045, 0.055), clamp(rd.y * 0.9 + 0.35, 0.0, 1.0)); vec3 s1 = vec3(0.0, 0.58, 0.0); vec3 s2 = vec3(-1.18, 0.38, 0.18); vec3 s3 = vec3(1.12, 0.34, 0.48); for (int bounce = 0; bounce < 3; bounce++) { float tPlane = 1e5; if (abs(rd.y) > 0.0001) { float tp = -ro.y / rd.y; if (tp > 0.002) tPlane = tp; } float t1 = sph(ro, rd, s1, 0.58); float t2 = sph(ro, rd, s2, 0.38); float t3 = sph(ro, rd, s3, 0.34); if (t1 < 0.0) t1 = 1e5; if (t2 < 0.0) t2 = 1e5; if (t3 < 0.0) t3 = 1e5; float tHit = tPlane; int id = 0; if (t1 < tHit) { tHit = t1; id = 1; } if (t2 < tHit) { tHit = t2; id = 2; } if (t3 < tHit) { tHit = t3; id = 3; } if (tHit > 1e4) { col += att * sky; break; } vec3 p = ro + rd * tHit; vec3 n; vec3 albedo; float metal; if (id == 0) { n = vec3(0.0, 1.0, 0.0); albedo = checker(p); metal = 0.16; } else if (id == 1) { n = normalize(p - s1); albedo = u_metal; metal = 0.96; } else if (id == 2) { n = normalize(p - s2); albedo = u_red; metal = 0.32; } else { n = normalize(p - s3); albedo = u_mint; metal = 0.42; } vec3 ldir = normalize(light - p); float ldist = length(light - p); vec3 sro = p + n * 0.003; float sl = 1.0; float h1 = sph(sro, ldir, s1, 0.58); float h2 = sph(sro, ldir, s2, 0.38); float h3 = sph(sro, ldir, s3, 0.34); if ((h1 > 0.0 && h1 < ldist) || (h2 > 0.0 && h2 < ldist) || (h3 > 0.0 && h3 < ldist)) sl = 0.16; float diff = max(dot(n, ldir), 0.0); vec3 halfv = normalize(ldir - rd); float spec = pow(max(dot(n, halfv), 0.0), 52.0); vec3 direct = albedo * (0.07 + 0.92 * diff * sl) + vec3(1.0) * spec * sl * mix(0.12, 0.85, metal); col += att * direct * (1.0 - metal * 0.82); att *= mix(albedo * 0.22, vec3(0.86), metal); ro = p + n * 0.003; rd = reflect(rd, n); } col = pow(max(col, 0.0), vec3(0.92)); gl_FragColor = vec4(col, 1.0); }`; function compile(type, src) { const sh = gl.createShader(type); gl.shaderSource(sh, src); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(sh) || "Shader compile failed"); } return sh; } const prog = gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG)); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(prog) || "Program link failed"); } gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); const loc = gl.getAttribLocation(prog, "a_pos"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); const uTime = gl.getUniformLocation(prog, "u_time"); const uRes = gl.getUniformLocation(prog, "u_resolution"); const uMetal = gl.getUniformLocation(prog, "u_metal"); const uRed = gl.getUniformLocation(prog, "u_red"); const uMint = gl.getUniformLocation(prog, "u_mint"); const uSpeed = gl.getUniformLocation(prog, "u_speed"); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let raf = 0; function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 1.5); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } gl.viewport(0, 0, canvas.width, canvas.height); } function frame(now) { resize(); gl.uniform1f(uTime, reduced ? 2.8 : now * 0.001); gl.uniform2f(uRes, canvas.width, canvas.height); gl.uniform3fv(uMetal, hexToRgb(PARAMS.metal)); gl.uniform3fv(uRed, hexToRgb(PARAMS.red)); gl.uniform3fv(uMint, hexToRgb(PARAMS.mint)); gl.uniform1f(uSpeed, PARAMS.speed); gl.drawArrays(gl.TRIANGLES, 0, 6); if (!reduced) raf = requestAnimationFrame(frame); } canvas.addEventListener("webglcontextlost", function (e) { e.preventDefault(); cancelAnimationFrame(raf); fail("The WebGL context was lost. Reload to restore the demo."); }); try { raf = requestAnimationFrame(frame); } catch (err) { fail(err && err.message ? err.message : String(err)); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
05. Whitted · 1980
Reflective spheres
A Whitted raytracer: three spheres, checkerboard, shadows, three bounces.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A rotating 3D torus rendered with a luminance character ramp." /> <link rel="canonical" href="https://3d-retro.com/experiments/ascii" /> <title>ASCII torus · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", speed: 1 }; const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const RAMP = " .:-=+*#%@"; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let A = 0.8; let B = 0.6; let last = 0; let raf = 0; function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.1, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) { A += dt * 0.85 * PARAMS.speed; B += dt * 0.42 * PARAMS.speed; } resize(); const w = canvas.width; const h = canvas.height; ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); const cell = Math.max(8, Math.floor(Math.min(w, h) / 42)); const cols = Math.max(24, Math.floor(w / cell)); const rows = Math.max(16, Math.floor(h / cell)); const zbuf = new Float32Array(cols * rows); const cells = new Uint8Array(cols * rows); zbuf.fill(-1e9); const cosA = Math.cos(A), sinA = Math.sin(A); const cosB = Math.cos(B), sinB = Math.sin(B); const R1 = 1.0, R2 = 2.0, K2 = 5.0; const K1 = cols * K2 * 3 / (8 * (R1 + R2)); for (let theta = 0; theta < 6.283; theta += 0.07) { const ct = Math.cos(theta), st = Math.sin(theta); for (let phi = 0; phi < 6.283; phi += 0.02) { const cp = Math.cos(phi), sp = Math.sin(phi); const cx = R2 + R1 * ct; const x = cx * (cosB * cp + sinA * sinB * sp) - R1 * cosA * sinB * st; const y = cx * (sinB * cp - sinA * cosB * sp) + R1 * cosA * cosB * st; const z = K2 + cosA * cx * sp + R1 * sinA * st; const ooz = 1 / z; const xp = Math.floor(cols / 2 + K1 * ooz * x); const yp = Math.floor(rows / 2 - K1 * ooz * y * 0.55); if (xp < 0 || yp < 0 || xp >= cols || yp >= rows) continue; const L = cp * ct * sinB - cosA * ct * sp - sinA * st + cosB * (cosA * st - ct * sinA * sp); if (L <= 0) continue; const idx = xp + yp * cols; if (ooz <= zbuf[idx]) continue; zbuf[idx] = ooz; cells[idx] = Math.min(RAMP.length - 1, Math.floor(L * 8)); } } ctx.font = cell + "px ui-monospace, 'IBM Plex Mono', monospace"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = PARAMS.color; const ox = (w - cols * cell) * 0.5; const oy = (h - rows * cell) * 0.5; for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const lum = cells[x + y * cols]; if (!lum) continue; ctx.globalAlpha = 0.35 + lum / (RAMP.length - 1) * 0.75; ctx.fillText(RAMP.charAt(lum), ox + (x + 0.5) * cell, oy + (y + 0.5) * cell); } } ctx.globalAlpha = 1; if (!reduced) raf = requestAnimationFrame(frame); } if (reduced) frame(performance.now()); else raf = requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
06. donut.c · 2006
ASCII torus
A rotating 3D torus rendered with a luminance character ramp.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Latitude/longitude cage with a phosphor stroke. Drag to spin." /> <link rel="canonical" href="https://3d-retro.com/experiments/globe" /> <title>Wireframe globe · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", highlight: "#d2ffec", speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function rgbCss(hex, a) { const r = hexToRgb(hex); return "rgba(" + r[0] + ", " + r[1] + ", " + r[2] + ", " + a + ")"; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const LAT = 13; const LON = 24; const verts = []; function sph(lat, lon) { const phi = (lat / LAT) * Math.PI; const th = (lon / LON) * Math.PI * 2; return { x: Math.sin(phi) * Math.cos(th), y: Math.cos(phi), z: Math.sin(phi) * Math.sin(th), }; } for (let i = 0; i <= LAT; i++) { for (let j = 0; j <= LON; j++) verts.push(sph(i, j)); } function idx(i, j) { return i * (LON + 1) + (j % (LON + 1)); } const edges = []; for (let i = 0; i <= LAT; i++) { for (let j = 0; j < LON; j++) { const kind = i === (LAT / 2 | 0) ? 2 : 0; edges.push(idx(i, j), idx(i, j + 1), kind); } } for (let j = 0; j < LON; j++) { for (let i = 0; i < LAT; i++) { const kind = j === 0 ? 2 : 0; edges.push(idx(i, j), idx(i + 1, j), kind); } } const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let yaw = 0.85; let pitch = 0.35; let auto = true; let dragging = false; let lastX = 0, lastY = 0; let last = 0; let raf = 0; canvas.addEventListener("pointerdown", function (e) { dragging = true; auto = false; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { dragging = false; }); canvas.addEventListener("pointermove", function (e) { if (!dragging) return; yaw += (e.clientX - lastX) * 0.008; pitch += (e.clientY - lastY) * 0.008; pitch = Math.max(-1.1, Math.min(1.1, pitch)); lastX = e.clientX; lastY = e.clientY; }); function rotate(p) { const cy = Math.cos(yaw), sy = Math.sin(yaw); const x1 = p.x * cy + p.z * sy; const z1 = -p.x * sy + p.z * cy; const cp = Math.cos(pitch), sp = Math.sin(pitch); const y2 = p.y * cp - z1 * sp; const z2 = p.y * sp + z1 * cp; return { x: x1, y: y2, z: z2 }; } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.1, last ? (now - last) * 0.001 : 0.016); last = now; if (auto && !reduced) yaw += dt * 0.28 * PARAMS.speed; resize(); const w = canvas.width; const h = canvas.height; ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); const cx = w * 0.5; const cy = h * 0.5; const cam = 2.85; const fov = Math.min(w, h) * 0.92; const proj = verts.map(rotate); ctx.lineCap = "round"; ctx.lineJoin = "round"; for (let e = 0; e < edges.length; e += 3) { const a = proj[edges[e]]; const b = proj[edges[e + 1]]; const kind = edges[e + 2]; const za = a.z + cam; const zb = b.z + cam; if (za < 0.15 || zb < 0.15) continue; const depth = 0.5 * (a.z + b.z) * 0.5 + 0.5; const alpha = 0.22 + depth * (kind ? 0.78 : 0.58); const x0 = cx + a.x * fov / za; const y0 = cy - a.y * fov / za; const x1 = cx + b.x * fov / zb; const y1 = cy - b.y * fov / zb; ctx.strokeStyle = rgbCss(PARAMS.color, alpha * 0.28); ctx.lineWidth = kind ? 3.4 : 2.4; ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); ctx.strokeStyle = rgbCss(kind ? PARAMS.highlight : PARAMS.color, alpha); ctx.lineWidth = kind ? 1.5 : 1.05; ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); } if (!reduced) raf = requestAnimationFrame(frame); } if (reduced) frame(performance.now()); else raf = requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
07. IRIX · 1994
Wireframe globe
Latitude/longitude cage with a phosphor stroke. Drag to spin.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A stable 2D Navier-Stokes dye tank. Stir it with the pointer." /> <link rel="canonical" href="https://3d-retro.com/experiments/fluid" /> <title>Fluid tank · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", amount: 42 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const N = 48; const ITER = 4; const dim = N + 2; const size = dim * dim; function ix(i, j) { return i + dim * j; } function field() { return new Float32Array(size); } let u = field(), v = field(), u0 = field(), v0 = field(); let dens = field(), dens0 = field(), p = field(), div = field(); function setBnd(b, x) { for (let i = 1; i <= N; i++) { x[ix(0, i)] = b === 1 ? -x[ix(1, i)] : x[ix(1, i)]; x[ix(N + 1, i)] = b === 1 ? -x[ix(N, i)] : x[ix(N, i)]; x[ix(i, 0)] = b === 2 ? -x[ix(i, 1)] : x[ix(i, 1)]; x[ix(i, N + 1)] = b === 2 ? -x[ix(i, N)] : x[ix(i, N)]; } x[ix(0, 0)] = 0.5 * (x[ix(1, 0)] + x[ix(0, 1)]); x[ix(0, N + 1)] = 0.5 * (x[ix(1, N + 1)] + x[ix(0, N)]); x[ix(N + 1, 0)] = 0.5 * (x[ix(N, 0)] + x[ix(N + 1, 1)]); x[ix(N + 1, N + 1)] = 0.5 * (x[ix(N, N + 1)] + x[ix(N + 1, N)]); } function linSolve(b, x, x0, a, c) { const inv = 1 / c; for (let k = 0; k < ITER; k++) { for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { x[ix(i, j)] = (x0[ix(i, j)] + a * ( x[ix(i - 1, j)] + x[ix(i + 1, j)] + x[ix(i, j - 1)] + x[ix(i, j + 1)] )) * inv; } } setBnd(b, x); } } function diffuse(b, x, x0, diff, dt) { const a = dt * diff * N * N; linSolve(b, x, x0, a, 1 + 4 * a); } function advect(b, d, d0, uu, vv, dt) { const dt0 = dt * N; for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { let x = i - dt0 * uu[ix(i, j)]; let y = j - dt0 * vv[ix(i, j)]; if (x < 0.5) x = 0.5; if (x > N + 0.5) x = N + 0.5; if (y < 0.5) y = 0.5; if (y > N + 0.5) y = N + 0.5; const i0 = x | 0, i1 = i0 + 1; const j0 = y | 0, j1 = j0 + 1; const s1 = x - i0, s0 = 1 - s1; const t1 = y - j0, t0 = 1 - t1; d[ix(i, j)] = s0 * (t0 * d0[ix(i0, j0)] + t1 * d0[ix(i0, j1)]) + s1 * (t0 * d0[ix(i1, j0)] + t1 * d0[ix(i1, j1)]); } } setBnd(b, d); } function project(uu, vv, pp, dv) { for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { dv[ix(i, j)] = -0.5 * (uu[ix(i + 1, j)] - uu[ix(i - 1, j)] + vv[ix(i, j + 1)] - vv[ix(i, j - 1)]) / N; pp[ix(i, j)] = 0; } } setBnd(0, dv); setBnd(0, pp); linSolve(0, pp, dv, 1, 4); for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { uu[ix(i, j)] -= 0.5 * N * (pp[ix(i + 1, j)] - pp[ix(i - 1, j)]); vv[ix(i, j)] -= 0.5 * N * (pp[ix(i, j + 1)] - pp[ix(i, j - 1)]); } } setBnd(1, uu); setBnd(2, vv); } function velStep(dt) { diffuse(1, u0, u, 0.00012, dt); diffuse(2, v0, v, 0.00012, dt); project(u0, v0, p, div); advect(1, u, u0, u0, v0, dt); advect(2, v, v0, u0, v0, dt); project(u, v, p, div); } function densStep(dt) { diffuse(0, dens0, dens, 0.00008, dt); advect(0, dens, dens0, u, v, dt); for (let i = 0; i < size; i++) dens[i] *= 0.994; } function splat(gx, gy, dx, dy, amount) { const i = Math.max(1, Math.min(N, gx | 0)); const j = Math.max(1, Math.min(N, gy | 0)); for (let oj = -1; oj <= 1; oj++) { for (let oi = -1; oi <= 1; oi++) { const ii = i + oi, jj = j + oj; if (ii < 1 || jj < 1 || ii > N || jj > N) continue; const wgt = oi === 0 && oj === 0 ? 1 : 0.45; dens[ix(ii, jj)] += amount * wgt; u[ix(ii, jj)] += dx * wgt; v[ix(ii, jj)] += dy * wgt; } } } const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const pointer = { x: 0, y: 0, px: 0, py: 0, down: false, inside: false }; let last = 0; let raf = 0; const pixels = new ImageData(N, N); const off = document.createElement("canvas"); off.width = N; off.height = N; const offCtx = off.getContext("2d"); if (!offCtx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } function toGrid(e) { const rect = canvas.getBoundingClientRect(); return { x: ((e.clientX - rect.left) / rect.width) * N + 1, y: ((e.clientY - rect.top) / rect.height) * N + 1, }; } canvas.addEventListener("pointerdown", function (e) { const g = toGrid(e); pointer.down = true; pointer.inside = true; pointer.x = pointer.px = g.x; pointer.y = pointer.py = g.y; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { pointer.down = false; }); canvas.addEventListener("pointerleave", function () { pointer.inside = false; }); canvas.addEventListener("pointerenter", function () { pointer.inside = true; }); canvas.addEventListener("pointermove", function (e) { const g = toGrid(e); pointer.px = pointer.x; pointer.py = pointer.y; pointer.x = g.x; pointer.y = g.y; pointer.inside = true; }); function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.033, last ? (now - last) * 0.001 : 0.016); last = now; const t = now * 0.001; if (!reduced) { const ang = t * 0.85; const gx = N * 0.5 + Math.cos(ang) * N * 0.22; const gy = N * 0.5 + Math.sin(ang * 0.72) * N * 0.18; splat(gx, gy, -Math.sin(ang) * 22, Math.cos(ang * 0.72) * 22, PARAMS.amount); } if (pointer.inside || pointer.down) { const dx = (pointer.x - pointer.px) * 12; const dy = (pointer.y - pointer.py) * 12; splat(pointer.x, pointer.y, dx, dy, pointer.down ? 90 : 22); pointer.px = pointer.x; pointer.py = pointer.y; } if (!reduced) { velStep(dt); densStep(dt); } const data = pixels.data; for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { const d = dens[ix(i, j)]; const spd = Math.hypot(u[ix(i, j)], v[ix(i, j)]); const t0 = Math.min(1, d * 0.045); const glow = Math.min(1, t0 + spd * 0.08); const rgb = hexToRgb(PARAMS.color); const o = ((j - 1) * N + (i - 1)) * 4; data[o] = 12 + glow * rgb[0]; data[o + 1] = 14 + glow * rgb[1]; data[o + 2] = 16 + glow * rgb[2]; data[o + 3] = 255; } } resize(); offCtx.putImageData(pixels, 0, 0); ctx.imageSmoothingEnabled = true; ctx.drawImage(off, 0, 0, canvas.width, canvas.height); if (!reduced) raf = requestAnimationFrame(frame); } if (reduced) { splat(N * 0.45, N * 0.5, 8, -4, 120); splat(N * 0.62, N * 0.42, -6, 5, 90); velStep(0.016); densStep(0.016); frame(performance.now()); } else { raf = requestAnimationFrame(frame); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
08. Stam · 1999
Fluid tank
A stable 2D Navier-Stokes dye tank. Stir it with the pointer.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A thousand particles following a curling field. Pointer makes a vortex." /> <link rel="canonical" href="https://3d-retro.com/experiments/flow" /> <title>Flow field · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function rgbCss(hex, a) { const r = hexToRgb(hex); return "rgba(" + r[0] + ", " + r[1] + ", " + r[2] + ", " + a + ")"; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const COUNT = 1800; const parts = new Array(COUNT); function spawn(p, w, h) { p.x = Math.random() * w; p.y = Math.random() * h; p.vx = 0; p.vy = 0; } for (let i = 0; i < COUNT; i++) { parts[i] = { x: 0, y: 0, vx: 0, vy: 0 }; } const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const pointer = { x: 0, y: 0, active: false }; let last = 0; let raf = 0; let seeded = false; canvas.addEventListener("pointermove", function (e) { const rect = canvas.getBoundingClientRect(); const dpr = Math.min(window.devicePixelRatio || 1, 2); pointer.x = (e.clientX - rect.left) * dpr; pointer.y = (e.clientY - rect.top) * dpr; pointer.active = true; }, { passive: true }); canvas.addEventListener("pointerleave", function () { pointer.active = false; }); function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; if (!seeded) { for (let i = 0; i < COUNT; i++) spawn(parts[i], w, h); seeded = true; } } } function field(x, y, t, w, h) { const nx = x / w; const ny = y / h; let fx = Math.sin((ny * 7.2 + t * 0.35) * 1.1) + Math.cos((nx * 5.4 - t * 0.22) * 1.3); let fy = Math.cos((nx * 6.1 - t * 0.31) * 1.05) + Math.sin((ny * 4.8 + t * 0.27) * 1.2); const ax = w * (0.5 + 0.28 * Math.cos(t * 0.31)); const ay = h * (0.5 + 0.24 * Math.sin(t * 0.24)); const dx = x - ax; const dy = y - ay; const r2 = dx * dx + dy * dy + 1800; fx += -dy * 420 / r2; fy += dx * 420 / r2; if (pointer.active) { const pdx = x - pointer.x; const pdy = y - pointer.y; const pr2 = pdx * pdx + pdy * pdy + 900; fx += -pdy * 1400 / pr2; fy += pdx * 1400 / pr2; } return { fx, fy }; } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; const t = now * 0.001; resize(); const w = canvas.width; const h = canvas.height; ctx.fillStyle = reduced ? "#0b0c0e" : "rgba(11, 12, 14, 0.16)"; ctx.fillRect(0, 0, w, h); ctx.lineWidth = 1.45; ctx.lineCap = "round"; for (let i = 0; i < COUNT; i++) { const p = parts[i]; const f = field(p.x, p.y, t, w, h); p.vx = p.vx * 0.92 + f.fx * 28 * dt * PARAMS.speed; p.vy = p.vy * 0.92 + f.fy * 28 * dt * PARAMS.speed; const speed = Math.hypot(p.vx, p.vy); const nx = p.x + p.vx; const ny = p.y + p.vy; const a = 0.28 + Math.min(0.72, speed * 0.04); ctx.strokeStyle = rgbCss(PARAMS.color, a); ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(nx, ny); ctx.stroke(); p.x = nx; p.y = ny; if (p.x < -8 || p.y < -8 || p.x > w + 8 || p.y > h + 8) spawn(p, w, h); } if (!reduced) raf = requestAnimationFrame(frame); } if (reduced) { resize(); frame(performance.now()); } else { raf = requestAnimationFrame(frame); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
09. Vector field · 1996
Flow field
A thousand particles following a curling field. Pointer makes a vortex.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A hanging Verlet cloth. Drag a point to tug the weave." /> <link rel="canonical" href="https://3d-retro.com/experiments/fabric" /> <title>Verlet fabric · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", wind: 1, stiffness: 3 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const COLS = 16; const ROWS = 12; const pts = []; const springs = []; let builtW = 0; let builtH = 0; let grab = -1; let t = 0; let last = 0; let raf = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; function link(a, b) { const pa = pts[a], pb = pts[b]; springs.push({ a, b, rest: Math.hypot(pb.x - pa.x, pb.y - pa.y) }); } function build(w, h) { pts.length = 0; springs.length = 0; grab = -1; const left = w * 0.18; const top = h * 0.08; const gw = w * 0.64; const gh = h * 0.62; const cs = gw / (COLS - 1); const rs = gh / (ROWS - 1); for (let j = 0; j < ROWS; j++) { for (let i = 0; i < COLS; i++) { const x = left + i * cs; const y = top + j * rs; pts.push({ x, y, ox: x, oy: y, pin: j === 0 && (i === 0 || i === COLS - 1) }); } } for (let j = 0; j < ROWS; j++) { for (let i = 0; i < COLS; i++) { const n = i + j * COLS; if (i < COLS - 1) link(n, n + 1); if (j < ROWS - 1) link(n, n + COLS); } } builtW = w; builtH = h; } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } if (Math.abs(w - builtW) > 4 || Math.abs(h - builtH) > 4) { build(w, h); for (let i = 0; i < 70; i++) step(0.016); } } function pointer(ev) { const r = canvas.getBoundingClientRect(); const sx = canvas.width / r.width; const sy = canvas.height / r.height; return { x: (ev.clientX - r.left) * sx, y: (ev.clientY - r.top) * sy }; } canvas.addEventListener("pointerdown", function (ev) { canvas.setPointerCapture(ev.pointerId); const p = pointer(ev); let best = 1e9, idx = 0; for (let i = 0; i < pts.length; i++) { const d = Math.hypot(pts[i].x - p.x, pts[i].y - p.y); if (d < best) { best = d; idx = i; } } grab = idx; pts[idx].x = p.x; pts[idx].y = p.y; pts[idx].ox = p.x; pts[idx].oy = p.y; }); canvas.addEventListener("pointermove", function (ev) { if (grab < 0) return; const p = pointer(ev); pts[grab].x = p.x; pts[grab].y = p.y; pts[grab].ox = p.x; pts[grab].oy = p.y; }); function release() { grab = -1; } canvas.addEventListener("pointerup", release); canvas.addEventListener("pointercancel", release); function step(dt) { const g = 2800 * dt * dt; const wind = Math.sin(t * 1.3) * 90 * PARAMS.wind * dt * dt; for (let i = 0; i < pts.length; i++) { const p = pts[i]; if (p.pin || i === grab) continue; const vx = (p.x - p.ox) * 0.99; const vy = (p.y - p.oy) * 0.99; p.ox = p.x; p.oy = p.y; p.x += vx + wind; p.y += vy + g; } const iter = Math.max(1, PARAMS.stiffness | 0); for (let k = 0; k < iter; k++) { for (let s = 0; s < springs.length; s++) { const sp = springs[s]; const a = pts[sp.a]; const b = pts[sp.b]; let dx = b.x - a.x; let dy = b.y - a.y; const d = Math.hypot(dx, dy) || 1e-4; const diff = (d - sp.rest) / d * 0.5; dx *= diff; dy *= diff; const aLock = a.pin || sp.a === grab; const bLock = b.pin || sp.b === grab; if (!aLock) { a.x += dx; a.y += dy; } if (!bLock) { b.x -= dx; b.y -= dy; } } } } function draw() { const w = canvas.width; const h = canvas.height; ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); const rgb = hexToRgb(PARAMS.color); const rest2 = springs.length ? springs[0].rest * springs[0].rest : 1; for (let j = 0; j < ROWS - 1; j++) { for (let i = 0; i < COLS - 1; i++) { const a = pts[i + j * COLS]; const b = pts[i + 1 + j * COLS]; const c = pts[i + (j + 1) * COLS]; const d = pts[i + 1 + (j + 1) * COLS]; const nx = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x); const shade = 0.28 + 0.72 * Math.max(0, Math.min(1, nx / (rest2 * 1.6))); ctx.fillStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + (0.22 + shade * 0.55) + ")"; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.lineTo(d.x, d.y); ctx.lineTo(c.x, c.y); ctx.closePath(); ctx.fill(); } } ctx.strokeStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ",0.85)"; ctx.lineWidth = Math.max(0.8, w / 520); ctx.beginPath(); for (let s = 0; s < springs.length; s++) { const a = pts[springs[s].a]; const b = pts[springs[s].b]; ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); } ctx.stroke(); } function frame(now) { const dt = Math.min(0.033, last ? (now - last) * 0.001 : 0.016); last = now; t += dt; resize(); if (!reduced) step(dt); draw(); if (!reduced) raf = requestAnimationFrame(frame); } if (reduced) { resize(); for (let i = 0; i < 40; i++) step(0.016); draw(); } else { raf = requestAnimationFrame(frame); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
10. Jakobsen · 2001
Verlet fabric
A hanging cloth. Drag a point to tug the weave.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Scrolling vector hills, 1979 CRT flight-sim style. Pointer steers." /> <link rel="canonical" href="https://3d-retro.com/experiments/terrain" /> <title>Wireframe terrain · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", speed: 1, hills: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const COLS = 24; const ROWS = 16; const CELL = 1.05; const CAM_Y = 2.2; const stars = []; for (let i = 0; i < 48; i++) { stars.push({ x: Math.random(), y: Math.random() * 0.46, a: 0.25 + Math.random() * 0.55 }); } const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let z0 = 12; let look = 0; let targetLook = 0; let last = 0; let raf = 0; function height(x, z) { const a = PARAMS.hills; return ( Math.sin(x * 0.42 + z * 0.18) * 1.35 + Math.sin(x * 0.19 - z * 0.33) * 0.85 + Math.sin(z * 0.51 + x * 0.07) * 0.55 ) * a; } canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); targetLook = ((ev.clientX - r.left) / r.width - 0.5) * 1.15; }); canvas.addEventListener("pointerleave", function () { targetLook = 0; }); function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function project(x, y, z, w, h) { if (z < 0.7) return null; const nx = x / z; const ny = y / z; if (nx < -2.2 || nx > 2.2) return null; const fov = Math.min(w, h) * 0.86; return { x: w * 0.5 + nx * fov, y: h * 0.56 - ny * fov }; } function sample(i, j, w, h) { const x = (i - (COLS - 1) * 0.5) * CELL + look * 1.8; const z = 1.7 + j * CELL; const y = height(x + look * 5, z0 + z) - CAM_Y; return project(x, y, z, w, h); } function onScreen(p, w, h) { return p && p.x > -w * 0.2 && p.x < w * 1.2 && p.y > -h * 0.2 && p.y < h * 1.2; } function strokeSeg(a, b, alpha, width, w, h) { if (!onScreen(a, w, h) || !onScreen(b, w, h)) return; const rgb = hexToRgb(PARAMS.color); ctx.strokeStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + alpha + ")"; ctx.lineWidth = width; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } function draw(w, h) { ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); const rgb = hexToRgb(PARAMS.color); for (let s = 0; s < stars.length; s++) { const st = stars[s]; ctx.fillStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + (st.a * 0.45) + ")"; ctx.fillRect(st.x * w, st.y * h * 0.52, 1.4, 1.4); } ctx.strokeStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ",0.22)"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, h * 0.56); ctx.lineTo(w, h * 0.56); ctx.stroke(); const grid = []; for (let j = 0; j < ROWS; j++) { const row = []; for (let i = 0; i < COLS; i++) row.push(sample(i, j, w, h)); grid.push(row); } ctx.lineJoin = "round"; ctx.lineCap = "round"; for (let j = 0; j < ROWS; j++) { const near = 1 - j / (ROWS - 1); const alpha = 0.18 + near * 0.78; const width = 0.7 + near * 1.35; for (let i = 0; i < COLS - 1; i++) strokeSeg(grid[j][i], grid[j][i + 1], alpha, width, w, h); if (j < ROWS - 1) { for (let i = 0; i < COLS; i++) strokeSeg(grid[j][i], grid[j + 1][i], alpha * 0.85, width, w, h); } } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) { z0 += dt * 4.2 * PARAMS.speed; look += (targetLook - look) * Math.min(1, dt * 6); } resize(); draw(canvas.width, canvas.height); if (!reduced) raf = requestAnimationFrame(frame); } if (reduced) { resize(); draw(canvas.width, canvas.height); } else { raf = requestAnimationFrame(frame); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
11. Vector CRT · 1979
Wireframe terrain
Scrolling vector hills. Pointer steers.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A 1991 DDA raycaster. WASD to walk, pointer to look." /> <link rel="canonical" href="https://3d-retro.com/experiments/wolfenstein" /> <title>Wolfenstein raycaster · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#c45c3e", speed: 1, fov: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [196, 92, 62]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function mix(a, b, t) { return [ a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t ]; } function css(rgb, a) { return "rgba(" + (rgb[0] | 0) + "," + (rgb[1] | 0) + "," + (rgb[2] | 0) + "," + a + ")"; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const WMAP = [ "1111111111111111", "1..............1", "1..22......33..1", "1..............1", "11....44....11.1", "1..............1", "1.222....333...1", "1.2..........3.1", "1.2..11..11..3.1", "1..............1", "1....1....1....1", "1111111111111111" ]; const MW = WMAP[0].length; const MH = WMAP.length; function cell(x, y) { if (x < 0 || y < 0 || x >= MW || y >= MH) return "1"; return WMAP[y | 0][x | 0]; } const PAL = { "1": [196, 92, 62], "2": [156, 118, 62], "3": [72, 118, 92], "4": [92, 86, 120] }; let px = 2.5, py = 9.5, ang = 0; const keys = new Set(); let manual = false; let autoTurn = 0; let last = 0; let raf = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const RAD = 0.18; function onKey(ev, down) { keys[down ? "add" : "delete"](ev.code); if (down && (ev.code === "KeyW" || ev.code === "KeyA" || ev.code === "KeyS" || ev.code === "KeyD" || ev.code === "ArrowLeft" || ev.code === "ArrowRight" || ev.code === "ArrowUp" || ev.code === "ArrowDown")) { manual = true; ev.preventDefault(); } } window.addEventListener("keydown", function (e) { onKey(e, true); }); window.addEventListener("keyup", function (e) { onKey(e, false); }); window.addEventListener("blur", function () { keys.clear(); }); let lookOff = 0; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); lookOff = ((ev.clientX - r.left) / r.width - 0.5) * 0.7; if (ev.buttons) { ang += ev.movementX * 0.005; manual = true; } }); canvas.addEventListener("pointerleave", function () { lookOff = 0; }); function tryMove(dx, dy) { const nx = px + dx, ny = py + dy; if (cell(nx + Math.sign(dx) * RAD, py) === ".") px = nx; if (cell(px, ny + Math.sign(dy) * RAD) === ".") py = ny; } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function cast(dirX, dirY) { let mapX = px | 0, mapY = py | 0; const deltaX = Math.abs(1 / (dirX || 1e-8)); const deltaY = Math.abs(1 / (dirY || 1e-8)); const stepX = dirX < 0 ? -1 : 1; const stepY = dirY < 0 ? -1 : 1; let sideX = dirX < 0 ? (px - mapX) * deltaX : (mapX + 1 - px) * deltaX; let sideY = dirY < 0 ? (py - mapY) * deltaY : (mapY + 1 - py) * deltaY; let side = 0, hit = "."; for (let i = 0; i < 48; i++) { if (sideX < sideY) { sideX += deltaX; mapX += stepX; side = 0; } else { sideY += deltaY; mapY += stepY; side = 1; } hit = cell(mapX, mapY); if (hit !== ".") break; } const dist = side === 0 ? (mapX - px + (1 - stepX) * 0.5) / dirX : (mapY - py + (1 - stepY) * 0.5) / dirY; const wallX = side === 0 ? py + dist * dirY : px + dist * dirX; return { dist: Math.max(0.12, dist), side: side, hit: hit, wallX: wallX - Math.floor(wallX) }; } function draw(w, h) { const rgb = hexToRgb(PARAMS.color); const ceil = mix([11, 12, 14], rgb, 0.08); const floor = mix([18, 16, 14], rgb, 0.16); ctx.fillStyle = css(ceil, 1); ctx.fillRect(0, 0, w, h * 0.5); ctx.fillStyle = css(floor, 1); ctx.fillRect(0, h * 0.5, w, h * 0.5); const view = ang + lookOff; const dirX = Math.cos(view); const dirY = Math.sin(view); const planeX = -dirY * 0.66 * PARAMS.fov; const planeY = dirX * 0.66 * PARAMS.fov; const cols = Math.min(w, 320); const step = w / cols; for (let i = 0; i < cols; i++) { const cam = (i / cols) * 2 - 1; const hit = cast(dirX + planeX * cam, dirY + planeY * cam); const perp = hit.dist; const lineH = Math.min(h * 1.8, h / perp); const y0 = (h - lineH) * 0.5; const base = PAL[hit.hit] || rgb; const tint = mix(base, rgb, 0.35); const stripe = ((hit.wallX * 8) | 0) & 1 ? 0.78 : 1; const sideK = hit.side ? 0.55 : 0.88; const fog = 1 / (1 + perp * 0.28); const c = [ tint[0] * stripe * sideK * fog, tint[1] * stripe * sideK * fog, tint[2] * stripe * sideK * fog ]; ctx.fillStyle = css(c, 1); ctx.fillRect((i * step) | 0, y0 | 0, Math.ceil(step), lineH | 0); } const ms = Math.max(3, (Math.min(w, h) / 90) | 0); const mx = 8, my = 8; for (let y = 0; y < MH; y++) { for (let x = 0; x < MW; x++) { const t = WMAP[y][x]; if (t === ".") ctx.fillStyle = "rgba(20,22,24,0.7)"; else ctx.fillStyle = css(mix(PAL[t] || rgb, rgb, 0.25), 0.85); ctx.fillRect(mx + x * ms, my + y * ms, ms - 1, ms - 1); } } ctx.fillStyle = css(rgb, 1); ctx.fillRect(mx + px * ms - 1.5, my + py * ms - 1.5, 3, 3); ctx.strokeStyle = css(rgb, 0.9); ctx.beginPath(); ctx.moveTo(mx + px * ms, my + py * ms); ctx.lineTo(mx + (px + Math.cos(view) * 1.4) * ms, my + (py + Math.sin(view) * 1.4) * ms); ctx.stroke(); } function step(dt) { const dirX = Math.cos(ang); const dirY = Math.sin(ang); const planeX = -dirY; const planeY = dirX; const sp = 2.4 * PARAMS.speed * dt; const turn = 1.7 * dt; let mx = 0, my = 0, yaw = 0; if (keys.has("KeyW") || keys.has("ArrowUp")) { mx += dirX; my += dirY; } if (keys.has("KeyS") || keys.has("ArrowDown")) { mx -= dirX; my -= dirY; } if (keys.has("KeyD")) { mx += planeX; my += planeY; } if (keys.has("KeyA")) { mx -= planeX; my -= planeY; } if (keys.has("ArrowLeft")) yaw -= 1; if (keys.has("ArrowRight")) yaw += 1; if (manual) { if (mx || my) { const len = Math.hypot(mx, my) || 1; tryMove((mx / len) * sp, (my / len) * sp); } ang += yaw * turn; } else { const hit = cell(px + dirX * 0.6, py + dirY * 0.6); if (hit !== ".") autoTurn = 1.2; if (autoTurn > 0) { ang += 1.8 * dt; autoTurn -= dt; } else { tryMove(dirX * sp * 0.55, dirY * sp * 0.55); } } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) step(dt); resize(); draw(canvas.width, canvas.height); if (!reduced) raf = requestAnimationFrame(frame); } window.__controlsTest = { getYaw: function () { return ang; }, getX: function () { return px; }, getY: function () { return py; }, setKeys: function (codes) { keys.clear(); manual = true; for (let i = 0; i < codes.length; i++) keys.add(codes[i]); } }; if (reduced) { resize(); draw(canvas.width, canvas.height); } else { raf = requestAnimationFrame(frame); } })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
12. id Software · 1991
Wolfenstein raycaster
A DDA raycaster. WASD to walk, pointer to look.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Comanche-style voxel heightmap. Pointer steers." /> <link rel="canonical" href="https://3d-retro.com/experiments/voxel" /> <title>Voxel Space · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", speed: 1, hills: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const MAP = 512; const MASK = MAP - 1; const height = new Uint8Array(MAP * MAP); const shade = new Float32Array(MAP * MAP); for (let z = 0; z < MAP; z++) { for (let x = 0; x < MAP; x++) { const dx = x - 280, dz = z - 260; const h = 68 + 7 * Math.sin(x * 0.035) + 7 * Math.sin(z * 0.04) + 22 * Math.exp(-(dx * dx + dz * dz) / 9000) + 14 * Math.exp(-((x - 140) * (x - 140) + (z - 400) * (z - 400)) / 7000); height[z * MAP + x] = Math.max(48, Math.min(110, h)); } } for (let z = 0; z < MAP; z++) { for (let x = 0; x < MAP; x++) { const h0 = height[z * MAP + x]; const h1 = height[z * MAP + ((x + 1) & MASK)]; shade[z * MAP + x] = Math.max(0.35, Math.min(1.15, 0.72 + (h0 - h1) * 0.035)); } } const buf = document.createElement("canvas"); const BW = 320, BH = 160; buf.width = BW; buf.height = BH; const bctx = buf.getContext("2d"); const img = bctx.createImageData(BW, BH); const px = img.data; let camX = 40, camZ = 40, yaw = 0.7; let look = 0; let last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); look = ((ev.clientX - r.left) / r.width - 0.5) * 0.9; }); canvas.addEventListener("pointerleave", function () { look = 0; }); function put(x, y0, y1, r, g, b) { y0 = y0 | 0; y1 = y1 | 0; if (y0 < 0) y0 = 0; if (y1 > BH) y1 = BH; for (let y = y0; y < y1; y++) { const i = (y * BW + x) * 4; px[i] = r; px[i + 1] = g; px[i + 2] = b; px[i + 3] = 255; } } function draw() { const rgb = hexToRgb(PARAMS.color); for (let i = 0; i < px.length; i += 4) { const y = (i / 4 / BW) | 0; const t = y / BH; px[i] = 18 + t * 22 + rgb[0] * 0.04; px[i + 1] = 22 + t * 28 + rgb[1] * 0.05; px[i + 2] = 38 + t * 20; px[i + 3] = 255; } const sunX = BW * 0.72, sunY = BH * 0.22; for (let y = 0; y < BH * 0.48; y++) { for (let x = 0; x < BW; x++) { const d = Math.hypot(x - sunX, y - sunY); if (d < 7) { const i = (y * BW + x) * 4; px[i] = 255; px[i + 1] = 230; px[i + 2] = 160; } } } const view = yaw + look; const fov = 0.9; const horizon = BH * 0.3; const camH = 86; const scale = 170; const far = 380; for (let col = 0; col < BW; col++) { const ang = view - fov * 0.5 + fov * (col / BW); const dx = Math.cos(ang), dz = Math.sin(ang); let maxY = BH; let dist = 3; while (dist < far && maxY > 0) { const mx = (camX + dx * dist) & MASK; const mz = (camZ + dz * dist) & MASK; const idx = mz * MAP + mx; const hh = 48 + (height[idx] - 48) * PARAMS.hills; const sy = ((camH - hh) / dist) * scale + horizon; if (sy < maxY) { const fog = Math.max(0.12, 1 - dist / far); const sh = shade[idx]; const ht = (hh - 48) / 70; const r = (rgb[0] * (0.25 + ht * 0.75) * sh) * fog + 18 * (1 - fog); const g = (rgb[1] * (0.35 + ht * 0.55) * sh) * fog + 24 * (1 - fog); const b = (rgb[2] * (0.2 + (1 - ht) * 0.35) * sh) * fog + 36 * (1 - fog); put(col, sy, maxY, r, g, b); maxY = sy; } dist += 0.7 + dist * 0.014; } } bctx.putImageData(img, 0, 0); ctx.imageSmoothingEnabled = false; ctx.drawImage(buf, 0, 0, canvas.width, canvas.height); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) { yaw += look * dt * 1.4; camX += Math.cos(yaw) * 38 * PARAMS.speed * dt; camZ += Math.sin(yaw) * 38 * PARAMS.speed * dt; } resize(); draw(); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
13. Comanche · 1992
Voxel Space
A heightmap ray-column renderer. Pointer steers.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="SNES Mode 7 checkerboard floor. Pointer steers." /> <link rel="canonical" href="https://3d-retro.com/experiments/mode7" /> <title>Mode 7 floor · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", speed: 1, scale: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const buf = document.createElement("canvas"); const BW = 320, BH = 180; buf.width = BW; buf.height = BH; const bctx = buf.getContext("2d"); const img = bctx.createImageData(BW, BH); const px = img.data; let camX = 0, camZ = 0, yaw = 0; let look = 0; let last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const CAM_H = 1.15; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); look = ((ev.clientX - r.left) / r.width - 0.5) * 1.2; }); canvas.addEventListener("pointerleave", function () { look = 0; }); function draw() { const rgb = hexToRgb(PARAMS.color); const horizon = (BH * 0.42) | 0; for (let i = 0; i < px.length; i += 4) { const y = (i / 4 / BW) | 0; if (y < horizon) { const t = y / horizon; px[i] = 28 + t * 40; px[i + 1] = 36 + t * 50; px[i + 2] = 58 + t * 40; px[i + 3] = 255; } } const sunX = BW * 0.7, sunY = horizon * 0.45; for (let y = 0; y < horizon; y++) { for (let x = 0; x < BW; x++) { if (Math.hypot(x - sunX, y - sunY) < 6) { const i = (y * BW + x) * 4; px[i] = 255; px[i + 1] = 220; px[i + 2] = 140; } } } const view = yaw + look * 0.35; const cs = Math.cos(view), sn = Math.sin(view); const cell = 1.35 / PARAMS.scale; const fogFar = 42; for (let y = horizon; y < BH; y++) { const row = (y - horizon + 1) / BH; const dist = CAM_H / row; const fog = Math.max(0.08, 1 - dist / fogFar); const halfW = dist * 0.92; for (let x = 0; x < BW; x++) { const across = ((x / BW) - 0.5) * 2 * halfW; const wx = camX + cs * dist - sn * across; const wz = camZ + sn * dist + cs * across; const cx = Math.floor(wx / cell); const cz = Math.floor(wz / cell); const on = (cx + cz) & 1; const stripe = ((cx & 7) === 0 || (cz & 7) === 0) ? 1.18 : 1; const r = ((on ? rgb[0] : rgb[0] * 0.18) * stripe) * fog + 22 * (1 - fog); const g = ((on ? rgb[1] : rgb[1] * 0.18) * stripe) * fog + 26 * (1 - fog); const b = ((on ? rgb[2] : rgb[2] * 0.22) * stripe) * fog + 32 * (1 - fog); const i = (y * BW + x) * 4; px[i] = r; px[i + 1] = g; px[i + 2] = b; px[i + 3] = 255; } } bctx.putImageData(img, 0, 0); ctx.imageSmoothingEnabled = false; ctx.drawImage(buf, 0, 0, canvas.width, canvas.height); const pylons = [ [4, 6], [8, -3], [-5, 10], [12, 8], [-8, -6], [2, -11], [-10, 3] ]; ctx.save(); const scaleY = canvas.height / BH; const scaleX = canvas.width / BW; ctx.scale(scaleX, scaleY); for (let p = 0; p < pylons.length; p++) { const ox = pylons[p][0] * cell - camX; const oz = pylons[p][1] * cell - camZ; const lz = ox * cs + oz * sn; const lx = -ox * sn + oz * cs; if (lz < 0.6 || lz > fogFar) continue; const sx = BW * 0.5 + (lx / lz) * (BW * 0.5 / 0.92); const sy = horizon + (CAM_H / lz) * BH; const ph = (1.4 / lz) * BH; const pw = ph * 0.18; const fog = Math.max(0.15, 1 - lz / fogFar); ctx.fillStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + fog + ")"; ctx.fillRect(sx - pw * 0.5, sy - ph, pw, ph); } ctx.restore(); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) { yaw += look * dt * 1.6; camX += Math.cos(yaw) * 4.2 * PARAMS.speed * dt; camZ += Math.sin(yaw) * 4.2 * PARAMS.speed * dt; } resize(); draw(); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
14. SNES · 1990
Mode 7 floor
Affine checkerboard ground, Space Harrier style. Pointer steers.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Affine-mapped checkerboard cube and floor. The warp is the point." /> <link rel="canonical" href="https://3d-retro.com/experiments/ps1" /> <title>PS1 affine warp · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", speed: 1, snap: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const BW = 320, BH = 180; const buf = document.createElement("canvas"); buf.width = BW; buf.height = BH; const bctx = buf.getContext("2d"); const img = bctx.createImageData(BW, BH); const px = img.data; const zbuf = new Float32Array(BW * BH); let yaw = 0.4, pitch = 0.35, auto = true, dragging = false, lastX = 0, lastY = 0, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointerdown", function (e) { dragging = true; auto = false; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { dragging = false; }); canvas.addEventListener("pointermove", function (e) { if (!dragging) return; yaw += (e.clientX - lastX) * 0.01; pitch += (e.clientY - lastY) * 0.01; pitch = Math.max(-0.2, Math.min(1.1, pitch)); lastX = e.clientX; lastY = e.clientY; }); function rot(p, ax, ay) { const cx = Math.cos(ax), sx = Math.sin(ax), cy = Math.cos(ay), sy = Math.sin(ay); let x = p[0], y = p[1], z = p[2]; const y2 = y * cx - z * sx; z = y * sx + z * cx; y = y2; const x2 = x * cy + z * sy; z = -x * sy + z * cy; x = x2; return [x, y, z]; } function project(p) { const z = p[2] + 5.2; if (z < 0.2) return null; const f = 155 / z; let x = BW * 0.5 + p[0] * f; let y = BH * 0.42 - p[1] * f; if (PARAMS.snap >= 0.5) { x = (x + 0.5) | 0; y = (y + 0.5) | 0; } return { x: x, y: y, z: z }; } function baryFill(a, b, c, uvs, tint) { const minx = Math.max(0, Math.min(a.x, b.x, c.x) | 0); const maxx = Math.min(BW - 1, Math.max(a.x, b.x, c.x) | 0); const miny = Math.max(0, Math.min(a.y, b.y, c.y) | 0); const maxy = Math.min(BH - 1, Math.max(a.y, b.y, c.y) | 0); const area = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x); if (area <= 1) return; const inv = 1 / area; for (let y = miny; y <= maxy; y++) { for (let x = minx; x <= maxx; x++) { const w0 = ((b.x - x) * (c.y - y) - (b.y - y) * (c.x - x)) * inv; const w1 = ((c.x - x) * (a.y - y) - (c.y - y) * (a.x - x)) * inv; const w2 = 1 - w0 - w1; if (w0 < 0 || w1 < 0 || w2 < 0) continue; const z = w0 * a.z + w1 * b.z + w2 * c.z; const zi = y * BW + x; if (z >= zbuf[zi]) continue; zbuf[zi] = z; const u = w0 * uvs[0] + w1 * uvs[2] + w2 * uvs[4]; const v = w0 * uvs[1] + w1 * uvs[3] + w2 * uvs[5]; const chk = ((u * 8) | 0 ^ (v * 8) | 0) & 1; const fog = 1 / (1 + (z - 2.2) * 0.18); const k = (chk ? 1 : 0.22) * fog; const i = zi * 4; px[i] = tint[0] * k; px[i + 1] = tint[1] * k; px[i + 2] = tint[2] * k; px[i + 3] = 255; } } } function tri(pts, i0, i1, i2, uvs, tint) { const a = pts[i0], b = pts[i1], c = pts[i2]; if (!a || !b || !c) return; if ((b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x) <= 0) return; baryFill(a, b, c, uvs, tint); } function draw() { const rgb = hexToRgb(PARAMS.color); px.fill(0); for (let i = 0; i < px.length; i += 4) { const y = (i / 4 / BW) | 0; px[i] = 12; px[i + 1] = 14; px[i + 2] = 18; px[i + 3] = 255; if (y < BH * 0.48) { px[i] = 18; px[i + 1] = 22; px[i + 2] = 32; } } zbuf.fill(1e9); const floor = [ [-5.5, -1.35, -5.5], [5.5, -1.35, -5.5], [5.5, -1.35, 5.5], [-5.5, -1.35, 5.5] ].map(function (p) { return project(rot(p, 0.38, yaw * 0.2)); }); const floorTint = [rgb[0] * 0.85, rgb[1] * 0.85, rgb[2] * 0.7]; tri(floor, 0, 1, 2, [0,0, 2,0, 2,2], floorTint); tri(floor, 0, 2, 3, [0,0, 2,2, 0,2], floorTint); const cube = [ [-1,-1,-1],[1,-1,-1],[1,1,-1],[-1,1,-1], [-1,-1,1],[1,-1,1],[1,1,1],[-1,1,1] ]; const sp = cube.map(function (p) { return project(rot([p[0] * 0.85, p[1] * 0.85 + 0.55, p[2] * 0.85], pitch, yaw)); }); const UV = [0,0, 1,0, 1,1]; const faces = [ [0,1,2, 0,2,3], [5,4,7, 5,7,6], [4,0,3, 4,3,7], [1,5,6, 1,6,2], [3,2,6, 3,6,7], [4,5,1, 4,1,0] ]; const tints = [ rgb, [rgb[0]*0.55, rgb[1]*0.55, rgb[2]*0.55], [rgb[0]*0.75, rgb[1]*0.7, rgb[2]*0.55], [rgb[0]*0.7, rgb[1]*0.8, rgb[2]*0.75], [Math.min(255, rgb[0]*1.1), Math.min(255, rgb[1]*1.1), rgb[2]], [rgb[0]*0.4, rgb[1]*0.4, rgb[2]*0.45] ]; for (let f = 0; f < faces.length; f++) { const id = faces[f]; tri(sp, id[0], id[1], id[2], [0,0, 1,0, 1,1], tints[f]); tri(sp, id[3], id[4], id[5], [0,0, 1,1, 0,1], tints[f]); } bctx.putImageData(img, 0, 0); ctx.imageSmoothingEnabled = false; ctx.drawImage(buf, 0, 0, canvas.width, canvas.height); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (auto && !reduced) yaw += dt * 0.45 * PARAMS.speed; resize(); draw(); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
15. PlayStation · 1995
PS1 affine warp
A checker cube and floor with screen-space UVs. Drag to orbit.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Painter's-algorithm filled polygons, 1984 arcade style. Drag to orbit." /> <link rel="canonical" href="https://3d-retro.com/experiments/irobot" /> <title>I, Robot polygons · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000000; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #000; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#e23b2e", accent: "#f0c43c", speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [226, 59, 46]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function css(rgb, k) { return "rgb(" + ((rgb[0] * k) | 0) + "," + ((rgb[1] * k) | 0) + "," + ((rgb[2] * k) | 0) + ")"; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } let yaw = 0.6, pitch = 0.42, auto = true, dragging = false, lastX = 0, lastY = 0, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointerdown", function (e) { dragging = true; auto = false; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { dragging = false; }); canvas.addEventListener("pointermove", function (e) { if (!dragging) return; yaw += (e.clientX - lastX) * 0.008; pitch += (e.clientY - lastY) * 0.008; pitch = Math.max(0.15, Math.min(1.1, pitch)); lastX = e.clientX; lastY = e.clientY; }); function xform(x, y, z, w, h) { const cy = Math.cos(yaw), sy = Math.sin(yaw); const cx = Math.cos(pitch), sx = Math.sin(pitch); const x1 = x * cy + z * sy; const z1 = -x * sy + z * cy; const y1 = y * cx - z1 * sx; const z2 = y * sx + z1 * cx; const zc = z2 + 16; if (zc < 0.4) return null; const fov = Math.min(w, h) * 0.95; return { x: w * 0.5 + (x1 / zc) * fov, y: h * 0.52 - (y1 / zc) * fov, z: zc }; } function face(pts, col, k, faces) { const p = []; let z = 0; for (let i = 0; i < pts.length; i++) { if (!pts[i]) return; p.push(pts[i]); z += pts[i].z; } const a = p[1].x - p[0].x, b = p[1].y - p[0].y; const c = p[2].x - p[0].x, d = p[2].y - p[0].y; if (a * d - b * c <= 0) return; faces.push({ p: p, z: z / p.length, col: col, k: k }); } function cube(cx, cy, cz, s, h, col, faces, w, hh) { const p = [ xform(cx - s, cy, cz - s, w, hh), xform(cx + s, cy, cz - s, w, hh), xform(cx + s, cy, cz + s, w, hh), xform(cx - s, cy, cz + s, w, hh), xform(cx - s, cy + h, cz - s, w, hh), xform(cx + s, cy + h, cz - s, w, hh), xform(cx + s, cy + h, cz + s, w, hh), xform(cx - s, cy + h, cz + s, w, hh) ]; face([p[0], p[1], p[2], p[3]], col, 0.28, faces); face([p[4], p[7], p[6], p[5]], col, 1, faces); face([p[0], p[4], p[5], p[1]], col, 0.72, faces); face([p[1], p[5], p[6], p[2]], col, 0.52, faces); face([p[2], p[6], p[7], p[3]], col, 0.4, faces); face([p[3], p[7], p[4], p[0]], col, 0.6, faces); } function pyramid(cx, cy, cz, s, h, col, faces, w, hh) { const a = xform(cx - s, cy, cz - s, w, hh); const b = xform(cx + s, cy, cz - s, w, hh); const c = xform(cx + s, cy, cz + s, w, hh); const d = xform(cx - s, cy, cz + s, w, hh); const t = xform(cx, cy + h, cz, w, hh); face([a, b, c, d], col, 0.3, faces); face([a, t, b], col, 0.9, faces); face([b, t, c], col, 0.65, faces); face([c, t, d], col, 0.45, faces); face([d, t, a], col, 0.75, faces); } function draw(w, h) { ctx.fillStyle = "#000"; ctx.fillRect(0, 0, w, h); const red = hexToRgb(PARAMS.color); const gold = hexToRgb(PARAMS.accent); const cyan = [70, 170, 190]; const faces = []; for (let i = -6; i <= 6; i++) { const a1 = xform(i, 0, -7, w, h), b1 = xform(i, 0, 7, w, h); if (a1 && b1) faces.push({ line: true, a: a1, b: b1, z: (a1.z + b1.z) * 0.5, col: red, k: 0.35 }); const a2 = xform(-7, 0, i, w, h), b2 = xform(7, 0, i, w, h); if (a2 && b2) faces.push({ line: true, a: a2, b: b2, z: (a2.z + b2.z) * 0.5, col: red, k: 0.35 }); } for (let z = -5; z <= 5; z++) { for (let x = -5; x <= 5; x++) { if ((x + z) % 2 !== 0) continue; const n = Math.sin(x * 1.7 + z * 0.9) * 0.5 + 0.5; const ht = 0.35 + n * 1.8; const col = n > 0.66 ? gold : n > 0.33 ? red : cyan; if ((x * z) % 3 === 0 && Math.abs(x) + Math.abs(z) > 2) { pyramid(x * 1.35, 0, z * 1.35, 0.42, ht + 0.4, col, faces, w, h); } else { cube(x * 1.35, 0, z * 1.35, 0.42, ht, col, faces, w, h); } } } cube(0, 0, 0, 0.28, 1.55, red, faces, w, h); cube(0, 1.55, 0, 0.22, 0.22, gold, faces, w, h); faces.sort(function (a, b) { return b.z - a.z; }); for (let i = 0; i < faces.length; i++) { const f = faces[i]; if (f.line) { if (!f.a || !f.b) continue; ctx.strokeStyle = css(f.col, f.k); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(f.a.x, f.a.y); ctx.lineTo(f.b.x, f.b.y); ctx.stroke(); continue; } ctx.beginPath(); ctx.moveTo(f.p[0].x, f.p[0].y); for (let k = 1; k < f.p.length; k++) ctx.lineTo(f.p[k].x, f.p[k].y); ctx.closePath(); ctx.fillStyle = css(f.col, f.k); ctx.fill(); ctx.strokeStyle = css(f.col, Math.min(1, f.k + 0.15)); ctx.lineWidth = 1; ctx.stroke(); } } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (auto && !reduced) yaw += dt * 0.28 * PARAMS.speed; resize(); draw(canvas.width, canvas.height); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(canvas.width, canvas.height); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
16. Atari · 1984
I, Robot polygons
Filled cubes and pyramids, painter's algorithm. Drag to orbit.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Gouraud Utah-style teapot. Move the pointer to drag the lights." /> <link rel="canonical" href="https://3d-retro.com/experiments/teapot" /> <title>Utah teapot · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#d8c4a8", light: "#fff1c8", fill: "#6ee7b7" }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [0.85, 0.77, 0.66]; return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); function fail(message) { fallback.hidden = false; fallback.textContent = message; } const gl = canvas.getContext("webgl", { alpha: false, antialias: true }); if (!gl) { fail("WebGL is not available in this browser. Try a current Firefox, Chrome, Safari, or Edge."); return; } const VERT = `attribute vec3 a_pos; attribute vec3 a_nrm; uniform mat4 u_mvp; uniform mat4 u_model; varying vec3 v_nrm; varying vec3 v_pos; void main() { vec4 world = u_model * vec4(a_pos, 1.0); v_pos = world.xyz; v_nrm = mat3(u_model) * a_nrm; gl_Position = u_mvp * vec4(a_pos, 1.0); }`; const FRAG = `precision mediump float; varying vec3 v_nrm; varying vec3 v_pos; uniform vec3 u_cam; uniform vec3 u_color; uniform vec3 u_lightA; uniform vec3 u_lightB; uniform vec3 u_colA; uniform vec3 u_colB; void main() { vec3 n = normalize(v_nrm); vec3 v = normalize(u_cam - v_pos); vec3 la = normalize(u_lightA - v_pos); vec3 lb = normalize(u_lightB - v_pos); float d1 = max(dot(n, la), 0.0); float d2 = max(dot(n, lb), 0.0); float s1 = pow(max(dot(reflect(-la, n), v), 0.0), 48.0); float s2 = pow(max(dot(reflect(-lb, n), v), 0.0), 24.0); vec3 col = u_color * (0.12 + 0.72 * d1 + 0.38 * d2); col += u_colA * s1 * 0.85; col += u_colB * s2 * 0.45; gl_FragColor = vec4(col, 1.0); }`; const BALL_FRAG = `precision mediump float; uniform vec3 u_colA; void main() { gl_FragColor = vec4(u_colA, 1.0); }`; function compile(type, src) { const sh = gl.createShader(type); gl.shaderSource(sh, src); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(sh) || "shader"); return sh; } function program(vs, fs) { const p = gl.createProgram(); gl.attachShader(p, compile(gl.VERTEX_SHADER, vs)); gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(p); if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p) || "link"); return p; } function mul(a, b) { const o = new Float32Array(16); for (let c = 0; c < 4; c++) { for (let r = 0; r < 4; r++) { o[c * 4 + r] = a[r]*b[c*4] + a[4+r]*b[c*4+1] + a[8+r]*b[c*4+2] + a[12+r]*b[c*4+3]; } } return o; } function perspective(fovy, aspect, near, far) { const f = 1 / Math.tan(fovy / 2), nf = 1 / (near - far); const o = new Float32Array(16); o[0] = f / aspect; o[5] = f; o[10] = (far + near) * nf; o[11] = -1; o[14] = 2 * far * near * nf; return o; } function translate(x, y, z) { const o = new Float32Array([1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]); o[12] = x; o[13] = y; o[14] = z; return o; } function rotateY(a) { const c = Math.cos(a), s = Math.sin(a); return new Float32Array([c,0,-s,0, 0,1,0,0, s,0,c,0, 0,0,0,1]); } const pos = []; const nrm = []; function addTri(a, b, c, na, nb, nc) { pos.push(a[0], a[1], a[2], b[0], b[1], b[2], c[0], c[1], c[2]); nrm.push(na[0], na[1], na[2], nb[0], nb[1], nb[2], nc[0], nc[1], nc[2]); } function bez(p0, p1, p2, p3, t) { const s = 1 - t; return [ s*s*s*p0[0] + 3*s*s*t*p1[0] + 3*s*t*t*p2[0] + t*t*t*p3[0], s*s*s*p0[1] + 3*s*s*t*p1[1] + 3*s*t*t*p2[1] + t*t*t*p3[1] ]; } function lathe(curves, nu, nv) { const rings = []; for (let c = 0; c < curves.length; c++) { const cr = curves[c]; for (let j = 0; j < nv; j++) { const t = j / (nv - (c === curves.length - 1 ? 1 : 0)); if (c < curves.length - 1 && j === nv && false) break; rings.push(bez(cr[0], cr[1], cr[2], cr[3], Math.min(1, t))); } } const seen = []; for (let i = 0; i < rings.length; i++) { if (i && Math.hypot(rings[i][0] - rings[i-1][0], rings[i][1] - rings[i-1][1]) < 0.002) continue; seen.push(rings[i]); } for (let i = 0; i < seen.length - 1; i++) { const r0 = seen[i][0], y0 = seen[i][1]; const r1 = seen[i+1][0], y1 = seen[i+1][1]; const dr = r1 - r0, dy = y1 - y0; const nr = dy, ny = -dr; const nl = Math.hypot(nr, ny) || 1; for (let u = 0; u < nu; u++) { const a0 = (u / nu) * Math.PI * 2, a1 = ((u + 1) / nu) * Math.PI * 2; const c0 = Math.cos(a0), s0 = Math.sin(a0), c1 = Math.cos(a1), s1 = Math.sin(a1); const p00 = [r0 * c0, y0, r0 * s0], p10 = [r1 * c0, y1, r1 * s0]; const p11 = [r1 * c1, y1, r1 * s1], p01 = [r0 * c1, y0, r0 * s1]; const n0 = [nr * c0 / nl, ny / nl, nr * s0 / nl]; const n1 = [nr * c1 / nl, ny / nl, nr * s1 / nl]; addTri(p00, p10, p11, n0, n0, n1); addTri(p00, p11, p01, n0, n1, n1); } } } function tube(path, radii, nu) { let nx = 0, ny = 0, nz = 1; const frames = []; for (let i = 0; i < path.length; i++) { const p = path[i]; const p1 = path[Math.min(path.length - 1, i + 1)]; const p0 = path[Math.max(0, i - 1)]; let tx = p1[0] - p0[0], ty = p1[1] - p0[1], tz = p1[2] - p0[2]; const tl = Math.hypot(tx, ty, tz) || 1; tx /= tl; ty /= tl; tz /= tl; let px = nx - tx * (nx * tx + ny * ty + nz * tz); let py = ny - ty * (nx * tx + ny * ty + nz * tz); let pz = nz - tz * (nx * tx + ny * ty + nz * tz); let pl = Math.hypot(px, py, pz); if (pl < 0.2) { px = ty * 0 - 1 * tz; py = tz * 1 - tx * 0; pz = tx * 0 - ty * 1; pl = Math.hypot(px, py, pz) || 1; } px /= pl; py /= pl; pz /= pl; nx = px; ny = py; nz = pz; const bx = ty * pz - tz * py, by = tz * px - tx * pz, bz = tx * py - ty * px; frames.push({ p: p, n: [px, py, pz], b: [bx, by, bz], r: radii[i] }); } function ringPt(fr, u) { const a = (u / nu) * Math.PI * 2, ca = Math.cos(a), sa = Math.sin(a); return [ fr.p[0] + (fr.n[0] * ca + fr.b[0] * sa) * fr.r, fr.p[1] + (fr.n[1] * ca + fr.b[1] * sa) * fr.r, fr.p[2] + (fr.n[2] * ca + fr.b[2] * sa) * fr.r ]; } function ringN(fr, u) { const a = (u / nu) * Math.PI * 2, ca = Math.cos(a), sa = Math.sin(a); return [ fr.n[0] * ca + fr.b[0] * sa, fr.n[1] * ca + fr.b[1] * sa, fr.n[2] * ca + fr.b[2] * sa ]; } for (let i = 0; i < frames.length - 1; i++) { for (let u = 0; u < nu; u++) { const a = ringPt(frames[i], u), b = ringPt(frames[i + 1], u); const c = ringPt(frames[i + 1], u + 1), d = ringPt(frames[i], u + 1); const na = ringN(frames[i], u), nb = ringN(frames[i + 1], u); const nc = ringN(frames[i + 1], u + 1), nd = ringN(frames[i], u + 1); addTri(a, b, c, na, nb, nc); addTri(a, c, d, na, nc, nd); } } } function sphere(cx, cy, cz, r, segs) { for (let i = 0; i < segs; i++) { const a0 = (i / segs) * Math.PI, a1 = ((i + 1) / segs) * Math.PI; for (let j = 0; j < segs * 2; j++) { const b0 = (j / (segs * 2)) * Math.PI * 2, b1 = ((j + 1) / (segs * 2)) * Math.PI * 2; function pt(a, b) { const x = Math.sin(a) * Math.cos(b), y = Math.cos(a), z = Math.sin(a) * Math.sin(b); return [[cx + x * r, cy + y * r, cz + z * r], [x, y, z]]; } const p00 = pt(a0, b0), p10 = pt(a1, b0), p11 = pt(a1, b1), p01 = pt(a0, b1); addTri(p00[0], p10[0], p11[0], p00[1], p10[1], p11[1]); addTri(p00[0], p11[0], p01[0], p00[1], p11[1], p01[1]); } } } lathe([ [[0.05, 0.0], [0.55, 0.0], [1.15, 0.08], [1.32, 0.38]], [[1.32, 0.38], [1.42, 0.7], [1.28, 1.05], [0.95, 1.28]], [[0.95, 1.28], [0.78, 1.38], [0.7, 1.42], [0.62, 1.46]] ], 28, 7); lathe([ [[0.62, 1.46], [0.55, 1.5], [0.38, 1.55], [0.2, 1.6]], [[0.2, 1.6], [0.14, 1.64], [0.1, 1.7], [0.0, 1.74]] ], 24, 6); sphere(0, 1.82, 0, 0.12, 8); function sampleBez3(a, b, c, d, n) { const out = []; for (let i = 0; i <= n; i++) { const t = i / n, s = 1 - t; out.push([ s*s*s*a[0]+3*s*s*t*b[0]+3*s*t*t*c[0]+t*t*t*d[0], s*s*s*a[1]+3*s*s*t*b[1]+3*s*t*t*c[1]+t*t*t*d[1], s*s*s*a[2]+3*s*s*t*b[2]+3*s*t*t*c[2]+t*t*t*d[2] ]); } return out; } const handle = sampleBez3([1.12, 1.18, 0], [1.78, 1.38, 0], [1.82, 0.38, 0], [1.15, 0.36, 0], 14); const hr = handle.map(function (_, i) { return 0.13; }); tube(handle, hr, 12); const spout = sampleBez3([-1.05, 0.82, 0], [-1.65, 0.92, 0], [-1.95, 1.28, 0], [-2.05, 1.55, 0], 12); const sr = spout.map(function (_, i) { return 0.2 - 0.11 * (i / (spout.length - 1)); }); tube(spout, sr, 10); const meshPos = new Float32Array(pos); const meshNrm = new Float32Array(nrm); const meshCount = pos.length / 3; const ballPos = []; const ballNrm = []; const savedPos = pos.length, savedNrm = nrm.length; pos.length = 0; nrm.length = 0; sphere(0, 0, 0, 1, 8); ballPos.push.apply(ballPos, pos); ballNrm.push.apply(ballNrm, nrm); pos.length = savedPos; nrm.length = savedNrm; const meshProg = program(VERT, FRAG); const ballProg = program(VERT, BALL_FRAG); function makeBuf(data) { const b = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, b); gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); return b; } const posBuf = makeBuf(meshPos); const nrmBuf = makeBuf(meshNrm); const ballP = makeBuf(new Float32Array(ballPos)); const ballN = makeBuf(new Float32Array(ballNrm)); const ballCount = ballPos.length / 3; function bind(prog, name, buf, size) { const loc = gl.getAttribLocation(prog, name); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); } gl.enable(gl.DEPTH_TEST); gl.enable(gl.CULL_FACE); gl.clearColor(0.043, 0.047, 0.055, 1); let az = 0.55, el = 0.7, yaw = 0.95, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointermove", function (e) { const r = canvas.getBoundingClientRect(); az = ((e.clientX - r.left) / r.width - 0.5) * Math.PI * 1.4; el = 0.25 + (1 - (e.clientY - r.top) / r.height) * 1.15; }); function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } gl.viewport(0, 0, canvas.width, canvas.height); } function lightPos(a, e, rad) { return [Math.cos(e) * Math.sin(a) * rad, Math.sin(e) * rad, Math.cos(e) * Math.cos(a) * rad]; } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) yaw += dt * 0.35; resize(); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); const aspect = canvas.width / canvas.height; const proj = perspective(Math.PI / 4.2, aspect, 0.1, 40); const view = translate(0, -0.85, -5.4); const model = rotateY(yaw); const mvp = mul(mul(proj, view), model); const L1 = lightPos(az, el, 3.4); const L2 = lightPos(az + 2.3, el * 0.55 + 0.2, 3.2); const cam = [0, 1.4, 5.4]; gl.useProgram(meshProg); gl.uniformMatrix4fv(gl.getUniformLocation(meshProg, "u_mvp"), false, mvp); gl.uniformMatrix4fv(gl.getUniformLocation(meshProg, "u_model"), false, model); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_cam"), cam); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_color"), hexToRgb(PARAMS.color)); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_lightA"), L1); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_lightB"), L2); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_colA"), hexToRgb(PARAMS.light)); gl.uniform3fv(gl.getUniformLocation(meshProg, "u_colB"), hexToRgb(PARAMS.fill)); bind(meshProg, "a_pos", posBuf, 3); bind(meshProg, "a_nrm", nrmBuf, 3); gl.drawArrays(gl.TRIANGLES, 0, meshCount); function drawBall(L, col) { const s = 0.09; const m = mul(translate(L[0], L[1], L[2]), new Float32Array([s,0,0,0, 0,s,0,0, 0,0,s,0, 0,0,0,1])); const bmvp = mul(mul(proj, view), m); gl.useProgram(ballProg); gl.uniformMatrix4fv(gl.getUniformLocation(ballProg, "u_mvp"), false, bmvp); gl.uniformMatrix4fv(gl.getUniformLocation(ballProg, "u_model"), false, m); gl.uniform3fv(gl.getUniformLocation(ballProg, "u_colA"), col); bind(ballProg, "a_pos", ballP, 3); bind(ballProg, "a_nrm", ballN, 3); gl.drawArrays(gl.TRIANGLES, 0, ballCount); } drawBall(L1, hexToRgb(PARAMS.light)); drawBall(L2, hexToRgb(PARAMS.fill)); if (!reduced) requestAnimationFrame(frame); } canvas.addEventListener("webglcontextlost", function (e) { e.preventDefault(); fail("WebGL context was lost. Reload the page."); }); if (reduced) { resize(); last = 0; frame(0); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
17. Newell · 1975
Utah teapot
A Gouraud teapot. Move the pointer to drag the lights.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A twisting square tunnel of dots. Pointer shifts the vanishing point." /> <link rel="canonical" href="https://3d-retro.com/experiments/tunnel" /> <title>Dot/square tunnel · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", speed: 1, twist: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const RINGS = 36; const SIDES = 4; const PER = 7; const rings = []; for (let i = 0; i < RINGS; i++) rings.push((i / RINGS) * 18 + 0.55); let t = 0, lookX = 0, lookY = 0, targetX = 0, targetY = 0, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); targetX = (ev.clientX - r.left) / r.width - 0.5; targetY = (ev.clientY - r.top) / r.height - 0.5; }); canvas.addEventListener("pointerleave", function () { targetX = 0; targetY = 0; }); function onSquare(k, n, spin) { const u = (k / n) * 4; const side = u | 0; const f = u - side; let x = 0, y = 0; if (side === 0) { x = -1 + 2 * f; y = -1; } else if (side === 1) { x = 1; y = -1 + 2 * f; } else if (side === 2) { x = 1 - 2 * f; y = 1; } else { x = -1; y = 1 - 2 * f; } const c = Math.cos(spin), s = Math.sin(spin); return [x * c - y * s, x * s + y * c]; } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function draw(w, h) { ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); const rgb = hexToRgb(PARAMS.color); const cx = w * 0.5 + lookX * w * 0.42; const cy = h * 0.5 + lookY * h * 0.42; const fov = Math.min(w, h) * 0.55; const n = SIDES * PER; for (let i = 0; i < RINGS; i++) { const z = rings[i]; const spin = t * 0.35 + z * 0.28 * PARAMS.twist; const fog = Math.max(0.08, 1 - z / 19); const s = (1.15 / z) * fov; const size = Math.max(1.2, 5.5 / z); ctx.fillStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + fog + ")"; ctx.strokeStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + (fog * 0.55) + ")"; ctx.lineWidth = Math.max(1, 2.2 / z); ctx.beginPath(); for (let k = 0; k <= n; k++) { const p = onSquare(k % n, n, spin); const x = cx + p[0] * s; const y = cy + p[1] * s; if (k === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); for (let k = 0; k < n; k++) { const p = onSquare(k, n, spin); const x = cx + p[0] * s; const y = cy + p[1] * s; const corner = k % PER === 0; if (corner) ctx.fillRect(x - size, y - size, size * 2, size * 2); else { ctx.beginPath(); ctx.arc(x, y, size * 0.45, 0, Math.PI * 2); ctx.fill(); } } } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; lookX += (targetX - lookX) * Math.min(1, dt * 6); lookY += (targetY - lookY) * Math.min(1, dt * 6); if (!reduced) { t += dt * PARAMS.speed; const dz = dt * 6.5 * PARAMS.speed; for (let i = 0; i < RINGS; i++) { rings[i] -= dz; if (rings[i] < 0.5) rings[i] += 18; } } resize(); draw(canvas.width, canvas.height); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(canvas.width, canvas.height); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
18. Demoscene · 1991
Dot/square tunnel
A twisting square tunnel of dots. Pointer shifts the vanishing point.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="1990s palette fire. Heat rises, cools, and is remapped through a LUT." /> <link rel="canonical" href="https://3d-retro.com/experiments/fire" /> <title>Palette fire · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#ff6622", heat: 1, wind: 0 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [255, 102, 34]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const W = 160, H = 100; const buf = document.createElement("canvas"); buf.width = W; buf.height = H; const bctx = buf.getContext("2d"); const img = bctx.createImageData(W, H); const px = img.data; const heat = new Uint8Array(W * (H + 2)); const pal = new Uint8Array(256 * 3); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; function buildPal() { const rgb = hexToRgb(PARAMS.color); for (let i = 0; i < 256; i++) { const t = i / 255; let r, g, b; if (t < 0.18) { const k = t / 0.18; r = 8 * k; g = 4 * k; b = 2 * k; } else if (t < 0.45) { const k = (t - 0.18) / 0.27; r = 8 + (rgb[0] - 8) * k; g = 4 + (rgb[1] * 0.25 - 4) * k; b = 2 + (rgb[2] * 0.12) * k; } else if (t < 0.75) { const k = (t - 0.45) / 0.3; r = rgb[0] + (255 - rgb[0]) * k; g = rgb[1] * 0.25 + (220 - rgb[1] * 0.25) * k; b = rgb[2] * 0.12 + 40 * k; } else { const k = (t - 0.75) / 0.25; r = 255; g = 220 + 35 * k; b = 40 + 200 * k; } pal[i * 3] = r; pal[i * 3 + 1] = g; pal[i * 3 + 2] = b; } } buildPal(); let pokeX = -1, pokeY = -1; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); pokeX = ((ev.clientX - r.left) / r.width) * W; pokeY = ((ev.clientY - r.top) / r.height) * H; }); canvas.addEventListener("pointerleave", function () { pokeX = -1; }); function step() { buildPal(); const cool = Math.max(1, 3.2 / PARAMS.heat); const wind = PARAMS.wind | 0; for (let y = 0; y < H; y++) { for (let x = 0; x < W; x++) { const x0 = (x - 1 + wind + W) % W; const x1 = x; const x2 = (x + 1 + wind + W) % W; const a = heat[(y + 1) * W + x0]; const b = heat[(y + 1) * W + x1]; const c = heat[(y + 1) * W + x2]; const d = heat[(y + 2) * W + x1]; let v = (a + b + c + d) * 0.25 - cool; if (v < 0) v = 0; heat[y * W + x] = v; } } for (let x = 0; x < W; x++) { const spark = Math.random() < 0.46 * PARAMS.heat ? 180 + Math.random() * 75 : Math.random() * 50; heat[H * W + x] = spark; heat[(H + 1) * W + x] = spark; } if (pokeX >= 0) { const cx = pokeX | 0, cy = Math.max(0, pokeY | 0); for (let dy = -3; dy <= 3; dy++) { for (let dx = -3; dx <= 3; dx++) { const xx = (cx + dx + W) % W; const yy = cy + dy; if (yy >= 0 && yy < H + 2) heat[yy * W + xx] = 255; } } } for (let i = 0; i < W * H; i++) { const h = heat[i]; px[i * 4] = pal[h * 3]; px[i * 4 + 1] = pal[h * 3 + 1]; px[i * 4 + 2] = pal[h * 3 + 2]; px[i * 4 + 3] = 255; } bctx.putImageData(img, 0, 0); ctx.imageSmoothingEnabled = false; ctx.drawImage(buf, 0, 0, canvas.width, canvas.height); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame() { resize(); step(); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); for (let i = 0; i < 50; i++) step(); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
19. Demoscene · 1993
Palette fire
Heat rises through a 256-color fire LUT. Pointer is a torch.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="XY oscilloscope / Lissajous. Pointer changes the ratio." /> <link rel="canonical" href="https://3d-retro.com/experiments/scope" /> <title>XY oscilloscope · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050806; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #050806; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", ratio: 2, speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function css(rgb, a) { return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } let t = 0, last = 0, look = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); look = (ev.clientX - r.left) / r.width; }); function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; ctx.fillStyle = "#050806"; ctx.fillRect(0, 0, w, h); } } function grid(w, h, rgb) { ctx.strokeStyle = css(rgb, 0.12); ctx.lineWidth = 1; const cx = w * 0.5, cy = h * 0.5; const R = Math.min(w, h) * 0.42; ctx.beginPath(); ctx.rect(cx - R, cy - R, R * 2, R * 2); ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy); ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R); for (let i = 1; i < 4; i++) { const s = (i / 4) * R; ctx.moveTo(cx - R, cy - s); ctx.lineTo(cx + R, cy - s); ctx.moveTo(cx - R, cy + s); ctx.lineTo(cx + R, cy + s); ctx.moveTo(cx - s, cy - R); ctx.lineTo(cx - s, cy + R); ctx.moveTo(cx + s, cy - R); ctx.lineTo(cx + s, cy + R); } ctx.stroke(); } function trace(w, h, a, b, phase, rgb, samples, thick) { const cx = w * 0.5, cy = h * 0.5; const R = Math.min(w, h) * 0.38; ctx.beginPath(); for (let i = 0; i <= samples; i++) { const u = t + i * 0.012; const x = cx + Math.sin(a * u) * R; const y = cy + Math.sin(b * u + phase) * R; if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.strokeStyle = css(rgb, 0.18); ctx.lineWidth = thick * 3.2; ctx.stroke(); ctx.strokeStyle = css(rgb, 0.95); ctx.lineWidth = thick; ctx.stroke(); } function draw(w, h) { ctx.fillStyle = "rgba(5,8,6,0.18)"; ctx.fillRect(0, 0, w, h); const rgb = hexToRgb(PARAMS.color); grid(w, h, rgb); const a = 2; const b = Math.max(1, PARAMS.ratio) + look * 1.2; const phase = t * 0.17; trace(w, h, a, b, phase, rgb, 420, 1.4); } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) t += dt * 1.6 * PARAMS.speed; resize(); draw(canvas.width, canvas.height); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); ctx.fillStyle = "#050806"; ctx.fillRect(0, 0, canvas.width, canvas.height); draw(canvas.width, canvas.height); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
20. Vector CRT · 1970s
XY oscilloscope
A Lissajous figure with phosphor persistence. Pointer changes the ratio.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Amiga Boing ball: a checkered sphere, a bounce, a shadow." /> <link rel="canonical" href="https://3d-retro.com/experiments/boing" /> <title>Boing ball · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#d8241c", speed: 1, checks: 8 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [216, 36, 28]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } let x = 0, y = 1.8, vx = 1.15, vy = 0, spin = 0.4, last = 0; let poke = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const G = 9.4, FLOOR = 0, R = 0.72; canvas.addEventListener("pointerdown", function (ev) { const rect = canvas.getBoundingClientRect(); const nx = ((ev.clientX - rect.left) / rect.width - 0.5) * 4.4; vx = (nx - x) * 1.4; vy = 4.2; poke = 1; }); function project(px, py, pz, w, h) { const z = pz + 5.2; const f = Math.min(w, h) * 0.95 / z; return { x: w * 0.5 + px * f, y: h * 0.62 - py * f, s: f }; } function drawGrid(w, h, rgb) { ctx.strokeStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ",0.22)"; ctx.lineWidth = 1; for (let i = -6; i <= 6; i++) { const a = project(i * 0.55, FLOOR, -3.2, w, h); const b = project(i * 0.55, FLOOR, 3.4, w, h); ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); const c = project(-3.4, FLOOR, i * 0.55, w, h); const d = project(3.4, FLOOR, i * 0.55, w, h); ctx.beginPath(); ctx.moveTo(c.x, c.y); ctx.lineTo(d.x, d.y); ctx.stroke(); } } function drawBall(w, h, rgb) { const p = project(x, y + R, 0, w, h); const rad = R * p.s; const sh = project(x + 0.35, FLOOR + 0.01, 0.15, w, h); const lift = Math.max(0.15, 1 - (y / 2.6)); ctx.fillStyle = "rgba(0,0,0," + (0.38 * lift) + ")"; ctx.beginPath(); ctx.ellipse(sh.x, sh.y, rad * 0.85, rad * 0.22, 0, 0, Math.PI * 2); ctx.fill(); const nCheck = Math.max(4, PARAMS.checks | 0); const xmin = Math.max(0, (p.x - rad) | 0); const xmax = Math.min(w - 1, (p.x + rad) | 0); const ymin = Math.max(0, (p.y - rad) | 0); const ymax = Math.min(h - 1, (p.y + rad) | 0); const id = ctx.getImageData(xmin, ymin, xmax - xmin + 1, ymax - ymin + 1); const data = id.data; const cw = xmax - xmin + 1; const cs = Math.cos(spin), sn = Math.sin(spin); const white = [236, 232, 224]; for (let py = ymin; py <= ymax; py++) { for (let px = xmin; px <= xmax; px++) { const nx = (px - p.x) / rad; const ny = (py - p.y) / rad; const r2 = nx * nx + ny * ny; if (r2 > 1) continue; const nz = Math.sqrt(1 - r2); const rx = nx * cs + nz * sn; const rz = -nx * sn + nz * cs; const lon = Math.atan2(rx, rz); const lat = Math.asin(Math.max(-1, Math.min(1, ny))); const u = Math.floor(((lon + Math.PI) / (Math.PI * 2)) * nCheck); const v = Math.floor(((lat + Math.PI / 2) / Math.PI) * (nCheck * 0.5)); const on = (u + v) & 1; const wrap = 0.18 + 0.85 * Math.max(0, 0.35 + 0.75 * (nx * 0.4 + ny * -0.5 + nz * 0.7)); const col = on ? rgb : white; const i = ((py - ymin) * cw + (px - xmin)) * 4; data[i] = col[0] * wrap; data[i + 1] = col[1] * wrap; data[i + 2] = col[2] * wrap; data[i + 3] = 255; } } ctx.putImageData(id, xmin, ymin); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.032, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) { vy -= G * dt * PARAMS.speed; y += vy * dt * PARAMS.speed; x += vx * dt * PARAMS.speed; spin += vx * dt * 0.85 * PARAMS.speed; if (y < FLOOR) { y = FLOOR; vy = Math.abs(vy) * 0.84; if (vy < 0.4) vy = 3.6 + poke * 1.2; } if (x > 2.1) { x = 2.1; vx = -Math.abs(vx); } if (x < -2.1) { x = -2.1; vx = Math.abs(vx); } poke *= 0.9; } resize(); const w = canvas.width, h = canvas.height; ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); const rgb = hexToRgb(PARAMS.color); drawGrid(w, h, rgb); drawBall(w, h, rgb); if (!reduced) requestAnimationFrame(frame); } if (reduced) { y = 0.8; x = 0; resize(); ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, canvas.width, canvas.height); const rgb = hexToRgb(PARAMS.color); drawGrid(canvas.width, canvas.height, rgb); drawBall(canvas.width, canvas.height, rgb); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
21. Amiga · 1984
Boing ball
Checkered sphere, bounce, shadow. Click to kick it.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Trumbull slit-scan corridor. Pointer shifts the vanishing point." /> <link rel="canonical" href="https://3d-retro.com/experiments/stargate" /> <title>Slit-scan stargate · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050308; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #050308; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#ff6a2a", speed: 1, streaks: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [255, 106, 42]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const BW = 280, BH = 160; const buf = document.createElement("canvas"); buf.width = BW; buf.height = BH; const bctx = buf.getContext("2d"); const img = bctx.createImageData(BW, BH); const px = img.data; let t = 0, lookX = 0, lookY = 0, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); lookX = (ev.clientX - r.left) / r.width - 0.5; lookY = (ev.clientY - r.top) / r.height - 0.5; }); function slit(u, rgb) { const s = (u % 1 + 1) % 1; const band = Math.sin(s * Math.PI * 10) * 0.5 + 0.5; const cool = s < 0.45; if (cool) { return [ 20 + band * 40 + rgb[0] * 0.05, 30 + band * 90, 80 + band * 160 ]; } return [ rgb[0] * (0.35 + band * 0.65), rgb[1] * (0.15 + band * 0.5) + band * 80, rgb[2] * 0.12 + (1 - band) * 40 ]; } function draw() { const rgb = hexToRgb(PARAMS.color); const cx = BW * (0.5 + lookX * 0.35); const cy = BH * (0.5 + lookY * 0.35); const k = 7.5 * PARAMS.streaks; for (let y = 0; y < BH; y++) { for (let x = 0; x < BW; x++) { const dx = x - cx, dy = y - cy; const r = Math.hypot(dx, dy) / BH; const a = Math.atan2(dy, dx); const u = a / (Math.PI * 2) * 6 + t * 0.15; const scan = t * 1.4 * PARAMS.speed - r * k; const col = slit(u * 0.2 + scan, rgb); const glow = Math.max(0, 1 - r * 1.15); const i = (y * BW + x) * 4; px[i] = Math.min(255, col[0] * (0.25 + glow) + glow * 40); px[i + 1] = Math.min(255, col[1] * (0.25 + glow)); px[i + 2] = Math.min(255, col[2] * (0.2 + glow * 0.8)); px[i + 3] = 255; } } bctx.putImageData(img, 0, 0); ctx.imageSmoothingEnabled = false; ctx.drawImage(buf, 0, 0, canvas.width, canvas.height); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) t += dt; resize(); draw(); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
22. Trumbull · 1968
Slit-scan stargate
A 2001 corridor from a moving slit. Pointer shifts the vanishing point.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="1973 Rutt-Etra: a raster displaced by luminance. Drag to orbit." /> <link rel="canonical" href="https://3d-retro.com/experiments/ruttetra" /> <title>Rutt-Etra scan · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050806; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #050806; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", displace: 1, speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const COLS = 72, ROWS = 48; let t = 0, yaw = 0.45, pitch = 0.55, auto = true, dragging = false, lastX = 0, lastY = 0, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointerdown", function (e) { dragging = true; auto = false; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { dragging = false; }); canvas.addEventListener("pointermove", function (e) { if (!dragging) return; yaw += (e.clientX - lastX) * 0.008; pitch += (e.clientY - lastY) * 0.008; pitch = Math.max(0.15, Math.min(1.2, pitch)); lastX = e.clientX; lastY = e.clientY; }); function luma(u, v, time) { const x = u * 2 - 1, y = v * 2 - 1; let L = 0.42 + 0.22 * Math.sin(u * 9 + time) * Math.cos(v * 7 - time * 0.7); const b1 = Math.hypot(x - Math.sin(time * 0.7) * 0.45, y - Math.cos(time * 0.5) * 0.3); const b2 = Math.hypot(x + Math.cos(time * 0.4) * 0.4, y + Math.sin(time * 0.9) * 0.35); L += 0.55 * Math.exp(-b1 * b1 * 7) + 0.4 * Math.exp(-b2 * b2 * 9); const ring = Math.abs(Math.hypot(x, y) - (0.55 + 0.08 * Math.sin(time * 1.3))); L += 0.28 * Math.exp(-ring * ring * 40); return Math.max(0, Math.min(1, L)); } function project(x, y, z, w, h) { const cy = Math.cos(yaw), sy = Math.sin(yaw); const cx = Math.cos(pitch), sx = Math.sin(pitch); const x1 = x * cy + z * sy; const z1 = -x * sy + z * cy; const y1 = y * cx - z1 * sx; const z2 = y * sx + z1 * cx + 3.4; if (z2 < 0.2) return null; const f = Math.min(w, h) * 0.9 / z2; return { x: w * 0.5 + x1 * f, y: h * 0.52 - y1 * f }; } function draw(w, h) { ctx.fillStyle = "#050806"; ctx.fillRect(0, 0, w, h); const rgb = hexToRgb(PARAMS.color); const amp = 1.15 * PARAMS.displace; for (let j = 0; j < ROWS; j++) { const v = j / (ROWS - 1); ctx.beginPath(); let pen = false; for (let i = 0; i < COLS; i++) { const u = i / (COLS - 1); const L = luma(u, v, t); const p = project((u - 0.5) * 2.2, (0.5 - v) * 1.5, (L - 0.35) * amp, w, h); if (!p) { pen = false; continue; } if (!pen) { ctx.moveTo(p.x, p.y); pen = true; } else ctx.lineTo(p.x, p.y); } const a = 0.22 + 0.7 * (1 - v * 0.45); ctx.strokeStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; ctx.lineWidth = 1.15; ctx.stroke(); } } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (!reduced) { t += dt * PARAMS.speed; if (auto) yaw += dt * 0.18; } resize(); draw(canvas.width, canvas.height); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(canvas.width, canvas.height); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
23. Rutt/Etra · 1973
Rutt-Etra scan
A video raster displaced by luminance. Drag to orbit.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Amiga Glenz: translucent filled polygons. Drag to orbit." /> <link rel="canonical" href="https://3d-retro.com/experiments/glenz" /> <title>Glenz vectors · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #05040a; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #05040a; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#ff4ad2", accent: "#3ce0ff", speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [255, 74, 210]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function mix(a, b, t) { return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const G = (1 + Math.sqrt(5)) / 2; const raw = [ [-1, G, 0], [1, G, 0], [-1, -G, 0], [1, -G, 0], [0, -1, G], [0, 1, G], [0, -1, -G], [0, 1, -G], [G, 0, -1], [G, 0, 1], [-G, 0, -1], [-G, 0, 1] ]; const verts = raw.map(function (p) { const L = Math.hypot(p[0], p[1], p[2]); return [p[0] / L, p[1] / L, p[2] / L]; }); const faces = [ [0,11,5],[0,5,1],[0,1,7],[0,7,10],[0,10,11], [1,5,9],[5,11,4],[11,10,2],[10,7,6],[7,1,8], [3,9,4],[3,4,2],[3,2,6],[3,6,8],[3,8,9], [4,9,5],[2,4,11],[6,2,10],[8,6,7],[9,8,1] ]; let yaw = 0.4, pitch = 0.35, auto = true, dragging = false, lastX = 0, lastY = 0, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointerdown", function (e) { dragging = true; auto = false; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { dragging = false; }); canvas.addEventListener("pointermove", function (e) { if (!dragging) return; yaw += (e.clientX - lastX) * 0.01; pitch += (e.clientY - lastY) * 0.01; pitch = Math.max(-0.8, Math.min(0.9, pitch)); lastX = e.clientX; lastY = e.clientY; }); function rot(p) { const cx = Math.cos(pitch), sx = Math.sin(pitch); const cy = Math.cos(yaw), sy = Math.sin(yaw); let x = p[0], y = p[1], z = p[2]; const y2 = y * cx - z * sx; z = y * sx + z * cx; y = y2; const x2 = x * cy + z * sy; z = -x * sy + z * cy; return [x2, y, z]; } function draw(w, h) { ctx.fillStyle = "#05040a"; ctx.fillRect(0, 0, w, h); const A = hexToRgb(PARAMS.color); const B = hexToRgb(PARAMS.accent); const fov = Math.min(w, h) * 0.48; const pts = verts.map(function (v) { const r = rot(v); const z = r[2] + 3.2; return { x: w * 0.5 + r[0] / z * fov * 3.1, y: h * 0.5 - r[1] / z * fov * 3.1, z: z, n: r }; }); const drawn = []; for (let f = 0; f < faces.length; f++) { const a = pts[faces[f][0]], b = pts[faces[f][1]], c = pts[faces[f][2]]; drawn.push({ a: a, b: b, c: c, z: (a.z + b.z + c.z) / 3, i: f }); } drawn.sort(function (p, q) { return q.z - p.z; }); ctx.globalCompositeOperation = "lighter"; for (let i = 0; i < drawn.length; i++) { const f = drawn[i]; const col = mix(A, B, (f.i % 7) / 6); ctx.fillStyle = "rgba(" + (col[0]|0) + "," + (col[1]|0) + "," + (col[2]|0) + ",0.22)"; ctx.strokeStyle = "rgba(" + (col[0]|0) + "," + (col[1]|0) + "," + (col[2]|0) + ",0.55)"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(f.a.x, f.a.y); ctx.lineTo(f.b.x, f.b.y); ctx.lineTo(f.c.x, f.c.y); ctx.closePath(); ctx.fill(); ctx.stroke(); } ctx.globalCompositeOperation = "source-over"; } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (auto && !reduced) { yaw += dt * 0.55 * PARAMS.speed; pitch = Math.sin(now * 0.0004) * 0.25; } resize(); draw(canvas.width, canvas.height); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(canvas.width, canvas.height); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
24. Amiga · 1990
Glenz vectors
Translucent filled polygons, additive. Drag to orbit.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Barry Martin's hopalong attractor. Pointer nudges the constant." /> <link rel="canonical" href="https://3d-retro.com/experiments/hopalong" /> <title>Hopalong attractor · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #07060a; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #07060a; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", a: 0.4, scale: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const BW = 420, BH = 240; const buf = document.createElement("canvas"); buf.width = BW; buf.height = BH; const bctx = buf.getContext("2d"); const img = bctx.createImageData(BW, BH); const d = img.data; bctx.fillStyle = "#07060a"; bctx.fillRect(0, 0, BW, BH); const src = bctx.getImageData(0, 0, BW, BH); d.set(src.data); let x = 0, y = 0, n = 0, look = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); look = (ev.clientX - r.left) / r.width - 0.5; }); function fade() { for (let i = 0; i < d.length; i += 4) { d[i] *= 0.96; d[i + 1] *= 0.96; d[i + 2] *= 0.96; } } function step() { fade(); const rgb = hexToRgb(PARAMS.color); const a = PARAMS.a + look * 0.35; const b = 1, c = 0; const s = Math.min(BW, BH) * 0.1 * PARAMS.scale; const cx = BW * 0.5, cy = BH * 0.5; const iters = reduced ? 28000 : 18000; for (let i = 0; i < iters; i++) { const nx = y - Math.sign(x || 1) * Math.sqrt(Math.abs(b * x - c)); y = a - x; x = nx; const px = (cx + x * s) | 0; const py = (cy + y * s) | 0; if (px < 0 || py < 0 || px >= BW || py >= BH) continue; const o = (py * BW + px) * 4; const k = 0.4 + 0.6 * ((n + i) % 97) / 97; d[o] = Math.min(255, d[o] + rgb[0] * 0.16 * k); d[o + 1] = Math.min(255, d[o + 1] + rgb[1] * 0.16 * k); d[o + 2] = Math.min(255, d[o + 2] + rgb[2] * 0.16 * k); d[o + 3] = 255; } n += iters; bctx.putImageData(img, 0, 0); ctx.imageSmoothingEnabled = false; ctx.drawImage(buf, 0, 0, canvas.width, canvas.height); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame() { resize(); step(); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); step(); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
25. Martin · 1986
Hopalong attractor
A one-line iterator that fills a CRT. Pointer nudges a.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Robinson-triangle Penrose tiling. Drag to pan." /> <link rel="canonical" href="https://3d-retro.com/experiments/penrose" /> <title>Penrose tiling · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#6ee7b7", accent: "#d2a85c", depth: 6 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [110, 231, 183]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function css(rgb, a) { return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const PHI = (1 + Math.sqrt(5)) / 2; const INV = 1 / PHI; function lerp(a, b, t) { return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]; } function subdivide(tris) { const out = []; for (let i = 0; i < tris.length; i++) { const t = tris[i]; const a = t.a, b = t.b, c = t.c; if (t.k === "A") { const p = lerp(a, b, INV); out.push({ k: "A", a: c, b: p, c: b }); out.push({ k: "O", a: p, b: c, c: a }); } else { const q = lerp(b, a, INV); out.push({ k: "O", a: q, b: c, c: a }); out.push({ k: "A", a: q, b: c, c: b }); } } return out; } function build(depth) { const seed = []; for (let i = 0; i < 5; i++) { const a0 = (i * 72 - 90) * Math.PI / 180; const a1 = ((i + 1) * 72 - 90) * Math.PI / 180; const b = [Math.cos(a0), Math.sin(a0)]; const c = [Math.cos(a1), Math.sin(a1)]; seed.push({ k: "A", a: [0, 0], b: b, c: c }); } let t = seed; const d = Math.max(3, Math.min(7, depth | 0)); for (let i = 0; i < d; i++) t = subdivide(t); return t; } let tiles = build(PARAMS.depth); let lastDepth = PARAMS.depth; let panX = 0, panY = 0, dragging = false, lastX = 0, lastY = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointerdown", function (e) { dragging = true; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { dragging = false; }); canvas.addEventListener("pointermove", function (e) { if (!dragging) return; panX += e.clientX - lastX; panY += e.clientY - lastY; lastX = e.clientX; lastY = e.clientY; }); function draw(w, h) { if (PARAMS.depth !== lastDepth) { tiles = build(PARAMS.depth); lastDepth = PARAMS.depth; } ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); const fat = hexToRgb(PARAMS.color); const thin = hexToRgb(PARAMS.accent); const s = Math.min(w, h) * 0.46; const cx = w * 0.5 + panX; const cy = h * 0.5 + panY; ctx.lineJoin = "round"; for (let i = 0; i < tiles.length; i++) { const t = tiles[i]; ctx.beginPath(); ctx.moveTo(cx + t.a[0] * s, cy + t.a[1] * s); ctx.lineTo(cx + t.b[0] * s, cy + t.b[1] * s); ctx.lineTo(cx + t.c[0] * s, cy + t.c[1] * s); ctx.closePath(); ctx.fillStyle = t.k === "A" ? css(fat, 0.55) : css(thin, 0.55); ctx.fill(); ctx.strokeStyle = css(fat, 0.35); ctx.lineWidth = 0.8; ctx.stroke(); } } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame() { resize(); draw(canvas.width, canvas.height); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(canvas.width, canvas.height); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
26. Penrose · 1974
Penrose tiling
Robinson triangles, aperiodic. Drag to pan.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A dotted Elite planet. Drag to spin." /> <link rel="canonical" href="https://3d-retro.com/experiments/elite" /> <title>Elite planet · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000000; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #000; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#c8d2dc", speed: 1, density: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [200, 210, 220]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const stars = []; for (let i = 0; i < 180; i++) { stars.push({ x: Math.random(), y: Math.random(), a: 0.25 + Math.random() * 0.7, s: 0.7 + Math.random() * 1.4 }); } let yaw = 0.6, pitch = 0.25, auto = true, dragging = false, lastX = 0, lastY = 0, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointerdown", function (e) { dragging = true; auto = false; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { dragging = false; }); canvas.addEventListener("pointermove", function (e) { if (!dragging) return; yaw += (e.clientX - lastX) * 0.008; pitch += (e.clientY - lastY) * 0.006; pitch = Math.max(-0.9, Math.min(0.9, pitch)); lastX = e.clientX; lastY = e.clientY; }); function rot(x, y, z) { const cx = Math.cos(pitch), sx = Math.sin(pitch); const cy = Math.cos(yaw), sy = Math.sin(yaw); const y2 = y * cx - z * sx; z = y * sx + z * cx; y = y2; const x2 = x * cy + z * sy; z = -x * sy + z * cy; return [x2, y, z]; } function draw(w, h) { ctx.fillStyle = "#000"; ctx.fillRect(0, 0, w, h); const rgb = hexToRgb(PARAMS.color); for (let i = 0; i < stars.length; i++) { const s = stars[i]; ctx.fillStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + s.a + ")"; ctx.fillRect(s.x * w, s.y * h, s.s, s.s); } const R = Math.min(w, h) * 0.32; const cx = w * 0.5, cy = h * 0.52; const latN = Math.max(10, (16 * PARAMS.density) | 0); const lonN = Math.max(16, (28 * PARAMS.density) | 0); for (let i = 0; i <= latN; i++) { const lat = (i / latN) * Math.PI - Math.PI / 2; const cl = Math.cos(lat), sl = Math.sin(lat); for (let j = 0; j < lonN; j++) { const lon = (j / lonN) * Math.PI * 2; const x = cl * Math.cos(lon), y = sl, z = cl * Math.sin(lon); const p = rot(x, y, z); if (p[2] < 0.04) continue; const lambert = Math.max(0.12, p[2] * 0.7 + 0.25); const size = 1.1 + p[2] * 1.1; ctx.fillStyle = "rgba(" + (rgb[0] * lambert | 0) + "," + (rgb[1] * lambert | 0) + "," + (rgb[2] * lambert | 0) + ",0.95)"; ctx.fillRect(cx + p[0] * R - size * 0.5, cy - p[1] * R - size * 0.5, size, size); } } ctx.strokeStyle = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ",0.28)"; ctx.lineWidth = 1; ctx.beginPath(); for (let k = 0; k <= 64; k++) { const a = (k / 64) * Math.PI * 2; const p = rot(Math.cos(a) * 1.35, 0.08, Math.sin(a) * 1.35); const sx = cx + p[0] * R, sy = cy - p[1] * R; if (k === 0) ctx.moveTo(sx, sy); else ctx.lineTo(sx, sy); } ctx.stroke(); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; if (auto && !reduced) yaw += dt * 0.22 * PARAMS.speed; resize(); draw(canvas.width, canvas.height); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); draw(canvas.width, canvas.height); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
27. Braben · 1984
Elite planet
A dotted sphere and a starfield. Drag to spin.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="A concentrating 3D vortex. Seekable schematic geometry, not a fluid solver." /> <link rel="canonical" href="https://3d-retro.com/experiments/vortex" /> <link rel="icon" href="data:," /> <title>Spaghetti vortex · 3d retro graphics</title> <style> * { box-sizing: border-box; } html, body { margin: 0; width: 100%; height: 100%; background: #000; color: #c8d7d0; font: 11px/1.4 ui-monospace, monospace; } body { display: grid; grid-template-rows: minmax(0, 1fr) auto; } #scene { position: relative; min-height: 0; overflow: hidden; } canvas { display: block; width: 100%; height: 100%; touch-action: none; } #readout { position: absolute; top: 10px; left: 12px; right: 12px; pointer-events: none; display: flex; flex-wrap: wrap; gap: 3px 18px; } #legend { position: absolute; bottom: 9px; left: 12px; pointer-events: none; font-size: 10px; } #ramp { display: inline-block; width: 48px; height: 3px; margin: 0 5px 2px; background: linear-gradient(90deg, #f2b45c, #6ee7b7); } footer { padding: 4px 10px 7px; background: #080d0b; border-top: 1px solid #22382d; } #controls { display: flex; align-items: center; gap: 4px 9px; flex-wrap: wrap; } button, input { font: inherit; accent-color: #6ee7b7; } button { min-height: 44px; padding: 0 9px; color: inherit; background: transparent; border: 1px solid #355144; cursor: pointer; } button:hover { background: #17271f; } :focus-visible { outline: 2px solid #f2b45c; outline-offset: 2px; } label { display: flex; align-items: center; min-height: 44px; gap: 5px; cursor: pointer; } #seek { flex: 1 1 115px; } input[type=range] { width: 100%; min-width: 40px; height: 36px; } input[type=checkbox] { width: 17px; height: 17px; margin: 0; } #note { margin: 5px 0 0; font-size: 10px; color: #9aafa3; } #fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 15px; text-align: center; background: #000; } #fallback[hidden] { display: none; } @media (max-height: 320px) { #readout { top: 4px; font-size: 9px; gap: 0 8px; } #legend { bottom: 3px; font-size: 9px; } footer { padding: 2px 6px; } #note { margin-top: 2px; font-size: 9px; } #controls { gap: 2px 5px; } button { padding: 0 5px; } } </style> </head> <body> <div id="scene"> <canvas id="c" aria-label="Three-dimensional concentrating vortex. Drag to orbit; use the approach slider to seek."></canvas> <div id="readout"><span id="time"></span><span id="zoom"></span><span id="ruler"></span></div> <div id="legend">Normalized radius · 0 <span id="ramp"></span> 1</div> <div id="fallback" role="status" hidden></div> </div> <footer> <div id="controls"> <button id="play" type="button">Pause</button> <label id="seek">Approach <input id="approach" type="range" min="0" max="12" step="0.01" value="0.6" aria-label="Approach, minus log ten of remaining time" /></label> <label><input id="follow" type="checkbox" checked /> Follow core</label> <button id="reset" type="button">Reset</button> </div> <p id="note">Illustration of the proposed blowup construction; not a numerical reproduction of the proof.</p> </footer> <script> (function () { const PARAMS = { color: "#6ee7b7", core: "#f2b45c", trail: 0.35, speed: 1 }; // Leading scales: OpenAI (2026), section 2.1. h is illustrative. // These scales do not define a velocity field or simulate its corrections. const H = 0.005, MAX_S = 12, COUNT = 960, SAMPLES = 24; function tau(s) { return Math.pow(10, -s); } function scales(s) { const t = tau(s); return { radial: Math.pow(t, 0.5), axial: Math.pow(t, 0.5 - H), speed: Math.pow(t, -0.5 - H) }; } function seed(i) { // Fixed low-discrepancy seeds: reset and reverse seeking need no RNG state. return { phase: (i * 0.61803398875) % 1, angle: (i * 2.60258057) % (2 * Math.PI), side: i % 2 ? 1 : -1 }; } function position(p, s) { const k = scales(s), cycle = p.phase + s * 0.65; const q = cycle - Math.floor(cycle); // An inward helix bends into two axial exits. Recycling is a schematic // seeding device; history segments across a recycle boundary are omitted. const r = 0.14 + 1.36 * Math.exp(-3.6 * q); const angle = p.angle + s * 6 + q * 10; return [k.radial * r * Math.cos(angle), k.axial * p.side * (0.08 + 2.1 * q * q), k.radial * r * Math.sin(angle), r / 1.5, Math.floor(cycle)]; } function rgb(hex) { const n = parseInt(hex.slice(1), 16); return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255]; } const canvas = document.getElementById("c"), fallback = document.getElementById("fallback"); const play = document.getElementById("play"), slider = document.getElementById("approach"); const follow = document.getElementById("follow"), reset = document.getElementById("reset"); const timeText = document.getElementById("time"), zoomText = document.getElementById("zoom"), ruler = document.getElementById("ruler"); document.getElementById("ramp").style.background = "linear-gradient(90deg," + PARAMS.core + "," + PARAMS.color + ")"; let gl; try { gl = canvas.getContext("webgl", { alpha: false, antialias: true }); } catch (_) { /* Fallback below. */ } function fail(message) { fallback.hidden = false; fallback.textContent = message; for (const el of [play, slider, follow, reset]) el.disabled = true; // A failed WebGL creation still allows a Canvas 2D explanation. if (!gl) { const ctx = canvas.getContext("2d"); if (ctx) { canvas.width = Math.max(1, canvas.clientWidth); canvas.height = Math.max(1, canvas.clientHeight); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#c8d7d0"; ctx.font = "12px monospace"; ctx.textAlign = "center"; ctx.fillText("WebGL unavailable", canvas.width / 2, canvas.height / 2); } } } if (!gl) { fail("WebGL is unavailable. Enable WebGL to view this illustration."); return; } const VERT = `attribute vec3 a_pos; attribute vec2 a_style; uniform mat4 u_mvp; uniform float u_zoom; uniform float u_point; varying vec2 v_style; varying float v_depth; void main() { gl_Position = u_mvp * vec4(a_pos * u_zoom, 1.0); gl_PointSize = u_point; v_style = a_style; v_depth = clamp(1.5 - gl_Position.w * 0.1, 0.25, 1.0); }`; const FRAG = `precision mediump float; uniform vec3 u_outer; uniform vec3 u_core; varying vec2 v_style; varying float v_depth; void main() { vec3 color = mix(u_core, u_outer, smoothstep(0.08, 0.85, v_style.x)); gl_FragColor = vec4(color, v_style.y * v_depth); }`; function compile(type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error("Could not compile the vortex shader."); return shader; } // Column-major orbit matrices shared with the gallery's lowpoly example. function mul(a, b) { const out = new Float32Array(16); for (let c = 0; c < 4; c++) for (let r = 0; r < 4; r++) { out[c * 4 + r] = a[r] * b[c * 4] + a[4 + r] * b[c * 4 + 1] + a[8 + r] * b[c * 4 + 2] + a[12 + r] * b[c * 4 + 3]; } return out; } function camera(aspect, pitch, yaw) { const f = 1 / Math.tan(Math.PI / 8), near = 0.1, far = 50; const proj = new Float32Array([f/aspect,0,0,0, 0,f,0,0, 0,0,(far+near)/(near-far),-1, 0,0,2*far*near/(near-far),0]); const cx = Math.cos(pitch), sx = Math.sin(pitch), cy = Math.cos(yaw), sy = Math.sin(yaw); const rx = new Float32Array([1,0,0,0, 0,cx,sx,0, 0,-sx,cx,0, 0,0,0,1]); const ry = new Float32Array([cy,0,-sy,0, 0,1,0,0, sy,0,cy,0, 0,0,0,1]); const view = new Float32Array([1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,-8.8*Math.max(1,0.8/aspect),1]); return mul(proj, mul(view, mul(rx, ry))); } let prog, buffer, loc; function setup() { prog = gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG)); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error("Could not link the vortex shader."); buffer = gl.createBuffer(); loc = {}; for (const key of ["mvp", "zoom", "point", "outer", "core"]) loc[key] = gl.getUniformLocation(prog, "u_" + key); gl.useProgram(prog); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); for (const [name, size, offset] of [["a_pos", 3, 0], ["a_style", 2, 12]]) { const at = gl.getAttribLocation(prog, name); gl.enableVertexAttribArray(at); gl.vertexAttribPointer(at, size, gl.FLOAT, false, 20, offset); } gl.uniform3fv(loc.outer, rgb(PARAMS.color)); gl.uniform3fv(loc.core, rgb(PARAMS.core)); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE); gl.clearColor(0, 0, 0, 1); } try { setup(); } catch (err) { fail(err.message); return; } const motion = matchMedia("(prefers-reduced-motion: reduce)"); let s = motion.matches ? 6 : 0.6, playing = !motion.matches, auto = !motion.matches; let yaw = 0.7, pitch = 0.34, pointer = null, lastX = 0, lastY = 0; let raf = 0, last = 0, lost = false, dirty = true; let count = COUNT, slow = 0; const seeds = Array.from({ length: COUNT }, (_, i) => seed(i)); // Bounded world-space history ring, regenerated analytically on every seek. // Fixed sample spacing makes history independent of playback frame rate. const history = new Float32Array(COUNT * SAMPLES * 5); const vertices = new Float32Array(COUNT * (SAMPLES - 1) * 2 * 5 + COUNT * 5); let lineCount = 0, vertexCount = 0; function rebuild() { const step = PARAMS.trail / (SAMPLES - 1), tick = Math.floor(s / step), head = tick % SAMPLES; let n = 0; for (let i = 0; i < count; i++) { for (let age = 0; age < SAMPLES; age++) { const slot = (head - age + SAMPLES) % SAMPLES; const t = age === 0 ? s : Math.max(0, (tick - age + 1) * step); history.set(position(seeds[i], t), (i * SAMPLES + slot) * 5); } for (let age = SAMPLES - 1; age > 0; age--) { const a = (i * SAMPLES + (head - age + SAMPLES) % SAMPLES) * 5; const b = (i * SAMPLES + (head - age + 1 + SAMPLES) % SAMPLES) * 5; if (history[a + 4] !== history[b + 4]) continue; for (const at of [a, b]) { vertices[n++] = history[at]; vertices[n++] = history[at+1]; vertices[n++] = history[at+2]; vertices[n++] = history[at+3]; vertices[n++] = 0.16 * (1 - age / SAMPLES); } } } lineCount = n / 5; for (let i = 0; i < count; i++) { const at = (i * SAMPLES + head) * 5; vertices[n++] = history[at]; vertices[n++] = history[at+1]; vertices[n++] = history[at+2]; vertices[n++] = history[at+3]; vertices[n++] = 0.65; } vertexCount = n / 5; dirty = false; } function draw() { const dpr = Math.min(devicePixelRatio || 1, 2); const w = Math.max(1, Math.round(canvas.clientWidth * dpr)), h = Math.max(1, Math.round(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } gl.viewport(0, 0, canvas.width, canvas.height); gl.clear(gl.COLOR_BUFFER_BIT); gl.uniformMatrix4fv(loc.mvp, false, camera(canvas.width / canvas.height, pitch, yaw)); const mag = follow.checked ? 1 / scales(s).radial : 1; gl.uniform1f(loc.zoom, 1); gl.uniform1f(loc.point, Math.min(2, dpr * 1.3)); // Reference ticks are in view units; the label converts back to world units. const axes = []; function line(a, b) { for (const p of [a, b]) axes.push(...p, 1, 0.13); } line([0,-2.7,0], [0,2.7,0]); for (let i = -3; i <= 3; i++) { line([i*0.5,-2.5,-1.5], [i*0.5,-2.5,1.5]); line([-1.5,-2.5,i*0.5], [1.5,-2.5,i*0.5]); } gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(axes), gl.DYNAMIC_DRAW); gl.drawArrays(gl.LINES, 0, axes.length / 5); if (dirty) rebuild(); gl.uniform1f(loc.zoom, mag); gl.bufferData(gl.ARRAY_BUFFER, vertices.subarray(0, vertexCount * 5), gl.DYNAMIC_DRAW); gl.drawArrays(gl.LINES, 0, lineCount); gl.drawArrays(gl.POINTS, lineCount, vertexCount - lineCount); timeText.textContent = "1−t/T* = " + tau(s).toExponential(2); zoomText.textContent = (follow.checked ? "FOLLOW · " : "FIXED · ") + mag.toExponential(2) + "×"; ruler.textContent = "grid Δ = " + (0.5 / mag).toExponential(1) + " initial units"; slider.value = String(s); slider.setAttribute("aria-valuetext", "s " + s.toFixed(2) + ", remaining time " + tau(s).toExponential(2)); play.textContent = s >= MAX_S ? "Replay" : playing ? "Pause" : "Play"; play.setAttribute("aria-pressed", String(playing)); } function wake() { if (!raf && !lost && !document.hidden) raf = requestAnimationFrame(frame); } function frame(now) { raf = 0; const dt = last ? Math.min((now - last) / 1000, 0.05) : 0; last = now; if (playing) { s = Math.min(MAX_S, s + dt * 0.24 * PARAMS.speed); dirty = true; if (s >= MAX_S) playing = false; } if (auto) yaw += dt * 0.09; const start = performance.now(); draw(); // Reduce geometry only after sustained expensive frames, never change seeds. slow = performance.now() - start > 24 ? slow + 1 : 0; if (slow > 45 && count > 480) { count = 480; dirty = true; slow = 0; } if (playing || auto) wake(); else last = 0; } play.addEventListener("click", function () { if (s >= MAX_S) { s = 0.6; dirty = true; } playing = !playing; last = 0; wake(); }); slider.addEventListener("input", function () { s = Math.max(0, Math.min(MAX_S, Number(slider.value))); playing = false; dirty = true; last = 0; wake(); }); follow.addEventListener("change", wake); reset.addEventListener("click", function () { s = motion.matches ? 6 : 0.6; yaw = 0.7; pitch = 0.34; count = COUNT; slow = 0; playing = !motion.matches; auto = !motion.matches; follow.checked = true; pointer = null; dirty = true; last = 0; wake(); }); canvas.addEventListener("pointerdown", function (e) { if (pointer !== null) return; pointer = e.pointerId; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointermove", function (e) { if (e.pointerId !== pointer) return; auto = false; yaw += (e.clientX - lastX) * 0.008; pitch = Math.max(-1.2, Math.min(1.2, pitch + (e.clientY - lastY) * 0.008)); lastX = e.clientX; lastY = e.clientY; wake(); }); for (const name of ["pointerup", "pointercancel", "lostpointercapture"]) canvas.addEventListener(name, function () { pointer = null; }); motion.addEventListener("change", function () { if (motion.matches) { playing = false; auto = false; } wake(); }); document.addEventListener("visibilitychange", function () { cancelAnimationFrame(raf); raf = 0; last = 0; if (!document.hidden) wake(); }); new ResizeObserver(wake).observe(document.getElementById("scene")); canvas.addEventListener("webglcontextlost", function (e) { e.preventDefault(); lost = true; cancelAnimationFrame(raf); raf = 0; fail("WebGL context lost. Waiting for the browser to restore it."); }); canvas.addEventListener("webglcontextrestored", function () { try { setup(); lost = false; dirty = true; last = 0; fallback.hidden = true; for (const el of [play, slider, follow, reset]) el.disabled = false; wake(); } catch (err) { fail(err.message); } }); wake(); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
28. Scientific visualization · 2026
Spaghetti vortex
A concentrating 3D vortex. Trails spiral in as the core slims. Illustration, not a solver.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Split Stam tank. Left is bounded. Right is the same solver with a lying legend." /> <link rel="canonical" href="https://3d-retro.com/experiments/dualtank" /> <title>Dual tank · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #0b0c0e; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#ff6a2a", accent: "#3ce0c8", horizon: 6 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [255, 106, 42]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const N = 48, ITER = 4, dim = N + 2, size = dim * dim; function ix(i, j) { return i + dim * j; } function makeTank() { function field() { return new Float32Array(size); } const tnk = { u: field(), v: field(), u0: field(), v0: field(), dens: field(), dens0: field(), p: field(), div: field() }; function setBnd(b, x) { for (let i = 1; i <= N; i++) { x[ix(0, i)] = b === 1 ? -x[ix(1, i)] : x[ix(1, i)]; x[ix(N + 1, i)] = b === 1 ? -x[ix(N, i)] : x[ix(N, i)]; x[ix(i, 0)] = b === 2 ? -x[ix(i, 1)] : x[ix(i, 1)]; x[ix(i, N + 1)] = b === 2 ? -x[ix(i, N)] : x[ix(i, N)]; } x[ix(0, 0)] = 0.5 * (x[ix(1, 0)] + x[ix(0, 1)]); x[ix(0, N + 1)] = 0.5 * (x[ix(1, N + 1)] + x[ix(0, N)]); x[ix(N + 1, 0)] = 0.5 * (x[ix(N, 0)] + x[ix(N + 1, 1)]); x[ix(N + 1, N + 1)] = 0.5 * (x[ix(N, N + 1)] + x[ix(N + 1, N)]); } function linSolve(b, x, x0, a, c) { const inv = 1 / c; for (let k = 0; k < ITER; k++) { for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { x[ix(i, j)] = (x0[ix(i, j)] + a * ( x[ix(i - 1, j)] + x[ix(i + 1, j)] + x[ix(i, j - 1)] + x[ix(i, j + 1)] )) * inv; } } setBnd(b, x); } } function diffuse(b, x, x0, diff, dt) { const a = dt * diff * N * N; linSolve(b, x, x0, a, 1 + 4 * a); } function advect(b, d, d0, uu, vv, dt) { const dt0 = dt * N; for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { let x = i - dt0 * uu[ix(i, j)]; let y = j - dt0 * vv[ix(i, j)]; if (x < 0.5) x = 0.5; if (x > N + 0.5) x = N + 0.5; if (y < 0.5) y = 0.5; if (y > N + 0.5) y = N + 0.5; const i0 = x | 0, i1 = i0 + 1; const j0 = y | 0, j1 = j0 + 1; const s1 = x - i0, s0 = 1 - s1; const t1 = y - j0, t0 = 1 - t1; d[ix(i, j)] = s0 * (t0 * d0[ix(i0, j0)] + t1 * d0[ix(i0, j1)]) + s1 * (t0 * d0[ix(i1, j0)] + t1 * d0[ix(i1, j1)]); } } setBnd(b, d); } function project(uu, vv, pp, dv) { for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { dv[ix(i, j)] = -0.5 * (uu[ix(i + 1, j)] - uu[ix(i - 1, j)] + vv[ix(i, j + 1)] - vv[ix(i, j - 1)]) / N; pp[ix(i, j)] = 0; } } setBnd(0, dv); setBnd(0, pp); linSolve(0, pp, dv, 1, 4); for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { uu[ix(i, j)] -= 0.5 * N * (pp[ix(i + 1, j)] - pp[ix(i - 1, j)]); vv[ix(i, j)] -= 0.5 * N * (pp[ix(i, j + 1)] - pp[ix(i, j - 1)]); } } setBnd(1, uu); setBnd(2, vv); } tnk.step = function (dt) { const u = tnk.u, v = tnk.v, u0 = tnk.u0, v0 = tnk.v0; diffuse(1, u0, u, 0.00012, dt); diffuse(2, v0, v, 0.00012, dt); project(u0, v0, tnk.p, tnk.div); advect(1, u, u0, u0, v0, dt); advect(2, v, v0, u0, v0, dt); project(u, v, tnk.p, tnk.div); diffuse(0, tnk.dens0, tnk.dens, 0.00008, dt); advect(0, tnk.dens, tnk.dens0, u, v, dt); for (let i = 0; i < size; i++) tnk.dens[i] *= 0.994; }; tnk.splat = function (gx, gy, dx, dy, amount) { const i = Math.max(1, Math.min(N, gx | 0)); const j = Math.max(1, Math.min(N, gy | 0)); for (let oj = -1; oj <= 1; oj++) { for (let oi = -1; oi <= 1; oi++) { const ii = i + oi, jj = j + oj; if (ii < 1 || jj < 1 || ii > N || jj > N) continue; const wgt = oi === 0 && oj === 0 ? 1 : 0.45; tnk.dens[ix(ii, jj)] += amount * wgt; tnk.u[ix(ii, jj)] += dx * wgt; tnk.v[ix(ii, jj)] += dy * wgt; } } }; tnk.swirl = function (force, dye) { const c = N * 0.5 + 1; for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { const dx = i - c, dy = j - c; const r2 = dx * dx + dy * dy; const g = Math.exp(-r2 * 0.012); tnk.u[ix(i, j)] += -dy * force * g; tnk.v[ix(i, j)] += dx * force * g; tnk.dens[ix(i, j)] += dye * g * (0.4 + 0.6 * ((i + j) & 1)); } } }; tnk.sample = function (arr, x, y) { if (x < 0.5) x = 0.5; if (x > N + 0.5) x = N + 0.5; if (y < 0.5) y = 0.5; if (y > N + 0.5) y = N + 0.5; const i0 = x | 0, i1 = i0 + 1; const j0 = y | 0, j1 = j0 + 1; const s1 = x - i0, s0 = 1 - s1; const t1 = y - j0, t0 = 1 - t1; return s0 * (t0 * arr[ix(i0, j0)] + t1 * arr[ix(i0, j1)]) + s1 * (t0 * arr[ix(i1, j0)] + t1 * arr[ix(i1, j1)]); }; return tnk; } const left = makeTank(); const right = makeTank(); left.swirl(0.35, 8); right.swirl(0.35, 8); const pixelsL = new ImageData(N, N); const pixelsR = new ImageData(N, N); const offL = document.createElement("canvas"); const offR = document.createElement("canvas"); offL.width = offR.width = N; offL.height = offR.height = N; const ctxL = offL.getContext("2d"); const ctxR = offR.getContext("2d"); if (!ctxL || !ctxR) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const pointer = { x: 0, y: 0, px: 0, py: 0, down: false, side: -1 }; let last = 0, tAbs = 0; function whichSide(e) { const rect = canvas.getBoundingClientRect(); const nx = (e.clientX - rect.left) / rect.width; const ny = (e.clientY - rect.top) / rect.height; const side = nx < 0.5 ? 0 : 1; const localX = side === 0 ? nx / 0.5 : (nx - 0.5) / 0.5; return { side: side, x: localX * N + 1, y: ny * N + 1 }; } canvas.addEventListener("pointerdown", function (e) { const g = whichSide(e); pointer.down = true; pointer.side = g.side; pointer.x = pointer.px = g.x; pointer.y = pointer.py = g.y; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener("pointerup", function () { pointer.down = false; }); canvas.addEventListener("pointerleave", function () { pointer.side = -1; }); canvas.addEventListener("pointermove", function (e) { const g = whichSide(e); pointer.px = pointer.x; pointer.py = pointer.y; pointer.x = g.x; pointer.y = g.y; if (pointer.down) pointer.side = g.side; else pointer.side = g.side; }); function strainAt(t) { const T = Math.max(2, PARAMS.horizon); const cycle = T + 0.9; const tm = t % cycle; if (tm >= T) return 1; return Math.min(22, 1 / Math.max(0.05, 1 - tm / T)); } function paintLeft() { const data = pixelsL.data; const rgb = hexToRgb(PARAMS.accent); for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { const d = left.dens[ix(i, j)]; const spd = Math.hypot(left.u[ix(i, j)], left.v[ix(i, j)]); const glow = Math.min(1, d * 0.045 + spd * 0.08); const o = ((j - 1) * N + (i - 1)) * 4; data[o] = 12 + glow * rgb[0]; data[o + 1] = 14 + glow * rgb[1]; data[o + 2] = 16 + glow * rgb[2]; data[o + 3] = 255; } } ctxL.putImageData(pixelsL, 0, 0); } function paintRight(strain) { const data = pixelsR.data; const hot = hexToRgb(PARAMS.color); const cool = hexToRgb(PARAMS.accent); const c = N * 0.5 + 1; for (let j = 1; j <= N; j++) { for (let i = 1; i <= N; i++) { const dx = i - c, dy = j - c; const r = Math.hypot(dx, dy) + 0.001; const th = Math.atan2(dy, dx); const r0 = r * (1 + (strain - 1) * 0.62); const th0 = th - Math.log(r + 1) * (strain - 1) * 0.48; const x0 = c + r0 * Math.cos(th0); const y0 = c + (r0 * Math.sin(th0)) / (1 + (strain - 1) * 1.15); const d = right.sample(right.dens, x0, y0); const uu = right.sample(right.u, x0, y0); const vv = right.sample(right.v, x0, y0); const spd = Math.hypot(uu, vv) * strain; const heat = Math.min(1, (strain - 1) * 0.08 + spd * 0.07); const k = Math.min(1, d * 0.05 + spd * 0.04); const o = ((j - 1) * N + (i - 1)) * 4; data[o] = 10 + k * (cool[0] + (hot[0] - cool[0]) * heat); data[o + 1] = 12 + k * (cool[1] + (hot[1] - cool[1]) * heat); data[o + 2] = 14 + k * (cool[2] + (hot[2] - cool[2]) * heat); data[o + 3] = 255; } } ctxR.putImageData(pixelsR, 0, 0); } function labels(w, h, strain, t) { const T = Math.max(2, PARAMS.horizon); const tm = t % (T + 0.9); ctx.save(); ctx.font = Math.max(10, (h * 0.028) | 0) + "px ui-monospace, 'IBM Plex Mono', monospace"; ctx.textBaseline = "top"; ctx.fillStyle = "rgba(11,12,14,0.55)"; ctx.fillRect(6, 6, w * 0.28, h * 0.13); ctx.fillRect(w * 0.5 + 6, 6, w * 0.42, h * 0.16); ctx.fillStyle = "#c8d2dc"; ctx.fillText("BOUNDED", 12, 10); ctx.fillText("same Stam 48×48", 12, 10 + h * 0.045); ctx.fillStyle = "#ff6a2a"; ctx.fillText("DISPLAY STRAIN", w * 0.5 + 12, 10); ctx.fillStyle = "#c8d2dc"; ctx.fillText("t → T* scale 1/(T*−t)", w * 0.5 + 12, 10 + h * 0.045); ctx.fillText("×" + strain.toFixed(1) + (tm >= T ? " reset" : ""), w * 0.5 + 12, 10 + h * 0.09); ctx.restore(); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.033, last ? (now - last) * 0.001 : 0.016); last = now; tAbs += dt; const strain = strainAt(tAbs); if (!reduced) { left.swirl(0.018, 0.35); right.swirl(0.018, 0.35); } if (pointer.side === 0 || (pointer.down && pointer.side === 0)) { const dx = (pointer.x - pointer.px) * 12; const dy = (pointer.y - pointer.py) * 12; left.splat(pointer.x, pointer.y, dx, dy, pointer.down ? 90 : 22); } if (pointer.side === 1 || (pointer.down && pointer.side === 1)) { const dx = (pointer.x - pointer.px) * 12; const dy = (pointer.y - pointer.py) * 12; right.splat(pointer.x, pointer.y, dx, dy, pointer.down ? 90 : 22); } pointer.px = pointer.x; pointer.py = pointer.y; if (!reduced) { left.step(dt); right.step(dt); } paintLeft(); paintRight(strain); resize(); const w = canvas.width, h = canvas.height; const gap = Math.max(2, (w * 0.006) | 0); const hw = (w - gap) >> 1; ctx.imageSmoothingEnabled = false; ctx.fillStyle = "#0b0c0e"; ctx.fillRect(0, 0, w, h); ctx.drawImage(offL, 0, 0, hw, h); ctx.drawImage(offR, hw + gap, 0, w - hw - gap, h); ctx.fillStyle = "#4a5560"; ctx.fillRect(hw, 0, gap, h); labels(w, h, strain, tAbs); if (!reduced) requestAnimationFrame(frame); } if (reduced) { left.step(0.016); right.step(0.016); frame(performance.now()); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
29. Stam · 1999 / 2026
Dual tank
Same 48×48 Stam twice. Left is bounded. Right is a lying legend.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Inward spiral, axial stretch. A hopalong cousin with no fluid solver." /> <link rel="canonical" href="https://3d-retro.com/experiments/spiralstretch" /> <title>Spiral stretch · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #07060a; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #07060a; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#ff6a2a", accent: "#3ce0c8", shrink: 0.992 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [255, 106, 42]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const BW = 420, BH = 240; const buf = document.createElement("canvas"); buf.width = BW; buf.height = BH; const bctx = buf.getContext("2d"); const img = bctx.createImageData(BW, BH); const d = img.data; bctx.fillStyle = "#07060a"; bctx.fillRect(0, 0, BW, BH); d.set(bctx.getImageData(0, 0, BW, BH).data); const N = 64; const pts = []; function seed() { pts.length = 0; for (let i = 0; i < N; i++) { const th = (i / N) * Math.PI * 2; const r = 1.05 + (i % 7) * 0.04; pts.push({ r: r, th: th, z: (i % 5) * 0.02 }); } } seed(); let look = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointermove", function (ev) { const rec = canvas.getBoundingClientRect(); look = (ev.clientX - rec.left) / rec.width - 0.5; }); function fade() { for (let i = 0; i < d.length; i += 4) { d[i] *= 0.965; d[i + 1] *= 0.965; d[i + 2] *= 0.965; } } function plot(px, py, k, hot, cool) { const x = px | 0, y = py | 0; if (x < 0 || y < 0 || x >= BW || y >= BH) return; const o = (y * BW + x) * 4; const r = cool[0] + (hot[0] - cool[0]) * k; const g = cool[1] + (hot[1] - cool[1]) * k; const b = cool[2] + (hot[2] - cool[2]) * k; d[o] = Math.min(255, d[o] + r * 0.22); d[o + 1] = Math.min(255, d[o + 1] + g * 0.22); d[o + 2] = Math.min(255, d[o + 2] + b * 0.22); d[o + 3] = 255; } function step() { fade(); const hot = hexToRgb(PARAMS.color); const cool = hexToRgb(PARAMS.accent); const shrink = Math.min(0.999, Math.max(0.96, PARAMS.shrink + look * 0.012)); const cx = BW * 0.5, cy = BH * 0.62; const s = Math.min(BW, BH) * 0.28; const inner = 4; for (let k = 0; k < inner; k++) { for (let i = 0; i < pts.length; i++) { const p = pts[i]; p.th += 0.19; p.r *= shrink; p.z += 0.085 / (p.r + 0.04); if (p.r < 0.03 || p.z > 14) { p.r = 1.08 + (i % 7) * 0.05; p.th = (i / N) * Math.PI * 2 + p.z; p.z = 0; } const x = p.r * Math.cos(p.th); const y = p.r * Math.sin(p.th); const px = cx + x * s; const py = cy - (y * 0.32 + p.z * 0.085) * s; const heat = Math.min(1, p.z / 8); plot(px, py, heat, hot, cool); plot(px + 1, py, heat * 0.5, hot, cool); } } bctx.putImageData(img, 0, 0); ctx.imageSmoothingEnabled = false; ctx.drawImage(buf, 0, 0, canvas.width, canvas.height); ctx.font = Math.max(10, (canvas.height * 0.03) | 0) + "px ui-monospace, 'IBM Plex Mono', monospace"; ctx.fillStyle = "rgba(7,6,10,0.5)"; ctx.fillRect(6, 6, canvas.width * 0.46, canvas.height * 0.1); ctx.fillStyle = "#c8d2dc"; ctx.textBaseline = "top"; ctx.fillText("r shrinks z grows", 12, 10); ctx.fillText("inward spiral + axial stretch", 12, 10 + canvas.height * 0.04); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame() { resize(); step(); if (!reduced) requestAnimationFrame(frame); } if (reduced) { for (let i = 0; i < 80; i++) step(); resize(); ctx.drawImage(buf, 0, 0, canvas.width, canvas.height); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
30. Martin · 1986 / 2026
Spiral stretch
A hopalong cousin: radius shrinks, z grows. Pointer detunes the shrink.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Inviscid Burgers. Characteristics cross at a predicted T*. The classical solution ends." /> <link rel="canonical" href="https://3d-retro.com/experiments/burgers" /> <title>Burgers shock · 3d retro graphics</title> <style> html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #07060a; color: #e8e6e1; position: absolute; inset: 0; } canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; font: 14px/1.5 ui-monospace, "IBM Plex Mono", monospace; text-align: center; color: #e8e6e1; background: #07060a; } .fallback[hidden] { display: none; } </style> </head> <body> <canvas id="c"></canvas> <div id="fallback" class="fallback" hidden></div> <script> (function () { const PARAMS = { color: "#ff6a2a", amp: 1, speed: 1 }; function hexToRgb(hex) { const n = parseInt(String(hex).replace("#", ""), 16); if (isNaN(n)) return [255, 106, 42]; return [n >> 16 & 255, n >> 8 & 255, n & 255]; } function css(rgb, a) { return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; } const canvas = document.getElementById("c"); const fallback = document.getElementById("fallback"); const ctx = canvas.getContext("2d"); if (!ctx) { fallback.hidden = false; fallback.textContent = "Canvas 2D is not available in this browser."; return; } const N = 280; const PI = Math.PI; let phase = 0, look = 0, tClock = 0, last = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; canvas.addEventListener("pointermove", function (ev) { const r = canvas.getBoundingClientRect(); look = (ev.clientX - r.left) / r.width - 0.5; }); function u0(xi, amp) { return -amp * Math.sin(xi + phase); } function du0(xi, amp) { return -amp * Math.cos(xi + phase); } // Left/right states of the stationary entropy shock: η = (t amp) sin(η). function entropyShockU(t, amp) { const lambda = t * amp; if (lambda <= 1) return 0; let lo = 1e-8, hi = Math.PI - 1e-8; for (let k = 0; k < 20; k++) { const mid = 0.5 * (lo + hi); if (mid > lambda * Math.sin(mid)) hi = mid; else lo = mid; } return amp * Math.sin(0.5 * (lo + hi)); } function mapX(x, box) { return box.x + ((x + PI) / (2 * PI)) * box.w; } function mapU(u, amp, box) { const m = amp * 1.25; return box.y + box.h * 0.5 - (u / m) * (box.h * 0.5); } function drawProfile(box, t, Tstar, amp, rgb) { ctx.save(); ctx.beginPath(); ctx.rect(box.x, box.y, box.w, box.h); ctx.clip(); ctx.fillStyle = "#0b0c0e"; ctx.fillRect(box.x, box.y, box.w, box.h); ctx.strokeStyle = "rgba(200,210,220,0.18)"; ctx.lineWidth = 1; ctx.beginPath(); const u0y = mapU(0, amp, box); ctx.moveTo(box.x, u0y); ctx.lineTo(box.x + box.w, u0y); ctx.stroke(); const broken = t > Tstar + 1e-4; ctx.beginPath(); for (let i = 0; i <= N; i++) { const xi = -PI + (2 * PI * i) / N; const u = u0(xi, amp); const x = xi + t * u; const px = mapX(x, box); const py = mapU(u, amp, box); if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py); } ctx.strokeStyle = css(rgb, broken ? 0.35 : 0.95); ctx.lineWidth = broken ? 1.2 : 2; ctx.stroke(); if (broken) { const xs = mapX(0 - phase, box); const us = entropyShockU(t, amp); const ulo = mapU(us, amp, box); const uhi = mapU(-us, amp, box); ctx.strokeStyle = css(rgb, 0.95); ctx.lineWidth = 2.4; ctx.beginPath(); ctx.moveTo(xs, ulo); ctx.lineTo(xs, uhi); ctx.stroke(); ctx.fillStyle = css(rgb, 0.9); ctx.font = Math.max(10, (box.h * 0.06) | 0) + "px ui-monospace, monospace"; ctx.fillText("shock (entropy)", xs + 8, box.y + 14); } ctx.restore(); } function drawSpaceTime(box, t, Tstar, amp, rgb, tMax) { ctx.save(); ctx.beginPath(); ctx.rect(box.x, box.y, box.w, box.h); ctx.clip(); ctx.fillStyle = "#0b0c0e"; ctx.fillRect(box.x, box.y, box.w, box.h); function mx(x) { return box.x + ((x + PI) / (2 * PI)) * box.w; } function my(tt) { return box.y + box.h - (tt / tMax) * box.h; } ctx.strokeStyle = "rgba(200,210,220,0.22)"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(box.x, my(Tstar)); ctx.lineTo(box.x + box.w, my(Tstar)); ctx.stroke(); ctx.strokeStyle = css(rgb, 0.35); ctx.lineWidth = 1; const nChar = 22; for (let i = 0; i <= nChar; i++) { const xi = -PI + (2 * PI * i) / nChar; const u = u0(xi, amp); ctx.beginPath(); ctx.moveTo(mx(xi), my(0)); ctx.lineTo(mx(xi + tMax * u), my(tMax)); ctx.stroke(); } ctx.strokeStyle = css(rgb, 0.95); ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(box.x, my(t)); ctx.lineTo(box.x + box.w, my(t)); ctx.stroke(); ctx.restore(); } function hud(w, h, t, Tstar, amp, rgb) { const remain = Math.max(0, Tstar - t); const slope = remain < 1e-4 ? Infinity : 1 / remain; const fs = Math.max(11, (h * 0.028) | 0); ctx.font = fs + "px ui-monospace, 'IBM Plex Mono', monospace"; ctx.textBaseline = "top"; ctx.fillStyle = "rgba(7,6,10,0.55)"; ctx.fillRect(8, 8, w * 0.52, fs * 4.4); ctx.fillStyle = "#c8d2dc"; ctx.fillText("u_t + u u_x = 0", 14, 12); ctx.fillText("T* = 1/amp = " + Tstar.toFixed(2), 14, 12 + fs * 1.15); ctx.fillStyle = css(rgb, 1); const slopeTxt = !isFinite(slope) ? "∞ classical ends" : "‖∂x u‖∞ = " + slope.toFixed(2); ctx.fillText(slopeTxt, 14, 12 + fs * 2.3); } function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } } function frame(now) { const dt = Math.min(0.05, last ? (now - last) * 0.001 : 0.016); last = now; phase = look * PI; const amp = Math.max(0.2, PARAMS.amp); const Tstar = 1 / amp; if (!reduced) tClock += dt * 0.42 * PARAMS.speed; const cycle = Tstar * 1.35; const t = reduced ? Tstar * 0.82 : tClock % cycle; resize(); const w = canvas.width, h = canvas.height; ctx.fillStyle = "#07060a"; ctx.fillRect(0, 0, w, h); const rgb = hexToRgb(PARAMS.color); const pad = 10; const hudH = h * 0.16; const stH = h * 0.28; const prof = { x: pad, y: hudH, w: w - pad * 2, h: h - hudH - stH - pad * 2 }; const st = { x: pad, y: h - stH - pad, w: w - pad * 2, h: stH }; hud(w, h, t, Tstar, amp, rgb); drawProfile(prof, t, Tstar, amp, rgb); drawSpaceTime(st, t, Tstar, amp, rgb, cycle); const fs = Math.max(10, (h * 0.022) | 0); ctx.font = fs + "px ui-monospace, monospace"; ctx.fillStyle = "rgba(200,210,220,0.7)"; ctx.textBaseline = "bottom"; ctx.fillText("x–t characteristics cross at T*", st.x + 6, st.y - 4); if (!reduced) requestAnimationFrame(frame); } if (reduced) { resize(); frame(0); } else requestAnimationFrame(frame); })(); </script> </body> </html> " class="absolute inset-0 size-full border-0 bg-foreground pointer-events-none">
31. Hopf · 1950
Burgers shock
Inviscid Burgers. Characteristics cross at a predicted T*.

For agents

The catalog is at /llms.txt and /api/v1/experiments. Source HTML is at /examples/{slug}.html, licensed CC0 1.0.

llms.txt · JSON API · OpenAPI

Show HN：一个 CC0 博物馆，收录了可直接粘贴到网页中的复古 3D 特效 Show HN: A CC0 museum of retro 3D tricks you can paste into a page

3d retro graphics

Experiments

For agents

Show HN：一个 CC0 博物馆，收录了可直接粘贴到网页中的复古 3D 特效
Show HN: A CC0 museum of retro 3D tricks you can paste into a page