Motes

<Motes> hangs specks in the air round the camera, and each one shows only where light reaches it. Dust glows in the sun patches between trees and leaves the shade empty. Sparks rise inside a lantern’s pool and none drifts past its line. Mount one inside a Landscape for each kind of mote, such as one for dust and one for sparks.

A mote reads the light the ground beneath it reads: the sun after its shadow, the moon, a lamp, and a light mask’s share and fill light. A mote shows whole where the light it takes straight from a source is at least minLightRatio times the sky’s light at its place. It shrinks to nothing as that light falls away, so motes thin out at a shadow’s edge rather than end on it. A mote shows whole only from minLight of that light and hides under half of it, so a mote in moonlight stays hidden however dark the sky.

Its props are in MotesProps.

Making a kind of mote

Each prop’s default is in MotesProps:

count: the motes in the box round the camera. The box reaches distance metres along x and z from its middle, and spans height metres up and down about the camera’s eye. Its middle stands half distance ahead of the camera, so most motes are in view.
size: the metres across one mote. A mote is never drawn smaller than a pixel and a half, so a far one never crawls.
color: the mote’s colour, lit by the light it hangs in.
emissiveIntensity: how much of color the mote gives off on its own, 0 for dust and about 2 for a spark. A spark still shows only where light falls.
anisotropy: how much more light a mote sends on along the light’s way than back toward it. Dust between the camera and the sun glows, and dust seen from the sun’s side is dim.
velocity, windShare, turbulence and turbulenceSeconds: the cloud moves at velocity metres per second plus windShare of the look’s wind, and each mote strays turbulence metres from that path over turbulenceSeconds. Sparks rise with a velocity of [0, 0.18, 0], and a moth flutters with a turbulenceSeconds under 1.
twinkle: how far each mote’s brightness pulses as it turns, 0 to 1.

The engine refuses a value out of its range as the component mounts, naming the prop.

Sample

Dust in the sun patches, and sparks where a lantern’s light falls, in src/scenes/Clearing.tsx:

import { Landscape, Motes, type MotesProps } from "@spawnite/engine";

/** Dust in the sun patches, and sparks rising where a lantern's light
 *  falls: two kinds of mote, each shown only where light reaches it. */
export const sunDust: MotesProps = {
    count: 1500,
    size: 0.016,
    color: "#ffe2a8",
    windShare: 0.03,
    turbulence: 0.25,
    turbulenceSeconds: 9,
    twinkle: 0.45,
};

export const sparks: MotesProps = {
    count: 120,
    size: 0.009,
    color: "#ffb35a",
    emissiveIntensity: 2.5,
    velocity: [0, 0.18, 0],
    turbulence: 0.35,
    turbulenceSeconds: 3,
    twinkle: 0.7,
};

export function Clearing() {
    return (
        <Landscape map="meadow">
            <Motes {...sunDust} />
            <Motes {...sparks} />
        </Landscape>
    );
}

What it costs

Each <Motes> is one draw of count small quads, each placed, moved and lit on the GPU from a seed and a few values the component writes each frame, so no mote costs the CPU anything. Every mote is an opaque round dot, so the draw needs no sorting and blends nothing. A tool reads each one’s box under the page’s motes: names: spawnite play eval "views.page".

What the other engines do

Unity and Godot draw ambient dust as a particle system with a box shape that follows the camera, in a lit material that receives shadows. Unreal draws it as a GPU Niagara emitter lit by its translucency volume. Each darkens a mote in shade. Motes here hide one there instead, since an opaque dark dot in shade reads as a black speck, and the anisotropy follows the anisotropy of Unity’s and Godot’s volumetric fog. Every engine steps an effect that never ends and fills the view on the GPU, as motes do.

For a burst at a point, such as sparks on a hit, use Particles.

Where it runs

Client. A room draws none. Under WebGPU no mote draws, as the WebGPU page lists.