visualization

Real-time browser visualization layer for the Unstable Kernel simulation platform. Built with Three.js and TypeScript.

Architecture

graph TD
    subgraph "Browser"
        WASM[kernel WASM module] -->|shared buffer| BRIDGE[bridge.ts]
        BRIDGE --> AGENTS[agents.ts<br/>InstancedMesh]
        BRIDGE --> SIGNALS[signals.ts<br/>DataTexture]
        BRIDGE --> MYCELIUM[mycelium.ts<br/>graph renderer]
        AGENTS --> RENDERER[renderer.ts<br/>Three.js scene]
        SIGNALS --> RENDERER
        MYCELIUM --> RENDERER
        CONTROLS[controls.ts<br/>parameter sliders] --> WASM
        METRICS[metrics.ts<br/>sparkline dashboard] --> WASM
    end

Loading

Modules

File	Purpose
main.ts	App entry, simulation loop, mode switching
bridge.ts	WASM interface, shared memory buffer access
renderer.ts	Three.js scene, orthographic camera, resize handling
agents.ts	InstancedMesh rendering (10k agents, color by species)
signals.ts	DataTexture overlay for pheromone grid visualization
mycelium.ts	Graph renderer (nodes + edges) for mycelium network
controls.ts	Parameter sliders, experiment selector dropdown
metrics.ts	Population counts, sparkline charts
theme.ts	Adaptive dark/light mode

Setup

npm install

# Build WASM first (from kernel repo)
cd ../kernel/simulation && wasm-pack build --target web --out-dir ../../visualization/src/wasm

# Start dev server
npm run dev

Open http://localhost:3000

Features

• 1000+ agents at 60fps via InstancedMesh
• Pheromone trail visualization (additive blending DataTexture)
• Real-time parameter tuning (sliders push to WASM immediately)
• Experiment switching (ecosystem, flocking, pheromone, mycelium)
• Population metrics with sparkline history
• Organic dark/light adaptive theme

License

MIT