@tinypoly/gpu-renderer 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinypoly/gpu-renderer",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "WebGPU path tracer for Three.js scenes: BVH traversal, progressive accumulation and tone mapping in WGSL compute shaders.",
   "keywords": [
     "three",

package/src/bvh.ts

@@ -1,15 +1,20 @@
 /**
- * Binned SAH bounding volume hierarchy, built straight into the layout the shader reads: eight words per node, the
- * first four a minimum corner and a left child or leaf start, the last four a maximum corner and a right child or
- * triangle count, matching `struct BvhNode` in `wgsl/bvh.wgsl.ts`.
+ * Binned SAH bounding volume hierarchy. It is built as a binary tree of boxes, eight words a node, and then laid out
+ * the way the shader reads it: each node holds the boxes of its two children, so one read tells the traversal both
+ * what it may enter and where to go, and a leaf is tested without being read at all. That is sixteen words a node,
+ * matching `struct BvhNode` in `wgsl/common.wgsl.ts`: per child a minimum corner and a link, then a maximum corner and
+ * a triangle count. A link of zero or more is the node to go to; a negative one is a leaf, `-1 - start` into `order`.
  *
  * The bounds are computed from the same `Float32Array` the shader traverses, so every corner is already a float and
  * needs no widening. Building from double precision positions, as the CPU renderer does, would need each minimum
  * rounded down and each maximum rounded up before they reach the GPU.
  */
 
-/** Words per node in the packed buffer. */
-export const NODE_WORDS = 8;
+/** Words per node in the packed buffer: both children's corners, links and counts. */
+export const NODE_WORDS = 16;
+
+/** Words per node of the binary tree the builder works on: its own corners, and its children or its leaf. */
+const BINARY_WORDS = 8;
 
 /** Triangles a leaf may hold. */
 const MAX_LEAF_SIZE = 4;
@@ -27,7 +32,10 @@ const TRAVERSAL_COST = 0.125;
 export const MAX_BVH_DEPTH = 32;
 
 export interface PackedBvh {
-  /** `nodeCount * NODE_WORDS` words, read as floats for the corners and as signed integers for the links. */
+  /**
+   * `nodeCount * NODE_WORDS` words, read as floats for the corners and as signed integers for the links. Node zero
+   * holds the root's two children, or the root itself beside an empty child when the whole scene is one leaf.
+   */
   nodes: ArrayBuffer;
   nodeCount: number;
   /** Triangle indices in leaf order: a leaf covers `order[start] .. order[start + count - 1]`. */
@@ -66,15 +74,15 @@ export function buildBvh(positions: Float32Array, triangleCount: number): Packed
 
   const { min, max, centroid } = triangleBounds(positions, triangleCount);
   // The heuristic may split down to one triangle per leaf, so the pool starts at the common case and grows.
-  let nodes = new ArrayBuffer(Math.max(4, Math.ceil(triangleCount / 2)) * NODE_WORDS * 4);
+  let nodes = new ArrayBuffer(Math.max(4, Math.ceil(triangleCount / 2)) * BINARY_WORDS * 4);
   let floats = new Float32Array(nodes);
   let ints = new Int32Array(nodes);
 
   const reserve = (needed: number) => {
-    if (needed * NODE_WORDS * 4 <= nodes.byteLength) return;
+    if (needed * BINARY_WORDS * 4 <= nodes.byteLength) return;
 
-    const grown = new ArrayBuffer(Math.max(needed, Math.ceil(nodes.byteLength / (NODE_WORDS * 4) * 1.6))
-      * NODE_WORDS * 4);
+    const grown = new ArrayBuffer(Math.max(needed, Math.ceil(nodes.byteLength / (BINARY_WORDS * 4) * 1.6))
+      * BINARY_WORDS * 4);
 
     new Float32Array(grown).set(floats);
     nodes = grown;
@@ -132,7 +140,7 @@ export function buildBvh(positions: Float32Array, triangleCount: number): Packed
       if (value > cMaxZ) cMaxZ = value;
     }
 
-    const word = node * NODE_WORDS;
+    const word = node * BINARY_WORDS;
 
     floats[word] = minX;
     floats[word + 1] = minY;
@@ -180,7 +188,68 @@ export function buildBvh(positions: Float32Array, triangleCount: number): Packed
     top += 2;
   }
 
-  return { nodes: nodes.slice(0, nodeCount * NODE_WORDS * 4), nodeCount, order, maxDepth };
+  return { ...widen(floats, ints, nodeCount), order, maxDepth };
+}
+
+/**
+ * The binary tree laid out for the shader: one node per interior node of it, holding both children's boxes. Interior
+ * nodes are numbered depth first, left before right, so a node and the child it leads to tend to share a cache line.
+ */
+function widen(floats: Float32Array, ints: Int32Array, binaryCount: number): { nodes: ArrayBuffer; nodeCount: number } {
+  const leaf = (node: number) => ints[node * BINARY_WORDS + 3] < 0;
+  const rootLeaf = leaf(0);
+  // A full binary tree has one fewer interior node than leaves; a single leaf still needs a node to stand in.
+  const nodeCount = rootLeaf ? 1 : (binaryCount - 1) / 2;
+  const nodes = new ArrayBuffer(nodeCount * NODE_WORDS * 4);
+  const outFloats = new Float32Array(nodes);
+  const outInts = new Int32Array(nodes);
+  const index = new Int32Array(binaryCount);
+
+  const writeChild = (word: number, child: number) => {
+    const from = child * BINARY_WORDS;
+
+    for (let axis = 0; axis < 3; axis++) {
+      outFloats[word + axis] = floats[from + axis];
+      outFloats[word + 4 + axis] = floats[from + 4 + axis];
+    }
+
+    outInts[word + 3] = leaf(child) ? ints[from + 3] : index[child];
+    outInts[word + 7] = leaf(child) ? ints[from + 7] : 0;
+  };
+
+  if (rootLeaf) {
+    writeChild(0, 0);
+
+    // A box at the far corner of the float range, which no ray reaches, around a leaf of nothing.
+    for (let axis = 0; axis < 3; axis++) outFloats[8 + axis] = outFloats[12 + axis] = 3.4028234663852886e38;
+
+    outInts[11] = -1;
+    outInts[15] = 0;
+
+    return { nodes, nodeCount };
+  }
+
+  const interior: number[] = [];
+  const pending = [0];
+
+  while (pending.length) {
+    const node = pending.pop() as number;
+
+    index[node] = interior.length;
+    interior.push(node);
+
+    const left = ints[node * BINARY_WORDS + 3], right = ints[node * BINARY_WORDS + 7];
+
+    if (!leaf(right)) pending.push(right);
+    if (!leaf(left)) pending.push(left);
+  }
+
+  interior.forEach((node, at) => {
+    writeChild(at * NODE_WORDS, ints[node * BINARY_WORDS + 3]);
+    writeChild(at * NODE_WORDS + 8, ints[node * BINARY_WORDS + 7]);
+  });
+
+  return { nodes, nodeCount };
 }
 
 /** Surface area, the cost the split heuristic weighs each side by. Empty bounds cost nothing. */

