ogl (^1.0.11) is a small WebGL library (40KB-ish) — Renderer, Program, Mesh, Geometry, Texture. No scene graph, no ECS, no framework. We chose it because the surfaces we need WebGL for are bespoke and a framework would only get in the way.

Where it's used

These are not the Galaxy Map. The Galaxy Map is reagraph — it shows sites and links on Earth coordinates. Galaxy.tsx is a decorative backdrop with the same name but a different job.

Why bare ogl (not three.js or pixi)

• Bundle size. three.js + the loaders we'd need is hundreds of KB; ogl is ~40KB with the bits we actually use.
• Surface complexity. Both consumers render a handful of meshes with a single shader. There's no animation graph, no physics, no GLTF — three.js's strengths are unused.
• Control. We hand-write the vertex/fragment shaders; ogl gets out of the way.

Lifecycle pattern

Every ogl mount follows the same shape:

1. useEffect on mount: create Renderer, attach canvas to a <div> ref.
2. Build Program (vertex + fragment shader strings), Geometry, Mesh.
3. Start an requestAnimationFrame loop that calls renderer.render({ scene }).
4. ResizeObserver re-syncs canvas size on viewport changes.
5. On unmount: cancel the RAF, dispose buffers, detach canvas.

Skipping step 5 leaks GL contexts — browsers cap simultaneous contexts (~16 on Chromium), so leaks across page navigations eventually break new mounts.

Reduced-motion + visibility

Both consumers respect prefers-reduced-motion: when set, the animation loop pauses and the surface renders one static frame. Both also pause when document.visibilityState === 'hidden' — there's no point shading offscreen frames.

Performance notes

• Don't load textures > 2K on edge hardware; the Prologue Crawl uses procedural geometry for this reason.
• Shaders are inline strings, not external .glsl — keeps the build simple, and the surfaces are small enough that we never need a shader library.
• Only one ogl Renderer per page; don't mount Prologue + scaffold Galaxy together.

What ogl is not used for

• Galaxy Map. That's reagraph + Canvas/SVG overlays.
• Video. That's hls.js / the low-latency player.
• Charts. Those are the reaviz family used on a few dashboards (separate skill pack, not in this stack section yet).

See also

• Components — Prologue Crawl + Sidebar live here (page TBD)
• reagraph — the other WebGL surface in the app