feat: relay station masts come online through the toolkit chapter
This commit is contained in:
@@ -94,3 +94,9 @@ export const CHAPTER_COMPOSITIONS: Readonly<
|
||||
* out when the board goes dark, so it is fully reversible.
|
||||
*/
|
||||
export const BILLBOARD_NUDGE = { targetZ: -6, shift: 0.03, seconds: 0.9 } as const;
|
||||
|
||||
/**
|
||||
* RELAY STATION: while a mast is online the lens lifts toward the mast tops
|
||||
* and the sky beams. Eased in over 0.9 s, back out when the station goes dark.
|
||||
*/
|
||||
export const RELAY_NUDGE = { targetY: 3, seconds: 0.9 } as const;
|
||||
|
||||
@@ -38,7 +38,8 @@ import { createHeadlights } from '@/scene/world/headlights';
|
||||
import { maintenanceProgress } from '@/journey/maintenance-progress';
|
||||
import { createMilestones } from '@/scene/world/milestones';
|
||||
import { billboardNear, createBillboard, textureSize } from '@/scene/world/billboard';
|
||||
import { BILLBOARD_NUDGE } from '@/scene/world/composition';
|
||||
import { BILLBOARD_NUDGE, RELAY_NUDGE } from '@/scene/world/composition';
|
||||
import { createRelayMasts } from '@/scene/world/relay-masts';
|
||||
import { isMilestoneSection, sectionLocalProgress } from '@/journey/route-log';
|
||||
import { dawnStep, type DawnStep } from '@/journey/dawn';
|
||||
import { dawnLightUniforms } from '@/scene/world/dawn-light';
|
||||
@@ -185,7 +186,15 @@ export async function createProceduralSceneGeneration(
|
||||
textureSize: textureSize(context.quality),
|
||||
});
|
||||
let billboardKey = '';
|
||||
// RELAY STATION: transmitter masts come online through Toolkit. Low tier,
|
||||
// touch and data saver: all rungs lit, steady beacons, no beams, hover or tone.
|
||||
const relay = createRelayMasts(
|
||||
context.resources,
|
||||
maintenanceTier === 'full'
|
||||
&& (globalThis.navigator as { connection?: { saveData?: boolean } } | undefined)?.connection?.saveData !== true,
|
||||
);
|
||||
scene.add(
|
||||
relay.group,
|
||||
billboard.mesh,
|
||||
maintenance.group,
|
||||
milestones.mesh,
|
||||
@@ -380,6 +389,15 @@ export async function createProceduralSceneGeneration(
|
||||
musicPulse,
|
||||
deltaSeconds,
|
||||
);
|
||||
const relayNudge = relay.update(
|
||||
snapshot.activeSectionId,
|
||||
snapshot.activeSectionId === 'toolkit' ? sectionLocalProgress(snapshot, 'toolkit') : null,
|
||||
musicPulse,
|
||||
document.documentElement.dataset.relayFocus,
|
||||
deltaSeconds,
|
||||
now,
|
||||
camera.aspect,
|
||||
);
|
||||
const billboardNudge = billboard.update({
|
||||
section: snapshot.activeSectionId,
|
||||
p: snapshot.activeSectionId === 'selected-builds'
|
||||
@@ -533,7 +551,7 @@ export async function createProceduralSceneGeneration(
|
||||
baseComposition.targetY,
|
||||
upcoming.targetY,
|
||||
anticipation,
|
||||
),
|
||||
) + RELAY_NUDGE.targetY * relayNudge,
|
||||
targetZ: THREE.MathUtils.lerp(
|
||||
baseComposition.targetZ,
|
||||
upcoming.targetZ,
|
||||
|
||||
469
src/scene/world/relay-masts.ts
Normal file
469
src/scene/world/relay-masts.ts
Normal file
@@ -0,0 +1,469 @@
|
||||
import * as THREE from 'three';
|
||||
import type { SectionId } from '@/content/types';
|
||||
import { SIGN_ACCENTS } from '@/journey/sign-routes';
|
||||
import { BEACON_HZ, readRelay, RELAY_STOPS, rungLit } from '@/journey/relay-progress';
|
||||
import type { SceneResourceBag } from '@/scene/resources';
|
||||
import { CHAPTER_COMPOSITIONS, RELAY_NUDGE } from './composition';
|
||||
|
||||
type ThreeVector3 = InstanceType<typeof THREE.Vector3>;
|
||||
type ThreeBufferGeometry = InstanceType<typeof THREE.BufferGeometry>;
|
||||
type ThreeColor = InstanceType<typeof THREE.Color>;
|
||||
type ThreeShaderMaterial = InstanceType<typeof THREE.ShaderMaterial>;
|
||||
type ThreeGroup = InstanceType<typeof THREE.Group>;
|
||||
type ThreeMaterial = InstanceType<typeof THREE.Material>;
|
||||
type ThreeInstancedBufferAttribute = InstanceType<typeof THREE.InstancedBufferAttribute>;
|
||||
type ThreeInstancedMesh = InstanceType<typeof THREE.InstancedMesh>;
|
||||
|
||||
/**
|
||||
* RELAY STATION, scene side. Four lattice transmitter masts, one per toolkit
|
||||
* group, stand on the far shoulders, alternating sides (first on the right).
|
||||
* As the chapter scrolls each comes online in turn: its lamp rungs ignite
|
||||
* bottom-up (one per technology), a red beacon blinks at 0.5 Hz and a thin
|
||||
* additive beam sweeps the sky every 6 s. Every beat is a pure function of
|
||||
* section-local progress, so scrolling back takes the masts offline again.
|
||||
* One InstancedMesh per part (frames, rungs, beacons, beams). Hovering a
|
||||
* technology flashes its rung. Lite (low tier, touch, data saver): all rungs
|
||||
* lit from chapter entry, steady beacons, no beams, hover or tone.
|
||||
*/
|
||||
/** Lattice mast at scale 1 (the world is ~2.3x life size). */
|
||||
export const MAST_HEIGHT = 44;
|
||||
const BASE_HALF = 2.4;
|
||||
const TOP_HALF = 0.7;
|
||||
const ANTENNA = 6;
|
||||
const LEG = 0.36;
|
||||
const BRACE = 0.16;
|
||||
const SECTIONS = 9;
|
||||
/** Rungs fill this band of the mast's height, bottom-up. */
|
||||
const RUNG_FROM = 0.08;
|
||||
const RUNG_SPAN = 0.8;
|
||||
const MAX_RUNGS = 64;
|
||||
const FLASH_SECONDS = 0.45;
|
||||
/** A flashing rung swells (width, height factors): the lit lamps are already hot, so colour alone would not read. */
|
||||
const FLASH_SWELL = { width: 0.5, height: 2.2 } as const;
|
||||
/** One hover flash per rung at most every 0.35 s (photosensitivity). */
|
||||
export const RUNG_FLASH_GAP_SECONDS = 0.35;
|
||||
const BEAM_LENGTH = 170;
|
||||
const BEAM_WIDTH = 7;
|
||||
/** Beam brightness cap (additive, so bloom does not blow out). */
|
||||
export const BEAM_INTENSITY = 0.65;
|
||||
const SWEEP_SECONDS = 6;
|
||||
const PULSE_GAIN = 0.08;
|
||||
|
||||
/**
|
||||
* Where the masts stand, placed by where they land in the frame (toolkit
|
||||
* lens: camera y 8.6, z 25, fov 62). `fx` is the fraction of the half-width
|
||||
* from the centre: the 84%-wide reading panel covers up to 0.84, so every
|
||||
* mast sits in the side margin. The near mast of each pair stands at the
|
||||
* frame edge, the far one just inside it, closer to the centre (perspective:
|
||||
* a row receding toward the vanishing point), so the pair reads as two
|
||||
* towers along the shoulder and never overlaps. `fy` is where the beacon
|
||||
* lands as a fraction of the half-height above the centre: in the upper
|
||||
* third, clear of the nav bar. x and the scale follow from those and the
|
||||
* viewport aspect, so the masts keep their place on narrow lenses too.
|
||||
* Portrait (phones): the margins are slivers, so the masts tuck under the
|
||||
* panel edge instead of leaving the frame.
|
||||
*/
|
||||
const LENS = CHAPTER_COMPOSITIONS.toolkit;
|
||||
export const DESIGN_ASPECT = 1.6;
|
||||
const TAN_HALF_HEIGHT = Math.tan(THREE.MathUtils.degToRad(LENS.fov / 2));
|
||||
const SLOT_FRAMES = [
|
||||
{ z: -55, fx: 0.94, fy: 0.72 },
|
||||
{ z: -55, fx: 0.94, fy: 0.72 },
|
||||
{ z: -130, fx: 0.875, fy: 0.56 },
|
||||
{ z: -130, fx: 0.875, fy: 0.56 },
|
||||
] as const;
|
||||
|
||||
interface RelaySlot {
|
||||
z: number;
|
||||
side: number;
|
||||
x: number;
|
||||
scale: number;
|
||||
}
|
||||
|
||||
let slotAspect = Number.NaN;
|
||||
let slots: RelaySlot[] = [];
|
||||
|
||||
/** The four stands for a viewport aspect (memoised: the aspect changes only on resize). */
|
||||
export function relaySlots(aspect: number = DESIGN_ASPECT): RelaySlot[] {
|
||||
if (aspect === slotAspect) return slots;
|
||||
slotAspect = aspect;
|
||||
const portrait = aspect < 1.18;
|
||||
slots = SLOT_FRAMES.map((slot, i) => {
|
||||
const side = i % 2 === 0 ? 1 : -1;
|
||||
const distance = LENS.z - slot.z;
|
||||
const fx = portrait ? slot.fx * 0.9 : slot.fx;
|
||||
return {
|
||||
z: slot.z,
|
||||
side,
|
||||
x: side * fx * TAN_HALF_HEIGHT * aspect * distance,
|
||||
scale: (LENS.y + slot.fy * TAN_HALF_HEIGHT * distance) / (MAST_HEIGHT + ANTENNA),
|
||||
};
|
||||
});
|
||||
return slots;
|
||||
}
|
||||
|
||||
const clamp01 = (value: number): number => Math.min(1, Math.max(0, value));
|
||||
const smooth = (from: number, to: number, value: number): number => {
|
||||
const t = clamp01((value - from) / (to - from));
|
||||
return t * t * (3 - 2 * t);
|
||||
};
|
||||
const halfWidthAt = (y: number): number => THREE.MathUtils.lerp(BASE_HALF, TOP_HALF, y / MAST_HEIGHT);
|
||||
|
||||
/** The chapter fades the station in and out at its edges. */
|
||||
export const relayPresence = (p: number): number => smooth(0, 0.05, p) * (1 - smooth(0.95, 1, p));
|
||||
|
||||
export interface RelayRung {
|
||||
/** World height of the rung's centre. */
|
||||
y: number;
|
||||
halfWidth: number;
|
||||
lit: number;
|
||||
}
|
||||
|
||||
export interface RelayMast {
|
||||
x: number;
|
||||
z: number;
|
||||
scale: number;
|
||||
side: number;
|
||||
height: number;
|
||||
presence: number;
|
||||
/** 0..1: the mast is online (beacon and beam). */
|
||||
level: number;
|
||||
rungs: RelayRung[];
|
||||
}
|
||||
|
||||
/** Every mast's frame for chapter progress p (null outside Toolkit: all absent). */
|
||||
export function relayLayout(
|
||||
p: number | null,
|
||||
counts: readonly number[] = readRelay().counts,
|
||||
full = true,
|
||||
aspect: number = DESIGN_ASPECT,
|
||||
): RelayMast[] {
|
||||
return relaySlots(aspect).slice(0, counts.length).map((slot, mast) => {
|
||||
const count = counts[mast] ?? 0;
|
||||
const presence = p === null ? 0 : relayPresence(p);
|
||||
const live = presence > 0;
|
||||
return {
|
||||
x: slot.x,
|
||||
z: slot.z,
|
||||
scale: slot.scale,
|
||||
side: slot.side,
|
||||
height: (MAST_HEIGHT + ANTENNA) * slot.scale,
|
||||
presence,
|
||||
level: !live ? 0 : full ? smooth(RELAY_STOPS[mast]!, RELAY_STOPS[mast]! + 0.03, p!) : 1,
|
||||
rungs: Array.from({ length: count }, (_, rung) => {
|
||||
const y = MAST_HEIGHT * (RUNG_FROM + (RUNG_SPAN * (rung + 0.5)) / count);
|
||||
return { y: y * slot.scale, halfWidth: halfWidthAt(y) * slot.scale, lit: !live ? 0 : full ? rungLit(p, mast, rung, count) : 1 };
|
||||
}),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** One strut from a to b, square section t. */
|
||||
function strut(a: ThreeVector3, b: ThreeVector3, t: number): ThreeBufferGeometry {
|
||||
const dir = b.clone().sub(a);
|
||||
const geometry = new THREE.BoxGeometry(t, dir.length(), t).translate(0, dir.length() / 2, 0);
|
||||
geometry.applyQuaternion(new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.normalize()));
|
||||
return geometry.translate(a.x, a.y, a.z);
|
||||
}
|
||||
|
||||
function merge(pieces: ThreeBufferGeometry[]): ThreeBufferGeometry {
|
||||
const positions: number[] = [];
|
||||
const normals: number[] = [];
|
||||
const indices: number[] = [];
|
||||
for (const piece of pieces) {
|
||||
const offset = positions.length / 3;
|
||||
positions.push(...piece.getAttribute('position').array);
|
||||
normals.push(...piece.getAttribute('normal').array);
|
||||
indices.push(...Array.from(piece.getIndex()!.array as ArrayLike<number>, (i) => i + offset));
|
||||
piece.dispose();
|
||||
}
|
||||
const merged = new THREE.BufferGeometry();
|
||||
merged.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
||||
merged.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
|
||||
merged.setIndex(indices);
|
||||
return merged;
|
||||
}
|
||||
|
||||
/** Four tapered legs, X braces and rings on every face, and an antenna. */
|
||||
function latticeGeometry(): ThreeBufferGeometry {
|
||||
const corner = (y: number, sx: number, sz: number) => new THREE.Vector3(sx * halfWidthAt(y), y, sz * halfWidthAt(y));
|
||||
const corners = [[1, 1], [-1, 1], [-1, -1], [1, -1]] as const;
|
||||
const pieces: ThreeBufferGeometry[] = [];
|
||||
corners.forEach(([sx, sz]) => pieces.push(strut(corner(0, sx, sz), corner(MAST_HEIGHT, sx, sz), LEG)));
|
||||
for (let k = 0; k <= SECTIONS; k += 1) {
|
||||
const y0 = (MAST_HEIGHT * k) / SECTIONS;
|
||||
const y1 = (MAST_HEIGHT * (k + 1)) / SECTIONS;
|
||||
corners.forEach(([sx, sz], c) => {
|
||||
const [nx, nz] = corners[(c + 1) % 4]!;
|
||||
pieces.push(strut(corner(y0, sx, sz), corner(y0, nx, nz), BRACE));
|
||||
if (k < SECTIONS) {
|
||||
pieces.push(strut(corner(y0, sx, sz), corner(y1, nx, nz), BRACE));
|
||||
pieces.push(strut(corner(y0, nx, nz), corner(y1, sx, sz), BRACE));
|
||||
}
|
||||
});
|
||||
}
|
||||
pieces.push(strut(new THREE.Vector3(0, MAST_HEIGHT - 1, 0), new THREE.Vector3(0, MAST_HEIGHT + ANTENNA, 0), 0.3));
|
||||
return merge(pieces);
|
||||
}
|
||||
|
||||
const SCREEN_DOOR = /* glsl */ `
|
||||
vec2 cell = mod(floor(gl_FragCoord.xy), 4.0);
|
||||
float threshold = (mod(cell.x + cell.y * 2.0, 4.0) * 4.0 + mod(cell.y, 2.0) * 2.0 + mod(cell.x, 2.0) + 0.5) / 16.0;
|
||||
if (vState.z < threshold) discard;
|
||||
`;
|
||||
|
||||
/** x: lit/level, y: flash, z: presence. */
|
||||
function solidMaterial(accent: ThreeColor, pulse: { value: number }, body: string): ThreeShaderMaterial {
|
||||
return new THREE.ShaderMaterial({
|
||||
uniforms: { uAccent: { value: accent }, uPulse: pulse },
|
||||
vertexShader: /* glsl */ `
|
||||
attribute vec3 aState;
|
||||
varying vec3 vState;
|
||||
varying vec3 vNormal;
|
||||
void main() {
|
||||
vState = aState;
|
||||
vNormal = normalize(mat3(modelMatrix * instanceMatrix) * normal);
|
||||
gl_Position = projectionMatrix * viewMatrix * modelMatrix * instanceMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: /* glsl */ `
|
||||
uniform vec3 uAccent;
|
||||
uniform float uPulse;
|
||||
varying vec3 vState;
|
||||
varying vec3 vNormal;
|
||||
void main() {
|
||||
${SCREEN_DOOR}
|
||||
float key = max(0.0, dot(normalize(vNormal), normalize(vec3(-0.45, 0.85, 0.35))));
|
||||
vec3 color;
|
||||
${body}
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
#include <tonemapping_fragment>
|
||||
#include <colorspace_fragment>
|
||||
}
|
||||
`,
|
||||
fog: false,
|
||||
});
|
||||
}
|
||||
|
||||
export interface RelayRungState {
|
||||
lit: number;
|
||||
flash: number;
|
||||
}
|
||||
|
||||
export interface RelayMastsWorld {
|
||||
readonly group: ThreeGroup;
|
||||
/**
|
||||
* Section-local progress (null outside Toolkit), the smoothed bass pulse,
|
||||
* html[data-relay-focus] ("group:item"), frame delta and the frame clock
|
||||
* (ms) and the viewport aspect. Returns the camera nudge, 0..1 (eased).
|
||||
*/
|
||||
update(section: SectionId, p: number | null, pulse: number, focus: string | undefined, deltaSeconds: number, now: number, aspect?: number): number;
|
||||
/** Test hook: every rung's lit and flash level, in group order. */
|
||||
rungs(): RelayRungState[];
|
||||
/** Test hook: each beacon's current level. */
|
||||
beacons(): number[];
|
||||
/** Test hook: masts online, and tones requested. */
|
||||
online(): { count: number; tones: number };
|
||||
}
|
||||
|
||||
const instanced = (geometry: ThreeBufferGeometry, material: ThreeMaterial, count: number, name: string) => {
|
||||
const mesh = new THREE.InstancedMesh(geometry, material, count);
|
||||
mesh.name = name;
|
||||
mesh.frustumCulled = false;
|
||||
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
|
||||
return mesh;
|
||||
};
|
||||
|
||||
const stateAttribute = (geometry: ThreeBufferGeometry, count: number): ThreeInstancedBufferAttribute => {
|
||||
const state = new THREE.InstancedBufferAttribute(new Float32Array(count * 3), 3);
|
||||
state.setUsage(THREE.DynamicDrawUsage);
|
||||
geometry.setAttribute('aState', state);
|
||||
return state;
|
||||
};
|
||||
|
||||
const defaultTone = (): void => {
|
||||
void import('@/audio/relay-tone').then((tone) => tone.playRelayTone(), () => undefined);
|
||||
};
|
||||
|
||||
export function createRelayMasts(resources: SceneResourceBag, full: boolean, tone: () => void = defaultTone): RelayMastsWorld {
|
||||
const accent = new THREE.Color(SIGN_ACCENTS.toolkit);
|
||||
const pulseUniform = { value: 0 };
|
||||
const group = new THREE.Group();
|
||||
group.name = 'relay-station';
|
||||
group.visible = false;
|
||||
|
||||
const frameGeometry = resources.own('geometry', latticeGeometry());
|
||||
const frameState = stateAttribute(frameGeometry, SLOT_FRAMES.length);
|
||||
const frames = instanced(frameGeometry, resources.own('material', solidMaterial(accent, pulseUniform, /* glsl */ `
|
||||
color = vec3(0.07, 0.06, 0.1) + vec3(0.1, 0.09, 0.15) * key + uAccent * (0.08 + 0.22 * vState.x);
|
||||
`)), SLOT_FRAMES.length, 'relay-masts');
|
||||
|
||||
const rungGeometry = resources.own('geometry', new THREE.BoxGeometry(1, 1, 1));
|
||||
const rungState = stateAttribute(rungGeometry, MAX_RUNGS);
|
||||
const rungMesh = instanced(rungGeometry, resources.own('material', solidMaterial(accent, pulseUniform, /* glsl */ `
|
||||
// Lit lamps are a hot, saturated violet (hotter than the bloom threshold, so they glow violet, not white).
|
||||
vec3 lamp = vec3(0.62, 0.3, 1.0) * 2.1 * (1.0 + ${PULSE_GAIN.toFixed(2)} * uPulse);
|
||||
vec3 dark = uAccent * 0.12 + vec3(0.02) * key;
|
||||
// Hover flash: the rung turns ice-white and swells (see FLASH_SWELL).
|
||||
color = mix(mix(dark, lamp, vState.x), vec3(0.78, 1.0, 1.0) * 2.4, vState.y);
|
||||
`)), MAX_RUNGS, 'relay-rungs');
|
||||
|
||||
const beaconGeometry = resources.own('geometry', new THREE.OctahedronGeometry(1.6));
|
||||
const beaconState = stateAttribute(beaconGeometry, SLOT_FRAMES.length);
|
||||
const beaconMesh = instanced(beaconGeometry, resources.own('material', solidMaterial(accent, pulseUniform, /* glsl */ `
|
||||
color = vec3(1.0, 0.12, 0.08) * (0.12 + 2.2 * vState.x);
|
||||
`)), SLOT_FRAMES.length, 'relay-beacons');
|
||||
group.add(frames, rungMesh, beaconMesh);
|
||||
|
||||
// The sky beam: a thin additive quad from the beacon, leaning in over the road and sweeping every 6 s.
|
||||
let beamMesh: ThreeInstancedMesh | null = null;
|
||||
let beamState: ThreeInstancedBufferAttribute | null = null;
|
||||
if (full) {
|
||||
const beamGeometry = resources.own('geometry', new THREE.PlaneGeometry(1, 1).translate(0, 0.5, 0));
|
||||
beamState = stateAttribute(beamGeometry, SLOT_FRAMES.length);
|
||||
beamMesh = instanced(beamGeometry, resources.own('material', new THREE.ShaderMaterial({
|
||||
uniforms: { uAccent: { value: accent } },
|
||||
vertexShader: /* glsl */ `
|
||||
attribute vec3 aState;
|
||||
varying vec2 vUv;
|
||||
varying float vLevel;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
vLevel = aState.x * aState.z;
|
||||
gl_Position = projectionMatrix * viewMatrix * modelMatrix * instanceMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: /* glsl */ `
|
||||
uniform vec3 uAccent;
|
||||
varying vec2 vUv;
|
||||
varying float vLevel;
|
||||
void main() {
|
||||
float across = pow(max(0.0, 1.0 - abs(vUv.x - 0.5) * 2.0), 2.0);
|
||||
// The base eases in over the first 12% so the source does not read as a blown blob at the beacon.
|
||||
float along = pow(1.0 - vUv.y, 1.6) * smoothstep(0.0, 0.12, vUv.y);
|
||||
vec3 color = mix(vec3(0.6, 0.36, 1.0), vec3(0.9, 0.92, 1.0), 0.3) * across * along * ${BEAM_INTENSITY.toFixed(2)} * vLevel;
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
#include <tonemapping_fragment>
|
||||
#include <colorspace_fragment>
|
||||
}
|
||||
`,
|
||||
transparent: true,
|
||||
blending: THREE.AdditiveBlending,
|
||||
depthWrite: false,
|
||||
fog: false,
|
||||
})), SLOT_FRAMES.length, 'relay-beams');
|
||||
group.add(beamMesh);
|
||||
}
|
||||
|
||||
const flash = new Float32Array(MAX_RUNGS);
|
||||
const sinceFlash = new Float32Array(MAX_RUNGS).fill(Number.POSITIVE_INFINITY);
|
||||
const lit = new Float32Array(MAX_RUNGS);
|
||||
const beaconLevels = [0, 0, 0, 0];
|
||||
let total = 0;
|
||||
let lastFocus: string | undefined;
|
||||
let lastSection: SectionId | null = null;
|
||||
let onlineCount = 0;
|
||||
let tones = 0;
|
||||
let nudgeRun = 0;
|
||||
const matrix = new THREE.Matrix4();
|
||||
const position = new THREE.Vector3();
|
||||
const rotation = new THREE.Quaternion();
|
||||
const scale = new THREE.Vector3();
|
||||
const forward = new THREE.Vector3(0, 0, 1);
|
||||
|
||||
return {
|
||||
group,
|
||||
rungs: () => Array.from({ length: total }, (_, i) => ({ lit: lit[i]!, flash: flash[i]! })),
|
||||
beacons: () => [...beaconLevels],
|
||||
online: () => ({ count: onlineCount, tones }),
|
||||
update(section, p, pulse, focus, deltaSeconds, now, aspect = DESIGN_ASPECT) {
|
||||
const dt = Math.max(0, deltaSeconds);
|
||||
const live = section === 'toolkit' ? p : null;
|
||||
const masts = relayLayout(live, readRelay().counts, full, aspect);
|
||||
const changed = section !== lastSection;
|
||||
lastSection = section;
|
||||
|
||||
// A mast coming online (scrolling forward, not a jump into the chapter) chirps once.
|
||||
const count = live === null ? 0 : RELAY_STOPS.filter((stop, i) => i < masts.length && live >= stop).length;
|
||||
if (full && !changed && count > onlineCount) {
|
||||
tones += 1;
|
||||
tone();
|
||||
}
|
||||
onlineCount = count;
|
||||
nudgeRun = clamp01(nudgeRun + (count > 0 ? 1 : -1) * (dt / RELAY_NUDGE.seconds));
|
||||
|
||||
// Hover: the focused technology's rung flashes, at most every 0.35 s.
|
||||
let focusIndex = -1;
|
||||
if (full && focus !== undefined && focus !== lastFocus) {
|
||||
const [g, item] = focus.split(':').map(Number);
|
||||
if (masts[g!] !== undefined && item! >= 0 && item! < masts[g!]!.rungs.length) {
|
||||
focusIndex = masts.slice(0, g).reduce((sum, mast) => sum + mast.rungs.length, 0) + item!;
|
||||
}
|
||||
}
|
||||
lastFocus = focus;
|
||||
|
||||
const time = now / 1000;
|
||||
let index = 0;
|
||||
let any = false;
|
||||
masts.forEach((mast, m) => {
|
||||
const visible = mast.presence > 0;
|
||||
any ||= visible;
|
||||
scale.setScalar(visible ? mast.scale : 0);
|
||||
rotation.identity();
|
||||
position.set(mast.x, 0, mast.z);
|
||||
frames.setMatrixAt(m, matrix.compose(position, rotation, scale));
|
||||
frameState.setXYZ(m, mast.level, 0, mast.presence);
|
||||
|
||||
// A soft 0.5 Hz blink while online (lite: steady).
|
||||
const blink = full ? Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * BEACON_HZ * time + m * 1.3), 3) : 0.6;
|
||||
beaconLevels[m] = visible ? mast.level * (0.2 + 0.8 * blink) : 0;
|
||||
position.set(mast.x, (MAST_HEIGHT + ANTENNA) * mast.scale, mast.z);
|
||||
beaconMesh.setMatrixAt(m, matrix.compose(position, rotation, scale));
|
||||
beaconState.setXYZ(m, beaconLevels[m]!, 0, mast.presence);
|
||||
|
||||
if (beamMesh !== null && beamState !== null) {
|
||||
const sweep = mast.side * 0.5 + 0.4 * Math.sin((2 * Math.PI * time) / SWEEP_SECONDS + m * 1.7);
|
||||
rotation.setFromAxisAngle(forward, sweep);
|
||||
const shown = visible && mast.level > 0 ? mast.scale : 0;
|
||||
beamMesh.setMatrixAt(m, matrix.compose(position, rotation, scale.set(BEAM_WIDTH * shown, BEAM_LENGTH * shown, 1)));
|
||||
beamState.setXYZ(m, mast.level, 0, mast.presence);
|
||||
rotation.identity();
|
||||
}
|
||||
|
||||
for (const rung of mast.rungs) {
|
||||
if (index >= MAX_RUNGS) break;
|
||||
sinceFlash[index]! += dt;
|
||||
if (index === focusIndex && visible && sinceFlash[index]! >= RUNG_FLASH_GAP_SECONDS) {
|
||||
flash[index] = 1;
|
||||
sinceFlash[index] = 0;
|
||||
} else {
|
||||
flash[index] = Math.max(0, flash[index]! - dt / FLASH_SECONDS);
|
||||
}
|
||||
lit[index] = rung.lit;
|
||||
const s = visible ? mast.scale : 0;
|
||||
const f = flash[index]!;
|
||||
position.set(mast.x, rung.y, mast.z + rung.halfWidth + 0.35 * s);
|
||||
scale.set(visible ? rung.halfWidth * 2.3 * (1 + FLASH_SWELL.width * f) : 0, 0.9 * s * (1 + FLASH_SWELL.height * f), 0.6 * s);
|
||||
rungMesh.setMatrixAt(index, matrix.compose(position, rotation, scale));
|
||||
rungState.setXYZ(index, rung.lit, flash[index]!, mast.presence);
|
||||
index += 1;
|
||||
}
|
||||
});
|
||||
total = index;
|
||||
rungMesh.count = total;
|
||||
frames.count = masts.length;
|
||||
beaconMesh.count = masts.length;
|
||||
if (beamMesh !== null) beamMesh.count = masts.length;
|
||||
group.visible = any;
|
||||
if (any) {
|
||||
pulseUniform.value = full ? clamp01(pulse) : 0;
|
||||
for (const mesh of [frames, rungMesh, beaconMesh, beamMesh]) {
|
||||
if (mesh === null) continue;
|
||||
mesh.instanceMatrix.needsUpdate = true;
|
||||
(mesh.geometry.getAttribute('aState') as ThreeInstancedBufferAttribute).needsUpdate = true;
|
||||
}
|
||||
}
|
||||
return nudgeRun * nudgeRun * (3 - 2 * nudgeRun);
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user