import * as THREE from 'three'; import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.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 = 'ar'; const SOUND = { paddle: 'sfx_0HYn4pAuxAwv', brick: 'sfx_Cnta6eHIJiji', lose: 'sfx_SS0b1jiCIWeQ' }; export default function sketch(ctx) { const { scene, camera, renderer, gui, size, pointer, canvas } = ctx; const XR = ctx.xr || null; const sfx = ctx.sfx; const play = (id, o) => { if (sfx) sfx.play(id, o); }; const touchScreen = matchMedia('(pointer: coarse)').matches; const params = { rows: 7, speed: 1, sound: 0.8, paddle: 1, trails: 0.5, inkA: '#ff3d7f', inkB: '#36d6ff', inkC: '#f1d72c', newGame: () => newGame(), }; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.05; scene.background = new THREE.Color('#06060c'); scene.fog = new THREE.Fog('#06060c', 2.2, 7); // Board dimensions in metres const W = 0.6, D = 0.8, R = 0.012, PZ = D / 2 - 0.07, COLS = 8, MAXB = 12 * COLS, MAXBALLS = 4, TRAIL = 14, MAXS = 700; // Lights scene.add(new THREE.HemisphereLight('#c8d4ff', '#201828', 1.3)); const keyLight = new THREE.DirectionalLight('#ffffff', 2.2); keyLight.position.set(0.6, 1.5, 0.8); scene.add(keyLight); // Backdrop (hidden in AR so the real room shows) let backdrop = XR && XR.backdrop; if (!backdrop) { backdrop = new THREE.Group(); scene.add(backdrop); } const floor = new THREE.Mesh(new THREE.CircleGeometry(7, 64), new THREE.MeshStandardMaterial({ color: '#0a0a14', roughness: 0.9 })); floor.rotation.x = -Math.PI / 2; floor.position.y = -0.04; backdrop.add(floor); const grid = new THREE.GridHelper(10, 100, '#2a2450', '#141126'); grid.position.y = -0.039; grid.material.transparent = true; grid.material.opacity = 0.6; backdrop.add(grid); // Game board group const game = new THREE.Group(); scene.add(game); const content = new THREE.Group(); game.add(content); const slab = new THREE.Mesh( new RoundedBoxGeometry(W + 0.05, 0.016, D + 0.05, 2, 0.006), new THREE.MeshStandardMaterial({ color: '#0c0b1a', roughness: 0.45, metalness: 0.3, transparent: true, opacity: 0.9 }) ); slab.position.y = -0.008; content.add(slab); // Faint grid on the playfield const gl = []; for (let x = -W / 2; x <= W / 2 + 1e-6; x += W / 6) gl.push(x, 0.0008, -D / 2, x, 0.0008, D / 2); for (let z = -D / 2; z <= D / 2 + 1e-6; z += D / 8) gl.push(-W / 2, 0.0008, z, W / 2, 0.0008, z); const gridGeo = new THREE.BufferGeometry(); gridGeo.setAttribute('position', new THREE.Float32BufferAttribute(gl, 3)); content.add(new THREE.LineSegments(gridGeo, new THREE.LineBasicMaterial({ color: '#2b2850', transparent: true, opacity: 0.55 }))); // Rails const railMat = new THREE.MeshBasicMaterial({ color: '#36d6ff' }); const railL = new THREE.Mesh(new THREE.BoxGeometry(0.008, 0.02, D + 0.016), railMat); railL.position.set(-W / 2 - 0.004, 0.01, 0); const railR = railL.clone(); railR.position.x = W / 2 + 0.004; const railB = new THREE.Mesh(new THREE.BoxGeometry(W + 0.016, 0.02, 0.008), railMat); railB.position.set(0, 0.01, -D / 2 - 0.004); content.add(railL, railR, railB); const killMat = new THREE.MeshBasicMaterial({ color: '#ff3d7f', transparent: true, opacity: 0.5 }); const kill = new THREE.Mesh(new THREE.PlaneGeometry(W, 0.003), killMat); kill.rotation.x = -Math.PI / 2; kill.position.set(0, 0.001, D / 2 - 0.012); content.add(kill); // Bricks: lit, with emissive glow tinted by each instance's color const brickMat = new THREE.MeshStandardMaterial({ color: '#ffffff', emissive: '#ffffff', emissiveIntensity: 0.7, roughness: 0.35, metalness: 0.1 }); brickMat.onBeforeCompile = (shader) => { shader.fragmentShader = shader.fragmentShader.replace( '#include ', '#include \n totalEmissiveRadiance = emissive * diffuseColor.rgb;' ); }; const brickMesh = new THREE.InstancedMesh(new RoundedBoxGeometry(1, 1, 1, 2, 0.18), brickMat, MAXB); brickMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); const white = new THREE.Color(1, 1, 1); for (let i = 0; i < MAXB; i++) brickMesh.setColorAt(i, white); brickMesh.frustumCulled = false; content.add(brickMesh); // Glow texture const gc = document.createElement('canvas'); gc.width = gc.height = 64; const g2 = gc.getContext('2d'); const grad = g2.createRadialGradient(32, 32, 0, 32, 32, 32); grad.addColorStop(0, 'rgba(255,255,255,1)'); grad.addColorStop(0.25, 'rgba(255,255,255,0.55)'); grad.addColorStop(1, 'rgba(255,255,255,0)'); g2.fillStyle = grad; g2.fillRect(0, 0, 64, 64); const glowTex = new THREE.CanvasTexture(gc); glowTex.colorSpace = THREE.SRGBColorSpace; // Balls const ballGeo = new THREE.SphereGeometry(R, 20, 14); const ballMat = new THREE.MeshBasicMaterial({ color: '#ffffff' }); const ballMeshes = [], ballGlows = []; for (let i = 0; i < MAXBALLS; i++) { const m = new THREE.Mesh(ballGeo, ballMat); const s = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowTex, color: '#ffffff', blending: THREE.AdditiveBlending, depthWrite: false, transparent: true, opacity: 0.85 })); s.scale.setScalar(0.075); content.add(m, s); ballMeshes.push(m); ballGlows.push(s); } // Trails const trailPos = new Float32Array(MAXBALLS * TRAIL * 3); const trailCol = new Float32Array(MAXBALLS * TRAIL * 3); const trailGeo = new THREE.BufferGeometry(); trailGeo.setAttribute('position', new THREE.BufferAttribute(trailPos, 3)); trailGeo.setAttribute('color', new THREE.BufferAttribute(trailCol, 3)); const trailPts = new THREE.Points(trailGeo, new THREE.PointsMaterial({ size: 0.024, map: glowTex, vertexColors: true, blending: THREE.AdditiveBlending, depthWrite: false, transparent: true })); trailPts.frustumCulled = false; content.add(trailPts); // Sparks const sPos = new Float32Array(MAXS * 3), sCol = new Float32Array(MAXS * 3); const sVel = new Float32Array(MAXS * 3), sRGB = new Float32Array(MAXS * 3), sLife = new Float32Array(MAXS); let sIdx = 0; const sparkGeo = new THREE.BufferGeometry(); sparkGeo.setAttribute('position', new THREE.BufferAttribute(sPos, 3)); sparkGeo.setAttribute('color', new THREE.BufferAttribute(sCol, 3)); const sparkPts = new THREE.Points(sparkGeo, new THREE.PointsMaterial({ size: 0.012, map: glowTex, vertexColors: true, blending: THREE.AdditiveBlending, depthWrite: false, transparent: true })); sparkPts.frustumCulled = false; content.add(sparkPts); // Paddle const paddleMat = new THREE.MeshStandardMaterial({ color: '#36d6ff', emissive: '#36d6ff', emissiveIntensity: 1, roughness: 0.3, metalness: 0.2 }); const paddleMesh = new THREE.Mesh(new RoundedBoxGeometry(1, 0.016, 0.02, 2, 0.007), paddleMat); paddleMesh.position.set(0, 0.009, PZ); content.add(paddleMesh); const paddleGlow = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowTex, color: '#36d6ff', blending: THREE.AdditiveBlending, depthWrite: false, transparent: true, opacity: 0.5 })); content.add(paddleGlow); // Score panel standing behind the bricks const pc = document.createElement('canvas'); pc.width = 1024; pc.height = 320; const p2 = pc.getContext('2d'); const panelTex = new THREE.CanvasTexture(pc); panelTex.colorSpace = THREE.SRGBColorSpace; const panel = new THREE.Mesh(new THREE.PlaneGeometry(W, W * 0.3125), new THREE.MeshBasicMaterial({ map: panelTex, transparent: true, depthWrite: false })); panel.position.set(0, W * 0.3125 / 2 + 0.012, -D / 2 - 0.03); content.add(panel); let panelKey = ''; // Post-processing (screen only) const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(size.width, size.height), 0.85, 0.5, 0.2); composer.addPass(bloom); composer.addPass(new OutputPass()); // GUI gui.add(params, 'rows', 3, 12, 1).name('Rows').onChange(() => newGame()); gui.add(params, 'speed', 0.5, 2).name('Ball Speed'); gui.add(params, 'paddle', 0.5, 2).name('Paddle Width'); gui.add(params, 'trails', 0, 1).name('Trails'); gui.add(params, 'sound', 0, 1).name('Sound').onChange(setVolume); gui.addColor(params, 'inkA').name('Color A'); gui.addColor(params, 'inkB').name('Color B'); gui.addColor(params, 'inkC').name('Color C'); gui.add(params, 'newGame').name('New Game'); function setVolume() { if (sfx) sfx.volume = params.sound; } setVolume(); // Game state let bricks = [], balls = []; const paddle = { x: 0, w: 0.13, vx: 0 }; let score = 0, best = 0, lives = 3, level = 1, shake = 0, idle = 999, pause = 0, banner = ''; const cA = new THREE.Color(), cB = new THREE.Color(), cC = new THREE.Color(); const rowColors = Array.from({ length: 12 }, () => new THREE.Color()); const tmpC = new THREE.Color(); function paletteFor(r, out) { const t = r / Math.max(1, params.rows - 1); if (t < 0.5) out.copy(cA).lerp(cC, t * 2); else out.copy(cC).lerp(cB, (t - 0.5) * 2); return out; } function buildBricks() { const gap = 0.007; const bw = (W * 0.92 - gap * (COLS - 1)) / COLS; const bd = 0.026; const top = -D / 2 + 0.06; const x0 = -W * 0.46; bricks = []; for (let r = 0; r < params.rows; r++) { for (let c = 0; c < COLS; c++) { bricks.push({ r, c, x: x0 + c * (bw + gap), z: top + r * (bd + gap), w: bw, d: bd, hp: r < 2 && level > 1 ? 2 : 1, flash: 0 }); } } } function serve() { paddle.x = 0; balls = [{ x: 0, z: PZ - 0.024, vx: (Math.random() < 0.5 ? -1 : 1) * 0.54, vz: -0.84, stuck: 0.9, trail: [] }]; } function newGame() { score = 0; lives = 3; level = 1; buildBricks(); serve(); } function launch() { idle = 0; for (const b of balls) b.stuck = 0; } function burst(x, y, z, col, n, power) { for (let i = 0; i < n; i++) { const a = Math.random() * Math.PI * 2; const s = (0.08 + Math.random() * 0.45) * power; const j = sIdx * 3; sPos[j] = x; sPos[j + 1] = y; sPos[j + 2] = z; sVel[j] = Math.cos(a) * s; sVel[j + 1] = 0.15 + Math.random() * 0.5 * power; sVel[j + 2] = Math.sin(a) * s; sRGB[j] = col.r; sRGB[j + 1] = col.g; sRGB[j + 2] = col.b; sLife[sIdx] = 1; sIdx = (sIdx + 1) % MAXS; } } newGame(); // Input const keys = new Set(); const onKeyDown = (e) => { if (['ArrowLeft', 'ArrowRight', ' '].includes(e.key)) e.preventDefault(); keys.add(e.key); if (e.key === ' ') launch(); if (e.key === 'r' || e.key === 'R') newGame(); }; const onKeyUp = (e) => keys.delete(e.key); const onPointerDown = () => { if (!(XR && XR.presenting)) launch(); }; window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); canvas.addEventListener('pointerdown', onPointerDown); // AR placement const head = new THREE.Vector3(), fwd = new THREE.Vector3(), flat = new THREE.Vector3(), place = new THREE.Vector3(); let pinned = false, placedByUser = false, lastSurface = null, needPlace = false; function setPlaced(pos) { if (!XR) return; if (pinned) XR.unpin(game); camera.getWorldPosition(head); game.position.copy(pos); const tx = head.x - pos.x, tz = head.z - pos.z; game.rotation.set(0, Math.atan2(tx, tz) || 0, 0); game.updateMatrixWorld(true); XR.pin(game); pinned = true; } function placeInFront() { camera.getWorldPosition(head); camera.getWorldDirection(fwd); flat.set(fwd.x, 0, fwd.z); if (flat.lengthSq() < 1e-6) flat.set(0, 0, -1); flat.normalize(); if (XR.handheld) { const pitch = THREE.MathUtils.clamp(Math.asin(THREE.MathUtils.clamp(fwd.y, -1, 1)), -1.1, -0.25); place.copy(flat).multiplyScalar(Math.cos(pitch)); place.y = Math.sin(pitch); place.multiplyScalar(0.8).add(head); } else { place.copy(head).addScaledVector(flat, 0.75); place.y = head.y - 0.5; } setPlaced(place); } function tryTable() { if (!XR || XR.mode !== 'ar' || placedByUser) return; camera.getWorldPosition(head); const s = XR.surface((s) => s.kind === 'plane' && s.orientation === 'horizontal' && s.label !== 'floor' && s.label !== 'ceiling' && s.center.y < head.y - 0.25 && s.center.y > head.y - 1.3 && Math.hypot(s.center.x - head.x, s.center.z - head.z) < 2.2 && s.size && s.size.x > 0.35 && s.size.z > 0.35); if (s && s !== lastSurface) { lastSurface = s; setPlaced(place.copy(s.center).add(new THREE.Vector3(0, 0.01, 0))); } } const offs = []; if (XR && XR.on) { offs.push(XR.on('enter', () => { placedByUser = false; lastSurface = null; needPlace = true; idle = 999; })); offs.push(XR.on('exit', () => { if (pinned) XR.unpin(game); pinned = false; game.position.set(0, 0, 0); game.rotation.set(0, 0, 0); placedByUser = false; lastSurface = null; })); offs.push(XR.on('select', () => launch())); offs.push(XR.on('squeeze', ({ controller }) => { const s = controller && controller.surface; if (s && s.normal && s.normal.y > 0.7) { setPlaced(place.copy(s.point).add(new THREE.Vector3(0, 0.01, 0))); placedByUser = true; } })); offs.push(XR.on('recentre', () => { placeInFront(); placedByUser = true; })); offs.push(XR.on('surfaces', () => tryTable())); } // Ray onto the board's surface, returns local x or null const inv = new THREE.Matrix4(), lo = new THREE.Vector3(), ld = new THREE.Vector3(); const ro = new THREE.Vector3(), rd = new THREE.Vector3(), rq = new THREE.Quaternion(); const raycaster = new THREE.Raycaster(), ndc = new THREE.Vector2(); function localHit(origin, dir) { lo.copy(origin).applyMatrix4(inv); ld.copy(dir).transformDirection(inv); if (Math.abs(ld.y) < 1e-4) return null; const t = (0.01 - lo.y) / ld.y; if (t < 0) return null; const x = lo.x + ld.x * t, z = lo.z + ld.z * t; if (Math.abs(z) > D || Math.abs(x) > W) return null; return x; } let lastPX = -1, lastPY = -1; const lastHits = new Map(); // Screen camera framing let fit = 1; function layout() { const aspect = size.width / Math.max(1, size.height); fit = Math.max(1, 0.8 / aspect); } layout(); function drawPanel(auto, hint) { const bannerA = pause > 0 && banner ? Math.min(1, pause * 3) : 0; const hintA = auto && hint ? 0.55 + 0.35 * Math.sin(performance.now() * 0.004) : 0; const hud = 'SCORE ' + String(score).padStart(5, '0') + '|LV ' + level + ' ' + '●'.repeat(Math.max(0, lives)) + ' BEST ' + String(Math.max(best, score)).padStart(5, '0'); const keyStr = hud + '|' + banner + Math.round(bannerA * 12) + '|' + hint + Math.round(hintA * 10); if (keyStr === panelKey) return; panelKey = keyStr; p2.clearRect(0, 0, 1024, 320); p2.fillStyle = 'rgba(8,8,18,0.72)'; p2.beginPath(); p2.roundRect(8, 8, 1008, 304, 28); p2.fill(); p2.font = 'bold 44px monospace'; p2.fillStyle = 'rgba(255,255,255,0.88)'; p2.textBaseline = 'middle'; const [l, r] = hud.split('|'); p2.textAlign = 'left'; p2.fillText(l, 40, 58); p2.textAlign = 'right'; p2.fillText(r, 984, 58); p2.textAlign = 'center'; if (bannerA > 0) { p2.font = 'bold 110px monospace'; p2.fillStyle = `rgba(255,255,255,${bannerA})`; p2.fillText(banner, 512, 175); } if (hintA > 0) { p2.font = 'bold 34px monospace'; p2.fillStyle = `rgba(255,255,255,${hintA})`; p2.fillText(hint, 512, 272); } panelTex.needsUpdate = true; } const dummy = new THREE.Object3D(); return { update({ time, delta }) { const dt = Math.min(delta, 1 / 30); const presenting = !!(XR && XR.presenting); if (needPlace && presenting) { needPlace = false; placeInFront(); tryTable(); } cA.set(params.inkA); cB.set(params.inkB); cC.set(params.inkC); for (let r = 0; r < params.rows; r++) paletteFor(r, rowColors[r]); paddle.w = 0.13 * params.paddle; // Screen camera if (!presenting) { camera.position.set(Math.sin(time * 0.15) * 0.04, 0.55 * fit, -0.05 + 0.67 * fit); camera.lookAt(0, 0, -0.05); camera.updateMatrixWorld(); } game.updateMatrixWorld(true); inv.copy(game.matrixWorld).invert(); if (dt > 0) { idle += dt; let target = null; if (!presenting) { const moved = pointer.px !== lastPX || pointer.py !== lastPY; if ((pointer.inside && moved) || pointer.down) { raycaster.setFromCamera(ndc.set(pointer.x, pointer.y), camera); const x = localHit(raycaster.ray.origin, raycaster.ray.direction); if (x !== null) { target = x; if (moved) idle = 0; } } lastPX = pointer.px; lastPY = pointer.py; } else if (XR.controllers) { for (const c of XR.controllers) { if (!c || !c.connected || !c.ray) continue; c.ray.getWorldPosition(ro); c.ray.getWorldQuaternion(rq); rd.set(0, 0, -1).applyQuaternion(rq); const x = localHit(ro, rd); if (x !== null) { const prev = lastHits.get(c); if (prev === undefined || Math.abs(prev - x) > 0.003) idle = 0; lastHits.set(c, x); target = x; } if (c.stick && Math.abs(c.stick.x) > 0.2) { target = paddle.x + c.stick.x * 0.06; idle = 0; } } } if (keys.has('ArrowLeft')) { target = paddle.x - 0.06; idle = 0; } if (keys.has('ArrowRight')) { target = paddle.x + 0.06; idle = 0; } const auto = idle > 4; if (auto) { let lead = null, soon = Infinity; for (const b of balls) { if (b.vz <= 0 || b.stuck > 0) continue; const t = (PZ - b.z) / b.vz; if (t < soon) { soon = t; lead = b; } } if (lead) { const lo2 = -W / 2 + R, span = W - 2 * R; let u = lead.x + lead.vx * soon - lo2; u = ((u % (2 * span)) + 2 * span) % (2 * span); if (u > span) u = 2 * span - u; target = lo2 + u + Math.sin(time * 3) * paddle.w * 0.3; } else target = balls.length ? balls[0].x : 0; } if (target === null) target = paddle.x; target = THREE.MathUtils.clamp(target, -W / 2 + paddle.w / 2, W / 2 - paddle.w / 2); const nx = paddle.x + (target - paddle.x) * (1 - Math.exp(-dt * (auto ? 12 : 28))); paddle.vx = (nx - paddle.x) / dt; paddle.x = nx; // Balls const speed = (0.42 + level * 0.03) * params.speed; if (pause > 0) pause -= dt; for (const b of balls) { if (b.stuck > 0 || pause > 0) { if (b.stuck > 0) b.stuck -= dt; b.x = paddle.x; b.z = PZ - 0.024; } else { const steps = 4, sd = (speed * dt) / steps; for (let s = 0; s < steps; s++) { b.x += b.vx * sd; b.z += b.vz * sd; if (b.x < -W / 2 + R) { b.x = -W / 2 + R; b.vx = Math.abs(b.vx); } if (b.x > W / 2 - R) { b.x = W / 2 - R; b.vx = -Math.abs(b.vx); } if (b.z < -D / 2 + R) { b.z = -D / 2 + R; b.vz = Math.abs(b.vz); } if (b.vz > 0 && b.z + R > PZ - 0.01 && b.z < PZ + 0.012 && Math.abs(b.x - paddle.x) < paddle.w / 2 + R) { const off = THREE.MathUtils.clamp((b.x - paddle.x) / (paddle.w / 2), -1, 1); const a = THREE.MathUtils.clamp(off * 1.05 + paddle.vx * 0.15, -1.2, 1.2); b.vx = Math.sin(a); b.vz = -Math.cos(a); b.z = PZ - 0.01 - R; burst(b.x, R, b.z, white, 6, 0.6); play(SOUND.paddle, { volume: 0.6, rate: 0.9 + Math.abs(off) * 0.3, pan: (b.x / W) * 1.2 }); if (presenting && XR.controllers) for (const c of XR.controllers) if (c && c.connected && c.pulse) c.pulse(0.3, 30); } for (let i = bricks.length - 1; i >= 0; i--) { const k = bricks[i]; if (b.x + R < k.x || b.x - R > k.x + k.w || b.z + R < k.z || b.z - R > k.z + k.d) continue; const dx = Math.min(Math.abs(b.x - k.x), Math.abs(b.x - k.x - k.w)); const dz = Math.min(Math.abs(b.z - k.z), Math.abs(b.z - k.z - k.d)); if (dx < dz) b.vx *= -1; else b.vz *= -1; k.hp--; k.flash = 1; const col = rowColors[k.r]; if (k.hp <= 0) { bricks.splice(i, 1); score += 10 * level; play(SOUND.brick, { volume: 0.55, rate: 1.4 - (k.r / Math.max(1, params.rows - 1)) * 0.6 + (Math.random() - 0.5) * 0.08, pan: (b.x / W) * 1.2 }); burst(k.x + k.w / 2, 0.015, k.z + k.d / 2, col, 22, 1); shake = 0.004; if (Math.random() < 0.06 && balls.length < MAXBALLS) balls.push({ x: b.x, z: b.z, vx: -b.vx, vz: b.vz, stuck: 0, trail: [] }); } else burst(b.x, R, b.z, col, 8, 0.6); break; } } } b.trail.push(b.x, b.z); if (b.trail.length > TRAIL * 2) b.trail.splice(0, 2); } balls = balls.filter((b) => b.z < D / 2 + 0.05); if (!balls.length) { lives--; shake = 0.01; play(SOUND.lose, { volume: 0.8 }); if (lives <= 0) { best = Math.max(best, score); banner = 'GAME OVER'; pause = 2; newGame(); } else serve(); } if (!bricks.length) { level++; banner = 'LEVEL ' + level; pause = 1.5; buildBricks(); serve(); } // Sparks for (let i = 0; i < MAXS; i++) { const j = i * 3; if (sLife[i] <= 0) { sCol[j] = sCol[j + 1] = sCol[j + 2] = 0; continue; } sPos[j] += sVel[j] * dt; sPos[j + 1] += sVel[j + 1] * dt; sPos[j + 2] += sVel[j + 2] * dt; sVel[j + 1] -= 1.6 * dt; sVel[j] *= 0.98; sVel[j + 2] *= 0.98; sLife[i] -= dt * 1.4; const l = Math.max(0, sLife[i]); sCol[j] = sRGB[j] * l; sCol[j + 1] = sRGB[j + 1] * l; sCol[j + 2] = sRGB[j + 2] * l; } sparkGeo.attributes.position.needsUpdate = true; sparkGeo.attributes.color.needsUpdate = true; shake *= Math.exp(-dt * 10); } // Visuals content.position.set((Math.random() - 0.5) * shake * 2, 0, (Math.random() - 0.5) * shake * 2); for (let i = 0; i < bricks.length; i++) { const k = bricks[i]; k.flash *= Math.exp(-(dt || 0) * 8); const h = k.hp > 1 ? 0.03 : 0.022; const sc = 1 + k.flash * 0.08; dummy.position.set(k.x + k.w / 2, h / 2, k.z + k.d / 2); dummy.scale.set(k.w * sc, h * sc, k.d * sc); dummy.updateMatrix(); brickMesh.setMatrixAt(i, dummy.matrix); tmpC.copy(rowColors[k.r] || rowColors[0]).lerp(white, Math.min(1, k.flash * 0.7 + (k.hp > 1 ? 0.2 : 0))); brickMesh.setColorAt(i, tmpC); } brickMesh.count = bricks.length; brickMesh.instanceMatrix.needsUpdate = true; if (brickMesh.instanceColor) brickMesh.instanceColor.needsUpdate = true; for (let i = 0; i < MAXBALLS; i++) { const b = balls[i]; ballMeshes[i].visible = ballGlows[i].visible = !!b; if (b) { ballMeshes[i].position.set(b.x, R, b.z); ballGlows[i].position.set(b.x, R, b.z); } for (let j = 0; j < TRAIL; j++) { const idx = (i * TRAIL + j) * 3; const n = b ? b.trail.length / 2 : 0; if (b && j < n) { trailPos[idx] = b.trail[j * 2]; trailPos[idx + 1] = R; trailPos[idx + 2] = b.trail[j * 2 + 1]; const a = (j / n) * params.trails * 0.8; trailCol[idx] = trailCol[idx + 1] = trailCol[idx + 2] = a; } else trailCol[idx] = trailCol[idx + 1] = trailCol[idx + 2] = 0; } } trailGeo.attributes.position.needsUpdate = true; trailGeo.attributes.color.needsUpdate = true; paddleMesh.scale.x = paddle.w; paddleMesh.position.x = paddle.x; paddleMat.color.copy(cB); paddleMat.emissive.copy(cB); paddleGlow.material.color.copy(cB); paddleGlow.position.set(paddle.x, 0.012, PZ); paddleGlow.scale.set(paddle.w * 1.8, 0.06, 1); railMat.color.copy(cB).multiplyScalar(0.55); killMat.color.copy(cA); // Panel const auto = idle > 4; let hint = ''; if (!ctx.rendering) { if (presenting) hint = XR.handheld ? 'TOUCH THE BOARD TO STEER · TAP TO LAUNCH' : 'POINT TO STEER · TRIGGER LAUNCH · GRIP PLACES'; else hint = touchScreen ? 'DEMO · DRAG TO PLAY' : 'DEMO · MOVE TO PLAY · SPACE LAUNCH'; } drawPanel(auto, hint); bloom.strength = 0.85; }, render() { composer.render(); }, resize({ width, height }) { composer.setSize(width, height); bloom.setSize(width, height); layout(); }, dispose() { window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); canvas.removeEventListener('pointerdown', onPointerDown); for (const off of offs) if (typeof off === 'function') off(); if (pinned && XR) XR.unpin(game); }, }; }