Three.js From Zero · Article s5-10
S5-10 Hybrid Raster + RT
Hybrid Raster + Ray Tracing
Full path tracing: 1 sample per pixel needs denoising. 10ms+ per frame on RTX. Not shipable. Hybrid: raster the primary visibility, use RT only for the hard stuff — shadows, reflections, GI. That's the modern AAA pipeline.
1. What's expensive about full PT?
Path tracing every pixel from scratch wastes effort on things raster does well:
- Primary visibility (what's on screen): raster does this in 0.1ms. PT does it with a ray per pixel.
- Direct lighting from sun: already handled by shadow maps.
- Albedo / normal / material: G-buffer.
Only use rays where they uniquely help: reflections, soft shadows, GI, transparency.
2. The pipeline
| Stage | Technique | Cost |
|---|---|---|
| 1. G-buffer | Raster: albedo, normal, depth, material | ~1ms |
| 2. Direct light + cascade shadows | Raster + CSM or RT hard shadows | ~1ms |
| 3. Reflections | SSR for on-screen + RT for the rest | ~2ms |
| 4. GI | DDGI or RT 1-bounce | ~2ms |
| 5. Denoise | SVGF / ReSTIR + TAA | ~1ms |
| 6. Compose + post | Full-screen pass | ~1ms |
3. The pseudo-code
// Frame N
rasterGBuffer(scene); // primary visibility
rasterDirectLight(); // sun + shadow maps
rayTraceReflections(); // only rough-glossy surfaces
rayTraceGI(probesOrDDGI); // indirect diffuse
denoise(noisy_RT_results); // SVGF or DLSS ray reconstruction
composite();
applyTAA(history, current);
postProcess();
4. Ray budget per frame
1080p @ 60fps → 16ms. Raster + GI + TAA + post eats ~7ms. That leaves 9ms for rays.
On RTX 4090: ~10 GRay/s. Budget ~20 rays/pixel at 1080p.
In practice: 1-3 rays for reflections, 1-4 rays for GI, 1 ray for shadows per dynamic light. ~5-8 rays/pixel. Denoiser fills the gap.
5. Who ships this
- Cyberpunk 2077 RT Overdrive: full hybrid. ReSTIR + ray reconstruction + DLSS 3.5.
- Alan Wake 2 / Control: hybrid GI + RT reflections.
- Metro Exodus Enhanced: RT GI + SSR fallback.
- UE5 Lumen: SDF + screen-space + RT fallback. Hybrid by design.
6. Live demo — reflection blend
Three reflection modes on the same scene: env map only, SSR, "hybrid" (SSR with env fallback). Watch quality gradient.
7. Ray sharing tricks
A single ray can carry payloads for multiple effects:
- Reflection ray hits surface → query GI probes for that point → adds bounce.
- AO ray = reduced-range GI ray.
- Shadow ray = any-hit (terminates on first hit).
8. Denoising is mandatory
1-3 rays per pixel is noisy. Can't ship raw.
Stack: ReSTIR spatiotemporal resampling → SVGF à-trous filter → TAA → DLSS Super Resolution.
9. WebGPU status
No hardware ray tracing in WebGPU as of 2026. Ray queries are proposed but not shipping.
Workarounds:
- Compute-shader BVH traversal (software RT). Competitive for small scenes.
- SDF proxies — raymarch against an SDF built from the scene.
- Screen-space techniques (SSR, SSGI) — no rays, just raymarch depth.
10. The mental model
For each rendering problem, ask:
- Can raster + depth tricks handle it cheaply? (Use them.)
- Only rays can? (Use rays, minimum count, denoise.)
That's the hybrid decision tree every modern engine walks.
11. Season 5 retrospective
GI. Path tracing. TAA. Deferred. SDF. GPU culling. Clustered forward. Virtual texturing. GPU particles. Hybrid RT.
Ten deep dives into how modern renderers actually work. Every concept here shows up in Cyberpunk, Alan Wake 2, or Unreal 5 projects you've played.
Season 6 next: Asset pipeline. glTF deep dive, Draco/Meshopt, KTX2 workflows, LOD tooling, gltf-transform, Blender exporters, IDs and addressables. The half of "making a game" that isn't rendering.
12. Takeaways
- Full PT is too expensive for real-time; hybrid is the practical answer.
- Raster: primary visibility, direct lighting, shadow cascades.
- RT: reflections, GI, area-light shadows (where needed).
- Denoise aggressively. TAA + SVGF + optional ML upscaler.
- WebGPU doesn't ship hardware RT yet — hybrid there means SSR + SDF + screen-space.