Choose a node
The trunk has an order; asset and interaction skills can advance in parallel based on the project.
← Guides / Browser 3D
BROWSER 3D · OUTCOME-BASED LEARNING
Reading is not mastery.Every levelleaves evidence.
Start with the WebGL graphics pipeline, then build Three.js scenes, asset pipelines, interaction, and performance skills. Every node states what to learn, what to make, and what counts as passing.
Check your skills- 6
- skill nodes
- 5
- levels per skill
- 4
- capstone choices
HOW IT WORKS
The tree answers order. Levels answer depth.
Inspect a level
Every level from Lv.0 to Lv.4 has its own learning goal, task, and acceptance check.
Leave evidence
Completion means code, measurements, a public page, or a reproducible asset—not a “finished reading” checkbox.
INTERACTIVE SKILL TREE
Select a node and inspect your current level.
Assets and interaction are parallel branches. Reach Lv.2 in either branch to continue into performance and release.
0/ 24 skill points
Progress stays on this device. No account and no upload.
01 · Browser graphics foundation
WebGL and the graphics pipeline
Trace the handoff from JavaScript to the GPU, shaders, and pixels before asking Three.js to handle the lower-level work.
Prerequisite · Basic JavaScript reading
Learn
Separate the roles of CSS, SVG, Canvas 2D, WebGL, and Three.js.
Build
Draw the path from JavaScript to a pixel on screen.
Pass when
Explain when WebGL is unnecessary and why Three.js is not a modelling tool.
CAPSTONE PROJECTS
Choose one project and turn the skills into a public result.
All four options come from working KeepOnFirst articles or labs. Take them apart, then replace the content, data, and trade-offs with your own.
3D scroll story
Keep the story in semantic HTML while scroll progress directs the camera and objects behind it.
- Acceptance result
- Deliver: three chapters, reduced motion, and a WebGL fallback
Real-city pipeline
Turn OpenStreetMap data into a reproducible Blender and Three.js city scene.
- Acceptance result
- Deliver: source data, repeatable scripts, GLB, and license notes
3D interior layout tool
Turn floor-plan data into walls, floors, and furniture with selection, drag, and camera controls.
- Acceptance result
- Deliver: two layouts, draggable furniture, and mobile controls
Browser 3D game scene
Combine roads, vehicles, input, camera, effects, and a performance budget into a replayable run.
- Acceptance result
- Deliver: a finishable run, mobile controls, and a performance baseline
FULL RUBRIC
Complete skill rubric
Open the full list when you need to compare nodes. All content remains ordinary HTML and does not depend on the visual canvas.
01WebGL and the graphics pipelineBasic JavaScript reading
Lv.0 · Recognize
- Learn
- Separate the roles of CSS, SVG, Canvas 2D, WebGL, and Three.js.
- Build
- Draw the path from JavaScript to a pixel on screen.
- Pass when
- Explain when WebGL is unnecessary and why Three.js is not a modelling tool.
Lv.1 · Reproduce
- Learn
- Create a WebGL context and understand the viewport, clear color, and render loop.
- Build
- Make a canvas fill its container and update the viewport on resize.
- Pass when
- The page stays usable without WebGL and the canvas keeps the correct proportions.
Lv.2 · Modify
- Learn
- Understand buffers, attributes, uniforms, vertex shaders, and fragment shaders.
- Build
- Render a triangle that moves or changes color.
- Pass when
- Identify what stays on the CPU and what reaches the GPU, with no shader errors at runtime.
Lv.3 · Integrate
- Learn
- Handle pointer input, device pixel ratio, resize, and WebGL resource cleanup.
- Build
- Build a small graphics experiment that responds to pointer input on desktop and mobile.
- Pass when
- Cap excessive pixel density, release resources on teardown, and survive mobile rotation.
Lv.4 · Ship
- Learn
- Measure rendering cost and choose between raw WebGL, Three.js, or a simpler 2D approach.
- Build
- Ship an interactive example with performance numbers, a fallback, and a documented technology choice.
- Pass when
- Defend the trade-off with measurements rather than choosing WebGL simply because 3D looks impressive.
02Three.js foundationsWebGL Lv.0 or an equivalent understanding of the browser graphics pipeline
Lv.0 · Recognize
- Learn
- Recognize the responsibilities of the scene, camera, renderer, mesh, geometry, and material.
- Build
- Sketch the relationships inside a Three.js scene in your own words.
- Pass when
- Explain why a camera does not draw by itself and where rendering actually happens.
Lv.1 · Reproduce
- Learn
- Create a perspective camera, WebGL renderer, mesh, and animation loop.
- Build
- Render a rotating cube on a web page.
- Pass when
- The scene starts, stops, and keeps the correct aspect ratio after resize.
Lv.2 · Modify
- Learn
- Use lights, materials, groups, coordinate systems, and OrbitControls.
- Build
- Build a small orbitable scene with two materials and basic lighting.
- Pass when
- Handle shadows, color space, and camera distance without relying on random values.
Lv.3 · Integrate
- Learn
- Load GLB files and handle async state, raycasting, mobile input, and component lifecycle.
- Build
- Load a model and change state or reveal information when an object is selected.
- Pass when
- Loading, error, and fallback states exist, with no animation frames or event listeners left behind.
Lv.4 · Ship
- Learn
- Design maintainable scene boundaries, resource lifecycles, quality tiers, and a release strategy.
- Build
- Publish a complete page with mobile support, reduced motion, a WebGL fallback, and performance notes.
- Pass when
- Content remains readable when graphics fail, and the most expensive rendering cost is identified.
03ABlender and the GLB pipelineThree.js Lv.1
Lv.0 · Recognize
- Learn
- Understand the roles of Blender, glTF, GLB, Three.js, and GLTFLoader.
- Build
- List the handoff steps from a Blender file to the browser.
- Pass when
- Explain why GLB is an interchange format rather than a replacement for the Blender source file.
Lv.1 · Reproduce
- Learn
- Handle units, origins, transforms, normals, and basic materials.
- Build
- Model a simple prop and export a GLB that loads in Three.js.
- Pass when
- Scale, orientation, and materials are correct without magic-number repairs in code.
Lv.2 · Modify
- Learn
- Create stable object names, hierarchy, pivots, material slots, and export settings.
- Build
- Export a scene with multiple identifiable nodes that code can select reliably.
- Pass when
- Node names and the code contract remain stable after re-export.
Lv.3 · Integrate
- Learn
- Use headless Blender, scripted exports, and reproducible source data.
- Build
- Regenerate a structurally equivalent GLB from source with one command.
- Pass when
- A clean environment can rerun the pipeline and failures stop with a clear error instead of a partial asset.
Lv.4 · Ship
- Learn
- Manage multi-asset versions, compression, licensing, quality gates, and release tracking.
- Build
- Ship an asset pipeline with sources, outputs, licenses, validation, and a size budget.
- Pass when
- Someone else can rebuild every output and tell whether a change breaks visuals or exceeds the budget.
03BCamera, selection, and touchThree.js Lv.1
Lv.0 · Recognize
- Learn
- Understand OrbitControls, raycasting, pointer events, and camera targets.
- Build
- Diagram the selection path from screen coordinates to a ray and an object.
- Pass when
- Separate moving the camera, moving an object, and changing the look target.
Lv.1 · Reproduce
- Learn
- Configure OrbitControls limits, damping, and basic camera composition.
- Build
- Build a viewer that cannot pass through the floor or lose the main subject.
- Pass when
- Mouse drag, wheel, and one-finger touch do not fight page navigation.
Lv.2 · Modify
- Learn
- Use raycasting to select and drag objects while handling hover, active, and deselected states.
- Build
- Build a draggable furniture interaction or selectable hotspots.
- Pass when
- Hit areas are reliable, objects do not jump, and empty space clears the selection.
Lv.3 · Integrate
- Learn
- Coordinate scroll, drag, camera transitions, touch gestures, and reduced motion.
- Build
- Create a scroll-driven sequence or a multi-step spatial interaction.
- Pass when
- State transitions are predictable and rapid input cannot leave the camera stuck in the wrong state.
Lv.4 · Ship
- Learn
- Design interaction around task success, accessibility, and device limits rather than spectacle alone.
- Build
- Ship a 3D tool with keyboard alternatives, clear instructions, and verified mobile behavior.
- Pass when
- A first-time user can finish the main task, with a usable fallback when WebGL or motion is unavailable.
04Performance, compression, and fallbacksLv.2 in either the asset or interaction branch
Lv.0 · Recognize
- Learn
- Separate transfer size, decoding time, GPU cost, memory, and main-thread work.
- Build
- Inventory the loading and rendering costs of an existing 3D page.
- Pass when
- Avoid treating a smaller file as proof that the whole page is faster.
Lv.1 · Reproduce
- Learn
- Measure requests, asset sizes, loading time, and frame rate with browser tools.
- Build
- Record a repeatable performance baseline.
- Pass when
- The device, conditions, and asset versions are documented well enough to reproduce similar results.
Lv.2 · Modify
- Learn
- Compare Meshopt, Draco, uncompressed GLB, and decoder overhead.
- Build
- Compress a GLB and record file size, decoder requirements, and visible quality.
- Pass when
- Show that compression is worth adding rather than reporting a smaller byte count alone.
Lv.3 · Integrate
- Learn
- Handle textures, instancing, draw calls, shadows, view distance, disposal, and quality tiers.
- Build
- Apply different quality budgets to the same scene on desktop and mobile.
- Pass when
- Quality reductions are deliberate, and mobile does not fail from heat or runaway memory use.
Lv.4 · Ship
- Learn
- Put performance budgets, fallbacks, monitoring, and regression checks into the release flow.
- Build
- Create a release check that catches oversized assets or clear performance regressions.
- Pass when
- A release that exceeds the threshold is stopped, while failed graphics still leave the main content and actions usable.
05Finish and publish a projectPerformance Lv.2 plus Lv.2 in either assets or interaction
Lv.0 · Recognize
- Learn
- Define the problem, completion criteria, and non-goals from a real use case.
- Build
- Choose a capstone and write down the user, primary task, and three acceptance checks.
- Pass when
- The scope fits one small release rather than aiming to build an entire game engine.
Lv.1 · Reproduce
- Learn
- Reuse a starter or working case and identify what must change.
- Build
- Replace the content, model, or data so the result is no longer a copy of the starter.
- Pass when
- The core path works and the project has its own subject and decisions.
Lv.2 · Modify
- Learn
- Integrate assets, interaction, state management, and basic error handling.
- Build
- Complete the full path from loading through the end of the primary task.
- Pass when
- Refreshes, rapid input, and asset failures do not leave the experience stuck.
Lv.3 · Integrate
- Learn
- Run mobile, keyboard, reduced-motion, WebGL fallback, and performance acceptance checks.
- Build
- Deploy the project to a public URL and complete a release checklist.
- Pass when
- The primary task passes on at least one phone and one desktop, with readable failure states.
Lv.4 · Ship
- Learn
- Package measurements, a case study, and reusable assets so someone else can extend the work.
- Build
- Publish the project, source or starter, and a case study explaining trade-offs and measured results.
- Pass when
- The result is reproducible, licensed clearly, and backed by verifiable numbers with a concrete next problem.