@tinypoly/gpu-renderer 0.0.3 → 0.0.5

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/imageResolve.ts

@@ -0,0 +1,136 @@
+import { createShaderModule } from "./shaderModule.js";
+import type { RenderToneMapping } from "./upstream.js";
+import { PRESENT_WGSL } from "./wgsl/present.wgsl.js";
+
+/** The order the presentation shader's `toneMapping` switch expects. */
+const TONE_MAPPING = ["aces", "agx", "neutral", "linear"] as const;
+
+const UNIFORM_BYTES = 48;
+
+const WORKGROUP = 8;
+
+/**
+ * The finished image, resolved on the device: the presentation pass's display transform, run as a compute pass that
+ * writes straight-alpha sRGB bytes, four per pixel. Reading those back is a sixth of the float accumulation and needs
+ * no loop over the pixels on the page, which is what held it for seconds at the end of a large frame.
+ *
+ * It follows the image `render()` has always resolved: no grain, and the vignette measured from each pixel's corner.
+ */
+export const IMAGE_RESOLVE_WGSL = /* wgsl */ `${PRESENT_WGSL}
+@group(0) @binding(3) var<storage, read_write> pixels: array<u32>;
+
+fn encodeByte(value: f32) -> u32 {
+  return u32(round(clamp(value, 0.0, 1.0) * 255.0));
+}
+
+@compute @workgroup_size(${WORKGROUP}, ${WORKGROUP})
+fn resolveMain(@builtin(global_invocation_id) id: vec3<u32>) {
+  let width = present.resolution.x;
+  let height = present.resolution.y;
+
+  if (id.x >= width || id.y >= height) {
+    return;
+  }
+
+  let index = id.y * width + id.x;
+  let stored = accumulation[index];
+  let samples = stored.w;
+  var alpha = 1.0;
+
+  if (present.transparent != 0u) {
+    alpha = select(0.0, clamp(accumulation[width * height + index].x / samples, 0.0, 1.0), samples > 0.0);
+  }
+
+  var color = vec3<f32>(0.0);
+
+  if (samples > 0.0 && alpha > 0.0) {
+    let mean = select(stored.rgb / samples, denoised[index].rgb, present.denoised != 0u);
+    let centred = vec2<f32>(f32(id.x) / f32(width), f32(id.y) / f32(height)) - 0.5;
+    let falloff = max(0.0, 1.0 - present.vignette * dot(centred, centred) * 2.0);
+
+    color = mean / alpha * falloff;
+  }
+
+  let encoded = linearToSrgb(toneMap(color));
+
+  pixels[index] = encodeByte(encoded.r) | (encodeByte(encoded.g) << 8u) | (encodeByte(encoded.b) << 16u)
+    | (encodeByte(alpha) << 24u);
+}
+`;
+
+export interface ResolveSettings {
+  exposure: number;
+  toneMapping: RenderToneMapping;
+  vignette: number;
+  transparent: boolean;
+}
+
+export class ImageResolvePass {
+  private readonly pipeline: GPUComputePipeline;
+  private readonly uniforms: GPUBuffer;
+  private readonly values = new ArrayBuffer(UNIFORM_BYTES);
+
+  constructor(private readonly device: GPUDevice) {
+    const module = createShaderModule(device, "image resolve", IMAGE_RESOLVE_WGSL);
+
+    this.pipeline = device.createComputePipeline({ layout: "auto", compute: { module, entryPoint: "resolveMain" } });
+    this.uniforms = device.createBuffer({
+      size: UNIFORM_BYTES, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+  }
+
+  /** The image as RGBA bytes, straight alpha, row by row from the top. */
+  async read(accumulation: GPUBuffer, denoised: GPUBuffer | null, width: number, height: number,
+    settings: ResolveSettings): Promise<Uint8ClampedArray<ArrayBuffer>> {
+    const floats = new Float32Array(this.values), integers = new Uint32Array(this.values);
+
+    integers.fill(0);
+    integers[0] = width;
+    integers[1] = height;
+    floats[2] = settings.exposure;
+    integers[3] = Math.max(0, TONE_MAPPING.indexOf(settings.toneMapping));
+    floats[4] = settings.vignette;
+    integers[7] = settings.transparent ? 1 : 0;
+    integers[8] = denoised ? 1 : 0;
+    this.device.queue.writeBuffer(this.uniforms, 0, this.values);
+
+    const bytes = width * height * 4;
+    const output = this.device.createBuffer({ size: bytes, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC });
+    const staging = this.device.createBuffer({ size: bytes, usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST });
+
+    try {
+      const encoder = this.device.createCommandEncoder({ label: "image resolve" });
+      const pass = encoder.beginComputePass({ label: "image resolve" });
+
+      pass.setPipeline(this.pipeline);
+      pass.setBindGroup(0, this.device.createBindGroup({
+        layout: this.pipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: { buffer: this.uniforms } },
+          { binding: 1, resource: { buffer: accumulation } },
+          { binding: 2, resource: { buffer: denoised ?? accumulation } },
+          { binding: 3, resource: { buffer: output } },
+        ],
+      }));
+      pass.dispatchWorkgroups(Math.ceil(width / WORKGROUP), Math.ceil(height / WORKGROUP));
+      pass.end();
+      encoder.copyBufferToBuffer(output, 0, staging, 0, bytes);
+      this.device.queue.submit([encoder.finish()]);
+
+      await staging.mapAsync(GPUMapMode.READ);
+
+      const data = new Uint8ClampedArray(staging.getMappedRange().slice(0));
+
+      staging.unmap();
+
+      return data;
+    } finally {
+      output.destroy();
+      staging.destroy();
+    }
+  }
+
+  dispose() {
+    this.uniforms.destroy();
+  }
+}

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

