Creative 3D Roadmap · Free Series
Three.js From Zero
A creative Web 3D series for artists. Turn drawings, Blender models, shaders, and portfolio ideas into interactive browser scenes. Each article ships with prose, a live demo, and a code-along you can copy.
Where this fits
Creative 3D is one art direction, not a side quest.
One creative 3D + interactive art direction: Blender foundation, generative canvas, shaders, Three.js scenes, WebGPU compute, Gaussian splatting capture, computer vision, audio-reactive visuals, browser games, real-time streaming, and animation plugins — all connected.
01 · Video course
Blender Bootcamp
Model, light, animate, and think in form. This is the 3D art foundation before browser-native and capture-based work.
02 · Interactive episodes
Creative Coding From Zero
Generative art on raw canvas: the loop, noise, particles, flow fields, fractals, and emergent simulations — the 2D foundation for everything visual.
03 · Interactive episodes
Shaders From Zero
Write GLSL fragment shaders from zero — UVs, SDFs, noise, lighting, and raymarched 3D worlds that run entirely on the GPU.
04 · Interactive articles
Three.js From Zero
Turn drawings, models, shaders, and portfolio pieces into interactive web scenes with live code and artist-friendly demos.
05 · Interactive episodes
WebGPU From Zero
The next-generation GPU API from zero: render pipelines, compute shaders, WGSL, a million particles, and a tiny PBR renderer.
06 · Interactive episodes
Gaussian Splatting From Zero
Capture real spaces and objects, understand splat rendering, and bring photoreal 3D scans into creative web projects.
07 · Interactive episodes
Interactive Vision From Zero
Control the web with your body: hand, pose, and face tracking wired to real interfaces via MediaPipe.
08 · Interactive episodes
Audio-Reactive From Zero
Make the screen dance to sound: FFT spectrum, beat detection, and music-driven visuals on raw Web Audio.
09 · Interactive episodes
Web Games From Zero
Build a real game in the browser on raw canvas — the game loop, sprites, collisions, physics, and the juice that sells it.
10 · Interactive episodes
Real-Time & Streaming From Zero
Make the web live: media capture, canvas streaming, WebRTC peers, and multiplayer presence — serverless.
11 · Skill-graph tutorials
Blender Free Plugins
Master free Blender plugins for character animation, retargeting, and mocap as the animation toolkit that feeds your 3D creative pipeline.
- shipped
Article s0-01
Haunted House
- shipped
Article s0-02
Galaxy Generator
- shipped
Article s0-03
Scroll-Driven Portfolio Scene
- shipped
Article s0-04
3D Text Playground
- shipped
Article s0-05
Earth Shader
- shipped
Article s0-06
Hologram Shader
- shipped
Article s0-07
Fireworks
- shipped
Article s0-08
Coffee Smoke
- shipped
Article s0-09
Particles Cursor
- shipped
Article s0-10
Raging Sea
- shipped
Article 01
Foundations: Scene, Camera, Renderer, Loop
- shipped
Article 02
Geometry & the Mesh
- shipped
Article 03
Materials, Light & Shadow
- shipped
Article 04
Textures & Color Management
- shipped
Article 05
Loading 3D Models (glTF)
- shipped
Article 06
Interactivity: Raycaster, Controls, Events
- shipped
Article 07
Post-Processing: EffectComposer
- shipped
Article 08
Custom Shaders: GLSL + TSL
- shipped
Article 09
Performance: Instancing, LOD, Draw Calls
- shipped
Article 10
React Three Fiber + Shipping
- shipped
Article 14
Hand-Tracked Floating Windows — Vision OS in Your Browser
A wall of macOS-style app windows (Safari, Xcode, Music, TV, Pages, Keynote, Numbers, Photos) floating in 3D. Webcam-driven hand tracking via MediaPipe — hover to highlight, pinch+drag to move, two-hand pinch-spread to resize, air-tap to open/close. Plus toolbar toggles, expandable camera-with-skeleton mini-cam, and scroll-wheel fallback.
- shipped
Article 15
Pocket Glass — AR Glass Through Your Phone
iPhone back-camera becomes the background of a 3D scene. A single glass cube refracts the live feed and reflects real-world light via a per-frame CubeCamera. DeviceOrientation gyro orbits the camera around the cube — tilt the phone to look around. One-tap combined camera + iOS-13 motion permission. Mouse + OrbitControls fallback on desktop.
- shipped
Article s2-01
Physics: Rigid Bodies with Rapier
- shipped
Article s2-02
Colliders Deep Dive
- shipped
Article s2-03
Joints, Constraints, Ragdoll
- shipped
Article s2-04
Character Controller
- shipped
Article s2-05
WebXR Basics (VR)
- shipped
Article s2-06
WebXR Interaction: Controllers, Hands, Haptics
- shipped
Article s2-07
Multiplayer Foundations — Presence & Cursors
- shipped
Article s2-08
Authoritative Multiplayer — Prediction & Reconciliation
- shipped
Article s2-09
GPGPU with TSL Compute Nodes
- shipped
Article s2-10
Procedural Worlds — Noise, Terrain, Streaming
- shipped
Article s3-01
Skeletal Animation Internals
- shipped
Article s3-02
Morph Targets & Facial Animation
- shipped
Article s3-03
Animation Blending & Blend Trees
- shipped
Article s3-04
Inverse Kinematics — CCDIK, FABRIK, Two-Bone
- shipped
Article s3-05
Procedural Animation — Secondary Motion
- shipped
Article s3-06
Physics-Driven Animation — Active Ragdolls
- shipped
Article s3-07
Motion Matching & Root Motion
- shipped
Article s3-08
Character Pipeline: Mixamo → Three.js
- shipped
Article s3-09
Facial Capture with Webcam
- shipped
Article s3-10
The Full Character Rig
- shipped
Article s4-01
PBR Math From Scratch
- shipped
Article s4-02
Image-Based Lighting Internals
- shipped
Article s4-03
Shadow Techniques — PCF, VSM, ESM, CSM, Ray-traced
- shipped
Article s4-04
Screen-Space Reflections (SSR)
- shipped
Article s4-05
Volumetric Fog & God Rays
- shipped
Article s4-06
Subsurface Scattering — The Skin Look
- shipped
Article s4-07
Hair & Fur Rendering
- shipped
Article s4-08
Ocean & Water — Gerstner waves, FFT, and the foam on top
- shipped
Article s4-09
Stylized & NPR — Toon shading, outlines, hatching, painterly
- shipped
Article s4-10
TSL Procedural Materials — write shaders in TypeScript
- shipped
Article s5-01
Global Illumination — light that bounces
- shipped
Article s5-02
Path Tracing in the Browser
- shipped
Article s5-03
TAA & Denoising — reusing yesterday's pixels
- shipped
Article s5-04
Deferred Rendering — separate geometry from lighting
- shipped
Article s5-05
SDFs & Raymarching — render without triangles
- shipped
Article s5-06
GPU Culling & Nanite-Style Geometry
- shipped
Article s5-07
Clustered Forward Lighting
- shipped
Article s5-08
Virtual Texturing — streaming 100 GB of texels
- shipped
Article s5-09
GPU Particle Systems
- shipped
Article s5-10
Hybrid Raster + Ray Tracing
- shipped
Article s6-01
glTF 2.0 — the format everything converges on
- shipped
Article s6-02
Draco Geometry Compression
- shipped
Article s6-03
KTX2 & Basis — GPU-native compressed textures
- shipped
Article s6-04
Meshopt — SIMD-fast mesh optimization
- shipped
Article s6-05
gltf-transform — the CLI your pipeline needs
- shipped
Article s6-06
LOD Tools & Mesh Simplification
- shipped
Article s6-07
Blender Export Pipeline for Three.js
- shipped
Article s6-08
Texture Atlasing
- shipped
Article s6-09
Asset Streaming & Addressables
- shipped
Article s6-10
The Production Asset Pipeline
- shipped
Article s7-01
3D UI Mental Model
- shipped
Article s7-02
HUDs & Screen Overlays
- shipped
Article s7-03
Worldspace UI & Floating Labels
- shipped
Article s7-04
Interactive Canvas Textures
- shipped
Article s7-05
Touch Gestures for 3D
- shipped
Article s7-06
VR UI Patterns
- shipped
Article s7-07
Accessibility in 3D Apps
- shipped
Article s7-08
Text Rendering in 3D
- shipped
Article s7-09
Scene Transitions & Loading States
- shipped
Article s7-10
Production Product Viewer
- shipped
Article s8-01
State Management for 3D Apps
- shipped
Article s8-02
Entity Component Systems
- shipped
Article s8-03
Game Loop Architectures
- shipped
Article s8-04
Scene Authoring Tools
- shipped
Article s8-05
Debug Overlays & Inspectors
- shipped
Article s8-06
Testing 3D Applications
- shipped
Article s8-07
Error Handling & Recovery
- shipped
Article s8-08
Build Pipelines & Vite Config
- shipped
Article s8-09
Telemetry & Performance Monitoring
- shipped
Article s8-10
The Shipping Checklist
- shipped
Article s9-01
Web Audio Basics
- shipped
Article s9-02
Spatial Audio
- shipped
Article s9-03
Audio-Reactive Visuals
- shipped
Article s9-04
Convolution Reverb
- shipped
Article s9-05
WebRTC Voice Chat
- shipped
Article s9-06
WebRTC Video + Screen Share
- shipped
Article s9-07
Network Sync & Clocks
- shipped
Article s9-08
Procedural Audio
- shipped
Article s9-09
Music-Sync Interactives
- shipped
Article s9-10
The Music Jam Experience
- shipped
Article s10-01
AI Tools for 3D — the 2026 Landscape
- shipped
Article s10-02
Gaussian Splatting in the Browser
- shipped
Article s10-03
NeRFs for the Web
- shipped
Article s10-04
LLM-Driven NPCs
- shipped
Article s10-05
TTS + Lip Sync
- shipped
Article s10-06
MediaPipe Body + Face Tracking
- shipped
Article s10-07
Generative Textures
- shipped
Article s10-08
Generative 3D Meshes
- shipped
Article s10-09
AI-Assisted 3D Authoring
- shipped
Article s10-10
Three.js from Zero — the end of the beginning
- shipped
Article s11-01
Three.js Product Configurator from Scratch
- shipped
Article s11-02
The Material/Color Picker UI Layer
- shipped
Article s11-03
AR View — Quick Look + Scene Viewer + WebXR
- shipped
Article s11-04
The Watch Industry's Common Three.js Stack
- shipped
Article s11-05
MediaPipe Face/Pose + Three.js — Try-On at Home
- shipped
Article s11-06
Modular Furniture with Snap-Points — the Roomle Pattern
- shipped
Article s11-07
The Shopify 3D Viewer Integration Recipe
- shipped
Article s11-08
The Production Configurator — stacking everything from S11-01 to S11-07
- shipped
Article s11-09
IFC.js BIM Viewer in 200 Lines — clickable elements, property panels, layer toggles
- shipped
Article s11-10
Spark.js — the 2026 Splat Renderer Choice
- shipped
Article s11-11
Nerfstudio → Three.js — the Production Bridge
- shipped
Article s11-12
R3F v10 — WebGPU + TSL Hooks Deep Dive
- shipped
Article s11-13
WebXR Layers + Depth Sensing — the two underused APIs that change quality dramatically
- shipped
Article s11-14
Hillaire 2020 Atmosphere — the missing Three.js library
- shipped
Article s11-15
8th Wall → Niantic Studio — the migration playbook
- shipped
Article s12-01
Photo Mode as a System — tiled renders, watermarking, and safe controls
- shipped
Article s12-02
OffscreenCanvas + Worker Three.js — the gotcha-complete guide
- shipped
Article s12-03
Visual Regression Testing a Three.js Scene in CI
- shipped
Article s12-04
Procedural Cloud Rendering on TSL — porting Horizon’s Nubis ideas
- shipped
Article s12-05
Foliage Rendering — wind hierarchy, imposters, shells
- shipped
Article s12-06
Stylized Water with Depth-Buffer Foam
- shipped
Article s12-07
Comic Book Shading — halftone, ink, the Borderlands recipe
- shipped
Article s12-08
Holographic Shaders — Bruno Simon + Ektogamat synthesis
- shipped
Article s12-09
Jewelry Configurator Materials — gemstones, metal, scale cues
- shipped
Article s12-10
Automotive Paint Stack — flakes, clearcoat, and showroom reflections
- shipped
Article s12-11
Watch Dial Macro Viewer — anisotropy, crystal, typography
- shipped
Article s12-12
Cabinet Configurator — modular logic, snap rules, and SKU sanity
- shipped
Article s12-13
Suit Avatar Configurator — body presets, fabric swaps, fit storytelling
- shipped
Article s12-14
Generative Texture Pipelines after S10 — from prompt to production material
- shipped
Article s12-15
Procedural Meshes after S10 — taking generated forms into a production scene
- shipped
Article s13-01
R3F Mental Model
- shipped
Article s13-02
useFrame and Friends
- shipped
Article s13-03
Drei Deep Dive
- shipped
Article s13-04
R3F + Rapier Physics
- shipped
Article s13-05
R3F + Zustand State
- shipped
Article s13-06
R3F Suspense & Progressive Loading
- shipped
Article s13-07
R3F Portal Scenes
- shipped
Article s13-08
R3F Post-Processing
- shipped
Article s13-09
R3F Custom Shaders
- shipped
Article s13-10
R3F Game Capstone
- shipped
Article s13-11
R3F VR & WebXR
- shipped
Article s13-12
R3F Portfolio Site
- shipped
Article s14-01
Vite + TypeScript from Zero
- shipped
Article s14-02
Debug UI Mastery
- shipped
Article s14-03
Loading & Progress UIs
- shipped
Article s14-04
Three.js + Web Components
- shipped
Article s14-05
Deploying Three.js Apps
- shipped
Article s14-06
Debugging with Spector.js
- shipped
Article s14-07
Mobile Testing & Remote Debug
- shipped
Article s14-08
Mixing HTML and WebGL
- shipped
Article s15-01
Build Your Three.js Portfolio Site
- shipped
Article s15-02
Sliding Puzzle in 3D
- shipped
Article s15-03
Procedural Terrain Showcase
- shipped
Article s15-04
Showcasing Three.js on X / Twitter
- shipped
Article s15-05
Pricing Three.js Freelance Work
- shipped
Article s15-06
Three.js Interview Prep
- shipped
Article s15-07
Contributing to Three.js Core
- shipped
Article s15-08
Selling a Paid Three.js Course