Certificate

# ===== Skills checklist =====
# After working through the three.js track you should be able to:
# [x] Set up a renderer with correct colour space + tone mapping
# [x] Build a scene + camera + lights with sensible defaults
# [x] Load a GLB model and play its animations via AnimationMixer
# [x] Add OrbitControls + a resize handler
# [x] Raycast from pointer events to pick objects in 3D space
# [x] Build a particle system with BufferGeometry
# [x] Add post-processing (bloom, FXAA) with EffectComposer
# [x] Dispose of geometry, materials, textures, render targets correctly
# [x] Profile and optimise for a mid-tier mobile device

# ===== Bookmark =====
# - https://threejs.org/docs                official docs
# - https://threejs.org/examples            inspiration + reference
# - https://discoverthreejs.com             best free book
# - https://github.com/pmndrs/react-three-fiber   React renderer for three
# - https://github.com/pmndrs/drei          helpers + abstractions
# - https://polyhaven.com                   free HDR + PBR textures
# - https://sketchfab.com                   GLB models for prototyping

# ===== Portfolio piece (2-3 hours) =====
# Build a small interactive 3D product viewer:
# 1) Drop-in GLB model with PBR materials
# 2) Studio HDR environment map for reflections
# 3) OrbitControls with damping
# 4) UI toggles: wireframe on/off, environment intensity slider, screenshot
# 5) Annotations: click on a part of the model to show a label
# 6) Mobile-friendly: works at 60fps on a mid-tier Android
# 7) Hosted on Cloudflare Pages / Vercel / GitHub Pages
# 8) Source code on GitHub with a README explaining the architecture

# Bonus:
# - Hot-swap between 2-3 models via a dropdown
# - Camera fly-through animation triggered by a button
# - Export the current view as a PNG (renderer.domElement.toBlob)

# ===== What 'good' looks like =====
# - Loads under 5MB gzipped (model + textures budget)
# - Maintains 60fps with cap pixelRatio at 2
# - Disposes resources on model swap (no memory leak)
# - Has a fallback message for browsers without WebGL2
# - Handles resize cleanly
# - Source code uses tree-shakeable imports (no 'three' default import)

# ===== Common pitfalls to avoid =====
# - Forgetting outputColorSpace + toneMapping -> washed-out colours
# - Not capping pixelRatio -> mobile devices die at 3x DPR
# - One material per mesh in a model with 100 parts -> draw call explosion
#   (use InstancedMesh + bake materials where possible)
# - Storing the GLB scene in a global without disposing it on hot reload
# - Adding lights without thinking about how they affect each other

# ===== Next steps =====
# - react-three-fiber: same engine, declarative React API
# - drei: ready-made helpers (Loaders, OrbitControls, Stats)
# - Physics: rapier-3d, cannon-es
# - WebGPU: future-facing renderer with much better mobile perf
# - GPU-instanced grass / particles via InstancedMesh + textures
# - Babylon.js: alternative engine; better defaults for game-like scenes
# - PlayCanvas: cloud editor with a polished workflow

# ===== Self-test =====
# If you can:
# 1) Explain why renderer.outputColorSpace must be sRGB on a Standard Material
# 2) Profile a scene that hits 20fps on a mid-tier phone and fix it
# 3) Load a GLB, play its animations, and dispose cleanly on unload
# you have completed the track. Ship the viewer and call it done.

# ===== Track wrap-up =====
# three.js is a thin abstraction over WebGL with sensible defaults. The four
# skills that matter:
# - Lifecycle: setup -> animate -> dispose -> resize
# - Material literacy: when to use Basic vs Standard vs Physical
# - Performance: pixelRatio, draw calls, texture sizes, instancing
# - Asset pipeline: GLB + Draco compression + KTX2 textures
# Get those right and you ship 3D experiences instead of demos.

// /certificate/threejs