@@ -1,16 +1,16 @@
 import { PerspectiveCamera, type LightProbe, type Material, type Object3D, type Scene } from "three";
 import { Accumulator } from "./accumulator.js";
-import { type PackedBvh } from "./bvh.js";
 import { BvhBuilder, createDefaultBvhWorker, type BvhWorkerFactory } from "./bvhBuilder.js";
 import { cameraMatrices, type CameraMatrices } from "./camera.js";
 import { requestRenderDevice, type RenderDevice } from "./device.js";
 import { loadEnvironment, type PackedEnvironment } from "./environment.js";
 import { DispatchScheduler } from "./dispatchScheduler.js";
-import { packGeometry, type PackedGeometry } from "./geometry.js";
+import { packGeometry } from "./geometry.js";
 import { packLights } from "./lights.js";
 import { NO_PROGRAM } from "./materialLayout.js";
-import { NO_TEXTURE, planTextures, writeTextures, type PackedTextures } 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";
 import {
   CONVERGED_ERROR,
@@ -27,7 +27,6 @@ import { environmentPower, uploadScene, type SceneBuffers } from "./sceneUpload.
 import {
   DEFAULT_RENDER_ENVIRONMENT,
   DEFAULT_RENDER_SETTINGS,
-  encodeColor,
   EventEmitter,
   mergeSettings,
   serializeCamera,
@@ -131,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. */
@@ -161,8 +185,18 @@ function rowRanges(rows: readonly number[]): [number, number][] {
 const CAPTURE_SAMPLES = 32;
 
 /** A scene on the device, with where its extra words went. */
+/**
+ * What is kept of a packed scene once it is on the device: whether it follows the camera, and where each texture's
+ * texels start, for the captures that write into them. The packed arrays themselves, hundreds of megabytes for a large
+ * scene, are let go as soon as they are uploaded.
+ */
+interface PackedSummary {
+  cameraDependent: boolean;
+  textureOffsets: ReadonlyMap<string, number>;
+}
+
 interface PackedTarget {
-  packed: { geometry: PackedGeometry; bvh: PackedBvh; textures: PackedTextures };
+  packed: PackedSummary;
   buffers: SceneBuffers;
   skyData: number;
   volumetricData: number;
@@ -201,7 +235,8 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   private pathTrace: PathTracePass | null = null;
   private present: PresentPass | null = null;
   private buffers: SceneBuffers | null = null;
-  private packed: { geometry: PackedGeometry; bvh: PackedBvh; textures: PackedTextures } | null = null;
+  private packed: PackedSummary | null = null;
+  private imageResolve: ImageResolvePass | null = null;
   private sceneDirty = true;
   // Compute bakes, the procedural sky and translated shaders: prepared once per scene.
   private assets: Promise<SceneAssets> | null = null;
@@ -242,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);
@@ -472,6 +507,8 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.buffers?.destroy();
     this.accumulator?.destroy();
     this.denoisePass?.destroy();
+    this.imageResolve?.dispose();
+    this.imageResolve = null;
     this.gpu?.device.destroy();
     this.buffers = null;
     this.accumulator = null;
@@ -537,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();
@@ -576,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,
           });
@@ -596,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) {
@@ -610,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 });
@@ -698,17 +775,22 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     const environment = assets.sky?.environment ?? image;
     const matrices = cameraMatrices(camera, width, height);
     const view = `${JSON.stringify(camera)}|${width}|${height}`;
