Home

verycracked / starbase

publicverycracked/Starbase
Overview Code History Branches Pull requestsIssuesInsights
main
HomeOverview Code PRsIssues

Rewrite graph from 2D canvas to 3D WebGL with full visual system

7 months ago

43a230b
Authored
V.C. Billingsley2/20/2026, 5:47:09 AM
Replace the 2D force-graph with 3d-force-graph (Three.js). Each node
renders as a glowing sphere with star-point + glow meshes, sized by
connection count. Category-based Fibonacci-sphere clustering positions
related nodes into a tight nebula. Hidden links keep the layout clean.

Visual features added in this commit:
- Detail panel: slide-in panel showing node metadata, connections,
  GitHub link, and a BFS blast-radius analyzer
- Constellation arcs: curved bezier lines between selected node and
  its neighbors, with fade-in animation
- Ethereal sound design: Web Audio API with impulse-response reverb,
  detuned oscillator voices, and distinct sounds for select/close/
  constellation/search actions
- Starfield: 20k+ background stars across 3 depth layers plus nebula
  fog spheres for atmosphere
- UnrealBloomPass: post-processing glow for the star aesthetic
- Cmd+K search palette: keyboard-driven fuzzy search across all nodes
  with arrow-key navigation
- Category legend: clickable color-coded legend for filtering by type
- Per-frame animation: twinkle oscillation, hover/selection emphasis,
  blast-radius color mapping, and label sprite tracking
- URL hash deep links: shareable #node=path links with auto-fly
- STARBASE intro splash: Geist Pixel title with dissolve transitions

The 3D approach is optimal because codebase graphs are inherently
spatial — 3D lets clusters separate naturally without the overlap
problems that plague 2D layouts at scale. Category-based clustering
with Fibonacci-sphere placement ensures even distribution without
manual tuning.

Also updates data.js category format from RGB arrays to hex strings
with labels for consistency with the server-generated graph format.

Parent9e80dd7

4 files changed
  • index.html+1−1
  • src/data.js+6−7
  • src/main.js+907−204
  • src/styles.css+580−3