@driftengine/core 4.8.4 → 4.8.6

package/dist/render/instances.js

@@ -9,25 +9,27 @@ export function createMeshInstances(capacity) {
     return {
         models: new Float32Array(capacity * 16),
         tints: new Float32Array(capacity * 3),
+        alphas: new Float32Array(capacity).fill(1),
         capacity,
         count: 0,
     };
 }
 /**
  * Floats one instance occupies in the interleaved vertex buffer: sixteen of matrix, three of
- * tint, and one of padding.
+ * tint, and the opacity.
  *
- * **Padded to twenty so the stride is 80 bytes rather than 76.** A vertex buffer's stride must be
- * a multiple of four on both backends, which 76 already is — the padding is for the *attribute*
- * offsets: the tint sits at byte 64 and a three-float attribute ending at 76 leaves the next
- * instance's first column starting there, which is legal but puts every second instance on an
- * offset no driver aligns well. One wasted float an instance is 4 bytes against 76.
+ * **Twenty so the stride is 80 bytes rather than 76.** A vertex buffer's stride must be a multiple
+ * of four on both backends, which 76 already is — the twentieth float was padding for the
+ * *attribute* offsets: the tint sits at byte 64 and a three-float attribute ending at 76 leaves the
+ * next instance's first column starting there, which is legal but puts every second instance on an
+ * offset no driver aligns well. Since 4.8.6 it carries the instance's opacity, read with the tint
+ * as one four-float attribute, so the opacity cost no attribute and no byte.
  */
 export const INSTANCE_FLOATS = 20;
 /** Bytes one instance occupies. See `INSTANCE_FLOATS`. */
 export const INSTANCE_STRIDE = INSTANCE_FLOATS * 4;
 /**
- * Interleave `count` instances into `out`, matrix then tint, at `INSTANCE_FLOATS` apart.
+ * Interleave `count` instances into `out`, matrix, tint and opacity, at `INSTANCE_FLOATS` apart.
  *
  * **Interleaved rather than two buffers** so a batch's upload is one `writeBuffer` and an
  * instance's colour sits beside the matrix that places it. Shared by both backends, because
@@ -37,16 +39,23 @@ export const INSTANCE_STRIDE = INSTANCE_FLOATS * 4;
  * Writes nothing beyond `count`, and allocates nothing: `out` is the caller's staging array.
  */
 export function packInstances(instances, out) {
-    const { models, tints } = instances;
+    const { models, tints, alphas, lightmapRegions } = instances;
     const count = Math.min(instances.count, instances.capacity);
     for (let i = 0; i < count; i += 1) {
         const at = i * INSTANCE_FLOATS;
         const m = i * 16;
         for (let c = 0; c < 16; c += 1)
             out[at + c] = models[m + c];
+        if (lightmapRegions !== undefined) {
+            /* The region in the tint's and the opacity's place. See `lightmapRegions`. */
+            for (let c = 0; c < 4; c += 1)
+                out[at + 16 + c] = lightmapRegions[i * 4 + c];
+            continue;
+        }
         const t = i * 3;
         out[at + 16] = tints[t];
         out[at + 17] = tints[t + 1];
         out[at + 18] = tints[t + 2];
+        out[at + 19] = alphas?.[i] ?? 1;
     }
 }

package/dist/render/lightBudget.d.ts

@@ -229,12 +229,21 @@ export declare const CLOTH_REST_TEXTURE_UNIT: number;
  */
 export declare const MODEL_MAP_TEXTURE_UNIT: number;
 /**
- * The two units skin's screen-space blur reads on WebGL2 — its target and the frame's depth — past
+ * The units skin's screen-space blur reads on WebGL2 — its target and the frame's depth — past
  * every unit a lit program binds, so spreading skin in the middle of a frame unbinds nothing the
  * draws after it sample. WebGL2 guarantees thirty-two.
  */
 export declare const SKIN_BLUR_TEXTURE_UNIT: number;
 export declare const SKIN_BLUR_DEPTH_UNIT: number;
+/** And the skin's colour, which the blur's second axis multiplies the spread light by. */
+export declare const SKIN_BLUR_ALBEDO_UNIT: number;
+/**
+ * A sprite particle's image and the frame's depth copy its soft edge reads, on WebGL2: past every
+ * unit a lit program binds, for the skin blur's reason — a particle is drawn in the middle of a
+ * frame, and the draws after it must find their textures where they left them.
+ */
+export declare const PARTICLE_SPRITE_UNIT: number;
+export declare const PARTICLE_DEPTH_UNIT: number;
 /**
  * A cookie's tile, in texels a side.
  *
@@ -349,6 +358,16 @@ export interface PointLightSet {
      * drawn for one spot works in another with a different angle.
      */
     readonly lightCookies?: Float32Array;