package/src/denoise.ts

@@ -86,6 +86,10 @@ struct Params {
 @group(0) @binding(3) var<storage, read> specularIn: array<vec4<f32>>;
 @group(0) @binding(4) var<storage, read_write> diffuseOut: array<vec4<f32>>;
 @group(0) @binding(5) var<storage, read_write> specularOut: array<vec4<f32>>;
+// The guides each tap compares, worked out once per pixel by prepare: the normal and the depth, then the roughness, or
+// -1 where no sample has landed. The same numbers the accumulation gives, two reads a tap instead of four.
+@group(0) @binding(6) var<storage, read_write> guides: array<vec4<f32>>;
+@group(0) @binding(7) var<storage, read_write> roughnesses: array<f32>;
 
 fn luminance(color: vec3<f32>) -> f32 {
   return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));
@@ -153,10 +157,15 @@ fn prepare(@builtin(global_invocation_id) id: vec3<u32>) {
   if (count <= 0.0) {
     diffuseOut[index] = vec4<f32>(0.0);
     specularOut[index] = vec4<f32>(0.0);
+    guides[index] = vec4<f32>(0.0);
+    roughnesses[index] = -1.0;
 
     return;
   }
 
+  guides[index] = vec4<f32>(guideNormal(index), guideDepth(index));
+  roughnesses[index] = guideRoughness(index);
+
   let squares = accumulation[params.count + index];
   let diffuse = diffuseMean(index);
   let specular = specularMean(index);
@@ -269,9 +278,10 @@ fn atrous(@builtin(global_invocation_id) id: vec3<u32>) {
     return;
   }
 
-  let normal = guideNormal(index);
-  let depth = guideDepth(index);
-  let roughness = guideRoughness(index);
+  let guide = guides[index];
+  let normal = guide.xyz;
+  let depth = guide.w;
+  let roughness = roughnesses[index];
   let diffuseSigma = params.edge * sqrt(max(localVariance(pixel, false), 0.0)) + 1e-6;
   let specularSigma = params.edge * sqrt(max(localVariance(pixel, true), 0.0)) + 1e-6;
   let radius = specularRadius(index, depth);
@@ -299,19 +309,23 @@ fn atrous(@builtin(global_invocation_id) id: vec3<u32>) {
       var ws = base;
 
       if (dx != 0 || dy != 0) {
-        if (accumulation[other].w <= 0.0) {
+        let otherRoughness = roughnesses[other];
+
+        // No sample has landed there.
+        if (otherRoughness < 0.0) {
           continue;
         }
 
+        let otherGuide = guides[other];
         let offset = length(vec2<f32>(f32(dx * step), f32(dy * step)));
-        let alignment = max(dot(normal, guideNormal(other)), 0.0);
-        let depthWeight = exp(-abs(depth - guideDepth(other)) / (0.02 * depth * offset + 1e-3));
+        let alignment = max(dot(normal, otherGuide.xyz), 0.0);
+        let depthWeight = exp(-abs(depth - otherGuide.w) / (0.02 * depth * offset + 1e-3));
 
         wd = wd * pow(alignment, 128.0) * depthWeight
           * exp(-abs(luminance(d.rgb) - luminance(diffuseCenter.rgb)) / diffuseSigma);
 
         ws = ws * pow(alignment, specularPower) * depthWeight
-          * exp(-abs(guideRoughness(other) - roughness) * 10.0)
+          * exp(-abs(otherRoughness - roughness) * 10.0)
           * exp(-abs(luminance(s.rgb) - luminance(specularCenter.rgb)) / specularSigma)
           * select(0.0, exp(-offset * offset / (radius * radius)), radius >= 0.5);
       }
@@ -381,8 +395,21 @@ export class DenoisePass {
   private readonly finish: GPUComputePipeline;
   /** One uniform per stage, so a whole denoise is a single submit. */
   private readonly params: GPUBuffer[];
-  /** Two ping-pong pairs, diffuse and specular, and the output. */
+  /** Two ping-pong pairs, diffuse and specular, the output, then the guides and the roughness. */
   private buffers: GPUBuffer[] = [];
+  /** Bind groups by the buffers they bind, and a number for each buffer seen, which is what the key is made of. */
+  private readonly groups = new Map<string, GPUBindGroup>();
+  private readonly ids = new WeakMap<GPUBuffer, number>();
+  private nextId = 0;
+
+  private idOf(buffer: GPUBuffer): number {
+    let id = this.ids.get(buffer);
+
+    if (id === undefined) this.ids.set(buffer, id = this.nextId++);
+
+    return id;
+  }
+
   private width = 0;
   private height = 0;
 
@@ -402,6 +429,8 @@ export class DenoisePass {
         { binding: 3, visibility, buffer: storage("read-only-storage") },
         { binding: 4, visibility, buffer: storage("storage") },
         { binding: 5, visibility, buffer: storage("storage") },
+        { binding: 6, visibility, buffer: storage("storage") },
+        { binding: 7, visibility, buffer: storage("storage") },
       ],
     });
 
@@ -423,9 +452,12 @@ export class DenoisePass {
 
     const size = Math.max(16, width * height * 16);
 
-    this.buffers = Array.from({ length: 5 }, () =>
+    this.buffers = Array.from({ length: 6 }, () =>
       this.device.createBuffer({ size, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC }));
+    this.buffers.push(
+      this.device.createBuffer({ size: Math.max(16, width * height * 4), usage: GPUBufferUsage.STORAGE }));
     this.output = this.buffers[4];
+    this.groups.clear();
     this.width = width;
     this.height = height;
   }
@@ -460,22 +492,34 @@ export class DenoisePass {
     this.resize(width, height);
     this.writeParams(width, height, settings, view);
 
-    const [diffuseA, diffuseB, specularA, specularB, output] = this.buffers;
+    const [diffuseA, diffuseB, specularA, specularB, output, guides, roughnesses] = this.buffers;
     const groups = [Math.ceil(width / 8), Math.ceil(height / 8)] as const;
 
     const run = (pipeline: GPUComputePipeline, params: GPUBuffer,
       sources: [GPUBuffer, GPUBuffer], targets: [GPUBuffer, GPUBuffer]) => {
-      const group = this.device.createBindGroup({
-        layout: this.layout,
-        entries: [
-          { binding: 0, resource: { buffer: params } },
-          { binding: 1, resource: { buffer: accumulation } },
-          { binding: 2, resource: { buffer: sources[0] } },
-          { binding: 3, resource: { buffer: sources[1] } },
-          { binding: 4, resource: { buffer: targets[0] } },
-          { binding: 5, resource: { buffer: targets[1] } },
-        ],
-      });
+      // The same few groups serve every denoise of an image size: they are made once and kept.
+      const key = [params, accumulation, ...sources, ...targets].map(buffer => this.idOf(buffer)).join();
+      let group = this.groups.get(key);
+
+      if (!group) {
+        group = this.device.createBindGroup({
+          layout: this.layout,
+          entries: [
+            { binding: 0, resource: { buffer: params } },
+            { binding: 1, resource: { buffer: accumulation } },
+            { binding: 2, resource: { buffer: sources[0] } },
+            { binding: 3, resource: { buffer: sources[1] } },
+            { binding: 4, resource: { buffer: targets[0] } },
+            { binding: 5, resource: { buffer: targets[1] } },
+            { binding: 6, resource: { buffer: guides } },
+            { binding: 7, resource: { buffer: roughnesses } },
+          ],
+        });
+        // A new accumulation buffer comes with a new size, which clears these; the cap is only a guard.
+        if (this.groups.size > 64) this.groups.clear();
+
+        this.groups.set(key, group);
+      }
 
       const pass = encoder.beginComputePass({ label: "denoise" });
 
@@ -509,6 +553,7 @@ export class DenoisePass {
     for (const buffer of [...this.buffers, ...this.params]) buffer.destroy();
 
     this.buffers = [];
+    this.groups.clear();
     this.output = null;
   }
 }

package/src/dispatchScheduler.ts

@@ -13,6 +13,8 @@ export interface DispatchSchedulerOptions {
   initialRows?: number;
   /** Rows in the whole image. */
   maxRows: number;
+  /** The most paths per pixel one submit may take, which is how far past the whole image a band may grow. */
+  maxSamples?: number;
 }
 
 /** The most one measurement may widen the band, so an unmeasured machine meets the watchdog gradually. */
@@ -24,20 +26,26 @@ export class DispatchScheduler {
   private readonly targetMs: number;
   private readonly initialRows: number;
   private readonly maxRows: number;
+  private readonly maxSamples: number;
+  /** The work of the next submit, in rows times paths per pixel. */
   private rows: number;
-  /** Rows a millisecond, as far as anything has shown. Zero until the first submit says something. */
+  /** Rows a millisecond, one path each, as far as anything has shown. Zero until the first submit says something. */
   private throughput = 0;
 
   constructor(options: DispatchSchedulerOptions) {
     this.targetMs = options.targetMs ?? 12;
     this.maxRows = Math.max(1, Math.floor(options.maxRows));
+    this.maxSamples = Math.max(1, Math.floor(options.maxSamples ?? 1));
     this.initialRows = Math.max(1, Math.min(this.maxRows, Math.floor(options.initialRows ?? 16)));
     this.rows = this.initialRows;
   }
 
-  /** Rows the next submit should cover, never more than what is left. */
-  next(remaining: number): number {
-    return Math.max(1, Math.min(Math.floor(this.rows), Math.floor(remaining)));
+  /**
+   * Rows the next submit should cover, never more than what is left. A submit that takes several paths per pixel
+   * covers that many times fewer rows, so it still takes about the target time.
+   */
+  next(remaining: number, samples = 1): number {
+    return Math.max(1, Math.min(Math.floor(this.rows / Math.max(1, samples)), Math.floor(remaining)));
   }
 
   /**
@@ -52,15 +60,16 @@ export class DispatchScheduler {
    * The rate is measured from the rows actually submitted rather than from the current guess, so one band clamped by
    * what was left of the image does not stop the next one from growing.
    */
-  record(durationMs: number, rows: number) {
+  record(durationMs: number, rows: number, samples = 1) {
     if (!Number.isFinite(durationMs) || durationMs <= 0 || rows <= 0) return;
 
-    const observed = rows / durationMs;
+    const work = rows * Math.max(1, samples);
+    const observed = work / durationMs;
 
     // Good news is believed at once, since it can only mean the band was cheaper than the clock suggested. Bad news
     // is taken gradually, so one submit that happened to land behind something else does not collapse the band.
     this.throughput = observed > this.throughput ? observed : this.throughput * DECAY + observed * (1 - DECAY);
-    this.rows = Math.max(1, Math.min(this.maxRows, rows * GROW, this.targetMs * this.throughput));
+    this.rows = Math.max(1, Math.min(this.maxRows * this.maxSamples, work * GROW, this.targetMs * this.throughput));
   }
 
   /** Back to the unmeasured band, for a new scene or a new size. */

package/src/frameLayout.ts

@@ -30,11 +30,14 @@ export const FRAME_LAYOUT = layoutStruct("Frame", [
   { name: "triangleCount", type: "u32" },
   { name: "lightCount", type: "u32" },
   { name: "areaLightCount", type: "u32", doc: "How many leading lights are emissive triangles." },
+  { name: "lightCdf", type: "u32", doc: "Where every light's cumulative probability starts in the texture buffer." },
+  { name: "lightTriangles", type: "u32", doc: "Where every emissive light's triangle starts in the texture buffer." },
   { name: "clampIndirect", type: "f32", doc: "Maximum luminance one indirect contribution may add; zero leaves it." },
   { name: "shadowSpread", type: "f32", doc: "Tangent of half the angular diameter shadow rays spread over." },
   { name: "shadowsEnabled", type: "u32" },
   { name: "uvOffset", type: "u32", doc: "Where the UV sets start inside the attribute buffer." },
   { name: "orderOffset", type: "u32", doc: "Where the hierarchy's triangle order starts inside the index buffer." },
+  { name: "leafOffset", type: "u32", doc: "Where each triangle's position in that order starts inside the index buffer." },
   { name: "colorOffset", type: "u32", doc: "Where vertex colours start inside the attribute buffer." },
   { name: "hasColors", type: "u32" },
   { name: "varyingOffset", type: "u32", doc: "Where shader varyings start inside the attribute buffer." },

package/src/lights.ts

@@ -50,8 +50,16 @@ export interface PackedLights {
   ambient: { sky: number[]; ground: number[]; axis: number[] };
   /** How often direct sampling picks the environment rather than a light. Zero when there is nothing to aim at. */
   environmentPick: number;
-  /** Words to append to the texture buffer: a spot light's map index and the matrix that projects it. */
+  /**
+   * Words to append to the texture buffer: a spot light's map index and the matrix that projects it, then the
+   * cumulative probability of every entry and the triangle of every emissive one, packed tight so the two searches the
+   * shader makes over them read four bytes a step instead of a whole entry.
+   */
   extraWords: Uint32Array;
+  /** Where the cumulative probabilities start in the texture buffer, one float per entry. */
+  cdfAt: number;
+  /** Where the emissive entries' triangles start in the texture buffer, one word per emissive entry. */
+  trianglesAt: number;
 }
 
 const luminance = (color: ArrayLike<number>) => 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2];
@@ -353,8 +361,18 @@ export function packLights(
   });
 
   const environmentPick = surrounding.length ? surrounding[0].weight / total : 0;
+  const base = options.extraBase ?? 0;
+  const cdfAt = base + extra.length;
+
+  for (let index = 0; index < candidates.length; index++) extra.push(words[index * LIGHT_WORDS + 1]);
+
+  const trianglesAt = base + extra.length;
+
+  for (let index = 0; index < areas.length; index++) extra.push(words[index * LIGHT_WORDS + 3]);
 
   return {
+    cdfAt,
+    trianglesAt,
     entries,
     count: candidates.length,
     areaCount: areas.length,

package/src/renderer.ts

@@ -8,7 +8,7 @@ import { DispatchScheduler } from "./dispatchScheduler.js";
 import { packGeometry } from "./geometry.js";
 import { packLights } from "./lights.js";
 import { NO_PROGRAM } from "./materialLayout.js";
-import { NO_TEXTURE, planTextures, writeTextures } from "./texturePack.js";
+import { NO_TEXTURE, planTextures, textureEntry, writeTextures } from "./texturePack.js";
 import { PathTracePass, type FrameUniforms } from "./pathTracePass.js";
 import { ImageResolvePass } from "./imageResolve.js";
 import { PresentPass } from "./presentPass.js";
@@ -130,6 +130,31 @@ const yieldToPage = () => new Promise<void>(resolve => setTimeout(resolve, 0));
  */
 const SHOW_EVERY_MS = 16;
 
+/**
+ * Submits on the device at once. Two keep it busy: the next band is queued while the last one runs, and each submit
+ * still stays short enough for the watchdog on its own.
+ */
+const BANDS_IN_FLIGHT = 2;
+
+/** How often the canvas takes a freshly denoised image while a frame traces. */
+const DENOISE_EVERY_MS = 200;
+
+/** The most paths per pixel one dispatch takes, while no pixel can stop yet. */
+const BATCH_PATHS = 4;
+
+/**
+ * Paths per pixel the next pass takes. The first takes one, so the canvas shows something at once. Until adaptive
+ * sampling may stop a pixel, every pixel takes every path anyway, so a pass takes several and pays for reading and
+ * writing the accumulation once; from then on one at a time, so a pixel stops as soon as it has converged.
+ */
+function pathsPerDispatch(taken: number, until: number, adaptive: boolean): number {
+  if (taken === 0) return 1;
+
+  if (adaptive && taken >= until) return 1;
+
+  return Math.max(1, Math.min(BATCH_PATHS, until - taken));
+}
+
 const EMPTY_SCENE: SerializedScene = { meshes: [], lights: [], textures: [] };
 
 /** Paths every pixel takes before adaptive sampling may stop it: below this its variance says too little. */
@@ -252,7 +277,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.current = mergeSettings(DEFAULT_RENDER_SETTINGS, options.settings);
     this.denoiserSettings = mergeDenoiser(DEFAULT_DENOISER, options.denoiser);
     this.environment = DEFAULT_RENDER_ENVIRONMENT;
-    this.scheduler = new DispatchScheduler({ maxRows: this.renderHeight });
+    this.scheduler = new DispatchScheduler({ maxRows: this.renderHeight, maxSamples: BATCH_PATHS });
     this.setEnvironment(options.environment ?? DEFAULT_RENDER_ENVIRONMENT);
 
     if (options.scene) this.setScene(options.scene);
@@ -549,29 +574,57 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.emit("start", { width, height });
 
     const target = Math.max(1, Math.round(this.current.samples));
-    // Adaptive sampling: the frame has the work of `target` passes over the whole image to spend. Pixels that have
+    // Adaptive sampling: the frame has the work of `target` paths over the whole image to spend. Pixels that have
     // converged stop taking samples, and a row with none left stops being dispatched, so what they would have used goes
     // to the rows that still need it, up to a few times `target` paths in the noisiest pixels.
     const adaptive = target > ADAPTIVE_MIN;
-    const maxPasses = adaptive ? target * ADAPTIVE_REACH : target;
+    const maxPaths = adaptive ? target * ADAPTIVE_REACH : target;
+    // In rows times paths, the unit the scheduler measures work in.
     const budget = target * height;
     const accumulator = this.accumulator as Accumulator;
     let active: number[] = Array.from({ length: height }, (_, row) => row);
-    let spent = 0, band = 0, pass = 0;
+    // Paths every pixel still in the running has taken so far, which is also the next sample index.
+    let taken = 0;
+    let spent = 0, band = 0;
     let shown = performance.now();
+    let denoisedAt = -Infinity;
     const denoise = this.current.globalIllumination.denoise;
+    // Bands on the device, oldest first. The next one is encoded and queued while the last one runs, so the device
+    // never waits for the page to hear that a band finished.
+    const flight: { done: Promise<unknown>; submitted: number; rows: number; samples: number }[] = [];
+    let settledAt = 0;
+
+    const settle = async() => {
+      const oldest = flight.shift();
+
+      if (!oldest) return;
+
+      await oldest.done;
+
+      const now = performance.now();
+
+      // A band starts on the device when the one before it ends, or when it was submitted if the device was idle. The
+      // page may hear of that end late, which would make this band look shorter than it ran; since it was submitted it
+      // has waited for at most the bands ahead of it, so its share of that wait bounds it from below.
+      const ran = Math.max(now - Math.max(oldest.submitted, settledAt), (now - oldest.submitted) / BANDS_IN_FLIGHT);
+
+      this.scheduler.record(ran, oldest.rows, oldest.samples);
+      settledAt = now;
+    };
 
     this.denoised = false;
     this.finished = null;
 
     const matrices = cameraMatrices(camera, width, height);
+    const uniforms = this.frameUniforms(camera, width, height, assets);
 
     // Two over the projection's vertical scale and the height: one pixel's extent, per unit of depth in perspective.
     this.denoiseView = { pixelScale: 2 / (matrices.projection[5] * height), orthographic: matrices.orthographic };
 
-    while (pass < maxPasses && spent < budget && active.length) {
+    while (taken < maxPaths && spent < budget && active.length) {
       // Only a pass whose pixels may stop needs its rows flagged; before that every row is busy anyway.
-      const flagging = adaptive && pass >= ADAPTIVE_MIN;
+      const flagging = adaptive && taken >= ADAPTIVE_MIN;
+      const samples = pathsPerDispatch(taken, adaptive ? ADAPTIVE_MIN : target, adaptive);
 
       if (flagging) {
         const clear = gpu.device.createCommandEncoder();
@@ -588,17 +641,17 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
 
           this.check(revision);
 
-          const rows = this.scheduler.next(end - row);
+          const rows = this.scheduler.next(end - row, samples);
           const started = performance.now();
           const encoder = gpu.device.createCommandEncoder();
 
           this.emit("bucket", { worker: 0, bucket: { x: 0, y: row, width, height: rows, index: band++ }, width, height });
           this.pathTrace?.encode(encoder, {
-            ...this.frameUniforms(camera, width, height, assets),
+            ...uniforms,
             bandOrigin: [0, row],
             bandSize: [width, rows],
-            sampleIndex: pass,
-            sampleCount: 1,
+            sampleIndex: taken,
+            sampleCount: samples,
             adaptiveMin: adaptive ? ADAPTIVE_MIN : 0,
             adaptiveThreshold: ADAPTIVE_THRESHOLD,
           });
@@ -608,11 +661,12 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
           if (show) this.encodePresent(encoder, width, height);
 
           gpu.device.queue.submit([encoder.finish()]);
-          await gpu.device.queue.onSubmittedWorkDone();
+          flight.push({ done: gpu.device.queue.onSubmittedWorkDone(), submitted: performance.now(), rows, samples });
+
+          while (flight.length >= BANDS_IN_FLIGHT) await settle();
 
-          this.scheduler.record(performance.now() - started, rows);
           row += rows;
-          spent += rows;
+          spent += rows * samples;
           this.emit("progress", { completed: Math.min(spent, budget), total: budget, phase: "shade" });
 
           if (show) {
@@ -622,24 +676,35 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
         }
       }
 
-      pass++;
+      taken += samples;
       this.frameIndex++;
 
-      // The canvas shows the denoised image from the end of each pass on, and the bands of the next pass refine
-      // underneath it until it is denoised again.
-      if (denoise && this.canvas && this.context) {
+      // The rows this pass still traced in are copied out before anything else is queued, so they can be read while
+      // the device goes on with the denoiser.
+      const rowsRead = flagging ? this.activeRows(gpu, accumulator) : null;
+
+      // The canvas shows the denoised image, refreshed a few times a second while the bands refine underneath it:
+      // filtering the whole image after every pass would cost a cheap scene as much as tracing it.
+      if (denoise && this.canvas && this.context && performance.now() - denoisedAt >= DENOISE_EVERY_MS) {
         const encoder = gpu.device.createCommandEncoder();
 
         this.encodeDenoise(gpu, encoder, width, height);
         this.encodePresent(encoder, width, height);
         gpu.device.queue.submit([encoder.finish()]);
+        denoisedAt = performance.now();
       }
 
       this.emit("sample", { samples: Math.min(target, Math.round(spent / height)), target });
 
-      if (flagging) active = await this.activeRows(gpu, accumulator);
+      if (rowsRead) {
+        while (flight.length) await settle();
+
+        active = await rowsRead;
+      }
     }
 
+    while (flight.length) await settle();
+
     // Converged early, or spent: either way the image is as finished as this frame makes it.
     this.emit("progress", { completed: budget, total: budget, phase: "shade" });
     this.emit("sample", { samples: target, target });
@@ -741,7 +806,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
 
     this.accumulator ??= new Accumulator(gpu.device, width, height);
 
-    if (resized) this.scheduler = new DispatchScheduler({ maxRows: height });
+    if (resized) this.scheduler = new DispatchScheduler({ maxRows: height, maxSamples: BATCH_PATHS });
 
     this.pathTrace.setBindings(this.buffers, this.accumulator.buffer);
     this.configureCanvas(gpu, width, height);
@@ -820,7 +885,10 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.check(revision);
 
     const buffers = uploadScene(gpu.device, geometry, bvh, textures, lights, environment, cdf);
-    const textureOffsets = new Map([...textures.indexOf].map(([id, index]) => [id, textures.data[index * 16 + 2]]));
+
+    const textureOffsets = new Map([...textures.indexOf]
+      .map(([id, index]) => [id, textures.data[textureEntry(index) + 2]]));
+
     const packed: PackedSummary = { cameraDependent: geometry.cameraDependent, textureOffsets };
 
     if (buffers.bytes.largest > gpu.maxStorageBufferBindingSize) {
@@ -1004,12 +1072,15 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       triangleCount: buffers?.triangleCount ?? 0,
       lightCount: buffers?.lightCount ?? 0,
       areaLightCount: buffers?.areaLightCount ?? 0,
+      lightCdf: buffers?.lightCdf ?? 0,
+      lightTriangles: buffers?.lightTriangles ?? 0,
       clampIndirect: Math.max(0, this.current.globalIllumination.clamp),
       // The setting is the angular diameter a light covers, in degrees, as it is for the CPU renderer's shadow blur.
       shadowSpread: shadows.enabled ? Math.tan(Math.max(0, shadows.softness) * Math.PI / 360) : 0,
       shadowsEnabled: shadows.enabled,
       uvOffset: buffers?.uvOffset ?? 0,
       orderOffset: buffers?.orderOffset ?? 0,
+      leafOffset: buffers?.leafOffset ?? 0,
       colorOffset: buffers?.colorOffset ?? 0,
       hasColors: buffers?.hasColors ?? false,
       varyingOffset: buffers?.varyingOffset ?? 0,