Three.js From Zero · Article s10-10
S10-10 Series Finale
Three.js from Zero — the end of the beginning
100 articles. 10 seasons. Every major topic in 3D on the web. A retrospective, a look forward, and how to keep learning after this series.
By the numbers
What we covered
Season 1 — Foundations: scene/camera/renderer, geometry, materials, textures, loaders, raycasting, post, shaders, performance, React Three Fiber.
Season 2 — Real Worlds: Rapier physics, WebXR, multiplayer, GPGPU, procedural worlds.
Season 3 — Character & Animation: skinning, morph targets, blend trees, IK, procedural animation, ragdoll, motion matching, Mixamo pipeline, facial capture.
Season 4 — Advanced Rendering: PBR math, IBL, shadows, SSR, volumetric fog, SSS, hair, ocean, stylized NPR, TSL.
Season 5 — Rendering Frontier: GI, path tracing, TAA, deferred, SDFs, GPU culling, clustered lighting, virtual texturing, GPU particles, hybrid RT.
Season 6 — Asset Pipeline: glTF, Draco, KTX2, Meshopt, gltf-transform, LOD, Blender, atlasing, streaming, production pipeline.
Season 7 — UI & UX: 3D UI layers, HUDs, worldspace labels, canvas textures, touch, VR UI, a11y, text, transitions, product viewer.
Season 8 — Production Architecture: state, ECS, game loops, editor, debug, testing, errors, builds, telemetry, checklist.
Season 9 — Real-time Systems & Audio: Web Audio, spatial, reactive, reverb, WebRTC, network sync, procedural audio, music sync, jam.
Season 10 — Cutting Edge: AI tools, splats, NeRF, LLM NPCs, TTS, MediaPipe, generative textures, generative meshes, AI assistants, this finale.
The meta-lessons
- Separate concerns. UI state vs scene state. Authoring vs runtime. Pure math vs scene mutations.
- Measure, then optimize. Telemetry, percentiles, profilers. Never guess.
- Compress everything. Draco + KTX2 + Meshopt. 10× wins are everywhere.
- Ship accessibility. Keyboard nav. Reduced motion. a11y tree. It's cheap, it's right.
- Hybrid beats pure. Raster + RT. Authored + procedural. LLM + human. Pick the right tool per sub-problem.
- Boring infrastructure first. Build pipelines. Error handling. Testing. Production survives on these.
- Learn by shipping. Every demo here is 300-800 lines. Small enough to read in one sitting. Fork, modify, break.
The big shift I saw while writing this
When I started Season 1, WebGL was the only path. Halfway through, WebGPU became real. By Season 10, Gaussian Splatting replaced NeRF and AI was writing shaders. The 3D web is moving fast, but the fundamentals are stable.
What's next — 2026-2028 predictions
- WebGPU majority by end of 2026. TSL becomes default authoring.
- Splats replace photogrammetry for most real-world capture use cases.
- Hardware ray tracing lands in WebGPU ~2027. Hybrid pipelines become cheap.
- LLM NPCs in 50% of indie games by 2027. Inworld/Convai tier becomes commodity.
- Generative 3D quality reaches human-modeled equivalence for 80% of assets by 2028.
- AR glasses mainstream ~2027-28. WebXR adoption triples.
- Three.js stays open-source and central. The biggest competitor is still itself.
How to keep learning
- threejs.org/examples — 500+ demos. Read the source of ones that match what you want to build.
- three.js discord + forum — active, friendly, expert.
- Shadertoy — shader bootcamp. Fork every top-rated.
- Bruno Simon's Three.js Journey — paid course, excellent for beginners.
- Niels Provos / IQ's articles — math foundations.
- Papers: SIGGRAPH, Eurographics. Hard but primary sources.
- Build something. Seriously. A week of building beats a month of reading.
Credits & thanks
The three.js maintainers (Mr. doob, many others). Garrett Johnson (three-gpu-pathtracer, three-mesh-bvh). Poimandres (R3F, drei). Pixiv (three-vrm). Sebastien Lagarde, John Hable (PBR + tone mapping writing). Inigo Quilez (everything SDF). Bart Wronski (graphics writing). Every Shadertoy author. Every Three.js discord member.
Keep building
You now know: PBR math, WebGPU compute, character animation, splat rendering, multiplayer sync, accessibility, build pipelines, LLM NPCs, and ~92 other things.
Build. Ship. Share. Remix. The 3D web wants more of you.
— Three.js from Zero, complete · all demos MIT-licensed · thanks for reading