+    /**
+     * One per light: the lighting channels it lights, as a bitmask in a float — 1, 2, 3 … 255.
+     * **Absent, or a short array, is channel 1 for every light**, which is every surface's default
+     * too, so a scene that never names a channel lights everything with everything as it did.
+     *
+     * A light shades a surface only where its mask and the surface's `SurfaceMaterial.lightChannels`
+     * share a bit. What it is for: a rig of lights that belongs to some draws and not others — a
+     * character's own key and rim lights, which the floor around the character must not take.
+     */
+    readonly lightChannels?: Float32Array;
 }
 /**
  * A cone that admits every direction, for every light.
@@ -416,6 +435,12 @@ export interface ResolvedPointLights {
     iesProfiles: Float32Array;
     iesAxes: Float32Array;
     cookies: Float32Array;
+    /**
+     * Owned, four a light: the photometric azimuth in xyz and the light's channels in w, which is how
+     * `uLightIesAxis` carries them — the channels in a lane the axis left, rather than in a uniform
+     * array of their own, which would cost a row a light of a budget that has none to give.
+     */
+    readonly axesAndChannels: Float32Array;
     /**
      * Owned, `MAX_POINT_LIGHTS` long: the emitter sizes and weights as the froxel record carries
      * them, at half precision. `sourceRadii` and `weights` point here once a light set resolves, so

package/dist/render/lightBudget.js

@@ -1,4 +1,4 @@
-import { POINT_LIGHT_COS_INNER, POINT_LIGHT_COS_OUTER, lampSourceRadius, lampWeight, } from './clusteredLights.js';
+import { POINT_LIGHT_COS_INNER, POINT_LIGHT_COS_OUTER, lampSourceRadius, lampWeight, lightChannelsOf, } from './clusteredLights.js';
 /**
  * How many point lights the shading pass shades against at once.
  *
@@ -227,12 +227,21 @@ export const CLOTH_REST_TEXTURE_UNIT = CLOTH_PARTICLES_TEXTURE_UNIT + 1;
  */
 export const MODEL_MAP_TEXTURE_UNIT = CLOTH_REST_TEXTURE_UNIT + 1;
 /**
- * The two units skin's screen-space blur reads on WebGL2 — its target and the frame's depth — past
+ * The units skin's screen-space blur reads on WebGL2 — its target and the frame's depth — past
  * every unit a lit program binds, so spreading skin in the middle of a frame unbinds nothing the
  * draws after it sample. WebGL2 guarantees thirty-two.
  */
 export const SKIN_BLUR_TEXTURE_UNIT = MODEL_MAP_TEXTURE_UNIT + 1;
 export const SKIN_BLUR_DEPTH_UNIT = SKIN_BLUR_TEXTURE_UNIT + 1;
