Chapter 804: Cameras (Manual)

Core Idea

A deeper look at PerspectiveCamera's frustum (near, far, fov, aspect), how to visualize it with a second camera and CameraHelper, and the depth-precision trade-offs of choosing near/far values.

Key Concepts

• Frustum: the truncated-pyramid volume a PerspectiveCamera renders, defined by near, far, fov and aspect.
• near / far: clipping planes — objects closer than near or farther than far aren't rendered.
• fov / aspect: vertical field of view (degrees) and width-to-height ratio, together sizing the frustum's front and back.
• CameraHelper: draws a visual wireframe of another camera's frustum, handy for debugging.
• Scissor rendering: renderer.setScissorTest plus per-viewport scissor rects let you draw two cameras' views side by side in one canvas.
• Z-fighting: depth-buffer precision is uneven across the near/far range (finer near the camera, coarser far away), so an overly wide near/far span causes flickering overlap artifacts.
• logarithmicDepthBuffer: a WebGLRenderer option that can reduce z-fighting on supported GPUs, at some performance cost.

Code Examples

renderer.setScissorTest(true);

{
  const aspect = setScissorForElement(view1Elem);
  camera.aspect = aspect;
  camera.updateProjectionMatrix();
  cameraHelper.visible = false;
  renderer.render(scene, camera);
}
{
  const aspect = setScissorForElement(view2Elem);
  camera2.aspect = aspect;
  camera2.updateProjectionMatrix();
  cameraHelper.visible = true;
  renderer.render(scene, camera2);
}

• What it demonstrates: rendering the same scene from two cameras into two scissor regions of one canvas, one showing a CameraHelper for the other.

Key Takeaways

1. A PerspectiveCamera's frustum is fully defined by near, far, fov and aspect.
2. Depth-buffer precision is not uniform between near and far, so an unnecessarily wide near/far range causes z-fighting.
3. logarithmicDepthBuffer can help with z-fighting but isn't universally supported and has a performance cost.
4. Always choose the tightest near/far range your scene's content actually needs.

Connects To

• CameraHelper: visualizes a camera's frustum for debugging, as used here.
• OrthographicCamera: the non-perspective alternative, not covered by this frustum discussion.
• WebGLRenderer: owns the scissor test and logarithmicDepthBuffer option.
• OrbitControls: drives camera movement in the example.