Skip to content

Scene and Camera

import { Camera, Scene, View } from '../lib/fabric'
<Camera fov={45} trackMouse />
<Scene maxSteps={100} showAxes />

<Scene> covers the world transform and the SDF raymarch budget. It is deliberately not the whole scene state — particle appearance belongs to <Grid>, not here.

World transform — translateX/Y/Z, rotationX/Y/Z.

Raymarch budget — the quality-for-speed dials:

PropTrades
maxStepsIteration cap. Raise it when non-metric modifiers punch through surfaces.
sdfEpsilonSurface-hit threshold. Smaller is more precise and slower.
lodScalingStep budget by distance.
stepRelaxationStep length against overshoot risk.
edgeSoftnessSilhouette softness.
autoCullSkips shapes that cannot contribute.

Diagnostics — stats mounts the overlay, debugMode the heatmap, showAxes the origin axes. Each is behind a dynamic import, and each is stripped from the build when your source sets it to a literal false.

Glass flags — enableReflection and enableRefraction, both off by default. See Glass.

fps caps the frame rate.

Props may be signals. Every prop accepts a plain value or a phaze signal — a flux accessor, for instance. A signal is wired with an explicit .subscribe that writes each new scalar into the engine’s scene state and marks the frame dirty; it is not read inside an effect and auto-tracked. That is deliberate: auto-tracking a flux accessor across the component boundary was found to take the initial value and never fire again, so the subscribe form is the contract. <Camera>, <Grid> and <Mesh> materials follow the same pattern.

<Camera> takes any part of the camera state.

Projection — fov, zoom, cameraZ.

Mode — cameraMode and rigMode select behaviour; zDolly is the mode-1 swing amplitude and is ignored in other modes.

Input — trackMouse and trackDevice are independent switches for pointer and device-orientation input. easing smooths the response, range bounds it.

Pointer warp — warpStrength, warpRadius, pointerZ and pointerFalloff control how the pointer deforms the particle field.

<View> binds the scene to a DOM element, so the canvas follows that element’s box. It accepts a signal, a getter, a ref-shaped object, or the fabric context directly.

It re-registers if the tracked reference changes, and it takes per-view camera overrides — so two views of one scene can differ in framing.

<Visible> groups shapes for culling. Given a track it watches that element; given none it renders its own element and watches that.

Shapes inside a hidden group are skipped when the shape buffer is written, so they cost nothing while off screen. With nothing hidden, the path is identical to having no groups at all.