Three.js Production Engineering — từ Zero đến Staff

Start Three.js the right way: what WebGL really is, the three pillars (Scene, Camera, Renderer), the render loop, and your first lit, orbiting mesh — with a live scene you can drag, zoom, and inspect.

The shape-and-surface toolkit: built-in geometries, the five core material types (Basic, Lambert, Phong, Standard, Physical) and when each earns its place — with a live gallery to mix geometry, material, metalness, and roughness.

Position, rotation, scale and the parent-child scene graph where children inherit transforms — plus Perspective vs Orthographic cameras and OrbitControls, with a live sun-earth-moon rig you can drive.

Make a scene look 3D: the five light types (directional, point, spot, ambient, hemisphere), when to use each, real-time shadow maps, and the performance cost seniors watch — with a live light rig you can drive.

Dress your surfaces: UV mapping, the PBR map set (albedo, normal, roughness, metalness, AO), color management done right, and environment maps that make metal reflect — with a live material you can build one map at a time.

Bring in real assets and make them move: loading glTF with Draco, the AnimationMixer / AnimationClip / AnimationAction trio, crossfading between clips, and frame-rate-independent playback — with a live mixer you can drive.

Add cinematic polish: how the EffectComposer renders your scene to a texture and runs full-screen passes (bloom, vignette, custom shaders), why pass order and OutputPass matter, and the performance budget — with a live bloom rig.

Build a first performance model: draw calls, triangles, pixels, instancing, merging, culling, LOD and resource ownership — then measure before choosing an optimization.

Turn a scene into a UI: how a Raycaster picks objects under the cursor, normalized device coordinates, hover and click handling, performance tips for picking, and dragging objects — with a live hover-and-select demo.

Tie it all together into a shippable mini-project: loading screens, ResizeObserver responsiveness, a render-loop architecture that scales, framework integration, debug tooling, and a real deployment checklist — with a full capstone demo.

Drop below the built-in materials: the GPU pipeline, vertex vs fragment shaders, attributes/uniforms/varyings, writing a ShaderMaterial, animating it from JS, and extending built-ins with onBeforeCompile — with a live shader playground.

Make things move on their own: the render-world / physics-world split, rigid bodies and colliders, the fixed-timestep loop, syncing meshes to bodies, friction and restitution, and when to reach for Rapier — with a live physics sandbox.

Turn the series into something useful: a furniture room planner. Build furniture from primitives, click-to-place, drag-to-move, recolor materials, repaint the room, and swing day to night — the pattern behind product configurators.

Stop building everything from primitives. Model in Blender, export glTF/GLB, and load it with GLTFLoader. Export settings, scene-graph mapping, scale, units, PBR materials, and the pitfalls that bite — with a live model loader.

Blender is a tool, glTF is a file, Three.js is the library. A field guide to the tools that make 3D assets — DCC, sculpting, CAD, procedural, scanning, AI, texturing, web editors and free marketplaces — and how each reaches Three.js.

A 3.7 MB helmet is brutal on mobile. Compress geometry with Draco/Meshopt, textures with KTX2, and clean structure with gltf-transform — often 5–10× smaller, no visible loss. Commands, decision tables, the loader hookup and the traps.

Make a character move. Rigging and skinning explained, where clips come from (Blender, Mixamo), then drive a skinned glTF with AnimationMixer — cross-fade states, fire one-shot emotes, blend morph-target expressions — with a live demo.

Turn taps into 3D intent. Raycast to pick the character or the ground, move with click-to-move, face the travel direction, and wire a tiny state machine that drives Idle ⇄ Walk ⇄ Run cross-fades — coexisting with OrbitControls. Live demo.

Làm chủ point/vector/direction, dot/cross, chuỗi local→screen, matrix và normal matrix, quaternion/slerp, project/unproject, depth precision, floating origin và reversed depth.

Mở pipeline renderer: render lists, draw calls, passes, depth test/write, z-fighting, transparency sorting, alpha strategies, render targets, MRT, color pipeline và playbook debug.

Design a Three.js runtime that survives remounts, hidden tabs, stale asset loads and context loss: explicit frame phases, fixed-step simulation, resource ownership, cancellation and testable lifecycle contracts.

Turn frame time into an engineering control loop: diagnose CPU versus GPU bottlenecks, budget draw/vertex/fragment/upload work, precompile variants, and ship adaptive quality with SLOs and rollout guardrails.

Treat every glTF as a versioned production contract: coordinate and naming rules, slot-aware KTX2, tier budgets, CI validation, immutable delivery, race-safe loading and provenance.

Make Three.js production systems testable and operable: deterministic clocks, browser/visual/perf tests, failure injection, privacy-safe telemetry, accessible canvas twins and incident SLOs.

Đánh giá WebGPU bằng dữ liệu, viết material bằng TSL, nhận diện blocker của ShaderMaterial/EffectComposer và rollout renderer mới mà không đặt production vào một cú cược lớn.