Three.js From Zero · Article s10-10

S10-10 Series Finale

Season 10 · Article 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.

🎬 Three.js From Zero · Series finale · Thank you for reading

By the numbers

100articles
10seasons
≈90live demos
≈200social posts written
≈50klines of code

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

  1. Separate concerns. UI state vs scene state. Authoring vs runtime. Pure math vs scene mutations.
  2. Measure, then optimize. Telemetry, percentiles, profilers. Never guess.
  3. Compress everything. Draco + KTX2 + Meshopt. 10× wins are everywhere.
  4. Ship accessibility. Keyboard nav. Reduced motion. a11y tree. It's cheap, it's right.
  5. Hybrid beats pure. Raster + RT. Authored + procedural. LLM + human. Pick the right tool per sub-problem.
  6. Boring infrastructure first. Build pipelines. Error handling. Testing. Production survives on these.
  7. 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.

"Learn the math. The APIs change every 18 months. The math doesn't."

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.

"The best 3D web apps of 2030 will be built by people who started today."

— Three.js from Zero, complete · all demos MIT-licensed · thanks for reading