Grand Diomande Research · Full HTML Reader

Echelon Web Visualization

- **3D Latent Orb**: GPU-accelerated sphere with custom shaders - Energy-based scaling - Residual glow effects - Fresnel rim lighting - Animated noise distortion

Embodied Trajectory Systems research note experiment writeup candidate score 24 .md

Full Public Reader

Echelon Web Visualization

Beautiful Three.js-based visualization for Echelon's latent space dynamics.

Features

3D Latent Orb: GPU-accelerated sphere with custom shaders
Energy-based scaling
Residual glow effects
Fresnel rim lighting
Animated noise distortion

- Motion Trails: GPU particle system with fade effects

- Phase Indicator: Visual beat phase tracking

- Slow Attractor: Spring connection visualization

- Limb Satellites: Per-limb energy visualization

- Real-time Telemetry: Performance metrics overlay

Development

bash

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

The dev server runs on http://localhost:3000 and proxies WebSocket connections to the Rust backend on port 8080.

Architecture

React + Three.js Frontend
  ├─ @react-three/fiber (React renderer for Three.js)
  ├─ @react-three/drei (Helper components)
  ├─ @react-three/postprocessing (Bloom effects)
  └─ Zustand (State management)
        │
        │ WebSocket (JSON)
        ▼
Rust WebSocket Server (viz-server)
  ├─ Axum web framework
  ├─ Serves static files
  └─ Streams FastState, SlowState, Telemetry
        │
        │ Ringbuf
        ▼
Echelon Audio Engine + Motion Bridge

Data Flow

The visualization receives three types of messages over WebSocket:

FastState

json

{
  "type": "fast_state",
  "latent": [x, y, ...],
  "phase": 0.5,
  "latent_energy": 1.2,
  "residual": 0.3,
  "limb_energy": [0.8, 0.5, 1.0, ...],
  "timestamp_micros": 1234567890
}

SlowState

json

{
  "type": "slow_state",
  "latent": [x, y],
  "coupling": 0.7,
  "timestamp_micros": 1234567890
}

Telemetry

json

{
  "type": "telemetry",
  "engine_callback_ms": 2.5,
  "scheduler_latency_ms": 1.2,
  "cpu_percent": 15.3,
  "xruns": 0,
  "timestamp_micros": 1234567890
}

Running with Echelon

bash

# Terminal 1: Build the web frontend
cd apps/web-viz
npm run build

# Terminal 2: Run the integrated studio-web app
cd ../..
cargo run --release -p studio-web

Then open http://localhost:8080 in your browser.

Controls

Mouse drag: Rotate camera
Mouse wheel: Zoom in/out
Right-click drag: Pan camera

Customization

Shaders

Edit `src/shaders/orbVertex.glsl` and `orbFragment.glsl` to customize the orb appearance.

Colors

Modify the color schemes in:
- `src/components/LatentOrb.jsx` - Main orb color
- `src/components/TrailParticles.jsx` - Trail color
- `src/components/TelemetryOverlay.css` - UI colors

Post-processing

Adjust bloom intensity in `src/components/Scene.jsx`:

jsx

<Bloom
  intensity={1.5}      // Glow strength
  luminanceThreshold={0.2}
  luminanceSmoothing={0.9}
  radius={0.8}
/>

Promotion Decision

Attach run IDs, datasets, metrics, and reproduction commands.

Source Anchor

Comp-Core/apps/desktop/echelon/web-viz/README.md

Detected Structure

Method · Evaluation · Code Anchors · Architecture