Skip to content

Learning path · 8 steps

Rendering pipeline

How a Three.js frame is drawn: normals, shaders, materials, depth and the costs that slow it down.

Start: Surface Normals
0/8
  1. Three.js & Renderingcore1. Surface NormalsLighting starts with which way surfaces face.
  2. Three.js & Renderingcommon2. Fragment ShadersPer-pixel programs that decide the final colour.
  3. Three.js & Renderingcore3. Reflection and RefractionHow light bounces and bends at a surface.
  4. Three.js & Renderingcommon4. PBR MaterialsPhysically based metal/rough materials.
  5. Three.js & Renderingcore5. Z-FightingDepth precision and the flicker it causes.
  6. Three.js & Renderingcore6. Frustum CullingSkip what the camera can't see.
  7. Performancecore7. Draw CallsBatch and instance to cut CPU overhead.
  8. Performancecommon8. OverdrawTransparent layers that cost fill rate.