+/** And the skin's colour, which the blur's second axis multiplies the spread light by. */
+export const SKIN_BLUR_ALBEDO_UNIT = SKIN_BLUR_DEPTH_UNIT + 1;
+/**
+ * A sprite particle's image and the frame's depth copy its soft edge reads, on WebGL2: past every
+ * unit a lit program binds, for the skin blur's reason — a particle is drawn in the middle of a
+ * frame, and the draws after it must find their textures where they left them.
+ */
+export const PARTICLE_SPRITE_UNIT = SKIN_BLUR_ALBEDO_UNIT + 1;
+export const PARTICLE_DEPTH_UNIT = PARTICLE_SPRITE_UNIT + 1;
 /**
  * A cookie's tile, in texels a side.
  *
@@ -387,7 +396,8 @@ export function bindPointLights(gl, uniforms, lights, falloff) {
     gl.uniform3fv(uniforms['uLightDir[0]'] ?? null, r.directions);
     gl.uniform2fv(uniforms['uLightCone[0]'] ?? null, r.coneCos);
     gl.uniform1fv(uniforms['uLightIesProfile[0]'] ?? null, r.iesProfiles);
-    gl.uniform3fv(uniforms['uLightIesAxis[0]'] ?? null, r.iesAxes);
+    /* The azimuth and, in w, the channels. See `axesAndChannels`. */
+    gl.uniform4fv(uniforms['uLightIesAxis[0]'] ?? null, r.axesAndChannels);
     gl.uniform1fv(uniforms['uLightCookie[0]'] ?? null, r.cookies);
 }
 /**
@@ -452,6 +462,7 @@ const glLights = {
     iesProfiles: NO_PROFILES,
     iesAxes: NO_IES_AXES,
     cookies: NO_COOKIES,
+    axesAndChannels: new Float32Array(MAX_POINT_LIGHTS * 4),
     heldSourceRadii: new Float32Array(MAX_POINT_LIGHTS),
     heldWeights: new Float32Array(MAX_POINT_LIGHTS),
 };
@@ -481,6 +492,7 @@ export function resolvePointLights(lights, falloff, out) {
         out.iesProfiles = NO_PROFILES;
         out.iesAxes = NO_IES_AXES;
         out.cookies = NO_COOKIES;
+        packAxesAndChannels(NO_IES_AXES, undefined, out.axesAndChannels);
         return out;
     }
     /*
@@ -561,5 +573,16 @@ export function resolvePointLights(lights, falloff, out) {
     out.iesProfiles = iesProfiles;
     out.iesAxes = iesAxes;
     out.cookies = cookies;
+    packAxesAndChannels(iesAxes, lights.lightChannels, out.axesAndChannels);
     return out;
 }
+/** The azimuth and the channels, four a light, as `uLightIesAxis` holds them. */
+function packAxesAndChannels(axes, channels, out) {
+    const named = (channels?.length ?? 0) >= MAX_POINT_LIGHTS ? channels : undefined;
+    for (let light = 0; light < MAX_POINT_LIGHTS; light++) {
+        out[light * 4] = axes[light * 3] ?? 0;
+        out[light * 4 + 1] = axes[light * 3 + 1] ?? 0;
+        out[light * 4 + 2] = axes[light * 3 + 2] ?? 0;
+        out[light * 4 + 3] = lightChannelsOf(named?.[light]);
+    }
+}

package/dist/render/lightmap.d.ts