-    const moved = (!!this.packed?.geometry.cameraDependent || this.planar) && view !== this.packedView;
+    const moved = (!!this.packed?.cameraDependent || this.planar) && view !== this.packedView;
 
     if (this.sceneDirty || !this.buffers || moved) {
       // Planar surfaces need their captures, from this camera, before the scene that samples them is packed.
       const planar = planarCaptures(assets.scene, camera, width, height);
 
+      // The scene on the device is replaced: letting it go first keeps the two from being held at once.
+      this.buffers?.destroy();
+      this.buffers = null;
+      this.target = null;
+      this.packed = null;
+
       const packed = await this.packScene(
         gpu, revision, planar?.scene ?? assets.scene, assets, matrices, width, height, environment);
 
       this.packed = packed.packed;
-      this.buffers?.destroy();
       this.buffers = packed.buffers;
       this.target = packed;
       this.sceneDirty = false;
@@ -724,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);
@@ -802,8 +884,12 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     // Nothing is on the device yet, so a frame replaced while the hierarchy was built has nothing to give back.
     this.check(revision);
 
-    const packed = { geometry, bvh, textures };
-    const buffers = uploadScene(gpu.device, geometry, packed.bvh, textures, lights, environment, cdf);
+    const buffers = uploadScene(gpu.device, geometry, bvh, textures, lights, environment, cdf);
+
+    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) {
       buffers.destroy();
@@ -869,9 +955,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
         }
 
         const offset = (id: string | undefined) => {
-          const index = id === undefined ? undefined : main.packed.textures.indexOf.get(id);
-
-          return index === undefined ? NO_TEXTURE : main.packed.textures.data[index * 16 + 2];
+          return (id === undefined ? undefined : main.packed.textureOffsets.get(id)) ?? NO_TEXTURE;
         };
 
         const encoder = gpu.device.createCommandEncoder();
@@ -988,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,
@@ -1021,55 +1108,14 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   private async readImage(
     gpu: RenderDevice, width: number, height: number, denoised: GPUBuffer | null): Promise<RenderImage> {
     const accumulator = this.accumulator as Accumulator;
-    // The radiance and the coverage; the guides and the row flags after them are not part of the image.
-    const length = width * height * 32;
-
-    const read = async(buffer: GPUBuffer, bytes: number) => {
-      const usage = GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST;
-      const staging = gpu.device.createBuffer({ size: bytes, usage });
-      const encoder = gpu.device.createCommandEncoder();
-
-      encoder.copyBufferToBuffer(buffer, 0, staging, 0, bytes);
-      gpu.device.queue.submit([encoder.finish()]);
-      await staging.mapAsync(GPUMapMode.READ);
-
-      const floats = new Float32Array(staging.getMappedRange().slice(0));
-
-      staging.unmap();
-      staging.destroy();
-
-      return floats;
-    };
-
-    const floats = await read(accumulator.buffer, length);
-    // The denoiser's output is the mean radiance itself, one vec4 per pixel.
-    const filtered = denoised ? await read(denoised, width * height * 16) : null;
-
-    const data = new Uint8ClampedArray(width * height * 4);
     const { exposure, toneMapping, vignette } = this.current;
     const transparent = this.current.background.mode === "transparent";
-    const coverage = width * height * 4;
-
-    for (let pixel = 0; pixel < width * height; pixel++) {
-      const samples = floats[pixel * 4 + 3];
-      const x = (pixel % width) / width - 0.5, y = Math.floor(pixel / width) / height - 0.5;
-      const falloff = Math.max(0, 1 - vignette * (x * x + y * y) * 2);
-
-      // The radiance is premultiplied by the coverage, which a transparent background makes the alpha.
-      const alpha = !transparent ? 1
-        : samples > 0 ? Math.min(1, Math.max(0, floats[coverage + pixel * 4] / samples)) : 0;
 
-      const mean = (channel: number) =>
-        (filtered ? filtered[pixel * 4 + channel] : floats[pixel * 4 + channel] / samples);
+    // Resolved on the device, so the page only copies the bytes of the image.
+    this.imageResolve ??= new ImageResolvePass(gpu.device);
 
-      const color = samples > 0 && alpha > 0
-        ? [0, 1, 2].map(channel => mean(channel) / alpha * falloff)
-        : [0, 0, 0];
-
-      const [r, g, b] = encodeColor(color, exposure, toneMapping);
-
-      data.set([r, g, b, Math.round(alpha * 255)], pixel * 4);
-    }
+    const data = await this.imageResolve.read(accumulator.buffer, denoised, width, height,
+      { exposure, toneMapping, vignette, transparent });
 
     return { width, height, data };
   }