The Galaxy

Force-Directed Layout

Every node in the graph is a game. Every edge is a relationship. The layout is entirely physics-driven: nodes repel each other, connected nodes attract, and the system settles into an equilibrium where related games end up near each other. No manual positioning. No predefined coordinates. The structure emerges from the data.

The 3D simulation uses d3-force-3d, which extends D3's force simulation into three dimensions. Gravity pulls everything toward the center to prevent drift. Repulsion keeps nodes from overlapping. Link forces pull connected games together. Collision detection prevents interpenetration. Friction dampens oscillation so the system eventually settles.

Tuning the physics took significant iteration. Too much repulsion and the graph explodes outward, leaving empty space in the middle. Too little and everything collapses into a single dense clump. Link strength affects how tightly clusters hold together. Gravity strength controls how centered the whole structure stays. The debug panel (?debug=1) exposes all these parameters as live sliders.

The settle window is 6 seconds. During this time, the simulation runs at full strength. After settling, forces fade over 1 second and the simulation sleeps. Dragging a node wakes the simulation with a 600ms ramp-back to normal forces, creating a springy, responsive feel on release.

Drag to orbit. Scroll to zoom. Hover nodes to see game names. Genre clusters form naturally from the force simulation; nebula overlays make them visible at a glance. This is a miniature version of the real thing, running entirely in your browser via Three.js instanced rendering.

Instanced Rendering

Rendering thousands of game nodes as individual Three.js meshes would be too expensive. Each mesh would be a separate draw call, and the CPU overhead of updating that many scene objects would drop frame rates on mid-range hardware.

Instead, all game nodes are rendered as a single instanced mesh: one sphere geometry, one material, one draw call, with per-instance matrices controlling position and scale. The GPU handles the rest. Edge connections use batched LineSegments2 for the same reason: one draw call for all visible edges.

Louvain Clustering

The force layout creates natural clusters, but it helps to identify and label them explicitly. The system uses the Louvain algorithm (via the graphology library) for community detection. Louvain partitions the graph into clusters where nodes have more internal connections than external ones. In practice, these clusters correspond to genre neighborhoods, era groupings, or studio ecosystems.

Once clusters are identified, they get visual treatment. Each cluster can be colored as a group. Nebula-style fog overlays fill the 3D space around each cluster, creating a visual "neighborhood" effect. You can see genre regions from a distance without reading a single label.

Cover Art LOD

From far away, game nodes are small glowing spheres. But as you zoom in, the spheres swap to billboarded quads showing actual cover art. This level-of-detail (LOD) transition happens smoothly based on camera distance. The effect is like approaching a star and resolving it into a planet with surface detail.

Cover images come from IGDB. The LOD system manages texture loading so only nearby covers are in memory at any time. Games outside the camera frustum or beyond the LOD threshold stay as simple instanced spheres. This keeps the GPU memory budget under control even with thousands of games in the graph.

The Art Director

The visual presentation of the graph is controlled by an "art director" system. Color palettes, gradients, glow intensity, nebula opacity, node sizing, edge styling. Power users and admins can tune all of these through the Art Director panel in the HUD.

Two primary color modes are available: era coloring (nodes colored by release decade) and genre coloring (nodes colored by primary genre). Era mode makes the timeline visible in the layout. Genre mode makes the clustering patterns pop. Both reveal different aspects of the same underlying structure.