Overview
This series explains how Three.js turns structured 3D state into browser images: scene-graph relationships feed camera projection, reusable resources shape appearance, and loaders, animation, input, and post-processing extend the frame. It connects measured performance and ownership decisions to WebGL, WebGPU, and TSL choices while keeping renderer, asset, and version boundaries explicit.
Learning outcomes
- Three.js supplies a structured middle layer between browser graphics APIs and application intent without removing renderer or resource decisions.
- Scene graphs compose local transforms, while cameras, canvases, and renderers determine which prepared state becomes a frame.
- Reusable geometry, materials, and textures aid composition and sharing but require typed data, performance judgment, and explicit disposal.
- Measured bottlenecks and compatibility needs should guide render cadence, asset and input paths, post-processing, and backend choice.
Keywords
Preview every chapter · Unlock full text, audio, and video from chapter 4
PlansFAQ
What does Three.js add beyond WebGL?
Three.js adds scenes, cameras, object hierarchies, geometry, materials, textures, and a renderer-facing application model on top of WebGL. Projection, asset structure, color management, performance, and resource lifetime remain visible decisions.
How does a Three.js scene become an image?
A Three.js renderer updates transforms, applies the camera’s projection and frustum, selects and orders visible objects, and issues work for the canvas or a render target. The drawing buffer then determines the physical pixel budget.
How should you diagnose a slow Three.js frame?
Diagnose a slow Three.js frame by measuring whether scene traversal, draw calls, pixels, shaders, lights, extra passes, or memory own the cost. Choose resolution, batching, instancing, simpler materials, or other changes only after locating that boundary.
When should you use WebGLRenderer or WebGPURenderer in Three.js?
Use WebGLRenderer when compatibility and established WebGL customization dominate; explore WebGPURenderer when its backend, compute, node, or pipeline capabilities meet a tested requirement. The current guide describes WebGPU as experimental and not drop-in compatible with every WebGL technique.