@driftengine/core 4.3.0 → 4.4.1

package/src/render/backend/webgpu/buffers.ts

@@ -1,6 +1,7 @@
 import { boundsOfPositions, createBounds } from '../../../math/bounds.ts';
 import type { Bounds } from '../../../math/bounds.ts';
 import { MorphTexture } from './morphTexture.ts';
+import { validateMeshData } from '../../mesh.ts';
 import type { MeshData } from '../../mesh.ts';
 import { ABSENT_ATTRIBUTE } from '../../vertexDefaults.ts';
 import { UPLOAD_BYTES_PER_STEP } from '../../uploadStep.ts';
@@ -255,6 +256,11 @@ export function createGpuMeshIncremental(
   data: MeshData,
   dynamic = false,
 ): IncrementalGpuMesh {
+  /*
+   * The other backend's refusal, and the premise of the interleave below: every attribute holds
+   * exactly a vertex's worth for every vertex, so nothing reads past the end of its array.
+   */
+  validateMeshData(data);
   const bounds = boundsOfPositions(data.positions, createBounds());
   const vertexCount = data.positions.length / 3;
   const supplied = VERTEX_LAYOUT.filter(
@@ -434,14 +440,8 @@ function* uploadSteps(job: UploadJob): Generator<void, void, void> {
     let fieldOffset = 0;
     for (const attribute of supplied) {
       const source = data[attribute.name as keyof MeshData] as Float32Array;
-      const width = attribute.components;
-      for (let vertex = from; vertex < to; vertex++) {
-        for (let component = 0; component < width; component++) {
-          interleaved[vertex * step + fieldOffset + component] =
-            source[vertex * width + component] ?? 0;
-        }
-      }
-      fieldOffset += width;
+      interleaveField(interleaved, source, attribute.components, step, fieldOffset, from, to);
+      fieldOffset += attribute.components;
     }
     device.queue.writeBuffer(vertices, from * stride, interleaved, from * step, (to - from) * step);
     taken += 1;
@@ -462,6 +462,49 @@ function* uploadSteps(job: UploadJob): Generator<void, void, void> {
   job.progress.uploaded = true;
 }
 
+/**
+ * One attribute of vertices `from` to `to` into its field of the interleaved rows.
+ *
+ * **Unrolled by width, because the general loop was most of a heavy load's upload.** A loop over
+ * components inside a loop over vertices, with the index recomputed from both, cost 1.5 s of main
+ * thread on a courtyard of five packs; a loop per width walking two cursors does the same writes in
+ * about a third of the time, measured on four million vertices in Node. Every width the layout
+ * carries is one, two, three or four, so the last arm is the one-float case and nothing else.
+ */
+function interleaveField(
+  rows: Float32Array,
+  source: Float32Array,
+  width: number,
+  step: number,
+  fieldOffset: number,
+  from: number,
+  to: number,
+): void {
+  let write = from * step + fieldOffset;
+  const end = to * width;
+  if (width === 3) {
+    for (let read = from * 3; read < end; read += 3, write += step) {
+      rows[write] = source[read] as number;
+      rows[write + 1] = source[read + 1] as number;
+      rows[write + 2] = source[read + 2] as number;
+    }
+  } else if (width === 4) {
+    for (let read = from * 4; read < end; read += 4, write += step) {
+      rows[write] = source[read] as number;
+      rows[write + 1] = source[read + 1] as number;
+      rows[write + 2] = source[read + 2] as number;
+      rows[write + 3] = source[read + 3] as number;
+    }
+  } else if (width === 2) {
+    for (let read = from * 2; read < end; read += 2, write += step) {
+      rows[write] = source[read] as number;
+      rows[write + 1] = source[read + 1] as number;
+    }
+  } else {
+    for (let read = from; read < end; read++, write += step) rows[write] = source[read] as number;
+  }
+}
+
 /** The handle, made where it can see only what it hands out. */
 function gpuMeshOf(parts: {
   readonly vertices: GPUBuffer;

package/src/render/backend/webgpu/depthPass.ts

@@ -1,6 +1,9 @@
 import {
   DEPTH_BINDINGS,
+  DEPTH_CUTOUT_FRAG_WGSL,
+  DEPTH_CUTOUT_VERT_WGSL,
   DEPTH_FRAG_WGSL,
+  DEPTH_INSTANCED_CUTOUT_VERT_WGSL,
   DEPTH_INSTANCED_VERT_WGSL,
   DEPTH_SKINNED_VERT_WGSL,
   DEPTH_VERT_WGSL,
@@ -20,6 +23,15 @@ import { shaderModule } from './shaderModules.ts';
 export const DEPTH_VERT_FIELDS = DEPTH_BINDINGS.DEPTH_VERT.fields;
 export const DEPTH_VERT_SIZE = DEPTH_BINDINGS.DEPTH_VERT.uniformSize;
 export const DEPTH_FRAG_SIZE = DEPTH_BINDINGS.DEPTH_FRAG.uniformSize;
+/*
+ * The cutout variants' vertex blocks. The rigid one is the plain block with `uUvScale` and
+ * `uAlphaCutout` after every other field, so a slot written for it is written with the plain
+ * offsets plus these two; the instanced one has no model and no wind, so its two sit earlier.
+ */
+export const DEPTH_CUTOUT_VERT_FIELDS = DEPTH_BINDINGS.DEPTH_CUTOUT_VERT.fields;
+export const DEPTH_CUTOUT_VERT_SIZE = DEPTH_BINDINGS.DEPTH_CUTOUT_VERT.uniformSize;
+export const DEPTH_INSTANCED_CUTOUT_VERT_FIELDS = DEPTH_BINDINGS.DEPTH_INSTANCED_CUTOUT_VERT.fields;
+const CUTOUT_MAP = DEPTH_BINDINGS.DEPTH_CUTOUT_FRAG.textures.uCutoutMap;
 /** Re-exported so the scatter depth pass can pair with the same fragment stage. */
 export { DEPTH_FRAG_WGSL };
 export const DEPTH_FRAG_BINDING = DEPTH_BINDINGS.DEPTH_FRAG.uniforms;
@@ -55,9 +67,15 @@ export function createDepthBindGroupLayout(
    * frame that skins nothing pays nothing at all.
    */
   skinned = false,
+  /**
+   * Whether this layout carries a cutout map, for a caster whose shape is in its texture's alpha.
+   * Separate for the palette's reason: the plain layout stays exactly what it was, and a frame with
+   * no cutout caster pays nothing.
+   */
+  cutout = false,
 ): GPUBindGroupLayout {
   return device.createBindGroupLayout({
-    label: skinned ? 'depth.layout.skinned' : 'depth.layout',
+    label: skinned ? 'depth.layout.skinned' : cutout ? 'depth.layout.cutout' : 'depth.layout',
     entries: [
       /* The texture and no sampler: the shader reads the palette with `textureLoad`, an integer
          coordinate with nothing to filter, which is what `flatPass.ts` binds for the same
@@ -74,7 +92,11 @@ export function createDepthBindGroupLayout(
       {
         binding: VERT_BINDING,
         visibility: VISIBILITY_VERTEX,
-        buffer: { type: 'uniform', hasDynamicOffset: true, minBindingSize: DEPTH_VERT_SIZE },
+        buffer: {
+          type: 'uniform',
+          hasDynamicOffset: true,
+          minBindingSize: cutout ? DEPTH_CUTOUT_VERT_SIZE : DEPTH_VERT_SIZE,
+        },
       },
       {
         binding: FRAG_BINDING,
@@ -107,6 +129,22 @@ export function createDepthBindGroupLayout(
         visibility: VISIBILITY_FRAGMENT,
         sampler: { type: 'non-filtering' },
       },
+      /* A colour map sampled with its own filter and mips, so a leaf's edge in the map is the edge
+         a colour pass at that distance would draw. */
+      ...(cutout
+        ? [
+            {
+              binding: CUTOUT_MAP.texture,
+              visibility: VISIBILITY_FRAGMENT,
+              texture: { sampleType: 'float' as GPUTextureSampleType },
+            },
+            {
+              binding: CUTOUT_MAP.sampler,
+              visibility: VISIBILITY_FRAGMENT,
+              sampler: { type: 'filtering' as GPUSamplerBindingType },
+            },
+          ]
+        : []),
     ],
   });
 }
@@ -120,16 +158,35 @@ export function createDepthBindGroup(
   sampler: GPUSampler,
   /** The joint palette, for a layout built with `skinned`. Omit for the rigid layout. */
   palette: GPUTextureView | null = null,
+  /** The cutout map and its sampler, for a layout built with `cutout`. */
+  cutout: { readonly view: GPUTextureView; readonly sampler: GPUSampler } | null = null,
 ): GPUBindGroup {
   return device.createBindGroup({
-    label: palette === null ? 'depth.bindGroup' : 'depth.bindGroup.skinned',
+    label:
+      palette !== null
+        ? 'depth.bindGroup.skinned'
+        : cutout !== null
+          ? 'depth.bindGroup.cutout'
+          : 'depth.bindGroup',
     layout,
     entries: [
-      { binding: VERT_BINDING, resource: { buffer: perDraw, size: DEPTH_VERT_SIZE } },
+      {
+        binding: VERT_BINDING,
+        resource: {
+          buffer: perDraw,
+          size: cutout !== null ? DEPTH_CUTOUT_VERT_SIZE : DEPTH_VERT_SIZE,
+        },
+      },
       { binding: FRAG_BINDING, resource: { buffer: perPass, size: DEPTH_FRAG_SIZE } },
       { binding: PREVIOUS.texture, resource: previous },
       { binding: PREVIOUS.sampler, resource: sampler },
       ...(palette !== null ? [{ binding: DEPTH_PALETTE_BINDING.texture, resource: palette }] : []),
+      ...(cutout !== null
+        ? [
+            { binding: CUTOUT_MAP.texture, resource: cutout.view },
+            { binding: CUTOUT_MAP.sampler, resource: cutout.sampler },
+          ]
+        : []),
     ],
   });
 }
@@ -169,6 +226,8 @@ export function depthPipeline(
    * reclaims the two attribute locations the joint indices and weights occupy.
    */
   instanced = false,
+  /** Whether this pipeline casts a cutout: the variant that reads a map and discards by it. */
+  cutout = false,
 ): GPURenderPipeline {
   return cache.get(key, () => ({
     label: key,
@@ -176,17 +235,26 @@ export function depthPipeline(
     vertex: {
       module: shaderModule(
         device,
-        instanced
-          ? { label: 'depth.instanced.vert', code: DEPTH_INSTANCED_VERT_WGSL }
-          : skinned
-            ? { label: 'depth.skinned.vert', code: DEPTH_SKINNED_VERT_WGSL }
-            : { label: 'depth.vert', code: DEPTH_VERT_WGSL },
+        cutout
+          ? instanced
+            ? { label: 'depth.instanced.cutout.vert', code: DEPTH_INSTANCED_CUTOUT_VERT_WGSL }
+            : { label: 'depth.cutout.vert', code: DEPTH_CUTOUT_VERT_WGSL }
+          : instanced
+            ? { label: 'depth.instanced.vert', code: DEPTH_INSTANCED_VERT_WGSL }
+            : skinned
+              ? { label: 'depth.skinned.vert', code: DEPTH_SKINNED_VERT_WGSL }
+              : { label: 'depth.vert', code: DEPTH_VERT_WGSL },
       ),
       entryPoint: 'main',
       buffers: vertexBufferLayouts(present, instanced),
     },
     fragment: {
-      module: shaderModule(device, { label: 'depth.frag', code: DEPTH_FRAG_WGSL }),
+      module: shaderModule(
+        device,
+        cutout
+          ? { label: 'depth.cutout.frag', code: DEPTH_CUTOUT_FRAG_WGSL }
+          : { label: 'depth.frag', code: DEPTH_FRAG_WGSL },
+      ),
       entryPoint: 'main',
       targets: [],
     },

package/src/render/backend/webgpu/exposurePass.ts

@@ -0,0 +1,234 @@
+import {
+  EXPOSURE_ADAPT_FRAG_WGSL,
+  EXPOSURE_BINDINGS,
+  EXPOSURE_METER_FRAG_WGSL,
+} from '../../shaders/generated/exposure.wgsl.ts';
+import {
+  EXPOSURE_LOCAL_FRAG_WGSL,
+  LOCALEXPOSURE_BINDINGS,
+} from '../../shaders/generated/localExposure.wgsl.ts';
+import { METER_GRID, adaptBlend } from '../../shaders/exposure.ts';
+import { LOCAL_GRID_WIDTH } from '../../shaders/localExposure.ts';
+import { createPostStageLayout, postPipeline } from './postPass.ts';
+import type { PipelineCache } from './pipelineCache.ts';
+
+/**
+ * Eye adaptation on WebGPU: meter the finished scene into the frame's own encoder, and follow it
+ * with a held brightness the composite reads. See `shaders/exposure.ts` for the design.
+ *
+ * **One held texel the composite always binds, and a scratch the adaptation writes.** Reading and
+ * writing one texture in a pass is refused, and a pair that swapped roles would mean a composite
+ * bind group per role; so the adaptation writes the scratch from the held value and a copy puts it
+ * back, on the same encoder, before the composite reads it. Recorded into the frame's encoder
+ * rather than submitted apart, because a separate submission would run before the frame that
+ * draws the scene it is meant to measure.
+ *
+ * **And local exposure's grid, when that is asked for**, in the same encoder after the meter:
+ * `rg16float`, a sum and a count per tile per band, sampled filtered by the composite. See
+ * `localExposure.ts`.
+ */
+
+const METER = EXPOSURE_BINDINGS.EXPOSURE_METER_FRAG.textures;
+const ADAPT = EXPOSURE_BINDINGS.EXPOSURE_ADAPT_FRAG;
+const LOCAL = LOCALEXPOSURE_BINDINGS.EXPOSURE_LOCAL_FRAG.textures;
+const USAGE_RENDER = 0x10;
+const USAGE_TEXTURE = 0x04;
+const USAGE_COPY_SRC = 0x01;
+const USAGE_COPY_DST = 0x02;
+const USAGE_UNIFORM_DST = 0x40 | 0x08;
+const VISIBILITY_FRAGMENT = 0x2;
+
+export class ExposurePass {
+  private readonly meter: GPUTexture;
+  private readonly meterView: GPUTextureView;
+  private readonly held: GPUTexture;
+  /** The texel the composite binds, for its bind group. */
+  readonly heldView: GPUTextureView;
+  private readonly scratch: GPUTexture;
+  private readonly scratchView: GPUTextureView;
+  private readonly localGrid: GPUTexture;
+  /** Local exposure's grid, for the composite's bind group. */
+  readonly localView: GPUTextureView;
+  private readonly localLayout: GPUBindGroupLayout;
+  private localGroup: GPUBindGroup | null = null;
+  private localSource: GPUTextureView | null = null;
+  private readonly meterLayout: GPUBindGroupLayout;
+  private readonly adaptLayout: GPUBindGroupLayout;
+  private readonly adaptGroup: GPUBindGroup;
+  private readonly uniforms: GPUBuffer;
+  private readonly blend = new Float32Array(4);
+  private meterGroup: GPUBindGroup | null = null;
+  private meterSource: GPUTextureView | null = null;
+  /** Whether anything is held yet: the first frame, and the first after a cut, snaps. */
+  private holding = false;
+
+  constructor(
+    private readonly device: GPUDevice,
+    private readonly pipelines: PipelineCache,
+    private readonly sampler: GPUSampler,
+  ) {
+    const target = (label: string, size: number, usage: number): GPUTexture =>
+      device.createTexture({ label, size: [size, size], format: 'r16float', usage });
+    this.meter = target('exposure.meter', METER_GRID, USAGE_RENDER | USAGE_TEXTURE);
+    this.held = target('exposure.held', 1, USAGE_RENDER | USAGE_TEXTURE | USAGE_COPY_DST);
+    this.scratch = target('exposure.scratch', 1, USAGE_RENDER | USAGE_COPY_SRC);
+    this.localGrid = device.createTexture({
+      label: 'exposure.localGrid',
+      size: [LOCAL_GRID_WIDTH, METER_GRID],
+      format: 'rg16float',
+      usage: USAGE_RENDER | USAGE_TEXTURE,
+    });
+    this.localView = this.localGrid.createView();
+    this.meterView = this.meter.createView();
+    this.heldView = this.held.createView();
+    this.scratchView = this.scratch.createView();
+
+    /* The meter has no uniforms, so its layout is its one texture and sampler and nothing else. */
+    this.meterLayout = device.createBindGroupLayout({
+      label: 'exposure.meterLayout',
+      entries: [
+        { binding: METER.uScene.texture, visibility: VISIBILITY_FRAGMENT, texture: {} },
+        { binding: METER.uScene.sampler, visibility: VISIBILITY_FRAGMENT, sampler: {} },
+      ],
+    });
+    this.localLayout = device.createBindGroupLayout({
+      label: 'exposure.localLayout',
+      entries: [
+        { binding: LOCAL.uScene.texture, visibility: VISIBILITY_FRAGMENT, texture: {} },
+        { binding: LOCAL.uScene.sampler, visibility: VISIBILITY_FRAGMENT, sampler: {} },
+      ],
+    });
+    this.adaptLayout = createPostStageLayout(device, ADAPT.uniforms, ADAPT.uniformSize, [
+      { binding: ADAPT.textures.uMeter },
+      { binding: ADAPT.textures.uHeld },
+    ]);
+    this.uniforms = device.createBuffer({
+      label: 'exposure.uniforms',
+      size: ADAPT.uniformSize,
+      usage: USAGE_UNIFORM_DST,
+    });
+    this.adaptGroup = device.createBindGroup({
+      label: 'exposure.adaptGroup',
+      layout: this.adaptLayout,
+      entries: [
+        { binding: ADAPT.uniforms, resource: { buffer: this.uniforms, size: ADAPT.uniformSize } },
+        { binding: ADAPT.textures.uMeter.texture, resource: this.meterView },
+        { binding: ADAPT.textures.uMeter.sampler, resource: sampler },
+        { binding: ADAPT.textures.uHeld.texture, resource: this.heldView },
+        { binding: ADAPT.textures.uHeld.sampler, resource: sampler },
+      ],
+    });
+  }
+
+  /** Forget what is held, so the next frame meters afresh rather than easing from another shot. */
+  cut(): void {
+    this.holding = false;
+  }
+
+  /**
+   * Meter `scene` and move the held brightness toward it by `dtSec` of adaptation, and with `local`
+   * draw local exposure's grid too.
+   */
+  run(encoder: GPUCommandEncoder, scene: GPUTextureView, dtSec: number, local = false): void {
+    const { device } = this;
+    if (this.meterSource !== scene || this.meterGroup === null) {
+      this.meterGroup = device.createBindGroup({
+        label: 'exposure.meterGroup',
+        layout: this.meterLayout,
+        entries: [
+          { binding: METER.uScene.texture, resource: scene },
+          { binding: METER.uScene.sampler, resource: this.sampler },
+        ],
+      });
+      this.meterSource = scene;
+    }
+    this.blend[0] = adaptBlend(dtSec, !this.holding);
+    device.queue.writeBuffer(this.uniforms, 0, this.blend);
+
+    const meter = encoder.beginRenderPass({
+      label: 'exposure.meter',
+      colorAttachments: [
+        { view: this.meterView, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 0] },
+      ],
+    });
+    meter.setPipeline(
+      postPipeline(
+        this.pipelines,
+        device,
+        this.meterLayout,
+        'exposure.meter',
+        EXPOSURE_METER_FRAG_WGSL,
+        'r16float',
+      ),
+    );
+    meter.setBindGroup(0, this.meterGroup);
+    meter.draw(3);
+    meter.end();
+    if (local) this.drawLocal(encoder, scene);
+
+    const adapt = encoder.beginRenderPass({
+      label: 'exposure.adapt',
+      colorAttachments: [
+        { view: this.scratchView, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 0] },
+      ],
+    });
+    adapt.setPipeline(
+      postPipeline(
+        this.pipelines,
+        device,
+        this.adaptLayout,
+        'exposure.adapt',
+        EXPOSURE_ADAPT_FRAG_WGSL,
+        'r16float',
+      ),
+    );
+    adapt.setBindGroup(0, this.adaptGroup, [0]);
+    adapt.draw(3);
+    adapt.end();
+    encoder.copyTextureToTexture({ texture: this.scratch }, { texture: this.held }, [1, 1, 1]);
+    this.holding = true;
+  }
+
+  /** Local exposure's grid, from the same scene the meter read. */
+  private drawLocal(encoder: GPUCommandEncoder, scene: GPUTextureView): void {
+    const { device } = this;
+    if (this.localSource !== scene || this.localGroup === null) {
+      this.localGroup = device.createBindGroup({
+        label: 'exposure.localGroup',
+        layout: this.localLayout,
+        entries: [
+          { binding: LOCAL.uScene.texture, resource: scene },
+          { binding: LOCAL.uScene.sampler, resource: this.sampler },
+        ],
+      });
+      this.localSource = scene;
+    }
+    const pass = encoder.beginRenderPass({
+      label: 'exposure.local',
+      colorAttachments: [
+        { view: this.localView, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 0] },
+      ],
+    });
+    pass.setPipeline(
+      postPipeline(
+        this.pipelines,
+        device,
+        this.localLayout,
+        'exposure.local',
+        EXPOSURE_LOCAL_FRAG_WGSL,
+        'rg16float',
+      ),
+    );
+    pass.setBindGroup(0, this.localGroup);
+    pass.draw(3);
+    pass.end();
+  }
+
+  dispose(): void {
+    this.localGrid.destroy();
+    this.meter.destroy();
+    this.held.destroy();
+    this.scratch.destroy();
+    this.uniforms.destroy();
+  }
+}

package/src/render/backend/webgpu/fieldCompose.ts

@@ -71,6 +71,16 @@ export const DEFAULT_FIELD_COMPOSE: FieldComposeOptions = {
   radius: 4,
 };
 
+/**
+ * The most cascades a field is given to reach a probe grid, which is `cascadesForGrid`'s ceiling.
+ *
+ * Six from the 4 m default reach 128 m, and each is the same 49 cubed samples, about half a
+ * megabyte, so the bound is on memory rather than on distance. What would make it wrong is a scene
+ * whose probe grid is longer than about a hundred metres, whose far probes are then left untraced
+ * rather than traced against a field that is not there.
+ */
+export const MAX_FIELD_CASCADES = 6;
+
 export interface FieldComposeOptions {
   /** Samples a side, every cascade. */
   readonly resolution: number;
@@ -147,6 +157,11 @@ export class FieldComposer {
   private timed = false;
   private composeMsValue = 0;
 
+  /** How many cascades this composer was built with. */
+  get cascadeCount(): number {
+    return this.options.cascades;
+  }
+
   constructor(device: GPUDevice, options: FieldComposeOptions) {
     if (!(Math.trunc(options.resolution) >= 2)) {
       throw new Error(

package/src/render/backend/webgpu/flatPass.ts

@@ -269,7 +269,9 @@ export function createFlatBindGroupLayout(
      * other kind against a `uint` texture, and the shader never samples it — every read is a
      * `texelFetch`, which is why the declaration shares a sampler rather than bringing its own.
      */
-    const integer = texture.type === 'usampler2D';
+    const integer = texture.type === 'usampler2D' || texture.type === 'usampler3D';
+    /* DriftLight's brick index and atlas, the lit pass's only volumes. See `driftLight.ts`. */
+    const volume = texture.type === 'sampler3D' || texture.type === 'usampler3D';
     const isShadow =
       integer || (name !== 'uEnvironment' && (name.endsWith('ShadowMap') || cube || array));
     entries.push({
@@ -279,6 +281,7 @@ export function createFlatBindGroupLayout(
         sampleType: integer ? 'uint' : isShadow ? 'unfilterable-float' : 'float',
         ...(cube ? { viewDimension: 'cube' as const } : {}),
         ...(array ? { viewDimension: '2d-array' as const } : {}),
+        ...(volume ? { viewDimension: '3d' as const } : {}),
       },
     });
     /*
@@ -460,6 +463,8 @@ export function flatPipeline(
   instanced = false,
   /** Which order-independent buffer this pipeline writes, if any. The key must carry it. */
   oit: OitTarget = 'none',
+  /** Culls nothing, for a surface seen from both faces. The key must carry it: `|2s`. */
+  doubleSided = false,
 ): GPURenderPipeline {
   return cache.get(key, () =>
     flatDescriptor(
@@ -476,6 +481,7 @@ export function flatPipeline(
       depthLayer,
       instanced,
       oit,
+      doubleSided,
     ),
   );
 }
@@ -571,6 +577,8 @@ function flatDescriptor(
    * `flatFrag`'s permutation axis, which `scripts/wgsl.ts` measures at about 247 KB gzipped.
    */
   oit: OitTarget = 'none',
+  /** Culls nothing: a surface seen from both faces. */
+  doubleSided = false,
 ): GPURenderPipelineDescriptor {
   const offset = depthOffsetForLayer(depthLayer);
   return {
@@ -612,7 +620,7 @@ function flatDescriptor(
             : { format: cache.format }),
       ],
     },
-    primitive: { topology: 'triangle-list', cullMode: 'back' },
+    primitive: { topology: 'triangle-list', cullMode: doubleSided ? 'none' : 'back' },
     multisample: { count: cache.sampleCount },
     /*
      * `less`, matching the WebGL2 path's `LESS` rather than `LEQUAL`, and for the reason

package/src/render/backend/webgpu/particlePass.ts

@@ -118,6 +118,14 @@ export interface GpuParticles {
   readonly fragInts: Int32Array;
   readonly fields: UniformFields;
   readonly bindGroup: GPUBindGroup;
+  /**
+   * The encoder this batch was last drawn into, by the renderer's count, or -1.
+   *
+   * **A second draw into the same encoder is refused**, because this batch's buffers are written
+   * at each draw and every write lands before the encoder runs: both draws would show the second.
+   * WebGL2 has no such limit, and a limit one backend has is said, not left to a wrong picture.
+   */
+  drawnInEncoder: number;
   dispose(): void;
 }
 
@@ -215,6 +223,7 @@ export function createGpuParticles(
   const fragStaging = new ArrayBuffer(fragSize);
 
   return {
+    drawnInEncoder: -1,
     corners: cornerBuffer,
     instances,
     indexBuffer,