Skip to content
Ben is currently available for contract work for 3D & web solutions — reach out.
← All series

Quest for AAA Quality in Three.js

Three.js can make a single object look stunning. Why does a whole room still fall behind a game? Six articles trace a practical route from the web's constraints and the techniques AAA games ship to a working lighting pipeline, in-browser baking, and a proposal to connect it all.

Quest for AAA Quality in Three.js series map

A glossy product under a studio environment map can look convincing in Three.js. Walk into a room, and the missing pieces become obvious: light that bounces off the walls, reflections of the room instead of the sky, and moving objects that belong in the same lighting as their surroundings.

The quest is to make Three.js competitive with Unreal Engine's baked lighting for indoor scenes, at a fraction of the size, on ordinary consumer hardware. The route is through techniques games already ship: baked bounce light, probes for moving objects, screen-space effects for nearby detail, and a material that combines them correctly. The challenge is choosing a stack that fits the web and making its pieces work together.

This series is for Three.js developers building scenes, graphics programmers comparing techniques, and contributors deciding how the pieces should fit. It is both a plan and a progress report: some pieces have landed, some are in review, and the pluggable lighting design is a proposal for discussion. Each article distinguishes those states and links the relevant work. Every stage is opt-in; the aim is to extend what Three.js can render while preserving today's simple environment-lit scene.

Articles in this series

  1. The Quest for AAA Quality in Three.js

    Three.js already makes a single object look stunning. Indoor scenes are where it falls behind games. The fix is not new research: it is the lightmap, probe and screen-space reflection pipeline AAA games have shipped for a decade, adapted to the web. This series is the plan, and how far we have come.

  2. AAA Quality on a Web Budget

    A AAA game targets a console and ships tens of gigabytes. Three.js runs from one code base on a mid-range phone and ships with a web page. Before choosing techniques, here are the constraints: which APIs, how much memory, and how much memory bandwidth a 60 fps frame can spend.

  3. How AAA Games Light Indoor Scenes

    DOOM, Call of Duty, Frostbite and Killzone light a room in remarkably similar ways: baked bounce light, probes for moving objects, and a cascade of reflection sources that fall through by coverage. This is a study of what shipped, and of the pipeline a web renderer can take from it.

  4. Building the AAA Lighting Pipeline in Three.js

    From the G-buffer to temporal upscaling, here is each stage of the lightmap, probe and screen-space reflection pipeline measured against Three.js: what games require of it, what Three.js has today, and the pull requests in review or still to write.

  5. Adding Robust Light Baking to Three.js

    Three.js could always display a lightmap, but not make one. Here is the baking pipeline now in Three.js: a real-time UV unwrapper, a lightmap baker, a ray-traced radiosity solver and a denoiser, plus the glTF extensions and HDR formats needed to store and ship the result.

  6. Pluggable Indirect Lighting for Three.js

    Games do not agree on one way to compute bounced light and reflections. They pick a stack that fits the game. This is a proposal for two configurable slots in Three.js's WebGPURenderer: one for indirect diffuse, one for indirect specular, each an ordered list of sources that fall through by coverage.

  7. Making Effective Three.js Improvements

    Screen-space rendering is nearly impossible to debug in a finished frame, and review time is the scarcest resource in an open source project. Here is how the lighting pipeline work for Three.js is tested and proposed: a debug harness for each stage, and small, opt-in pull requests.