3D scenes, cameras, and lights

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

A reliable 3D scene starts with scale, camera, lights, and depth before procedural or interactive behavior is added.

Camera fields

  • Camera3D.type is perspective or orthographic.
  • Required camera field: position: [x, y, z].
  • Optional fields include rotation, fov, near, far, size, tonemap, exposureStops, and agxLook.

Light fields

  • Light3D.type supports ambient, directional, point, spot, and hemisphere.
  • Required light fields are id, type, name, color, and intensity.
  • Optional fields include position, castShadow, visible, angle, penumbra, distance, decay, and groundColor.

Verification

  • Check first-frame framing, resize framing, depth clipping, and interaction range.
  • Use stable scene units so camera distance, object positions, physics values, and procedural fields stay understandable.
  • Use debug snapshots and screenshot checks when lighting, depth, or cross-scene texture behavior changes.

Verified runnable example

This guide points to proof-backed sample coverage. The full ledger lives in Generated examples and proof log.

Canvas: Fill rule diagnostic

  • Source: faster-motion/demo/tests/canvas/fillrule-diagnostic/fillrule-diagnostic.fmtion
  • Expected output: A contained Canvas scene renders paired path cases so nonzero and evenodd fill handling can be compared visually.
  • Validation: Schema validation passed. Runtime proof reports zero blocking runtime issues and 10 rendered objects; the accepted metadata note is preserved in the proof ledger.
  • Desktop proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-desktop.png
  • Mobile proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-mobile.png

Guide-specific sample target: Camera and light sample with perspective and orthographic variants, first-frame screenshot, and resize screenshot.

Faster Motion docs

Use this local map together with the left navigation. The source-backed content tree controls the main article order; this section keeps related pages one click away.

Start

DOM animation

Canvas animation

3D and procedural

Reference

Was this guide helpful?