Canvas 3D and procedural guide

Product media placeholder

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

3D and procedural work uses explicit scene shape, graph-authored resources, renderer settings, and debug-visible boundaries. Treat primitive 3D fields as transitional and prefer graph nodes.

Scene3D shape

  • Scene3D uses kind: "3d", common scene fields, required camera, optional lights, optional environment, optional timeline, and optional graph.nodes.
  • Non-empty primitive objects, tracks, and skeletons3d are marked deprecated/forbidden in the source comments and should be migrated to graph nodes.
  • Use compound graph nodes for cameras, lights, static meshes, skinned meshes, skeletons, animation clips, particles, procedural geometry, and render planning.

Renderer settings

  • Tonemap options: none, reinhard, acesFilmic, agx, khronosPbrNeutral.
  • exposure is in EV stops; tonemapLook supports neutral and punchy for AgX.
  • pixelRatio defaults to min(devicePixelRatio, 2) and is validated in the 0.5 to 4 range.
  • Worker modes: auto, always, never. MSAA values: 1, 2, 4, 8 with strict or highest-supported fallback.

Scene outputs

  • output.as: "texture" marks a headless producer scene.
  • output.id is referenced by tex://scene/<id> material texture references.
  • Use FasterMotion.debug.sceneWires() to verify whether a cross-scene texture wire used zero-copy or CPU bridge.

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: 3D scene sample with one camera, one light, one graph-authored mesh, one headless texture producer, and sceneWires output.

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?