6c11368202
`ready` only meant the graph got built — a suspended AudioContext is still silent, so there was no way to tell whether the storm was actually audible. The HUD now reports the real context state. Verified through it: context runs on first gesture; 7.5 -> 17.8 m/s takes the wind bed 0.16 -> 0.36 gain while the howl layer goes 0.016 -> 0.104 and the cutoff opens 428 -> 767 Hz, so a gale reads as a gale and not just a louder breeze. Rain tracks its curve 0.03 -> 0.32. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
264 lines
10 KiB
HTML
264 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>SHADES — Lane C — weather bench</title>
|
||
<style>
|
||
:root { --ink:#d8d8e0; --gold:#ffd23d; --neon:#3dff8b; }
|
||
* { box-sizing:border-box; }
|
||
body { margin:0; overflow:hidden; background:#000;
|
||
font:13px/1.45 "Courier New", ui-monospace, monospace; color:var(--ink); }
|
||
canvas { display:block; }
|
||
#hud { position:fixed; top:10px; left:10px; background:rgba(6,6,12,.75); padding:8px 12px;
|
||
border:1px solid #26263a; z-index:3; min-width:250px; }
|
||
#hud b { color:var(--gold); }
|
||
#hud .warn { color:#ff6; font-weight:bold; }
|
||
#hud .bad { color:#f66; font-weight:bold; }
|
||
#ctl { position:fixed; bottom:10px; left:10px; background:rgba(6,6,12,.8); padding:8px 12px;
|
||
border:1px solid #26263a; z-index:3; }
|
||
#ctl button { background:#1d1d2b; color:var(--ink); border:1px solid #666; font:inherit;
|
||
padding:4px 9px; cursor:pointer; }
|
||
#ctl button:hover { border-color:var(--neon); color:var(--neon); }
|
||
#ctl input[type=range] { width:220px; vertical-align:middle; }
|
||
#note { position:fixed; top:10px; right:10px; background:rgba(6,6,12,.75); padding:8px 12px;
|
||
border:1px solid #26263a; z-index:3; max-width:280px; color:#8a8a99; }
|
||
.bar { display:inline-block; width:90px; height:7px; border:1px solid #555; vertical-align:middle; }
|
||
.bar i { display:block; height:100%; background:var(--neon); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<canvas id="c"></canvas>
|
||
<div id="hud"></div>
|
||
<div id="note">
|
||
<b>Lane C bench.</b> Graybox stand-in for Lane A's yard — this exists to drive
|
||
weather.js / skyfx.js / debris.js before M0 lands. The sail here is a MOCK
|
||
(Lane B owns the real one); it's a bare node grid so debris impulse is visible.
|
||
<br><br>drag = orbit · click = start audio
|
||
</div>
|
||
<div id="ctl"></div>
|
||
|
||
<script type="module">
|
||
import * as THREE from './vendor/three.module.js';
|
||
import { loadStorm, createWind } from './js/weather.js';
|
||
import { createSkyFx } from './js/skyfx.js';
|
||
import { createDebris } from './js/debris.js';
|
||
|
||
const canvas = document.getElementById('c');
|
||
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
|
||
renderer.setPixelRatio(Math.min(2, devicePixelRatio));
|
||
renderer.shadowMap.enabled = true;
|
||
const scene = new THREE.Scene();
|
||
scene.background = new THREE.Color(0x9fc4e8);
|
||
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 500);
|
||
|
||
// --- graybox yard: 30×20 m, origin centre (stands in for Lane A's world.js) ---
|
||
const ground = new THREE.Mesh(
|
||
new THREE.PlaneGeometry(30, 20),
|
||
new THREE.MeshStandardMaterial({ color: 0x4a7c3f, roughness: 1 }),
|
||
);
|
||
ground.rotation.x = -Math.PI / 2;
|
||
ground.receiveShadow = true;
|
||
scene.add(ground);
|
||
|
||
// Lane A's landed yard (THREADS): t1 (-9,2), t2 (8,-2), house edge at z=-9.9
|
||
const TREES = [{ x: -9, z: 2 }, { x: 8, z: -2 }];
|
||
for (const tr of TREES) {
|
||
const trunk = new THREE.Mesh(
|
||
new THREE.CylinderGeometry(0.2, 0.28, 4, 8),
|
||
new THREE.MeshStandardMaterial({ color: 0x5a3d24 }),
|
||
);
|
||
trunk.position.set(tr.x, 2, tr.z);
|
||
trunk.castShadow = true;
|
||
scene.add(trunk);
|
||
const canopy = new THREE.Mesh(
|
||
new THREE.SphereGeometry(3, 12, 8),
|
||
new THREE.MeshStandardMaterial({ color: 0x285f23 }),
|
||
);
|
||
canopy.position.set(tr.x, 5, tr.z);
|
||
canopy.castShadow = true;
|
||
scene.add(canopy);
|
||
}
|
||
// house edge along north (-Z), for scale
|
||
const house = new THREE.Mesh(
|
||
new THREE.BoxGeometry(30, 3.2, 1),
|
||
new THREE.MeshStandardMaterial({ color: 0x8a8f96 }),
|
||
);
|
||
house.position.set(0, 1.6, -10.4);
|
||
scene.add(house);
|
||
// the thing you're protecting — Lane A's gardenBed rect
|
||
const bed = new THREE.Mesh(
|
||
new THREE.BoxGeometry(6, 0.25, 4),
|
||
new THREE.MeshStandardMaterial({ color: 0x6b4a2f }),
|
||
);
|
||
bed.position.set(1, 0.12, 2);
|
||
scene.add(bed);
|
||
// 1.7 m reference person
|
||
const ref = new THREE.Mesh(
|
||
new THREE.CapsuleGeometry(0.25, 1.2, 4, 8),
|
||
new THREE.MeshStandardMaterial({ color: 0xffd27a }),
|
||
);
|
||
ref.position.set(2, 0.85, 2);
|
||
ref.castShadow = true;
|
||
scene.add(ref);
|
||
const player = { pos: ref.position, carrying: null, busy: false };
|
||
|
||
const sun = new THREE.DirectionalLight(0xfff4e0, 2.2);
|
||
sun.position.set(-12, 18, 6);
|
||
sun.castShadow = true;
|
||
sun.shadow.mapSize.set(1024, 1024);
|
||
scene.add(sun);
|
||
const hemi = new THREE.HemisphereLight(0xbfd8ff, 0x3a4a2a, 0.9);
|
||
scene.add(hemi);
|
||
|
||
// --- MOCK sail (Lane B owns the real cloth) — a bare node grid so we can see
|
||
// debris shove it and drive the creak/flog audio off corner loads.
|
||
const N = 9;
|
||
const nodes = [];
|
||
for (let v = 0; v < N; v++) {
|
||
for (let u = 0; u < N; u++) {
|
||
nodes.push({ x: -4 + (u / (N - 1)) * 8, y: 3.2, z: -3 + (v / (N - 1)) * 6 });
|
||
}
|
||
}
|
||
const sailGeo = new THREE.BufferGeometry();
|
||
sailGeo.setAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(nodes.length * 3), 3));
|
||
const sailPts = new THREE.Points(sailGeo, new THREE.PointsMaterial({ color: 0xe8c46a, size: 0.14 }));
|
||
scene.add(sailPts);
|
||
const mockSail = {
|
||
nodes,
|
||
corners: [
|
||
{ anchorId: 'h1', hw: { name: 'carabiner', rating: 9 }, load: 0, broken: false },
|
||
{ anchorId: 'h3', hw: { name: 'shackle', rating: 19 }, load: 0, broken: false },
|
||
{ anchorId: 'p1', hw: { name: 'shackle', rating: 19 }, load: 0, broken: false },
|
||
{ anchorId: 'p2', hw: { name: 'carabiner', rating: 9 }, load: 0, broken: false },
|
||
],
|
||
};
|
||
|
||
// --- weather ---
|
||
const params = new URLSearchParams(location.search);
|
||
const stormName = params.get('storm') || 'storm_02_wildnight';
|
||
const def = await loadStorm(stormName);
|
||
const wind = createWind(def);
|
||
wind.setShelters(TREES.map((t) => ({ x: t.x, z: t.z, radius: 3, strength: 0.45, length: 14 })));
|
||
|
||
const ticker = [];
|
||
const sky = createSkyFx({ scene, camera, wind, sun, hemi, onEvent: (s) => ticker.unshift(s) });
|
||
const debris = createDebris({
|
||
wind, scene, player,
|
||
onEvent: (s) => ticker.unshift(s),
|
||
onHitPlayer: (p, impact) => ticker.unshift(`KNOCKED DOWN by ${p.model} (${impact.toFixed(0)})`),
|
||
});
|
||
addEventListener('pointerdown', () => sky.unlockAudio(), { once: true });
|
||
|
||
// --- controls ---
|
||
let t = 0, playing = true, rate = 1;
|
||
const ctl = document.getElementById('ctl');
|
||
ctl.innerHTML = `
|
||
<button id="play">pause</button>
|
||
<button id="r1">1×</button><button id="r4">4×</button><button id="r0">0.25×</button>
|
||
<button id="reset">reset</button>
|
||
<button id="break">break a corner</button>
|
||
<button id="crate">throw a crate</button>
|
||
<input id="scrub" type="range" min="0" max="${def.duration}" step="0.1" value="0">
|
||
`;
|
||
const $ = (id) => document.getElementById(id);
|
||
$('play').onclick = () => { playing = !playing; $('play').textContent = playing ? 'pause' : 'play'; };
|
||
$('r1').onclick = () => { rate = 1; };
|
||
$('r4').onclick = () => { rate = 4; };
|
||
$('r0').onclick = () => { rate = 0.25; };
|
||
$('reset').onclick = () => { t = 0; debris.clear(); ticker.length = 0; mockSail.corners.forEach((c) => { c.broken = false; }); };
|
||
$('break').onclick = () => { const c = mockSail.corners.find((x) => !x.broken); if (c) { c.broken = true; ticker.unshift(`${c.hw.name} BLOWS at ${c.anchorId.toUpperCase()}!`); } };
|
||
$('crate').onclick = () => debris.spawn({ model: 'BlueCrate_v2', lateral: (Math.random() * 6 - 3), text: 'crate!' }, t);
|
||
$('scrub').oninput = (e) => { t = parseFloat(e.target.value); debris.clear(); };
|
||
|
||
let yaw = 0.7, pitch = 0.28, dist = 26, dragging = false, lx = 0, ly = 0;
|
||
addEventListener('pointerdown', (e) => { dragging = true; lx = e.clientX; ly = e.clientY; });
|
||
addEventListener('pointerup', () => { dragging = false; });
|
||
addEventListener('pointermove', (e) => {
|
||
if (!dragging) return;
|
||
yaw -= (e.clientX - lx) * 0.005; pitch = Math.min(1.3, Math.max(0.05, pitch + (e.clientY - ly) * 0.004));
|
||
lx = e.clientX; ly = e.clientY;
|
||
});
|
||
addEventListener('wheel', (e) => { dist = Math.min(60, Math.max(8, dist + e.deltaY * 0.02)); });
|
||
|
||
function resize() {
|
||
const w = innerWidth, h = innerHeight;
|
||
renderer.setSize(w, h);
|
||
camera.aspect = w / h;
|
||
camera.updateProjectionMatrix();
|
||
}
|
||
addEventListener('resize', resize); resize();
|
||
|
||
// --- loop: fixed-dt sim, rAF only drives the clock (PLAN3D §0) ---
|
||
const DT = 1 / 60;
|
||
let acc = 0, last = performance.now();
|
||
const hud = document.getElementById('hud');
|
||
const probe = new THREE.Vector3();
|
||
const w = new THREE.Vector3();
|
||
const posAttr = sailGeo.getAttribute('position');
|
||
|
||
function frame(now) {
|
||
const real = Math.min(0.1, (now - last) / 1000);
|
||
last = now;
|
||
if (playing) acc += real * rate;
|
||
|
||
while (acc >= DT) {
|
||
acc -= DT;
|
||
t += DT;
|
||
if (t > def.duration) t = 0;
|
||
|
||
// mock cloth: nodes just bob with local wind so debris has something to hit
|
||
for (const n of nodes) {
|
||
probe.set(n.x, n.y, n.z);
|
||
wind.sample(probe, t, w);
|
||
const sp = Math.hypot(w.x, w.z);
|
||
n.y += ((3.2 + Math.sin(t * 3 + n.x) * sp * 0.02) - n.y) * 0.08;
|
||
}
|
||
// mock loads so the creak layer has something to track
|
||
probe.set(0, 3.2, 0);
|
||
const sp = wind.speedAt(probe, t);
|
||
mockSail.corners.forEach((c, i) => {
|
||
c.load = c.broken ? 0 : sp * sp * 0.021 * (0.7 + i * 0.16);
|
||
});
|
||
|
||
debris.step(DT, t, { player, sail: mockSail });
|
||
sky.step(DT, t, { sail: mockSail });
|
||
}
|
||
|
||
for (let i = 0; i < nodes.length; i++) posAttr.setXYZ(i, nodes[i].x, nodes[i].y, nodes[i].z);
|
||
posAttr.needsUpdate = true;
|
||
|
||
camera.position.set(
|
||
Math.sin(yaw) * Math.cos(pitch) * dist,
|
||
Math.sin(pitch) * dist + 1.5,
|
||
Math.cos(yaw) * Math.cos(pitch) * dist,
|
||
);
|
||
camera.lookAt(0, 2, 0);
|
||
|
||
$('scrub').value = t.toFixed(1);
|
||
probe.set(0, 1.7, 0);
|
||
wind.sample(probe, t, w);
|
||
const speed = Math.hypot(w.x, w.z);
|
||
const tg = wind.gustTelegraph(t);
|
||
const worst = Math.max(...mockSail.corners.map((c) => (c.broken ? 0 : c.load / c.hw.rating)));
|
||
hud.innerHTML = `
|
||
<div><b>${def.name}</b> — ${stormName}</div>
|
||
<div>t <b>${t.toFixed(1)}</b> / ${def.duration}s (${rate}×)</div>
|
||
<div>wind <b>${speed.toFixed(1)}</b> m/s (${(speed * 3.6).toFixed(0)} km/h)</div>
|
||
<div>dir ${(wind.dirAt(t)).toFixed(2)} rad</div>
|
||
<div>rain <span class="bar"><i style="width:${wind.rainAt(t) * 100}%"></i></span></div>
|
||
<div>worst <span class="bar"><i style="width:${Math.min(100, worst * 100)}%;background:${worst > 0.8 ? '#f66' : '#3dff8b'}"></i></span></div>
|
||
<div>debris ${debris.pieces.length} audio ${sky.audio.ready ? sky.audio.state : '(click)'}</div>
|
||
<div>flash ${sky.flash.toFixed(2)}</div>
|
||
${tg ? `<div class="warn">GUST INBOUND ${tg.eta.toFixed(1)}s pow ${tg.power.toFixed(0)}</div>` : '<div> </div>'}
|
||
${ticker.slice(0, 3).map((s) => `<div class="bad">${s}</div>`).join('')}
|
||
`;
|
||
|
||
renderer.render(scene, camera);
|
||
requestAnimationFrame(frame);
|
||
}
|
||
requestAnimationFrame(frame);
|
||
window.__bench = { wind, sky, debris, mockSail, def, get t() { return t; } };
|
||
</script>
|
||
</body>
|
||
</html>
|