Ether — Real-time WebGL Engine
The custom WebGL engine and dev toolkit behind every TakeTwo site — a persistent-canvas scene engine, a postprocessing + shader stack, and a live in-browser parameter studio.
The problem
Premium real-time 3D usually means rebuilding the same scaffolding every project — render loop, quality scaling, postprocessing, scene transitions — and tuning every material by editing code and reloading. That does not scale across client work.
The approach
Ether is a reusable engine: a SceneManager and a persistent-canvas router that keeps one WebGL context alive across page navigations, GPU-tier auto-detection with per-tier quality, a bloom + dither postprocessing composer, and a shader/material system for the iridescent extruded type. On top sits a bespoke ?tweak parameter studio — live sliders, HSV color pickers, XY-pads and read-only monitors bound straight to the scene and engine, with undo, presets, and one-click export back to source constants. (The image is that panel, live, over the engine-rendered hero.)
Highlights
- A SceneManager + persistent-canvas router — scene-per-route on a single GL context
- GPU-tier auto-detection driving per-tier quality (MSAA, DPR, effects)
- A live ?tweak parameter studio with undo, presets, and export-to-source — code-split to zero bytes until opened
Results
- One engine powers the whole site — home, work, and every service page
- Live in-browser art direction — no edit-reload loop to tune a material
- Code-split: the dev panel ships zero bytes unless you open it
- GPU-tier scaling from low-end mobile up to desktop
The same engine and rigor go into every site we ship — this is the foundation, not a one-off.