@@ -0,0 +1,102 @@
+/**
+ * A baked lightmap: what a consumer hands over, how both backends lay it out, and what a surface
+ * reads from it — the backend-neutral half of `createLightmap` and `lightmapModel`, by the
+ * 2026-08-13 rule.
+ *
+ * **What it is for.** A stage built in another engine carries its static light baked: the bounce
+ * off its walls, the soft occlusion in its corners, most of the colour a reference render shows.
+ * The dynamic lights alone leave everything they do not reach flat. A consumer decodes the bake
+ * into pages — one irradiance image and one direction image each — and every lightmapped surface
+ * reads its own region of its page, at its second texture coordinates scaled and offset into it.
+ *
+ * **What a surface adds**, for its shading normal `n` (the normal map's, where it has one):
+ *
+ *     d     = direction * 2 - 1
+ *     light = irradiance(uv) * max(0, dot(d.xyz, n) + d.w)
+ *     diffuse += albedo * (1 - metal) * light
+ *
+ * Unreal's high-quality lightmap read, `GetLightMapColorHQ`, once its own vectors have decoded the
+ * page — the first-order spherical harmonic its direction carries, in this engine's axes. **Added
+ * to what the dynamic lights give**, and to the ambient: a consumer whose bake already holds the
+ * sky's light zeroes the ambient for those draws itself, with `setAmbientSH` and nine zeros.
+ *
+ * **A shading model, because everything it would otherwise take is spent.** The page binds where a
+ * model's map does and the region is the model's numbers (`lightmapModel`), so a lightmapped
+ * material is a pipeline constant of its own and nothing else pays for it; the surface is otherwise
+ * the standard model, unchanged. The second coordinates ride the grain and relief attributes
+ * (`MeshData.lightmapUvs`, stored below zero by `withLightmapUvs`), and an instance's region rides
+ * its tint and opacity (`MeshInstances.lightmapRegions`). **What it gives up**: a lightmapped
+ * surface has no procedural grain or relief, no other shading model, and an instanced batch with
+ * regions no tint. **What it does not do**: the GPU-driven pipeline and splats read no page.
+ */
+import type { MeshData } from '@driftengine/drft';
+/** One page as a consumer decoded it. */
+export interface LightmapPage {
+    readonly width: number;
+    readonly height: number;
+    /**
+     * Linear irradiance, three floats a texel, row-major from the top, in the same units every other
+     * light here is in — a bake from another engine scaled by that engine's exposure, as its lights are.
+     */
+    readonly irradiance: Float32Array;
+    /**
+     * The direction the light arrives from, four bytes a texel: a first-order spherical harmonic in
+     * this engine's world axes, each value stored as `v * 0.5 + 0.5` — xyz the axis, w the constant.
+     */
+    readonly direction: Uint8Array;
+}
+/** Layers a page is uploaded as: the irradiance, then the direction. */
+export declare const LIGHTMAP_LAYERS = 2;
+/**
+ * Where a surface's region of its page is: `lightmapUv = uv2 * scale + bias`, as
+ * `[scaleU, scaleV, biasU, biasV]`. The whole page is the identity.
+ */
+export type LightmapRegion = readonly [number, number, number, number];
+/** The whole page. */
+export declare const WHOLE_PAGE: LightmapRegion;
+/** A page as both backends upload it: `layers` images of half-float RGBA, row-major from the top. */
+export interface LightmapTexels {
+    readonly kind: 'lightmap-texels';
+    readonly width: number;
+    readonly height: number;
+    readonly layers: number;
+    readonly texels: Uint16Array;
+}
+/** Whether a surface texture's source is a page's texels rather than an image or blocks. */
+export declare function isLightmapTexels(source: unknown): source is LightmapTexels;
+/**
+ * A page as both backends upload it: two layers of half-float RGBA, the irradiance with an alpha of
+ * one and the direction as the fractions its bytes are. Refuses a page whose arrays are not its
+ * size, naming the one that is short.
+ */
+export declare function lightmapTexels(page: LightmapPage): LightmapTexels;
+/**
+ * A mesh with its second coordinates moved onto the grain and relief streams they ride, or the
+ * mesh itself where it has none. Called by both backends' `createMesh`, before anything records
+ * which streams the mesh has.
+ *
+ * **Stored as `-1 - uv`, below zero, and that is what keeps the lanes safe to share.** Grain takes
+ * effect only above zero and relief is read through `max(relief, 0)`, so the same mesh drawn by a
+ * material that is not lightmapped is a mesh with no grain and no relief — rather than one mottled
+ * and bumped by its own coordinates, which is what storing them as they are drew. **What it gives
+ * up** is coordinates at or below −1, which read as nothing; a page's coordinates are from 0 to 1.
+ */
+export declare function withLightmapUvs(data: MeshData): MeshData;
+/** A material's region, checked: four finite numbers, the whole page where none was named. */
+export declare function lightmapRegionOf(region: LightmapRegion | undefined): LightmapRegion;
+/**
+ * Says once that a lightmapped material was set with no page. The lit stage adds nothing for one,
+ * which is the defined state; this is what keeps it from also being a silent one.
+ */
+export declare function warnUnpagedLightmap(model: {
+    readonly kind: string;
+} | null | undefined, map: unknown): void;
+/**
+ * Says once that an instanced batch and its material disagree about lightmap regions: a batch with
+ * regions drawn by a material that is not lightmapped, or a lightmapped one drawn without them. The
+ * regions ride the lane a tint and an opacity do (`MeshInstances.lightmapRegions`), so either draw
+ * reads one as the other: drawn, and wrong, which is why it is said rather than left.
+ */
+export declare function warnRegionsWithoutPage(model: {
+    readonly kind: string;
+} | null | undefined, regions: Float32Array | undefined): void;

package/dist/render/lightmap.js

