114 lines
2.9 KiB
JavaScript
114 lines
2.9 KiB
JavaScript
import { initWorld, onWindowResize, disposeWorld } from './world.js';
|
|
import {
|
|
initAgents, updateAgents, getAgentCount,
|
|
disposeAgents, getAgentStates, applyAgentStates,
|
|
} from './agents.js';
|
|
import { initEffects, updateEffects, disposeEffects } from './effects.js';
|
|
import { initUI, updateUI } from './ui.js';
|
|
import { initInteraction, disposeInteraction } from './interaction.js';
|
|
import { initWebSocket, getConnectionState, getJobCount } from './websocket.js';
|
|
|
|
let running = false;
|
|
let canvas = null;
|
|
|
|
/**
|
|
* Build (or rebuild) the Three.js world.
|
|
*
|
|
* @param {boolean} firstInit
|
|
* true — first page load: also starts UI and WebSocket
|
|
* false — context-restore reinit: skips UI/WS (they survive context loss)
|
|
* @param {Object.<string,string>|null} stateSnapshot
|
|
* Agent state map captured just before teardown; reapplied after initAgents.
|
|
*/
|
|
function buildWorld(firstInit, stateSnapshot) {
|
|
const { scene, camera, renderer } = initWorld(canvas);
|
|
canvas = renderer.domElement;
|
|
|
|
initEffects(scene);
|
|
initAgents(scene);
|
|
|
|
if (stateSnapshot) {
|
|
applyAgentStates(stateSnapshot);
|
|
}
|
|
|
|
initInteraction(camera, renderer);
|
|
|
|
if (firstInit) {
|
|
initUI();
|
|
initWebSocket(scene);
|
|
}
|
|
|
|
const ac = new AbortController();
|
|
window.addEventListener('resize', () => onWindowResize(camera, renderer), { signal: ac.signal });
|
|
|
|
let frameCount = 0;
|
|
let lastFpsTime = performance.now();
|
|
let currentFps = 0;
|
|
|
|
running = true;
|
|
|
|
function animate() {
|
|
if (!running) return;
|
|
requestAnimationFrame(animate);
|
|
|
|
const now = performance.now();
|
|
frameCount++;
|
|
if (now - lastFpsTime >= 1000) {
|
|
currentFps = Math.round(frameCount * 1000 / (now - lastFpsTime));
|
|
frameCount = 0;
|
|
lastFpsTime = now;
|
|
}
|
|
|
|
updateEffects(now);
|
|
updateAgents(now);
|
|
updateUI({
|
|
fps: currentFps,
|
|
agentCount: getAgentCount(),
|
|
jobCount: getJobCount(),
|
|
connectionState: getConnectionState(),
|
|
});
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
animate();
|
|
|
|
return { scene, renderer, ac };
|
|
}
|
|
|
|
function teardown({ scene, renderer, ac }) {
|
|
running = false;
|
|
ac.abort();
|
|
disposeInteraction();
|
|
disposeEffects();
|
|
disposeAgents();
|
|
disposeWorld(renderer, scene);
|
|
}
|
|
|
|
function main() {
|
|
const $overlay = document.getElementById('webgl-recovery-overlay');
|
|
|
|
let handle = buildWorld(true, null);
|
|
|
|
canvas.addEventListener('webglcontextlost', event => {
|
|
event.preventDefault();
|
|
running = false;
|
|
if ($overlay) $overlay.style.display = 'flex';
|
|
});
|
|
|
|
canvas.addEventListener('webglcontextrestored', () => {
|
|
const snapshot = getAgentStates();
|
|
teardown(handle);
|
|
handle = buildWorld(false, snapshot);
|
|
if ($overlay) $overlay.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
main();
|
|
|
|
if (import.meta.env.PROD && 'serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/sw.js').catch(() => {});
|
|
});
|
|
}
|