import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; export const xr = ['vr', 'ar']; export default function sketch(ctx) { const { scene, camera, renderer, gui, size, pointer, textures, sfx, canvas } = ctx; const XR = ctx.xr || null; const DEG = Math.PI / 180, TAU = Math.PI * 2; const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v)); const smooth = (a, b, x) => { const t = clamp((x - a) / (b - a)); return t * t * (3 - 2 * t); }; const S = { hiss: 'sfx_w6V8jwRK48HU', city: 'sfx_kZB3DEDgMnY5', click: 'sfx_Bw3EUaN6kUMX', rattle: 'sfx_IBfeUEIP8Udm' }; const T = { brick: 'tex_Fv8Zb9yLxsyo', concrete: 'tex_uppJr6rbwkk6', pave: 'tex_lm4BvSD1S3IC', stucco: 'tex_7B5ipGqO3NBe', gravel: 'tex_ybcPDtMtNTNt', tiles: 'tex_TxBwC8JLNFl7', asphalt: 'tex_pqGrLQorHfbi', }; const ACCENT = '#ff5a36', MINT = '#3df2c0'; const SWATCHES = ['#f4f1ea', '#141414', '#ff3b30', '#ff8a00', '#ffd400', '#7ed957', '#00b87a', '#00c2ff', '#2f5bff', '#8a3ffc', '#ff4fa3', '#8b5a2b']; const CAPS = [ { name: 'FINE', base: 0.0025, ang: 2.2, hard: 0.8, speck: 0.25, rate: 1.15 }, { name: 'MEDIUM', base: 0.006, ang: 5.5, hard: 0.55, speck: 0.5, rate: 1.0 }, { name: 'FAT', base: 0.012, ang: 12, hard: 0.3, speck: 0.9, rate: 0.85 }, ]; const ENV_NAMES = ['Courtyard', 'Rooftop', 'Underpass']; const ENV_SHORT = { Courtyard: 'YARD', Rooftop: 'ROOF', Underpass: 'TUNNEL' }; const MAX_RANGE = 1.0; const params = { color: '#ff3b30', cap: 'MEDIUM', size: 1, flow: 0.8, opacity: 1, preview: true, leftHanded: false, distance: 0.3, volume: 0.8, wall: 'Courtyard', undo: () => undo(), redo: () => redo(), clear: () => pressClear(), }; const capIndex = () => Math.max(0, CAPS.findIndex((c) => c.name === params.cap)); // ---------- colour helpers ---------- const hexRgb = (h) => { const n = parseInt(h.slice(1), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; }; const rgbHex = (r, g, b) => '#' + [r, g, b].map((x) => clamp(Math.round(x), 0, 255).toString(16).padStart(2, '0')).join(''); function hsv2rgb(h, s, v) { const f = (n) => { const k = (n + h * 6) % 6; return v - v * s * Math.max(0, Math.min(k, 4 - k, 1)); }; return [f(5) * 255, f(3) * 255, f(1) * 255]; } function rgb2hsv(r, g, b) { r /= 255; g /= 255; b /= 255; const mx = Math.max(r, g, b), mn = Math.min(r, g, b), d = mx - mn; let h = 0; if (d > 0) { if (mx === r) h = ((g - b) / d) % 6; else if (mx === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; h /= 6; if (h < 0) h += 1; } return { h, s: mx > 0 ? d / mx : 0, v: mx }; } const hsv = rgb2hsv(...hexRgb(params.color)); function setHSVfromHex(hex) { const c = rgb2hsv(...hexRgb(hex)); if (c.s > 0.001) hsv.h = c.h; hsv.s = c.s; hsv.v = c.v; } function applyHSV() { params.color = rgbHex(...hsv2rgb(hsv.h, hsv.s, hsv.v)); onColor(); } // ---------- renderer / env ---------- renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.05; const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; scene.environmentIntensity = 0.22; const bgColor = new THREE.Color('#0b0f1d'); const fogObj = new THREE.Fog('#0b0f1d', 16, 60); scene.background = bgColor; scene.fog = fogObj; canvas.style.touchAction = 'none'; canvas.style.cursor = 'crosshair'; const backdrop = (XR && XR.backdrop) || scene; // sky dome const skyGeo = new THREE.SphereGeometry(90, 32, 16); const skyCols = new Float32Array(skyGeo.attributes.position.count * 3); skyGeo.setAttribute('color', new THREE.BufferAttribute(skyCols, 3)); backdrop.add(new THREE.Mesh(skyGeo, new THREE.MeshBasicMaterial({ vertexColors: true, side: THREE.BackSide, fog: false, depthWrite: false }))); function setSky(h, t) { const hor = new THREE.Color(h), top = new THREE.Color(t), c = new THREE.Color(), pos = skyGeo.attributes.position; for (let i = 0; i < pos.count; i++) { const k = clamp(pos.getY(i) / 90 * 1.7 + 0.1); c.copy(hor).lerp(top, k); skyCols[i * 3] = c.r; skyCols[i * 3 + 1] = c.g; skyCols[i * 3 + 2] = c.b; } skyGeo.attributes.color.needsUpdate = true; } // ---------- shared builders ---------- function tiled(id, rx, ry) { const t = textures.get(id).clone(); t.wrapS = t.wrapT = THREE.RepeatWrapping; t.repeat.set(rx, ry); t.colorSpace = THREE.SRGBColorSpace; t.anisotropy = 8; t.needsUpdate = true; return t; } const addBox = (parent, w, h, d, mat, x, y, z) => { const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), mat); m.position.set(x, y, z); parent.add(m); return m; }; const pipeMat = new THREE.MeshStandardMaterial({ color: '#5d4a3c', metalness: 0.45, roughness: 0.45 }); const bracketMat = new THREE.MeshStandardMaterial({ color: '#2b2b2e', metalness: 0.5, roughness: 0.5 }); const bulbMat = new THREE.MeshBasicMaterial({ color: new THREE.Color('#ffd9a0').multiplyScalar(6) }); const hoodMat = new THREE.MeshStandardMaterial({ color: '#1d1d20', metalness: 0.6, roughness: 0.4, side: THREE.DoubleSide }); const woodMat = new THREE.MeshStandardMaterial({ color: '#6b4a2e', roughness: 0.85 }); function wallLamps(g, xs, y, color = '#ffb36b', power = 32) { xs.forEach((x) => { addBox(g, 0.04, 0.04, 0.5, bracketMat, x, y + 0.05, 0.17); const hood = new THREE.Mesh(new THREE.CylinderGeometry(0.06, 0.17, 0.12, 20, 1, true), hoodMat); hood.position.set(x, y, 0.42); g.add(hood); const bulb = new THREE.Mesh(new THREE.SphereGeometry(0.05, 12, 8), bulbMat); bulb.position.set(x, y - 0.06, 0.42); g.add(bulb); const sp = new THREE.SpotLight(color, power, 10, 0.85, 0.65, 2); sp.position.set(x, y - 0.1, 0.45); sp.target.position.set(x, 1.3, 0); g.add(sp, sp.target); }); } function sprayCans(g, x, z) { ['#ff3b30', '#ffd400', '#00c2ff', '#141414'].forEach((c, i) => { const m = new THREE.Mesh(new THREE.CylinderGeometry(0.033, 0.033, 0.2, 14), new THREE.MeshStandardMaterial({ color: c, metalness: 0.4, roughness: 0.4 })); m.position.set(x + i * 0.09, 0.1, z + (i % 2) * 0.08); g.add(m); }); } // lit-window facade texture, shared by every skyline const cityMat = (() => { let seed = 7; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647; const wc = document.createElement('canvas'); wc.width = 128; wc.height = 256; const wg = wc.getContext('2d'); wg.fillStyle = '#000'; wg.fillRect(0, 0, 128, 256); for (let r = 0; r < 32; r++) for (let c = 0; c < 8; c++) if (rnd() < 0.28) { wg.fillStyle = rnd() < 0.75 ? `rgba(255,${190 + rnd() * 40 | 0},${120 + rnd() * 60 | 0},${0.5 + rnd() * 0.5})` : 'rgba(150,190,255,0.6)'; wg.fillRect(c * 16 + 4, r * 8 + 2, 8, 4); } const wt = new THREE.CanvasTexture(wc); wt.colorSpace = THREE.SRGBColorSpace; return new THREE.MeshStandardMaterial({ color: '#0f121b', emissive: '#ffffff', emissiveMap: wt, emissiveIntensity: 0.8, roughness: 1 }); })(); function city(g, seed, N, placer) { let s = seed; const rnd = () => (s = (s * 16807) % 2147483647) / 2147483647; const im = new THREE.InstancedMesh(new THREE.BoxGeometry(1, 1, 1), cityMat, N), dm = new THREE.Object3D(); for (let i = 0; i < N; i++) { const [x, z, h, w, d, by] = placer(rnd, i); dm.position.set(x, by + h / 2, z); dm.scale.set(w, h, d); dm.updateMatrix(); im.setMatrixAt(i, dm.matrix); } g.add(im); } // ---------- environment: courtyard ---------- function buildCourtyard() { const g = new THREE.Group(); const brickFront = new THREE.MeshStandardMaterial({ map: tiled(T.brick, 16, 6.7), color: '#c9b4a6', roughness: 0.92 }); const brickSide = new THREE.MeshStandardMaterial({ map: tiled(T.brick, 11.8, 6.7), color: '#c9b4a6', roughness: 0.92 }); addBox(g, 14.6, 6, 0.3, brickFront, 0, 3, -0.23); addBox(g, 0.3, 6, 10.8, brickSide, -7.15, 3, 5.15); addBox(g, 0.3, 6, 10.8, brickSide, 7.15, 3, 5.15); addBox(g, 14.6, 6, 0.3, brickFront, 0, 3, 10.55); const concreteMat = new THREE.MeshStandardMaterial({ map: tiled(T.concrete, 3.6, 1.85), color: '#ffffff', roughness: 0.86 }); addBox(g, 7.2, 3.7, 0.12, concreteMat, 0, 1.85, -0.06); addBox(g, 7.4, 0.08, 0.2, new THREE.MeshStandardMaterial({ color: '#7d7a74', roughness: 0.8 }), 0, 3.74, -0.02); const floor = new THREE.Mesh(new THREE.PlaneGeometry(14.6, 10.8), new THREE.MeshStandardMaterial({ map: tiled(T.pave, 12, 9), color: '#b9b4ae', roughness: 0.72 })); floor.rotation.x = -Math.PI / 2; floor.position.set(0, 0, 5.15); g.add(floor); [[-4.1, 0.055], [4.35, 0.05], [-4.35, 0.025]].forEach(([x, r]) => { const p = new THREE.Mesh(new THREE.CylinderGeometry(r, r, 6, 16), pipeMat); p.position.set(x, 3, -0.08 + r + 0.03); g.add(p); for (let y = 0.8; y < 6; y += 1.5) addBox(g, r * 2.6, 0.04, 0.08, bracketMat, x, y, -0.06); }); { const hp = new THREE.Mesh(new THREE.CylinderGeometry(0.045, 0.045, 14.4, 16), pipeMat); hp.rotation.z = Math.PI / 2; hp.position.set(0, 4.6, -0.02); g.add(hp); } wallLamps(g, [-2.4, 0, 2.4], 4.2); g.add(new THREE.HemisphereLight('#6d7fb0', '#3a2a20', 1.2)); const fill = new THREE.PointLight('#ff9a52', 7, 0, 2); fill.position.set(0, 2.6, 5); g.add(fill); const moon = new THREE.DirectionalLight('#8fa6ff', 0.35); moon.position.set(-5, 10, 8); g.add(moon); // string lights const strands = [[[-7, 4.9, 2.5], [7, 4.9, 4.0], 0.6], [[-7, 5.1, 6.6], [7, 5.1, 5.4], 0.7]]; const bulbs = new THREE.InstancedMesh(new THREE.SphereGeometry(0.035, 8, 6), new THREE.MeshBasicMaterial({ color: new THREE.Color('#ffcf8a').multiplyScalar(5) }), 60); const dm = new THREE.Object3D(); let bi = 0; strands.forEach(([a, b, sag]) => { const pts = []; for (let i = 0; i <= 60; i++) { const t = i / 60; const p = new THREE.Vector3(a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t - sag * 4 * t * (1 - t), a[2] + (b[2] - a[2]) * t); pts.push(p); if (i % 2 === 0 && i > 0 && i < 60 && bi < 60) { dm.position.copy(p).y -= 0.04; dm.updateMatrix(); bulbs.setMatrixAt(bi++, dm.matrix); } } g.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints(pts), new THREE.LineBasicMaterial({ color: '#141414' }))); }); bulbs.count = bi; g.add(bulbs); // neon sign const nc = document.createElement('canvas'); nc.width = 1024; nc.height = 384; const ng = nc.getContext('2d'); ng.textAlign = 'center'; ng.textBaseline = 'middle'; for (let k = 0; k < 2; k++) { ng.font = '900 190px system-ui, sans-serif'; ng.shadowColor = '#ff3d8b'; ng.shadowBlur = 34; ng.fillStyle = '#ffd1e4'; ng.fillText('VYBE.ART', 512, 150); ng.font = '700 70px system-ui, sans-serif'; ng.shadowColor = MINT; ng.fillStyle = '#d4fff3'; ng.fillText('SPRAY LAB', 512, 300); } const nt = new THREE.CanvasTexture(nc); nt.colorSpace = THREE.SRGBColorSpace; const sign = new THREE.Mesh(new THREE.PlaneGeometry(2.6, 0.975), new THREE.MeshBasicMaterial({ map: nt, transparent: true, depthWrite: false, color: new THREE.Color(2.4, 2.4, 2.4) })); sign.position.set(6.98, 3.4, 4.6); sign.rotation.y = -Math.PI / 2; g.add(sign); const pl = new THREE.PointLight('#ff3d8b', 5, 0, 2); pl.position.set(6.4, 3.4, 4.6); g.add(pl); // props addBox(g, 0.6, 0.6, 0.6, woodMat, -6.3, 0.3, 7.6); addBox(g, 0.45, 0.45, 0.45, woodMat, -6.25, 0.825, 7.5).rotation.y = 0.4; { const b = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.9, 20), new THREE.MeshStandardMaterial({ color: '#2f4f5f', metalness: 0.3, roughness: 0.5 })); b.position.set(6.2, 0.45, 8.2); g.add(b); } sprayCans(g, -4.75, 0.3); city(g, 7, 28, (rnd, i) => { const side = i % 4; let x, z; if (side === 0) { x = -24 + rnd() * 48; z = -6 - rnd() * 16; } else if (side === 1) { x = -10 - rnd() * 14; z = -4 + rnd() * 26; } else if (side === 2) { x = 10 + rnd() * 14; z = -4 + rnd() * 26; } else { x = -24 + rnd() * 48; z = 14 + rnd() * 14; } return [x, z, 9 + rnd() * 20, 4 + rnd() * 6, 4 + rnd() * 6, 0]; }); return { group: g, bg: '#0b0f1d', fog: [16, 60], sky: ['#2a1c28', '#04060d'], bounds: [-6.4, 6.4, 0.25, 9.8], exposure: 1.05, deskHide: [], tick: null }; } // ---------- environment: rooftop ---------- function buildRooftop() { const g = new THREE.Group(); const stuccoMat = new THREE.MeshStandardMaterial({ map: tiled(T.stucco, 3, 1.6), color: '#e2dbd0', roughness: 0.95 }); const bulkMat = new THREE.MeshStandardMaterial({ map: tiled(T.stucco, 4, 2), color: '#8f8a86', roughness: 0.95 }); const parMat = new THREE.MeshStandardMaterial({ map: tiled(T.concrete, 8, 0.6), color: '#9b958e', roughness: 0.9 }); const copeMat = new THREE.MeshStandardMaterial({ color: '#b5afa6', roughness: 0.8 }); addBox(g, 7.4, 3.9, 0.12, stuccoMat, 0, 1.95, -0.06); addBox(g, 8.6, 4.3, 3, bulkMat, 0, 2.15, -1.65); addBox(g, 8.8, 0.15, 3.2, copeMat, 0, 4.37, -1.65); const floor = new THREE.Mesh(new THREE.PlaneGeometry(15.4, 14.4), new THREE.MeshStandardMaterial({ map: tiled(T.gravel, 10, 9), color: '#a7a4a3', roughness: 1 })); floor.rotation.x = -Math.PI / 2; floor.position.set(0, 0, 3.5); g.add(floor); addBox(g, 15.6, 1.05, 0.3, parMat, 0, 0.525, 10.6); addBox(g, 15.8, 0.08, 0.42, copeMat, 0, 1.09, 10.6); addBox(g, 15.6, 1.05, 0.3, parMat, 0, 0.525, -3.6); addBox(g, 15.8, 0.08, 0.42, copeMat, 0, 1.09, -3.6); addBox(g, 0.3, 1.05, 14.2, parMat, -7.7, 0.525, 3.5); addBox(g, 0.42, 0.08, 14.4, copeMat, -7.7, 1.09, 3.5); addBox(g, 0.3, 1.05, 14.2, parMat, 7.7, 0.525, 3.5); addBox(g, 0.42, 0.08, 14.4, copeMat, 7.7, 1.09, 3.5); // water tank on stilts const tankMat = new THREE.MeshStandardMaterial({ color: '#5b4330', roughness: 0.85 }); const tank = new THREE.Mesh(new THREE.CylinderGeometry(0.9, 0.9, 1.7, 24), tankMat); tank.position.set(5.6, 2.75, -2.2); g.add(tank); const roofC = new THREE.Mesh(new THREE.ConeGeometry(0.98, 0.55, 24), new THREE.MeshStandardMaterial({ color: '#2d2522', roughness: 0.8 })); roofC.position.set(5.6, 3.88, -2.2); g.add(roofC); [[-0.6, -0.6], [0.6, -0.6], [-0.6, 0.6], [0.6, 0.6]].forEach(([dx, dz]) => addBox(g, 0.08, 1.9, 0.08, bracketMat, 5.6 + dx, 0.95, -2.2 + dz)); // AC units const acMat = new THREE.MeshStandardMaterial({ color: '#c8cacc', metalness: 0.5, roughness: 0.5 }); [5.2, 6.6].forEach((z) => { addBox(g, 1.0, 0.8, 0.9, acMat, -6.2, 0.4, z); const fan = new THREE.Mesh(new THREE.CylinderGeometry(0.33, 0.33, 0.02, 20), bracketMat); fan.position.set(-6.2, 0.81, z); g.add(fan); }); sprayCans(g, -3.8, 0.35); // antenna with a slow red beacon const ant = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.03, 2.2, 8), bracketMat); ant.position.set(3.4, 5.55, -2.6); g.add(ant); const beaconMat = new THREE.MeshBasicMaterial({ color: '#ff2a1a' }); const beacon = new THREE.Mesh(new THREE.SphereGeometry(0.05, 10, 8), beaconMat); beacon.position.set(3.4, 6.7, -2.6); g.add(beacon); wallLamps(g, [-2.2, 2.2], 4.15, '#ffb36b', 36); g.add(new THREE.HemisphereLight('#7c6ca8', '#2a2030', 1.1)); const moon = new THREE.DirectionalLight('#a8b6ff', 0.9); moon.position.set(-6, 12, 9); g.add(moon); const fill = new THREE.PointLight('#ff9a52', 4, 0, 2); fill.position.set(0, 2.4, 5.5); g.add(fill); city(g, 41, 46, (rnd) => { const a = rnd() * TAU, r = 17 + rnd() * 32; return [Math.cos(a) * r, 3 + Math.sin(a) * r, 24 + rnd() * 44, 5 + rnd() * 8, 5 + rnd() * 8, -26]; }); const tick = (t) => { const k = Math.pow(Math.max(0, Math.sin(t * 2.2)), 8); beaconMat.color.setRGB(0.25 + k * 7, 0.04 + k * 0.6, 0.02 + k * 0.3); }; return { group: g, bg: '#120e1e', fog: [26, 95], sky: ['#6a3350', '#070a1c'], bounds: [-7.1, 7.1, 0.25, 10.0], exposure: 1.1, deskHide: [], tick }; } // ---------- environment: underpass ---------- function buildUnderpass() { const g = new THREE.Group(); const tileMat = new THREE.MeshStandardMaterial({ map: tiled(T.tiles, 17, 2.9), color: '#ece6d8', roughness: 0.32 }); const ceilMat = new THREE.MeshStandardMaterial({ map: tiled(T.concrete, 10, 3), color: '#5e5c5a', roughness: 0.95 }); addBox(g, 26, 4.3, 0.3, tileMat, 0, 2.15, -0.15); const front = addBox(g, 26, 4.3, 0.3, tileMat, 0, 2.15, 7.15); addBox(g, 26, 0.3, 7.6, ceilMat, 0, 4.45, 3.5); const band = new THREE.MeshStandardMaterial({ color: '#1f5c4a', roughness: 0.35 }); addBox(g, 26, 0.18, 0.02, band, 0, 3.92, 0.01); addBox(g, 26, 0.18, 0.02, band, 0, 3.92, 6.99); addBox(g, 26, 0.22, 0.04, band, 0, 0.11, 0.02); const floor = new THREE.Mesh(new THREE.PlaneGeometry(26, 7.3), new THREE.MeshStandardMaterial({ map: tiled(T.asphalt, 14, 4), color: '#a9a6a3', roughness: 0.8 })); floor.rotation.x = -Math.PI / 2; floor.position.set(0, 0, 3.5); g.add(floor); addBox(g, 26, 0.006, 0.09, new THREE.MeshStandardMaterial({ color: '#d9a419', roughness: 0.7 }), 0, 0.004, 6.2); // ceiling pipes and cable tray { const p = new THREE.Mesh(new THREE.CylinderGeometry(0.07, 0.07, 26, 16), pipeMat); p.rotation.z = Math.PI / 2; p.position.set(0, 4.12, 6.5); g.add(p); } { const p = new THREE.Mesh(new THREE.CylinderGeometry(0.035, 0.035, 26, 12), pipeMat); p.rotation.z = Math.PI / 2; p.position.set(0, 4.18, 6.25); g.add(p); } addBox(g, 26, 0.05, 0.3, bracketMat, 0, 4.15, 2.4); // fluorescent tubes const housing = new THREE.MeshStandardMaterial({ color: '#2a2c30', metalness: 0.5, roughness: 0.5 }); const tubeMat = new THREE.MeshBasicMaterial({ color: new THREE.Color('#e6f3ff').multiplyScalar(5) }); const flickMat = new THREE.MeshBasicMaterial({ color: new THREE.Color('#e6f3ff').multiplyScalar(5) }); const tube = (x, z, mat) => { addBox(g, 1.4, 0.05, 0.14, housing, x, 4.27, z); addBox(g, 1.3, 0.035, 0.06, mat, x, 4.235, z); }; [-2.4, 0, 2.4].forEach((x) => { tube(x, 0.7, tubeMat); const sp = new THREE.SpotLight('#dcebff', 30, 10, 0.95, 0.7, 2); sp.position.set(x, 4.18, 0.75); sp.target.position.set(x, 1.3, 0); g.add(sp, sp.target); }); [-9, -4.5, 4.5].forEach((x) => tube(x, 4.0, tubeMat)); tube(9, 4.0, flickMat); [-4.5, 4.5].forEach((x) => { const p = new THREE.PointLight('#cfe0ff', 8, 0, 2); p.position.set(x, 3.9, 4.2); g.add(p); }); g.add(new THREE.HemisphereLight('#7f8fa8', '#1a1a1f', 0.55)); // glowing tunnel mouths const mouth = (x, col, ry) => { const m = new THREE.Mesh(new THREE.PlaneGeometry(7.3, 4.3), new THREE.MeshBasicMaterial({ color: new THREE.Color(col).multiplyScalar(0.9) })); m.position.set(x, 2.15, 3.5); m.rotation.y = ry; g.add(m); }; mouth(-13, '#ff9a40', Math.PI / 2); mouth(13, '#5a7cd0', -Math.PI / 2); sprayCans(g, 4.6, 0.3); addBox(g, 0.6, 0.6, 0.6, woodMat, -10.5, 0.3, 6.2); const tick = (t) => { const f = (Math.sin(t * 37) > 0.55 && Math.sin(t * 1.3) > 0.1) ? 0.12 : 1; flickMat.color.setRGB(4.6 * f, 5.1 * f, 5.5 * f); }; return { group: g, bg: '#05060a', fog: [9, 30], sky: ['#120e14', '#030407'], bounds: [-11.5, 11.5, 0.25, 6.5], exposure: 1.1, deskHide: [front], tick }; } const ENVS = { Courtyard: buildCourtyard(), Rooftop: buildRooftop(), Underpass: buildUnderpass() }; for (const k in ENVS) backdrop.add(ENVS[k].group); let env = ENVS.Courtyard; // light that stays on in AR, where the backdrop and its lamps are hidden const arLights = new THREE.Group(); arLights.add(new THREE.HemisphereLight('#ffffff', '#8a8a8a', 1.5)); { const d = new THREE.DirectionalLight('#ffffff', 1.2); d.position.set(1, 3, 2); arLights.add(d); } arLights.visible = false; scene.add(arLights); // ---------- paint surface (its own group, so it can sit on a real wall) ---------- const PW = 7, PH = 3.5, PY0 = 0.12; const wall = new THREE.Group(); scene.add(wall); const wallInv = new THREE.Matrix4(); const CW = 2048, CH = 1024, PXM = CW / PW; const mk = () => { const c = document.createElement('canvas'); c.width = CW; c.height = CH; return c; }; const mainC = mk(), strokeC = mk(), dispC = mk(); const mg = mainC.getContext('2d'), sg = strokeC.getContext('2d'), dg = dispC.getContext('2d'); const paintTex = new THREE.CanvasTexture(dispC); paintTex.colorSpace = THREE.SRGBColorSpace; paintTex.anisotropy = 8; const paintMesh = new THREE.Mesh(new THREE.PlaneGeometry(PW, PH), new THREE.MeshStandardMaterial({ map: paintTex, transparent: true, roughness: 0.55, depthWrite: false })); paintMesh.position.set(0, PY0 + PH / 2, 0.003); wall.add(paintMesh); const arFrame = new THREE.LineLoop( new THREE.BufferGeometry().setFromPoints([[-PW / 2, PY0], [PW / 2, PY0], [PW / 2, PY0 + PH], [-PW / 2, PY0 + PH]].map(([x, y]) => new THREE.Vector3(x, y, 0.004))), new THREE.LineBasicMaterial({ color: MINT, transparent: true, opacity: 0.3 })); arFrame.visible = false; wall.add(arFrame); const dotC = document.createElement('canvas'); dotC.width = dotC.height = 128; const dotG = dotC.getContext('2d'); const speckC = document.createElement('canvas'); speckC.width = speckC.height = 32; const speckG = speckC.getContext('2d'); let dotKey = ''; function rebuildDot() { const cap = CAPS[capIndex()], key = params.color + cap.name; if (key === dotKey) return; dotKey = key; const [r, g, b] = hexRgb(params.color); dotG.clearRect(0, 0, 128, 128); const grd = dotG.createRadialGradient(64, 64, 0, 64, 64, 64); for (let i = 0; i <= 10; i++) { const x = i / 10; const a = Math.pow(1 - smooth(cap.hard * 0.7, 1, x), 1.6); grd.addColorStop(x, `rgba(${r},${g},${b},${a.toFixed(3)})`); } dotG.fillStyle = grd; dotG.fillRect(0, 0, 128, 128); speckG.clearRect(0, 0, 32, 32); const sgr = speckG.createRadialGradient(16, 16, 0, 16, 16, 16); sgr.addColorStop(0, `rgba(${r},${g},${b},1)`); sgr.addColorStop(0.7, `rgba(${r},${g},${b},0.9)`); sgr.addColorStop(1, `rgba(${r},${g},${b},0)`); speckG.fillStyle = sgr; speckG.fillRect(0, 0, 32, 32); } const emptyBox = () => ({ x0: Infinity, y0: Infinity, x1: -Infinity, y1: -Infinity }); const grow = (b, x0, y0, x1, y1) => { if (x0 < b.x0) b.x0 = x0; if (y0 < b.y0) b.y0 = y0; if (x1 > b.x1) b.x1 = x1; if (y1 > b.y1) b.y1 = y1; }; function clampBox(b) { const x0 = Math.max(0, Math.floor(b.x0)), y0 = Math.max(0, Math.floor(b.y0)); const x1 = Math.min(CW, Math.ceil(b.x1)), y1 = Math.min(CH, Math.ceil(b.y1)); if (!(x1 > x0 && y1 > y0)) return null; return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }; } const stroke = { active: false, pending: false, pendT: 0, opacity: 1, box: emptyBox(), last: null, hapT: 0 }; let fb = emptyBox(); function refresh(r) { if (!r) return; dg.clearRect(r.x, r.y, r.w, r.h); dg.globalAlpha = 1; dg.drawImage(mainC, r.x, r.y, r.w, r.h, r.x, r.y, r.w, r.h); if (stroke.active || stroke.pending) { dg.globalAlpha = stroke.opacity; dg.drawImage(strokeC, r.x, r.y, r.w, r.h, r.x, r.y, r.w, r.h); dg.globalAlpha = 1; } paintTex.needsUpdate = true; } // undo/redo by stroke const undoStack = [], redoStack = []; function pushUndo(e) { e.bytes = e.w * e.h * 4 * (e.after ? 2 : 1); undoStack.push(e); redoStack.length = 0; let total = undoStack.reduce((s, x) => s + x.bytes, 0); while (total > 160e6 && undoStack.length > 1) total -= undoStack.shift().bytes; } function commit() { if (!stroke.pending && !stroke.active) return; stroke.pending = false; stroke.active = false; drips.length = 0; const b = clampBox(stroke.box); stroke.box = emptyBox(); if (!b) return; const before = mg.getImageData(b.x, b.y, b.w, b.h); mg.globalAlpha = stroke.opacity; mg.drawImage(strokeC, b.x, b.y, b.w, b.h, b.x, b.y, b.w, b.h); mg.globalAlpha = 1; const after = mg.getImageData(b.x, b.y, b.w, b.h); sg.clearRect(b.x, b.y, b.w, b.h); pushUndo({ ...b, before, after }); refresh(b); drawPanel(); } function undo() { if (stroke.active) return; if (stroke.pending) commit(); const e = undoStack.pop(); if (!e) return; mg.putImageData(e.before, e.x, e.y); redoStack.push(e); refresh(e); click(0.8); drawPanel(); } function redo() { if (stroke.active) return; if (stroke.pending) commit(); const e = redoStack.pop(); if (!e) return; if (e.after) mg.putImageData(e.after, e.x, e.y); else mg.clearRect(e.x, e.y, e.w, e.h); undoStack.push(e); refresh(e); click(1.2); drawPanel(); } let clearArmed = 0, now = 0; function pressClear() { if (clearArmed && now < clearArmed) { clearArmed = 0; clearWall(); } else { clearArmed = now + 3; click(0.7); } drawPanel(); } function clearWall() { if (stroke.active) return; if (stroke.pending) commit(); const before = mg.getImageData(0, 0, CW, CH); pushUndo({ x: 0, y: 0, w: CW, h: CH, before, after: null }); mg.clearRect(0, 0, CW, CH); refresh({ x: 0, y: 0, w: CW, h: CH }); sfx?.play(S.rattle, { volume: 0.6, rate: 0.8 }); } // drips const GX = 70, GY = 35, grid = new Float32Array(GX * GY), drips = []; function updateDrips(dt) { if (!drips.length) return; sg.lineCap = 'round'; for (let i = drips.length - 1; i >= 0; i--) { const d = drips[i]; const step = d.sp * dt * (1 - 0.75 * d.len / d.max); const ny = d.y + step, nx = d.x + Math.sin(d.len * 0.05 + d.ph) * 0.15; sg.globalAlpha = 0.92; sg.strokeStyle = d.col; sg.lineWidth = d.w; sg.beginPath(); sg.moveTo(d.x, d.y); sg.lineTo(nx, ny); sg.stroke(); grow(fb, nx - d.w - 2, d.y - d.w - 2, nx + d.w + 2, ny + d.w * 2 + 2); grow(stroke.box, nx - d.w - 2, d.y - d.w - 2, nx + d.w + 2, ny + d.w * 2 + 2); d.x = nx; d.y = ny; d.len += step; if (d.len >= d.max) { sg.fillStyle = d.col; sg.beginPath(); sg.ellipse(d.x, d.y + d.w * 0.4, d.w * 0.85, d.w * 1.1, 0, 0, TAU); sg.fill(); drips.splice(i, 1); } } sg.globalAlpha = 1; } // footprint of the spray cone on the wall (o, d in the wall's own space) const fpo = { x: 0, y: 0, hx: 0, hy: 0, t: 0, r: 0, rpx: 0, stretch: 1, ang: 0, cosI: 1 }; function footprint(o, d) { if (d.z > -0.08 || o.z < 0.003) return null; const t = (o.z - 0.003) / -d.z; const hx = o.x + d.x * t, hy = o.y + d.y * t; const cap = CAPS[capIndex()]; const r = (cap.base + t * Math.tan(cap.ang * DEG)) * params.size; fpo.t = t; fpo.hx = hx; fpo.hy = hy; fpo.r = r; fpo.rpx = r * PXM; fpo.cosI = -d.z; fpo.stretch = 1 / Math.max(fpo.cosI, 0.3); fpo.ang = Math.hypot(d.x, d.y) > 1e-4 ? Math.atan2(-d.y, d.x) : 0; fpo.x = (hx + PW / 2) * PXM; fpo.y = (PY0 + PH - hy) * PXM; return fpo; } const lastS = { x: 0, y: 0, rpx: 0, stretch: 1, ang: 0 }; function sprayFrame(fp, pressure, dt) { if (!fp || fp.t > MAX_RANGE) { stroke.last = null; return; } const cap = CAPS[capIndex()]; const ref = (cap.base + 0.15 * Math.tan(cap.ang * DEG)) * params.size; const conc = clamp((ref / fp.r) ** 2, 0.04, 1.6); const A = params.flow * pressure * dt * 3.2 * conc * (0.55 + 0.45 * fp.cosI); const L = stroke.last; let n = 1; if (L) n = Math.min(240, Math.max(1, Math.ceil(Math.hypot(fp.x - L.x, fp.y - L.y) / Math.max(0.8, fp.rpx * 0.3)))); const a = clamp(A / n, 0.006, 0.85); const speckE = cap.speck * (0.4 + fp.t * 2.5) * (0.4 + 0.6 * pressure); for (let k = 1; k <= n; k++) { const f = L ? k / n : 1; let x = L ? L.x + (fp.x - L.x) * f : fp.x, y = L ? L.y + (fp.y - L.y) * f : fp.y; const rpx = L ? L.rpx + (fp.rpx - L.rpx) * f : fp.rpx; const st = L ? L.stretch + (fp.stretch - L.stretch) * f : fp.stretch; let ang = fp.ang; if (L) { const da = ((fp.ang - L.ang + Math.PI * 3) % TAU) - Math.PI; ang = L.ang + da * f; } x += (Math.random() - 0.5) * rpx * 0.08; y += (Math.random() - 0.5) * rpx * 0.08; const rx = Math.max(0.7, rpx * st), ry = Math.max(0.7, rpx), c = Math.cos(ang), s = Math.sin(ang); sg.setTransform(c * rx, s * rx, -s * ry, c * ry, x, y); sg.globalAlpha = a; sg.drawImage(dotC, -1, -1, 2, 2); sg.setTransform(1, 0, 0, 1, 0, 0); const cnt = Math.floor(speckE + Math.random()); if (cnt > 0) { sg.globalAlpha = clamp(a * 5 + 0.12, 0, 0.85); for (let j = 0; j < cnt; j++) { const th = Math.random() * TAU, rr = 0.55 + 0.75 * Math.pow(Math.random(), 0.6); const ux = Math.cos(th) * rr * rx, uy = Math.sin(th) * rr * ry, sz = 1 + Math.random() * 2; sg.drawImage(speckC, x + c * ux - s * uy - sz / 2, y + s * ux + c * uy - sz / 2, sz, sz); } } const ext = rx * 1.35 + 3; grow(fb, x - ext, y - ext, x + ext, y + ext); grow(stroke.box, x - ext, y - ext, x + ext, y + ext); if (fp.t < 0.35) { const gx = clamp(Math.floor(x / (CW / GX)), 0, GX - 1), gy = clamp(Math.floor(y / (CH / GY)), 0, GY - 1), gi = gy * GX + gx; grid[gi] += a; if (grid[gi] > 3.0 && drips.length < 30) { grid[gi] = 0; drips.push({ x: x + (Math.random() - 0.5) * rpx * 0.6, y: y + ry * 0.55, w: clamp(rpx * 0.18, 1.3, 4), len: 0, max: (30 + Math.random() * 130) * (0.6 + params.flow * 0.5), sp: 35 + Math.random() * 35, col: params.color, ph: Math.random() * 6 }); } } } sg.globalAlpha = 1; lastS.x = fp.x; lastS.y = fp.y; lastS.rpx = fp.rpx; lastS.stretch = fp.stretch; lastS.ang = fp.ang; stroke.last = lastS; } // ---------- aerosol: soft round droplets and mist puffs ---------- const PN = 900, pPos = new Float32Array(PN * 3), pVel = new Float32Array(PN * 3), pDat = new Float32Array(PN * 4); for (let i = 0; i < PN; i++) pPos[i * 3 + 1] = -100; const pGeo = new THREE.BufferGeometry(); pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3)); pGeo.setAttribute('aDat', new THREE.BufferAttribute(pDat, 4)); const pMat = new THREE.ShaderMaterial({ uniforms: { uColor: { value: new THREE.Color(params.color) }, uHalfH: { value: 500 } }, transparent: true, depthWrite: false, vertexShader: ` attribute vec4 aDat; uniform float uHalfH; varying float vA; varying float vSoft; void main() { vec4 mv = modelViewMatrix * vec4(position, 1.0); float life = aDat.x, age = 1.0 - clamp(life / 0.5, 0.0, 1.0); float s = aDat.y * (1.0 + aDat.w * age); float px = s * projectionMatrix[1][1] * uHalfH / max(0.03, -mv.z); vA = aDat.z * smoothstep(0.0, 0.14, life) * step(0.0001, life) * clamp(px * px, 0.0, 1.0); vSoft = step(1.0, aDat.w); gl_PointSize = clamp(px, 1.0, 96.0); gl_Position = projectionMatrix * mv; }`, fragmentShader: ` uniform vec3 uColor; varying float vA; varying float vSoft; void main() { vec2 c = gl_PointCoord * 2.0 - 1.0; float r2 = dot(c, c); if (r2 > 1.0) discard; float drop = smoothstep(1.0, 0.45, r2); float mist = exp(-r2 * 3.2) * (1.0 - r2); float a = mix(drop, mist, vSoft) * vA; float hl = (1.0 - vSoft) * 0.45 * smoothstep(0.55, 0.0, length(c - vec2(-0.3, 0.3))); gl_FragColor = vec4(uColor * (1.0 + hl) + hl * 0.15, a); #include #include }`, }); const pts = new THREE.Points(pGeo, pMat); pts.frustumCulled = false; wall.add(pts); let pIdx = 0, mistAcc = 0; const U = new THREE.Vector3(), V = new THREE.Vector3(), UP = new THREE.Vector3(0, 1, 0); function spawn(o, d, coneTan, sp, sizeM, alpha, growK) { const i = pIdx; pIdx = (pIdx + 1) % PN; const g1 = (Math.random() + Math.random() + Math.random() - 1.5) * 0.9 * coneTan, g2 = (Math.random() + Math.random() + Math.random() - 1.5) * 0.9 * coneTan; const vx = d.x + U.x * g1 + V.x * g2, vy = d.y + U.y * g1 + V.y * g2, vz = d.z + U.z * g1 + V.z * g2; const l = Math.hypot(vx, vy, vz) || 1; pVel[i * 3] = vx / l * sp; pVel[i * 3 + 1] = vy / l * sp; pVel[i * 3 + 2] = vz / l * sp; pPos[i * 3] = o.x; pPos[i * 3 + 1] = o.y; pPos[i * 3 + 2] = o.z; pDat[i * 4] = 0.5; pDat[i * 4 + 1] = sizeM; pDat[i * 4 + 2] = alpha; pDat[i * 4 + 3] = growK; } function emit(o, d, count, coneTan, mist, pressure) { U.crossVectors(d, UP); if (U.lengthSq() < 1e-4) U.set(1, 0, 0); U.normalize(); V.crossVectors(U, d).normalize(); for (let k = 0; k < count; k++) spawn(o, d, coneTan, 2.2 + Math.random() * 1.6, 0.0016 + Math.random() * 0.0028, 0.85, 0.3); mistAcc += mist; while (mistAcc >= 1) { mistAcc -= 1; spawn(o, d, coneTan * 1.3, 0.8 + Math.random() * 0.7, (0.008 + Math.random() * 0.01) * (0.7 + coneTan * 3), 0.07 + 0.07 * pressure, 5.5); } } function killParticles() { for (let i = 0; i < PN; i++) { pDat[i * 4] = 0; pPos[i * 3 + 1] = -100; } mistAcc = 0; pGeo.attributes.position.needsUpdate = true; pGeo.attributes.aDat.needsUpdate = true; } function updateParticles(dt) { let any = false; const f60 = dt * 60; for (let i = 0; i < PN; i++) { const q = i * 4; if (pDat[q] <= 0) continue; any = true; pDat[q] -= dt; const j = i * 3, isMist = pDat[q + 3] > 1; const drag = 1 - (isMist ? 0.06 : 0.015) * f60; pPos[j] += pVel[j] * dt; pPos[j + 1] += pVel[j + 1] * dt; pPos[j + 2] += pVel[j + 2] * dt; pVel[j] *= drag; pVel[j + 1] = pVel[j + 1] * drag - (isMist ? 0.04 : 0.3) * dt; pVel[j + 2] *= drag; if (pPos[j + 2] < 0.004) { if (isMist) { pPos[j + 2] = 0.004; pVel[j + 2] = 0; pDat[q] = Math.min(pDat[q], 0.14); } else pDat[q] = 0; } if (pDat[q] <= 0) { pDat[q] = 0; pPos[j + 1] = -100; } } if (any) { pGeo.attributes.position.needsUpdate = true; pGeo.attributes.aDat.needsUpdate = true; } } // ---------- spray can ---------- const can = new THREE.Group(); const nozzle = new THREE.Object3D(); can.add(nozzle); const canBody = new THREE.Mesh(new THREE.CylinderGeometry(0.033, 0.033, 0.17, 24), new THREE.MeshStandardMaterial({ color: '#2a2a30', metalness: 0.7, roughness: 0.3 })); canBody.position.set(0, -0.11, 0.011); can.add(canBody); const band = new THREE.Mesh(new THREE.CylinderGeometry(0.0335, 0.0335, 0.07, 24), new THREE.MeshStandardMaterial({ color: params.color, roughness: 0.45, metalness: 0.2 })); band.position.set(0, -0.1, 0.011); can.add(band); const shoulder = new THREE.Mesh(new THREE.SphereGeometry(0.033, 24, 10, 0, TAU, 0, Math.PI / 2), canBody.material); shoulder.scale.y = 0.55; shoulder.position.set(0, -0.025, 0.011); can.add(shoulder); const act = new THREE.Mesh(new THREE.CylinderGeometry(0.011, 0.011, 0.018, 14), new THREE.MeshStandardMaterial({ color: '#eeeeee', roughness: 0.5 })); act.position.set(0, -0.003, 0.011); can.add(act); const tip = new THREE.Mesh(new THREE.CylinderGeometry(0.003, 0.003, 0.004, 8), new THREE.MeshBasicMaterial({ color: '#111' })); tip.rotation.x = Math.PI / 2; tip.position.set(0, -0.001, 0.0); can.add(tip); scene.add(can); // ---------- preview ring + laser ---------- const ringMat = new THREE.MeshBasicMaterial({ color: params.color, transparent: true, opacity: 0.8, depthWrite: false }); const ring = new THREE.Mesh(new THREE.RingGeometry(0.86, 1, 64), ringMat); ring.renderOrder = 2; ring.visible = false; wall.add(ring); const ringDot = new THREE.Mesh(new THREE.CircleGeometry(0.12, 16), ringMat); ring.add(ringDot); const laserGeo = new THREE.BufferGeometry(); laserGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(6), 3)); const laser = new THREE.Line(laserGeo, new THREE.LineBasicMaterial({ color: '#ffffff', transparent: true, opacity: 0.7 })); laser.frustumCulled = false; laser.visible = false; scene.add(laser); // ---------- palette panel ---------- const UW = 800, UH = 1260, PA = UW / UH; const pc = document.createElement('canvas'); pc.width = UW; pc.height = UH; const pg = pc.getContext('2d'); const panelTex = new THREE.CanvasTexture(pc); panelTex.colorSpace = THREE.SRGBColorSpace; panelTex.anisotropy = 8; const panelMat = new THREE.MeshBasicMaterial({ map: panelTex, transparent: true, depthTest: false, toneMapped: false }); const panel = new THREE.Mesh(new THREE.PlaneGeometry(PA, 1), panelMat); panel.renderOrder = 10; scene.add(panel); const cursorDot = new THREE.Mesh(new THREE.CircleGeometry(0.018, 16), new THREE.MeshBasicMaterial({ color: '#ffffff', depthTest: false, toneMapped: false })); cursorDot.renderOrder = 11; cursorDot.position.z = 0.002; cursorDot.visible = false; panel.add(cursorDot); const SLIDERS = [ { k: 'size', label: 'SIZE', lo: 0.5, hi: 2, fmt: (v) => v.toFixed(1) + '×' }, { k: 'flow', label: 'FLOW', lo: 0.1, hi: 1.5, fmt: (v) => Math.round(v * 100) + '%' }, { k: 'opacity', label: 'OPACITY', lo: 0.1, hi: 1, fmt: (v) => Math.round(v * 100) + '%' }, ]; const TX0 = 250, TW = 520; function buildEls(m) { const e = []; SWATCHES.forEach((c, i) => e.push({ id: 'sw', i, x: 30 + (i % 6) * 125, y: 110 + Math.floor(i / 6) * 100, w: 115, h: 90 })); e.push({ id: 'sv', x: 30, y: 320, w: 620, h: 280 }); e.push({ id: 'hue', x: 670, y: 320, w: 100, h: 280 }); CAPS.forEach((c, i) => e.push({ id: 'cap', i, x: 30 + i * 250, y: 625, w: 240, h: 95 })); SLIDERS.forEach((s, i) => e.push({ id: 'sl', s, x: 30, y: 740 + i * 90, w: 740, h: 75 })); ['undo', 'redo', 'clear'].forEach((k, i) => e.push({ id: k, x: 30 + i * 250, y: 1015, w: 240, h: 90 })); const row = m === 'vr' ? ['preview', 'hand', 'env'] : m === 'ar' ? ['preview', 'hand', 'place'] : ['preview', 'env', 'panL', 'panR']; const bw = (740 - (row.length - 1) * 10) / row.length; row.forEach((id, i) => e.push({ id, x: 30 + i * (bw + 10), y: 1115, w: bw, h: 90 })); return e; } const ELS = { desk: buildEls('desk'), vr: buildEls('vr'), ar: buildEls('ar') }; const isVR = () => !!(XR && XR.presenting); const isAR = () => isVR() && XR.mode === 'ar'; const mode = () => (!isVR() ? 'desk' : isAR() ? 'ar' : 'vr'); const els = () => ELS[mode()]; const touchScreen = matchMedia('(pointer: coarse)').matches; function rr(g, x, y, w, h, r) { g.beginPath(); g.moveTo(x + r, y); g.lineTo(x + w - r, y); g.quadraticCurveTo(x + w, y, x + w, y + r); g.lineTo(x + w, y + h - r); g.quadraticCurveTo(x + w, y + h, x + w - r, y + h); g.lineTo(x + r, y + h); g.quadraticCurveTo(x, y + h, x, y + h - r); g.lineTo(x, y + r); g.quadraticCurveTo(x, y, x + r, y); g.closePath(); } function button(e, label, on, opts = {}) { const g = pg; g.fillStyle = opts.bg || (on ? ACCENT : '#262630'); rr(g, e.x, e.y, e.w, e.h, 18); g.fill(); if (opts.dim) { g.fillStyle = 'rgba(16,16,22,0.55)'; rr(g, e.x, e.y, e.w, e.h, 18); g.fill(); } g.fillStyle = on ? '#141414' : (opts.dim ? '#6c6c78' : '#ececf0'); g.font = `700 ${e.w < 200 ? 27 : 30}px system-ui, sans-serif`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(label, e.x + e.w / 2, e.y + e.h / 2 + 1); } function drawPanel() { const g = pg, m = mode(); g.clearRect(0, 0, UW, UH); g.fillStyle = 'rgba(16,16,22,0.95)'; rr(g, 4, 4, UW - 8, UH - 8, 36); g.fill(); g.strokeStyle = 'rgba(255,255,255,0.12)'; g.lineWidth = 3; g.stroke(); g.textBaseline = 'middle'; g.textAlign = 'left'; g.fillStyle = ACCENT; g.font = '800 46px system-ui, sans-serif'; g.fillText('VYBE.ART', 34, 58); g.fillStyle = MINT; g.font = '700 26px system-ui, sans-serif'; g.fillText('SPRAY LAB', 290, 60); g.fillStyle = params.color; g.beginPath(); g.arc(735, 56, 30, 0, TAU); g.fill(); g.strokeStyle = '#ffffff'; g.lineWidth = 4; g.stroke(); const cur = params.color.toLowerCase(); for (const e of els()) { if (e.id === 'sw') { const c = SWATCHES[e.i]; g.fillStyle = c; rr(g, e.x, e.y, e.w, e.h, 16); g.fill(); if (c === cur) { g.strokeStyle = '#ffffff'; g.lineWidth = 8; g.stroke(); g.strokeStyle = '#000'; g.lineWidth = 2; rr(g, e.x + 7, e.y + 7, e.w - 14, e.h - 14, 11); g.stroke(); } else { g.strokeStyle = 'rgba(255,255,255,0.15)'; g.lineWidth = 2; g.stroke(); } } else if (e.id === 'sv') { g.save(); rr(g, e.x, e.y, e.w, e.h, 16); g.clip(); g.fillStyle = `hsl(${hsv.h * 360},100%,50%)`; g.fillRect(e.x, e.y, e.w, e.h); let gr = g.createLinearGradient(e.x, 0, e.x + e.w, 0); gr.addColorStop(0, 'rgba(255,255,255,1)'); gr.addColorStop(1, 'rgba(255,255,255,0)'); g.fillStyle = gr; g.fillRect(e.x, e.y, e.w, e.h); gr = g.createLinearGradient(0, e.y, 0, e.y + e.h); gr.addColorStop(0, 'rgba(0,0,0,0)'); gr.addColorStop(1, 'rgba(0,0,0,1)'); g.fillStyle = gr; g.fillRect(e.x, e.y, e.w, e.h); g.restore(); const cx = e.x + hsv.s * e.w, cy = e.y + (1 - hsv.v) * e.h; g.beginPath(); g.arc(cx, cy, 17, 0, TAU); g.strokeStyle = '#fff'; g.lineWidth = 5; g.stroke(); g.strokeStyle = '#000'; g.lineWidth = 2; g.stroke(); } else if (e.id === 'hue') { g.save(); rr(g, e.x, e.y, e.w, e.h, 16); g.clip(); const gr = g.createLinearGradient(0, e.y, 0, e.y + e.h); for (let i = 0; i <= 6; i++) gr.addColorStop(i / 6, `hsl(${i * 60},100%,50%)`); g.fillStyle = gr; g.fillRect(e.x, e.y, e.w, e.h); g.restore(); const y = e.y + hsv.h * e.h; g.strokeStyle = '#fff'; g.lineWidth = 6; rr(g, e.x - 4, y - 9, e.w + 8, 18, 8); g.stroke(); } else if (e.id === 'cap') { const on = capIndex() === e.i; button(e, '', on); g.fillStyle = on ? '#141414' : '#ececf0'; g.font = '800 30px system-ui, sans-serif'; g.textAlign = 'left'; g.fillText(CAPS[e.i].name, e.x + 22, e.y + e.h / 2); const rad = [6, 14, 26][e.i], cx = e.x + e.w - 44, cy = e.y + e.h / 2; const gr = g.createRadialGradient(cx, cy, 0, cx, cy, rad); gr.addColorStop(0, params.color); gr.addColorStop(CAPS[e.i].hard * 0.7, params.color); gr.addColorStop(1, 'rgba(0,0,0,0)'); g.fillStyle = gr; g.beginPath(); g.arc(cx, cy, rad, 0, TAU); g.fill(); } else if (e.id === 'sl') { const s = e.s, v = clamp((params[s.k] - s.lo) / (s.hi - s.lo)), ty = e.y + e.h / 2; g.textAlign = 'left'; g.fillStyle = '#9a9aa8'; g.font = '700 24px system-ui, sans-serif'; g.fillText(s.label, e.x, e.y + 20); g.fillStyle = '#ececf0'; g.font = '700 30px system-ui, sans-serif'; g.fillText(s.fmt(params[s.k]), e.x, e.y + 54); g.fillStyle = '#2a2a34'; rr(g, TX0, ty - 9, TW, 18, 9); g.fill(); g.fillStyle = ACCENT; rr(g, TX0, ty - 9, Math.max(18, TW * v), 18, 9); g.fill(); g.fillStyle = '#ffffff'; g.beginPath(); g.arc(TX0 + TW * v, ty, 24, 0, TAU); g.fill(); } else if (e.id === 'undo') button(e, 'UNDO', false, { dim: !undoStack.length }); else if (e.id === 'redo') button(e, 'REDO', false, { dim: !redoStack.length }); else if (e.id === 'clear') button(e, clearArmed ? 'CONFIRM?' : 'CLEAR', false, clearArmed ? { bg: '#d92d3a' } : {}); else if (e.id === 'preview') button(e, params.preview ? 'AIM ON' : 'AIM OFF', params.preview); else if (e.id === 'hand') button(e, params.leftHanded ? 'LEFTY' : 'RIGHTY', false, { bg: '#1f3a35' }); else if (e.id === 'env') button(e, ENV_SHORT[params.wall] + ' ▸', false, { bg: '#3a2a1f' }); else if (e.id === 'place') button(e, 'PLACE', false, { bg: '#1f3a35' }); else if (e.id === 'panL') button(e, '◀', false); else if (e.id === 'panR') button(e, '▶', false); } g.textAlign = 'center'; g.fillStyle = '#8d8d99'; g.font = '600 21px system-ui, sans-serif'; let hint; if (m === 'vr') hint = params.leftHanded ? 'LEFT TRIGGER SPRAYS · RIGHT STICK WALKS · LEFT STICK TURNS' : 'RIGHT TRIGGER SPRAYS · LEFT STICK WALKS · RIGHT STICK TURNS'; else if (m === 'ar') hint = XR.handheld ? 'TAP & DRAG ON THE WALL · PLACE = LOOK AT A REAL WALL' : 'TRIGGER SPRAYS · SQUEEZE AT A REAL WALL TO MOVE IT'; else hint = touchScreen ? 'HOLD & DRAG ON THE WALL TO SPRAY' : 'HOLD MOUSE TO SPRAY · WHEEL = DISTANCE · Z / Y UNDO REDO'; g.fillText(hint, UW / 2, 1233); panelTex.needsUpdate = true; } function hitEl(cx, cy) { for (const e of els()) if (cx >= e.x && cx <= e.x + e.w && cy >= e.y && cy <= e.y + e.h) return e; return null; } const inv = new THREE.Matrix4(), lo = new THREE.Vector3(), l2 = new THREE.Vector3(); const ph = { cx: 0, cy: 0, dist: 0, inside: false, lx: 0, ly: 0 }; function rayToPanel(o, d) { if (!panel.visible) return null; panel.updateWorldMatrix(true, false); inv.copy(panel.matrixWorld).invert(); lo.copy(o).applyMatrix4(inv); l2.copy(o).add(d).applyMatrix4(inv).sub(lo); if (Math.abs(l2.z) < 1e-8) return null; const s = -lo.z / l2.z; if (s < 0) return null; ph.lx = lo.x + l2.x * s; ph.ly = lo.y + l2.y * s; ph.cx = (ph.lx / PA + 0.5) * UW; ph.cy = (0.5 - ph.ly) * UH; ph.dist = l2.clone().multiplyScalar(s).applyMatrix4(new THREE.Matrix4().copy(panel.matrixWorld).setPosition(0, 0, 0)).length(); ph.inside = ph.cx >= 0 && ph.cx <= UW && ph.cy >= 0 && ph.cy <= UH; return ph; } let uiDrag = null, panX = 0, panMax = 0; function click(rate = 1) { sfx?.play(S.click, { volume: 0.5, rate: rate * (0.95 + Math.random() * 0.1) }); } function onColor() { pMat.uniforms.uColor.value.set(params.color); band.material.color.set(params.color); ringMat.color.set(params.color); rebuildDot(); } function uiPress(h, ctrl) { const e = hitEl(h.cx, h.cy); if (!e) return; ctrl?.pulse?.(0.3, 25); switch (e.id) { case 'sw': params.color = SWATCHES[e.i]; setHSVfromHex(params.color); onColor(); click(); break; case 'sv': case 'hue': case 'sl': uiDrag = e; uiMove(h); click(1.1); break; case 'cap': params.cap = CAPS[e.i].name; rebuildDot(); sfx?.play(S.rattle, { volume: 0.55, rate: 0.9 + Math.random() * 0.2 }); break; case 'undo': undo(); break; case 'redo': redo(); break; case 'clear': pressClear(); break; case 'preview': params.preview = !params.preview; click(); break; case 'hand': params.leftHanded = !params.leftHanded; click(); break; case 'env': setEnv(ENV_NAMES[(ENV_NAMES.indexOf(params.wall) + 1) % ENV_NAMES.length]); sfx?.play(S.rattle, { volume: 0.4, rate: 0.7 }); break; case 'place': placeFromGaze(); click(); break; case 'panL': panX = clamp(panX - 0.9, -panMax, panMax); click(); break; case 'panR': panX = clamp(panX + 0.9, -panMax, panMax); click(); break; } drawPanel(); syncGui(); } function uiMove(h) { const e = uiDrag; if (!e) return; if (e.id === 'sv') { hsv.s = clamp((h.cx - e.x) / e.w); hsv.v = clamp(1 - (h.cy - e.y) / e.h); applyHSV(); } else if (e.id === 'hue') { hsv.h = clamp((h.cy - e.y) / e.h, 0, 0.999); applyHSV(); } else if (e.id === 'sl') { const v = clamp((h.cx - TX0) / TW); params[e.s.k] = e.s.lo + v * (e.s.hi - e.s.lo); } drawPanel(); syncGui(); } // ---------- environments ---------- function setEnv(name) { if (!ENVS[name]) name = 'Courtyard'; params.wall = name; env = ENVS[name]; for (const k in ENVS) ENVS[k].group.visible = ENVS[k] === env; bgColor.set(env.bg); fogObj.color.set(env.bg); fogObj.near = env.fog[0]; fogObj.far = env.fog[1]; setSky(env.sky[0], env.sky[1]); renderer.toneMappingExposure = env.exposure; for (const o of env.deskHide) o.visible = isVR(); if (isVR() && !isAR()) { const b = env.bounds; XR.rig.position.x = clamp(XR.rig.position.x, b[0], b[1]); XR.rig.position.z = clamp(XR.rig.position.z, b[2], b[3]); } drawPanel(); syncGui?.(); } // ---------- strokes ---------- let hiss = null; function startStroke() { if (stroke.pending) commit(); stroke.active = true; stroke.opacity = params.opacity; stroke.box = emptyBox(); stroke.last = null; stroke.hapT = 0; grid.fill(0); rebuildDot(); const cap = CAPS[capIndex()]; if (sfx) hiss = sfx.loop(S.hiss, { volume: 0.05, rate: cap.rate * (0.97 + Math.random() * 0.06) }); } function endStroke() { stroke.active = false; stroke.last = null; stroke.pending = isFinite(stroke.box.x0); stroke.pendT = 0; if (hiss) { hiss.stop(); hiss = null; } killParticles(); } // ---------- gui ---------- const guiCtrls = []; function syncGui() { for (const c of guiCtrls) c.updateDisplay?.(); } const fS = gui.addFolder('Spray'); guiCtrls.push(fS.addColor(params, 'color').name('Colour').onChange((v) => { setHSVfromHex(v); onColor(); drawPanel(); })); guiCtrls.push(fS.add(params, 'cap', CAPS.map((c) => c.name)).name('Cap').onChange(() => { rebuildDot(); drawPanel(); })); guiCtrls.push(fS.add(params, 'size', 0.5, 2, 0.01).name('Size').onChange(drawPanel)); guiCtrls.push(fS.add(params, 'flow', 0.1, 1.5, 0.01).name('Flow').onChange(drawPanel)); guiCtrls.push(fS.add(params, 'opacity', 0.1, 1, 0.01).name('Opacity').onChange(drawPanel)); const cDist = fS.add(params, 'distance', 0.05, 0.9, 0.01).name('Screen distance'); guiCtrls.push(cDist); const fW = gui.addFolder('Scene'); guiCtrls.push(fW.add(params, 'wall', ENV_NAMES).name('Wall').onChange((v) => setEnv(v))); const fT = gui.addFolder('Tools'); guiCtrls.push(fT.add(params, 'preview').name('Aim preview').onChange(drawPanel)); guiCtrls.push(fT.add(params, 'leftHanded').name('Left-handed').onChange(drawPanel)); fT.add(params, 'volume', 0, 1, 0.01).name('Sound volume'); fT.add(params, 'undo').name('Undo stroke'); fT.add(params, 'redo').name('Redo stroke'); fT.add(params, 'clear').name('Clear wall (press twice)'); // ---------- input listeners ---------- let penPressure = 1, panelHidden = false; const onPtr = (e) => { penPressure = e.pointerType === 'pen' ? Math.max(0.1, e.pressure || 0.5) : 1; }; const onWheel = (e) => { if (isVR()) return; params.distance = clamp(params.distance + e.deltaY * 0.0004, 0.05, 0.9); cDist.updateDisplay?.(); e.preventDefault(); }; const onKey = (e) => { const k = e.key.toLowerCase(); if (k === '1' || k === '2' || k === '3') { params.cap = CAPS[+k - 1].name; rebuildDot(); sfx?.play(S.rattle, { volume: 0.5 }); } else if (k === 'z') { e.shiftKey ? redo() : undo(); } else if (k === 'y') redo(); else if (k === 'p') params.preview = !params.preview; else if (k === 'h') panelHidden = !panelHidden; else if (k === 'e') setEnv(ENV_NAMES[(ENV_NAMES.indexOf(params.wall) + 1) % ENV_NAMES.length]); else if (k === 'arrowleft') panX = clamp(panX - 0.5, -panMax, panMax); else if (k === 'arrowright') panX = clamp(panX + 0.5, -panMax, panMax); else return; drawPanel(); syncGui(); }; canvas.addEventListener('pointerdown', onPtr); canvas.addEventListener('pointermove', onPtr); canvas.addEventListener('wheel', onWheel, { passive: false }); window.addEventListener('keydown', onKey); // ---------- desktop layout ---------- const desk = { pw: 0.3, ph: 0.5, px: 0, py: 0, camX: 0, camY: 1.85, lookY: 1.85, d: 4 }; function layoutDesktop() { const aspect = size.width / Math.max(1, size.height); const vh1 = 2 * Math.tan(camera.fov * DEG / 2), vw1 = vh1 * aspect; const WALLW = 7.5, WALLH = 3.9; if (aspect >= 0.9) { desk.ph = Math.min(vh1 * 0.86, vw1 * 0.3 / PA); desk.pw = desk.ph * PA; desk.px = -vw1 / 2 + 0.02 * vh1 + desk.pw / 2; desk.py = -vh1 / 2 + 0.02 * vh1 + desk.ph / 2; const frac = (desk.pw + 0.03 * vh1) / vw1, avail = 1 - frac; desk.d = clamp(Math.max(WALLH / vh1, WALLW / (vw1 * avail)), 2.5, 9.5); desk.camX = -(frac * vw1 * desk.d) / 2; desk.camY = 1.85; desk.lookY = 1.85; panMax = Math.max(0, WALLW / 2 - (vw1 * avail * desk.d) / 2); } else { desk.pw = Math.min(vw1 * 0.96, vh1 * 0.42 * PA); desk.ph = desk.pw / PA; desk.px = 0; desk.py = -vh1 / 2 + 0.015 * vh1 + desk.ph / 2; const frac = (desk.ph + 0.03 * vh1) / vh1, avail = 1 - frac; desk.d = clamp(Math.max(WALLW / vw1, WALLH / (vh1 * avail)), 2.5, 9.5); desk.camX = 0; desk.camY = 1.85; desk.lookY = 1.85 - (frac * vh1 * desk.d) / 2; panMax = Math.max(0, WALLW / 2 - (vw1 * desk.d) / 2); } panX = clamp(panX, -panMax, panMax); } layoutDesktop(); // ---------- post ---------- const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(size.width, size.height), 0.55, 0.6, 1.4); composer.addPass(bloom); composer.addPass(new OutputPass()); composer.setPixelRatio(Math.min(size.pixelRatio || 1, 1.25)); composer.setSize(size.width, size.height); // ---------- XR: VR and AR ---------- const selecting = new Set(); const headP = new THREE.Vector3(), headD = new THREE.Vector3(), nTmp = new THREE.Vector3(); let userPlaced = false, onSurface = false, placeAt = -1; function resetWall() { XR?.unpin?.(wall); wall.position.set(0, 0, 0); wall.rotation.set(0, 0, 0); wall.updateMatrixWorld(); } function placeInFront() { if (!XR) return; camera.getWorldPosition(headP); camera.getWorldDirection(headD); let fx = headD.x, fz = headD.z; const l = Math.hypot(fx, fz); if (l < 1e-3) { fx = 0; fz = -1; } else { fx /= l; fz /= l; } const dist = XR.handheld ? 1.3 : 1.2; XR.unpin?.(wall); wall.position.set(headP.x + fx * dist, XR.handheld ? headP.y - 1.55 : 0, headP.z + fz * dist); wall.rotation.set(0, Math.atan2(-fx, -fz), 0); wall.updateMatrixWorld(); XR.pin?.(wall); } function snapTo(point, normal, byUser) { nTmp.copy(normal); nTmp.y = 0; if (nTmp.lengthSq() < 1e-4) return; nTmp.normalize(); let px = point.x, pz = point.z; if (!byUser) { camera.getWorldPosition(headP); const off = (headP.x - point.x) * nTmp.x + (headP.z - point.z) * nTmp.z; px = headP.x - nTmp.x * off; pz = headP.z - nTmp.z * off; } XR.unpin?.(wall); wall.position.set(px + nTmp.x * 0.004, XR.handheld ? wall.position.y : 0, pz + nTmp.z * 0.004); wall.rotation.set(0, Math.atan2(nTmp.x, nTmp.z), 0); wall.updateMatrixWorld(); XR.pin?.(wall); } function placeOnSurface() { if (!isAR() || userPlaced || onSurface) return; camera.getWorldPosition(headP); let best = null, bd = 4; for (const s of XR.surfaces || []) { if (s.kind !== 'plane' || s.orientation !== 'vertical' || !s.normal || !s.center) continue; if (s.label && s.label !== 'wall' && s.label !== 'other') continue; const d = headP.distanceTo(s.center); if (d < bd) { bd = d; best = s; } } if (best) { snapTo(best.center, best.normal, false); onSurface = true; } } function placeFromGaze() { if (!isAR()) return; const g = XR.gaze; if (g && g.normal && Math.abs(g.normal.y) < 0.5) snapTo(g.point.clone(), g.normal.clone(), true); else placeInFront(); userPlaced = true; } if (XR) { XR.models = false; XR.rays = false; XR.occlusion = false; XR.rig.position.set(0, 0, 1.1); XR.on('selectstart', (e) => { if (e && e.controller) selecting.add(e.controller); }); XR.on('selectend', (e) => { if (e && e.controller) selecting.delete(e.controller); }); XR.on('enter', (e) => { const m = (e && e.mode) || XR.mode; selecting.clear(); if (m === 'ar') { userPlaced = false; onSurface = false; placeInFront(); placeAt = now + 0.3; placeOnSurface(); } else { resetWall(); XR.rig.position.set(0, 0, 1.1); XR.rig.rotation.set(0, 0, 0); } drawPanel(); }); XR.on('exit', () => { if (stroke.active) endStroke(); uiDrag = null; selecting.clear(); placeAt = -1; resetWall(); drawPanel(); }); XR.on('surfaces', () => placeOnSurface()); XR.on('recentre', () => { userPlaced = true; placeInFront(); }); XR.on('squeeze', (e) => { if (!isAR()) return; const s = e && e.controller && e.controller.surface; if (s && s.normal && Math.abs(s.normal.y) < 0.5) { userPlaced = true; snapTo(s.point.clone(), s.normal.clone(), true); e.controller.pulse?.(0.4, 40); click(); } }); } function hands() { if (XR.handheld) { const c = XR.controllers.find((c) => c.connected); return [c || null, null]; } let dom = params.leftHanded ? XR.left : XR.right, off = params.leftHanded ? XR.right : XR.left; if (off && !off.connected) off = null; if (!dom || !dom.connected) { dom = off; off = null; } return [dom, off]; } // ---------- starter mural, sprayed with the real engine ---------- function seedWall() { const keep = { color: params.color, cap: params.cap, size: params.size, flow: params.flow }; params.size = 1; params.flow = 0.8; const so = new THREE.Vector3(), sd = new THREE.Vector3(0, 0, -1); const pass = (color, cap, dist, pts, dt) => { params.color = color; params.cap = cap; rebuildDot(); stroke.active = true; stroke.opacity = 1; stroke.box = emptyBox(); stroke.last = null; for (const p of pts) { if (!p) { stroke.last = null; continue; } so.set(p[0], p[1], dist); sprayFrame(footprint(so, sd), 1, dt); } drips.length = 0; grid.fill(0); commit(); }; const wave = (s, dy) => [0.5 + s * 2.4, 2.0 + dy + 0.28 * Math.sin(s * TAU * 1.2 + 0.4)]; const cloud = []; for (let y = 1.5; y <= 2.5; y += 0.06) { const k = 1 - ((y - 2.0) / 0.55) ** 2; if (k <= 0) continue; const hw = 1.3 * Math.sqrt(k), dir = cloud.length % 2 ? -1 : 1; for (let x = -hw; x <= hw; x += 0.02) cloud.push([1.75 + x * dir, y + 0.03 * Math.sin(x * 5)]); cloud.push(null); } pass('#8a3ffc', 'FAT', 0.35, cloud, 0.05); const body = []; for (const dy of [-0.035, 0, 0.035]) { for (let s = 0; s <= 1; s += 0.0035) body.push(wave(s, dy)); body.push(null); } pass('#ff8a00', 'MEDIUM', 0.13, body, 0.1); const hl = []; for (let s = 0.08; s <= 0.82; s += 0.0013) hl.push(wave(s, 0.055)); hl.push(null); [[0.75, 2.6, 0.09], [2.95, 1.55, 0.07], [2.55, 2.68, 0.06]].forEach(([cx, cy, r]) => { for (let a = 0; a < 4; a++) { const ang = a * Math.PI / 2 + 0.2; for (let u = -r; u <= r; u += 0.003) hl.push([cx + Math.cos(ang) * u, cy + Math.sin(ang) * u]); hl.push(null); } }); pass('#f4f1ea', 'FINE', 0.08, hl, 0.1); const dots = []; [[0.55, 1.45], [0.85, 1.38], [3.05, 2.35], [2.2, 1.35]].forEach(([x, y]) => { for (let i = 0; i < 6; i++) dots.push([x, y]); dots.push(null); }); pass('#ff4fa3', 'MEDIUM', 0.18, dots, 0.08); Object.assign(params, keep); undoStack.length = 0; redoStack.length = 0; rebuildDot(); onColor(); } sfx?.loop(S.city, { volume: 0.3 }); setEnv(params.wall); onColor(); drawPanel(); seedWall(); drawPanel(); // ---------- frame ---------- const O = new THREE.Vector3(), D = new THREE.Vector3(), Q = new THREE.Quaternion(), tmp = new THREE.Vector3(), head = new THREE.Vector3(), fwd = new THREE.Vector3(); const LO = new THREE.Vector3(), LD = new THREE.Vector3(); const ndc = new THREE.Vector2(), ray = new THREE.Raycaster(), hitP = new THREE.Vector3(); let lastMode = null, trigHigh = false, uiHold = false, turnLatch = false, prevDown = false; // ray into the wall's space; virt places a virtual nozzle that far from the wall along the ray function wallRay(o, d, virt) { LO.copy(o).applyMatrix4(wallInv); LD.copy(d).transformDirection(wallInv); if (virt != null) { if (LD.z > -0.05 || LO.z <= 0) return null; LO.addScaledVector(LD, LO.z / -LD.z - virt); } return footprint(LO, LD); } return { update({ delta, time }) { const dt = Math.min(delta || 0.016, 0.05); now += dt; if (sfx) sfx.volume = params.volume; const vr = isVR(), ar = isAR(), hh = ar && !!XR.handheld; const m = mode(); if (m !== lastMode) { lastMode = m; panelMat.depthTest = vr; arFrame.visible = ar; arLights.visible = ar; for (const o of env.deskHide) o.visible = vr; drawPanel(); } if (ar && placeAt > 0 && now > placeAt) { placeAt = -1; if (!userPlaced && !onSurface) placeInFront(); } if (clearArmed && now > clearArmed) { clearArmed = 0; drawPanel(); } env.tick?.(time || now); pMat.uniforms.uHalfH.value = vr ? 900 : size.height * Math.min(size.pixelRatio || 1, 1.25) * 0.5; wall.updateMatrixWorld(); wallInv.copy(wall.matrixWorld).invert(); fb = emptyBox(); let fp = null, pressure = 0, ctrl = null, showRing = false, pan = 0; laser.visible = false; cursorDot.visible = false; if (vr) { const [dom, off] = hands(); const cp = dom ? dom.ray : XR.rig; if (can.parent !== cp) cp.add(can); can.position.set(0, 0, 0); can.rotation.set(0, 0, 0); can.visible = !!dom && !hh; panel.visible = true; if (hh) { if (panel.parent !== camera) camera.add(panel); panel.position.set(-0.055, -0.095, -0.3); panel.rotation.set(0, 0, 0); panel.scale.setScalar(0.13); } else if (off) { if (panel.parent !== off.grip) off.grip.add(panel); const side = off.handedness === 'left' ? 1 : -1; panel.position.set(0.05 * side, 0.2, 0); panel.rotation.set(-0.7, 0, 0); panel.scale.setScalar(0.36); } else { if (panel.parent !== XR.rig) XR.rig.add(panel); panel.position.set(-0.45, 1.15, -0.5); panel.rotation.set(-0.35, 0.5, 0); panel.scale.setScalar(0.4); } // walk and snap-turn in VR only; in AR the room is the world if (!ar) { const b = env.bounds; if (off && off.stick && Math.hypot(off.stick.x, off.stick.y) > 0.15) { camera.getWorldDirection(fwd); fwd.y = 0; if (fwd.lengthSq() < 1e-6) fwd.set(0, 0, -1); fwd.normalize(); const sx = off.stick.x, sy = off.stick.y; XR.rig.position.x = clamp(XR.rig.position.x + (fwd.x * sy - fwd.z * sx) * 1.4 * dt, b[0], b[1]); XR.rig.position.z = clamp(XR.rig.position.z + (fwd.z * sy + fwd.x * sx) * 1.4 * dt, b[2], b[3]); } if (dom && dom.stick) { const sx = dom.stick.x; if (Math.abs(sx) > 0.7 && !turnLatch) { turnLatch = true; const a = -Math.sign(sx) * 30 * DEG; camera.getWorldPosition(head); const rx = XR.rig.position.x - head.x, rz = XR.rig.position.z - head.z; XR.rig.position.x = head.x + rx * Math.cos(a) + rz * Math.sin(a); XR.rig.position.z = head.z - rx * Math.sin(a) + rz * Math.cos(a); XR.rig.rotation.y += a; } else if (Math.abs(sx) < 0.3) turnLatch = false; } } if (dom) { nozzle.getWorldPosition(O); dom.ray.getWorldQuaternion(Q); D.set(0, 0, -1).applyQuaternion(Q); const sel = selecting.has(dom) ? 1 : 0; const trig = (hh || dom.isHand) ? Math.max(dom.trigger || 0, sel) : (dom.trigger || 0); const h = rayToPanel(O, D); const hover = !!(h && h.inside && h.dist < 1.2); if (uiDrag) { if (trig < 0.3) uiDrag = null; else if (h) uiMove(h); } else if (!stroke.active && hover) { if (trig > 0.55 && !trigHigh) { uiPress(h, dom); uiHold = true; } } else if (!stroke.active && !uiHold && trig > 0.08) startStroke(); if (trig < 0.1) uiHold = false; trigHigh = trig > 0.55; if (stroke.active) { if (trig < 0.04) endStroke(); else { pressure = clamp((trig - 0.05) / 0.9, 0.02, 1); ctrl = hh ? null : dom; } } if ((hover || uiDrag) && h && !hh) { const a = laserGeo.attributes.position.array; a[0] = O.x; a[1] = O.y; a[2] = O.z; tmp.copy(D).multiplyScalar(h.dist).add(O); a[3] = tmp.x; a[4] = tmp.y; a[5] = tmp.z; laserGeo.attributes.position.needsUpdate = true; laser.visible = true; } if ((hover || uiDrag) && h) { cursorDot.position.set(h.lx, h.ly, 0.002); cursorDot.visible = true; } fp = (hover || uiDrag) ? null : wallRay(O, D, hh ? params.distance : null); showRing = !!fp && !stroke.active && fp.t < 1.8; tmp.copy(O); camera.worldToLocal(tmp); pan = clamp(tmp.x * 2.5, -1, 1); } else if (stroke.active) endStroke(); } else { // screen mode: camera framing, panel and can in view camera.position.set(desk.camX + panX, desk.camY, desk.d); camera.lookAt(desk.camX + panX, desk.lookY, 0); camera.updateMatrixWorld(); if (panel.parent !== scene) scene.add(panel); panel.visible = !panelHidden; tmp.set(desk.px, desk.py, -1).applyQuaternion(camera.quaternion).add(camera.position); panel.position.copy(tmp); panel.quaternion.copy(camera.quaternion); panel.scale.setScalar(desk.ph); if (can.parent !== scene) scene.add(can); can.visible = true; ndc.set(pointer.x, pointer.y); ray.setFromCamera(ndc, camera); const ro = ray.ray.origin, rd = ray.ray.direction; const h = rayToPanel(ro, rd); const overPanel = !!(h && h.inside); let wallHit = false; if (rd.z < -0.01) { hitP.copy(rd).multiplyScalar((ro.z - 0.003) / -rd.z).add(ro); wallHit = true; } if (uiDrag) { if (!pointer.down) uiDrag = null; else if (h) uiMove(h); } else if (pointer.down && !prevDown) { if (overPanel) uiPress(h, null); else startStroke(); } if (stroke.active && !pointer.down) endStroke(); prevDown = pointer.down; if (wallHit) { O.copy(rd).multiplyScalar(-params.distance).add(hitP); D.copy(rd); fp = wallRay(O, D, null); if (stroke.active) pressure = penPressure; showRing = !!fp && pointer.inside && !overPanel && !stroke.active && !uiDrag; pan = clamp((hitP.x - camera.position.x) / 3, -1, 1); } const vh = Math.tan(camera.fov * DEG / 2) * 0.7, vw = vh * camera.aspect; tmp.set(vw * 0.74, -vh * 0.66, -0.9); camera.localToWorld(tmp); can.position.copy(tmp); if (stroke.active) can.position.x += (Math.random() - 0.5) * 0.002; const aim = wallHit ? hitP : head.set(0, 1.85, 0); fwd.copy(can.position).multiplyScalar(2).sub(aim); can.lookAt(fwd); } // spraying if (stroke.active && pressure > 0) { const cap = CAPS[capIndex()], ci = capIndex(); sprayFrame(fp, pressure, dt); if (fp) emit(LO, LD, Math.round((3 + ci * 4) * pressure * params.flow * dt * 60), Math.tan(cap.ang * DEG) * params.size, (0.4 + ci * 0.6) * pressure * dt * 60, pressure); if (hiss) { hiss.setVolume(clamp(0.12 + 0.5 * pressure * Math.min(1, params.flow), 0, 0.7)); hiss.setPan?.(pan); } if (ctrl) { stroke.hapT += dt; if (stroke.hapT >= 0.06) { stroke.hapT = 0; ctrl.pulse?.(0.08 + 0.3 * pressure, 45); } } } else if (stroke.active && hiss) hiss.setVolume(0.0); if (stroke.active || stroke.pending) updateDrips(dt); const decay = Math.exp(-dt * 0.6); for (let i = 0; i < grid.length; i++) grid[i] *= decay; if (stroke.pending) { stroke.pendT += dt; if (!drips.length || stroke.pendT > 3) commit(); } updateParticles(dt); refresh(clampBox(fb)); // aiming preview (wall space) ring.visible = params.preview && showRing; if (ring.visible) { ring.position.set(fp.hx, fp.hy, 0.006); ring.rotation.set(0, 0, -fp.ang); ring.scale.set(Math.max(0.004, fp.r * fp.stretch), Math.max(0.004, fp.r), 1); const inRange = fp.t <= MAX_RANGE; ringMat.opacity = inRange ? 0.85 : 0.25; ringDot.visible = inRange; } }, render() { composer.render(); }, resize({ width, height }) { composer.setSize(width, height); layoutDesktop(); }, dispose() { if (hiss) hiss.stop(); window.removeEventListener('keydown', onKey); canvas.removeEventListener('pointerdown', onPtr); canvas.removeEventListener('pointermove', onPtr); canvas.removeEventListener('wheel', onWheel); pmrem.dispose(); }, }; }