@@ -0,0 +1,118 @@
+import { toHalfFloats } from './halfFloat.js';
+/** Layers a page is uploaded as: the irradiance, then the direction. */
+export const LIGHTMAP_LAYERS = 2;
+/** The whole page. */
+export const WHOLE_PAGE = [1, 1, 0, 0];
+/** Whether a surface texture's source is a page's texels rather than an image or blocks. */
+export function isLightmapTexels(source) {
+    return (typeof source === 'object' &&
+        source !== null &&
+        source.kind === 'lightmap-texels');
+}
+/**
+ * A page as both backends upload it: two layers of half-float RGBA, the irradiance with an alpha of
+ * one and the direction as the fractions its bytes are. Refuses a page whose arrays are not its
+ * size, naming the one that is short.
+ */
+export function lightmapTexels(page) {
+    const { width, height } = page;
+    if (!Number.isInteger(width) || !Number.isInteger(height) || width < 1 || height < 1) {
+        throw new Error(`createLightmap: a ${width} by ${height} page has nothing in it`);
+    }
+    const texels = width * height;
+    if (page.irradiance.length !== texels * 3) {
+        throw new Error(`createLightmap: ${page.irradiance.length} irradiance floats for a ${width} by ${height} ` +
+            `page, which wants ${texels * 3}: three a texel`);
+    }
+    if (page.direction.length !== texels * 4) {
+        throw new Error(`createLightmap: ${page.direction.length} direction bytes for a ${width} by ${height} ` +
+            `page, which wants ${texels * 4}: four a texel`);
+    }
+    const floats = new Float32Array(texels * 4 * LIGHTMAP_LAYERS);
+    for (let t = 0; t < texels; t++) {
+        floats[t * 4] = page.irradiance[t * 3];
+        floats[t * 4 + 1] = page.irradiance[t * 3 + 1];
+        floats[t * 4 + 2] = page.irradiance[t * 3 + 2];
+        floats[t * 4 + 3] = 1;
+        const at = (texels + t) * 4;
+        for (let c = 0; c < 4; c++)
+            floats[at + c] = page.direction[t * 4 + c] / 255;
+    }
+    return {
+        kind: 'lightmap-texels',
+        width,
+        height,
+        layers: LIGHTMAP_LAYERS,
+        texels: toHalfFloats(floats),
+    };
+}
+/**
+ * A mesh with its second coordinates moved onto the grain and relief streams they ride, or the
+ * mesh itself where it has none. Called by both backends' `createMesh`, before anything records
+ * which streams the mesh has.
+ *
+ * **Stored as `-1 - uv`, below zero, and that is what keeps the lanes safe to share.** Grain takes
+ * effect only above zero and relief is read through `max(relief, 0)`, so the same mesh drawn by a
+ * material that is not lightmapped is a mesh with no grain and no relief — rather than one mottled
+ * and bumped by its own coordinates, which is what storing them as they are drew. **What it gives
+ * up** is coordinates at or below −1, which read as nothing; a page's coordinates are from 0 to 1.
+ */
+export function withLightmapUvs(data) {
+    const uvs = data.lightmapUvs;
+    if (uvs === undefined)
+        return data;
+    const vertices = uvs.length / 2;
+    const grain = new Float32Array(vertices);
+    const relief = new Float32Array(vertices);
+    for (let v = 0; v < vertices; v++) {
+        grain[v] = -1 - uvs[v * 2];
+        relief[v] = -1 - uvs[v * 2 + 1];
+    }
+    return { ...data, grain, relief, lightmapUvs: undefined };
+}
+/** A material's region, checked: four finite numbers, the whole page where none was named. */
+export function lightmapRegionOf(region) {
+    if (region === undefined)
+        return WHOLE_PAGE;
+    let finite = region.length === 4;
+    for (let i = 0; i < region.length; i++)
+        finite &&= Number.isFinite(region[i]);
+    if (!finite) {
+        throw new Error('lightmapModel: a region is four numbers, [scaleU, scaleV, biasU, biasV], ' +
+            `and was given ${String(region)}`);
+    }
+    return region;
+}
+let warnedUnpaged = false;
+/**
+ * Says once that a lightmapped material was set with no page. The lit stage adds nothing for one,
+ * which is the defined state; this is what keeps it from also being a silent one.
+ */
+export function warnUnpagedLightmap(model, map) {
+    if (warnedUnpaged || model?.kind !== 'lightmap' || (map !== null && map !== undefined))
+        return;
+    warnedUnpaged = true;
+    console.warn('setMaterial: a lightmapModel material with no modelMap reads no page and adds no light. ' +
+        'Pass the page createLightmap returned as its modelMap.');
+}
+let warnedRegions = false;
+/**
+ * Says once that an instanced batch and its material disagree about lightmap regions: a batch with
+ * regions drawn by a material that is not lightmapped, or a lightmapped one drawn without them. The
+ * regions ride the lane a tint and an opacity do (`MeshInstances.lightmapRegions`), so either draw
+ * reads one as the other: drawn, and wrong, which is why it is said rather than left.
+ */
+export function warnRegionsWithoutPage(model, regions) {
+    if (warnedRegions)
+        return;
+    const lightmapped = model?.kind === 'lightmap';
+    if (lightmapped === (regions !== undefined))
+        return;
+    warnedRegions = true;
+    console.warn(lightmapped
+        ? 'drawInstanced: a lightmapModel material drawing a batch with no lightmapRegions reads ' +
+            'its tints as regions. Give each instance its region of the page.'
+        : 'drawInstanced: a batch with lightmapRegions drawn by a material that is not a ' +
+            'lightmapModel reads its regions as its tints and opacities. Draw it with its page, or ' +
+            'without regions.');
+}

package/dist/render/mesh.js

@@ -380,7 +380,8 @@ export class Mesh {
             gl.vertexAttribDivisor(location, 1);
         }
         gl.enableVertexAttribArray(15);
-        gl.vertexAttribPointer(15, 3, gl.FLOAT, false, stride, 64);
+        /* The tint and, in w, the opacity: one attribute for both. See `INSTANCE_FLOATS`. */
+        gl.vertexAttribPointer(15, 4, gl.FLOAT, false, stride, 64);
         gl.vertexAttribDivisor(15, 1);
         gl.bindVertexArray(null);
         return vao;

