[ WEBGL_HEROES ]
> Shader-driven hero prototype, and what a 3D engine would cost instead
RYAN KELLY
FULL_STACK_ENGINEER.exe
> renderer: starting…
[ WHAT_IT_COSTS ]
| APPROACH | GZIP | NOTE |
|---|---|---|
| raw WebGL2 (this page) | 0.8 KB | One fragment shader. No dependency, no lazy chunk worth splitting. |
| ogl | 13.0 KB | Thin WebGL wrapper. Worth it once there is real geometry to manage. |
| three.js | 129.6 KB | A minimal scene still pulls the core renderer; it barely tree-shakes. |
| react-three-fiber + three | 237.9 KB | Adds its own reconciler on top of three. Pays off with scene graphs, not backdrops. |
> The homepage ships ~230 KB gzip of JS today, so three.js is a 56% increase for a backdrop.
> Full method, per-theme behaviour, and the case for picking three.js anyway live in docs/hero-webgl-research.md.
[ TRY_IT ]
> Cycle the theme (HIGH → DIM → SKETCH) — the shader reads the same --hero-* tokens CyberHero does, so the palette follows.
> Turn on reduced motion — the loop stops and one still frame is drawn.
> Scroll it out of view or background the tab — the render loop parks itself.
> Five more ideas, each showing both themes at once, are in the hero lab.