Constellation mode — alternate galaxy rendered as star-chart constellations

[adhit-r]

Skills: Three.js · WebGL · graph layout · constellation aesthetics
Time: ~12 hours
Good for: R3F enthusiasts · 3D devs · designers who love star charts
Difficulty: Advanced

---

Context

The galaxy currently renders as a 3D scene with planets as small spheres. A "Constellation mode" would offer an alternate rendering: every entity becomes a star-like point, and connections (relations) become faint lines, like a Sagan-era night-sky chart.

Goal

A toggle (similar to Atlas mode) that switches the galaxy view from "spatial canon" to "constellation projection."

• Each entity = a glowing point sized by importance (films appearances + relation count)
• Each relation = a faint line, color by kind (master_of: accent-blue, parent_of: cream, ally_of: faint accent)
• Force-directed layout (or 2D projection of the existing 3D positions)
• Optional: zoom-into-constellation reveals planet-system layout

Where to start

• New components/galaxy/ConstellationView.tsx — full alternate canvas
• A new toggle in NavRail (star-chart icon)
• Reuse the existing relation graph from relationGeometry.ts and entity positions
• Layout algorithm: either project 3D positions to 2D (top-down + jitter) OR run a force-directed layout over the relation graph
• Render as <points> (entities) + <lineSegments> (relations) with additive blending

Acceptance criteria

• Toggle from main galaxy view → constellation view in < 800ms transition
• Click any star → cross-pivot to that entity
• 60fps with 318 entities + ~600 relations
• Reduced motion → static layout, instant toggle
• Clean disposal on toggle-off

Inspiration

https://stellarium.org · https://commons.wikimedia.org/wiki/File:Sky_chart_circumpolar.png