Tutorial series · 7 of 8 parts published
Three.js from Scratch
3D for the web with Three.js, WebGL and WebGPU
A step-by-step series for frontend developers: from a first lit cube to shaders, WebGPU and compute. Every part comes with diagrams, screenshots and a live demo you can open in your browser.
-
01
Your First Scene
A friendly first Three.js tutorial: scene, camera, renderer, a lit cube, the animation loop, resizing and OrbitControls, with diagrams, screenshots and a live demo.
-
02
Geometry, Materials and Textures
What a mesh is made of: vertices, normals and UVs inside a BufferGeometry, how the built-in materials react to light, and how to load textures without washed-out colours. With diagrams, screenshots and a live demo.
-
03
Models, Light and Shadows
Load an animated glTF model, fit it to your scene with Box3, play its clips with AnimationMixer, light it with an HDR environment and tone mapping, and get directional-light shadows that actually look right. With diagrams, screenshots and a live demo.
-
04
Your First Shaders
Write your own GPU code with ShaderMaterial: vertex and fragment shaders, uniforms, varyings and UVs, animated vertex waves, gradients, noise and a fresnel rim, patching a lit material with onBeforeCompile, and how GLSL, WGSL and TSL fit together. With diagrams, screenshots and a live demo.
-
05
WebGPU and TSL
Switch Three.js to WebGPURenderer: async init and the automatic WebGL 2 fallback, node materials, and TSL, the JavaScript shading language that compiles to WGSL or GLSL. Port the Part 4 waves and fresnel rim to TSL, read the generated shaders, and move 40,000 particles on the GPU with a compute shader. With diagrams, screenshots and a live demo.
-
06
Post-Processing and Bloom
Render the scene to a texture first, then change the whole picture: render targets and ping-pong buffers, EffectComposer with RenderPass, UnrealBloomPass, OutputPass, a custom lens ShaderPass and FXAA/SMAA, why pass order and tone mapping matter, and the same chain on WebGPURenderer with RenderPipeline, pass() and TSL bloom, including selective bloom with MRT. With diagrams, screenshots and a live demo.
-
07
Faster Frames
Make three.js scenes fast, and know why they are: measuring a frame with renderer.info, stats.js and Chrome DevTools, CPU-bound vs GPU-bound, draw calls, merging geometries, InstancedMesh and BatchedMesh, LOD and frustum culling, texture, KTX2 and pixel-ratio budgets, the cost of shadows, dispose() and memory leaks, rendering on demand, and what changes on WebGPURenderer. With a live stress test, diagrams and screenshots.
-
08
Interaction and Physics coming next
Picking objects with Raycaster, including instances, dragging them, and a physics engine (Rapier) so thousands of instanced objects fall, collide and stack.