Effect and Fast

Composers wrap shapes and configure how they render. They draw nothing themselves — they push a frame onto a stack while their children render, and each shape reads the top of that stack when it registers.

<Effect outline={{ thickness: 0.02, color: '#000' }}>
  <Box size={1} />
  <Sphere size={0.5} />
</Effect>

Importing one does not pull in the other; the barrel re-exports both as named exports so they tree-shake independently.

The choice

	<Effect>	<Fast>
Pipeline	sdfPipeline	sdfFastPipeline
Writes depth	no	yes
Scene distance walk	yes	no
Outline and glow	per shape	per wrapper
Sorts against mesh	no — always in front	yes

<Effect> walks the scene distance function so shapes can merge outlines and occlude one another. <Fast> skips that walk and writes depth instead, so overlapping instances self-cull through the depth test.

On dense scenes that difference is the whole frame budget. On a handful of hero shapes it is invisible.

Fast drops per-shape effects

Inside a <Fast> wrapper, a shape’s own outline and glow are discarded at registration:

outline: fast.enabled ? undefined : outline,
glow:    fast.enabled ? undefined : glow,

<Fast> carries its own outline and glow instead, applied uniformly to every child.

These are per-wrapper, not per-shape, and they live in a single global config. Two <Fast glow={…}> wrappers in one scene share one setting, and the last one mounted wins. If you need two different halos, they cannot both be fast.

The wrapper halo

A wrapper’s outline and glow are one extra instanced draw over every fast shape, after the mesh and glass and before the effect shapes. Each covered pixel marches its shape again, from the proxy’s front faces only, and blends once, so a translucent outline colour lands at its stated alpha. It writes no depth: nearer geometry hides it, and an outline in front of a glass shape paints over the glass. With the camera inside a shape’s proxy box, that shape’s halo is not drawn.

Outline merging

Adjacent shapes merge their outlines into a single silhouette by default. Set merge: false on the outline to keep each shape’s outline separate:

<Effect outline={{ thickness: 0.02, color: '#000', merge: false }}>

Merging requires the scene distance walk, so it is an <Effect> behaviour. Fast shapes have no per-shape outline to merge.

Interaction with mesh

Fast shapes write depth, so they clip into and around a mesh correctly.

Effect shapes do not participate in depth, so their surfaces always draw in front of the mesh regardless of world position. That is a deliberate trade for halos that composite over everything — see Depth and z-sort.

If you need a shape to go behind a mesh, it has to be fast.

Choosing

• Many shapes, or shapes that overlap → <Fast>.
• A shape that must sort against the mesh → <Fast>.
• Per-shape outline or glow colours → <Effect>.
• Outlines that merge into one silhouette → <Effect>.

The two compose. A scene can put its dense cluster in <Fast> and its hero shapes in <Effect>, and they draw in the same frame through different pipelines.