Help guide

Canvas 3D and procedural guide

Updated June 19, 2026

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?

Sunny Arora

Written by

Sunny Arora

Get technical deep dives delivered to your inbox

Join creators and developers who get exclusive insights, tutorials, and behind-the-scenes content every week.

No spam. Unsubscribe anytime.

Continue Exploring

You might also enjoy