package/dist/render/particleBatch.d.ts

@@ -1,5 +1,13 @@
 import { type ParticleMaterial } from './particleMaterial.ts';
 import type { ParticleInstances } from './particlePool.ts';
+import type { SurfaceTexture } from './surfaceTexture.ts';
+/** The vertex stage's `uCameraFacing` for a facing: the cross 0, the camera 1, the travel 2. */
+export declare function facingCode(facing: ParticleFacing): number;
+/**
+ * A sprite's frame and half-height, two floats a particle, into `out` — the stream the vertex
+ * stage reads at location 10. Shared by both backends, so the two read one layout.
+ */
+export declare function packSpriteStream(data: ParticleInstances, count: number, out: Float32Array): void;
 /**
  * One draw call for a live particle pool: one camera-facing quad per particle, or a
  * crossed pair of world-fixed ones when `facing` asks for them.
@@ -21,9 +29,11 @@ export type ParticleBlend = 'additive' | 'alpha';
  * `'camera'` is one quad facing the viewer, and the default. `'cross'` is the pair of
  * world-fixed blades this batch drew before the option existed — see `uCameraFacing` in
  * `shaders/particle.ts` for the artifact that made the default the other one, and for what
- * the cross still buys a caller who wants it back.
+ * the cross still buys a caller who wants it back. `'velocity'` faces the camera with its up along
+ * the particle's travel across the view — a streak, a spark stretched by its motion — and a
+ * particle at rest faces the camera as `'camera'` does.
  */
