Learning on Web Dev Open is free for all.

Immersive Web > The 3D mental modelScene, camera, renderer
Phase 07The 3D mental model333 of 434

Scene, camera, renderer

The three objects every 3D library on the web arranges differently and means identically.

Concept11 minAI pair

A scene is a container of things with positions. A camera is a description of a viewpoint and how it projects the world onto a rectangle. A renderer owns the WebGL context and turns the first two into pixels. Nothing renders continuously by itself: render(scene, camera) draws exactly one frame, and animation is you calling it again.

The reason render takes both arguments rather than the camera living inside the scene is that the same scene is routinely drawn from several viewpoints in one frame: a shadow map is a render from the light, a reflection probe is a render from a mirrored camera, a minimap is a render from above. Once you see the camera as an argument rather than a property, that whole family of techniques stops being mysterious.

You should now be able to

  • Name what each of the three objects owns
  • Explain why render takes both a scene and a camera
Ask the community

Loading…