-export type ParticleFacing = 'camera' | 'cross';
+export type ParticleFacing = 'camera' | 'cross' | 'velocity';
 export interface ParticleBatchOptions {
     /**
      * Which particle this is, by name.
@@ -72,6 +82,41 @@ export interface ParticleBatchOptions {
      * shader's own comment on `uCameraFacing` lays out.
      */
     facing?: ParticleFacing;
+    /**
+     * The image a `'sprite'` draws: a surface texture, its first layer. **Required by the sprite** and
+     * ignored by the procedural materials. Colour is the particle's times the image's, unlit.
+     */
+    texture?: SurfaceTexture;
+    /**
+     * A `'sprite'`'s flipbook: the image as `[columns, rows]` cells, numbered across then down from
+     * the top-left, a particle's `frames` naming one. `[1, 1]`, the default, is the whole image.
+     */
+    cells?: readonly [number, number];
+    /**
+     * Whether a `'sprite'` blends from a particle's cell toward the next by the fraction of its
+     * frame, so a slow flipbook moves rather than steps. Off by default: one cell, sampled once.
+     */
+    blendCells?: boolean;
+    /**
+     * Metres over which a `'sprite'` fades where it meets the opaque scene: the hard line a flat card
+     * draws where it cuts a floor or a body, softened. **0, the default, is a hard edge.** It reads a
+     * copy of the frame's depth, which needs `screenEffects`; without one the edge stays hard and
+     * the renderer says so once.
+     */
+    softDepth?: number;
+    /** Metres in front of the eye over which a `'sprite'` fades in. 0, the default, is no fade. */
+    cameraFade?: number;
+    /**
+     * Metres each particle is moved toward the eye before it is drawn, so a sprite born inside a
+     * surface is drawn in front of it. 0 by default. Every material reads it.
+     */
+    cameraOffset?: number;
+    /**
+     * Whether the live particles are drawn farthest first, the order an alpha blend assumes. Off
+     * by default, because sorting costs a pass over the particles on the CPU each frame and an
+     * additive blend is a sum that does not care. See `particleSort.ts`.
+     */
+    sort?: boolean;
     /**
      * Another batch whose compiled program this one should reuse.
      *
@@ -102,6 +147,17 @@ export declare class ParticleBatch {
     private readonly ageBuffer;
     private readonly seedBuffer;
     private readonly velocityBuffer;
+    private readonly spriteBuffer;
+    private readonly spriteStaging;
+    /** Room to draw farthest first, where the batch asked. See `ParticleBatchOptions.sort`. */
+    private readonly order;
+    /** The sprite's own: its image, its flipbook and its fades. See `ParticleBatchOptions`. */
+    readonly texture: SurfaceTexture | null;
+    readonly cells: readonly [number, number];
+    readonly blendCells: boolean;
+    readonly softDepth: number;
+    readonly cameraFade: number;
+    readonly cameraOffset: number;
     private readonly blend;
     private readonly stretchSec;
     private readonly erosion;
@@ -119,7 +175,7 @@ export declare class ParticleBatch {
      * Only the live prefix of each array, which is what the pool's compaction
      * exists for: a pool at a tenth of its capacity uploads a tenth of the bytes.
      */
-    upload(gl: WebGL2RenderingContext, data: ParticleInstances): void;
+    upload(gl: WebGL2RenderingContext, given: ParticleInstances, eye: ArrayLike<number>): void;
     /** Bind this material's own constants. Called once per draw, before `drawTo`. */
     bindMaterial(gl: WebGL2RenderingContext): void;
     /**

package/dist/render/particleBatch.js

@@ -2,6 +2,24 @@ import { compileProgram, uniformLocations } from './shader.js';
 import { particleShaders } from './particleMaterial.js';
 import { PARTICLE_BLADES, PARTICLE_INDICES, PARTICLE_VERTS } from './shaders/particle.js';
 import { blendCovering, blendKeeping } from './sceneCoverage.js';
+import { PARTICLE_SPRITE_UNIT } from './lightBudget.js';
+import { createParticleSort, sortBackToFront } from './particleSort.js';
+/** The vertex stage's `uCameraFacing` for a facing: the cross 0, the camera 1, the travel 2. */
+export function facingCode(facing) {
+    return facing === 'cross' ? 0 : facing === 'velocity' ? 2 : 1;
+}
+/**
+ * A sprite's frame and half-height, two floats a particle, into `out` — the stream the vertex
+ * stage reads at location 10. Shared by both backends, so the two read one layout.
+ */
+export function packSpriteStream(data, count, out) {
+    const frames = data.frames;
+    const heights = data.heights;
+    for (let i = 0; i < count; i++) {
+        out[i * 2] = frames?.[i] ?? 0;
+        out[i * 2 + 1] = heights?.[i] ?? 0;
+    }
+}
 /** Corners of one blade, as a triangle-strip-friendly quad. */
 const CORNERS = [
     [-1, -1],
@@ -22,6 +40,17 @@ export class ParticleBatch {
     ageBuffer;
     seedBuffer;
     velocityBuffer;
+    spriteBuffer;
+    spriteStaging;
+    /** Room to draw farthest first, where the batch asked. See `ParticleBatchOptions.sort`. */
+    order;
+    /** The sprite's own: its image, its flipbook and its fades. See `ParticleBatchOptions`. */
+    texture;
+    cells;
+    blendCells;
+    softDepth;
+    cameraFade;
+    cameraOffset;
     blend;
     stretchSec;
     erosion;
@@ -53,6 +82,17 @@ export class ParticleBatch {
         this.coreGain = options.coreGain ?? 1;
         this.fog = options.fog ?? false;
         this.facing = options.facing ?? 'camera';
+        this.texture = options.texture ?? null;
+        this.cells = options.cells ?? [1, 1];
+        this.blendCells = options.blendCells === true;
+        this.softDepth = Math.max(0, options.softDepth ?? 0);
+        this.cameraFade = Math.max(0, options.cameraFade ?? 0);
+        this.cameraOffset = options.cameraOffset ?? 0;
+        this.order = options.sort === true ? createParticleSort(capacity) : null;
+        this.spriteStaging = new Float32Array(capacity * 2);
+        if (options.material === 'sprite' && this.texture === null) {
+            throw new Error("createParticles: a 'sprite' draws an image, and was given no `texture`");
+        }
         const corners = new Float32Array(PARTICLE_VERTS * 2);
         const blades = new Float32Array(PARTICLE_VERTS);
         const indices = new Uint16Array(PARTICLE_INDICES);
@@ -88,6 +128,7 @@ export class ParticleBatch {
         this.ageBuffer = this.attach(gl, 7, capacity, 1, 1, shaders.label);
         this.seedBuffer = this.attach(gl, 8, capacity, 1, 1, shaders.label);
         this.velocityBuffer = this.attach(gl, 9, capacity * 3, 3, 1, shaders.label);
+        this.spriteBuffer = this.attach(gl, 10, capacity * 2, 2, 1, shaders.label);
         const indexBuffer = gl.createBuffer();
         if (indexBuffer === null)
             throw new Error(`${shaders.label}: createBuffer failed`);
@@ -102,10 +143,13 @@ export class ParticleBatch {
      * Only the live prefix of each array, which is what the pool's compaction
      * exists for: a pool at a tenth of its capacity uploads a tenth of the bytes.
      */
-    upload(gl, data) {
+    upload(gl, given, eye) {
+        const data = this.order === null ? given : sortBackToFront(given, eye, this.order);
         const n = data.count;
         if (n === 0)
             return;
+        packSpriteStream(data, n, this.spriteStaging);
+        this.send(gl, this.spriteBuffer, this.spriteStaging, n * 2);
         this.send(gl, this.positionBuffer, data.positions, n * 3);
         this.send(gl, this.sizeBuffer, data.sizes, n);
         this.send(gl, this.spinBuffer, data.spins, n);
@@ -119,7 +163,14 @@ export class ParticleBatch {
     bindMaterial(gl) {
         const u = this.uniforms;
         gl.uniform1f(u['uStretchSec'] ?? null, this.stretchSec);
-        gl.uniform1f(u['uCameraFacing'] ?? null, this.facing === 'camera' ? 1 : 0);
+        gl.uniform1f(u['uCameraFacing'] ?? null, facingCode(this.facing));
+        gl.uniform1f(u['uCameraOffset'] ?? null, this.cameraOffset);
+        /* The sprite's flipbook and its image; the fades are the renderer's, which owns the depth. */
+        if (this.texture !== null) {
+            gl.uniform4f(u['uCells'] ?? null, this.cells[0], this.cells[1], this.blendCells ? 1 : 0, 0);
+            this.texture.bind(gl, PARTICLE_SPRITE_UNIT);
+            gl.uniform1i(u['uSprite'] ?? null, PARTICLE_SPRITE_UNIT);
+        }
         gl.uniform1f(u['uErosion'] ?? null, this.erosion);
         gl.uniform1f(u['uCoreGain'] ?? null, this.coreGain);
         /* Only the mote program declares uFogEnabled, so this is a no-op — not a leak into the

package/dist/render/particleMaterial.d.ts

@@ -13,7 +13,7 @@
  * document that. Naming them makes the pairing explicit instead of leaving it to a caller to
  * match a source with the constants that suit it.
  */
-export type ParticleMaterial = 'smoke' | 'spark' | 'mote';
+export type ParticleMaterial = 'smoke' | 'spark' | 'mote' | 'sprite';
 /** Both compilations of one material, and what the generator recorded about each stage. */
 export interface ParticleShaders {
     readonly label: string;
@@ -47,6 +47,11 @@ export declare const PARTICLE_VERT_BINDINGS: {
             readonly size: 4;
             readonly type: "float";
         };
+        readonly uCameraOffset: {
+            readonly offset: 84;
+            readonly size: 4;
+            readonly type: "float";
+        };
     };
     readonly textures: {};
 };

package/dist/render/particleMaterial.js

@@ -1,5 +1,5 @@
-import { PARTICLE_MOTE_FRAG, PARTICLE_SMOKE_FRAG, PARTICLE_SPARK_FRAG, PARTICLE_VERT, } from './shaders/particle.js';
-import { PARTICLE_BINDINGS, PARTICLE_MOTE_FRAG_WGSL, PARTICLE_SMOKE_FRAG_WGSL, PARTICLE_SPARK_FRAG_WGSL, PARTICLE_VERT_WGSL, } from './shaders/generated/particle.wgsl.js';
+import { PARTICLE_MOTE_FRAG, PARTICLE_SMOKE_FRAG, PARTICLE_SPARK_FRAG, PARTICLE_SPRITE_FRAG, PARTICLE_VERT, } from './shaders/particle.js';
+import { PARTICLE_BINDINGS, PARTICLE_MOTE_FRAG_WGSL, PARTICLE_SMOKE_FRAG_WGSL, PARTICLE_SPARK_FRAG_WGSL, PARTICLE_SPRITE_FRAG_WGSL, PARTICLE_VERT_WGSL, } from './shaders/generated/particle.wgsl.js';
 /**
  * Every particle material this engine ships.
  *
@@ -28,6 +28,14 @@ const MATERIALS = {
         vertexWgsl: PARTICLE_VERT_WGSL,
         fragmentWgsl: PARTICLE_MOTE_FRAG_WGSL,
     },
+    /* An image a consumer supplies, not a shape this engine draws: see `PARTICLE_SPRITE_FRAG`. */
+    sprite: {
+        label: 'particle:sprite',
+        vertexSource: PARTICLE_VERT,
+        fragmentSource: PARTICLE_SPRITE_FRAG,
+        vertexWgsl: PARTICLE_VERT_WGSL,
+        fragmentWgsl: PARTICLE_SPRITE_FRAG_WGSL,
+    },
 };
 /** What the generator recorded about the shared vertex stage. */
 export const PARTICLE_VERT_BINDINGS = PARTICLE_BINDINGS.PARTICLE_VERT;