@tinypoly/gpu-renderer 0.0.4 → 0.1.0

package/src/renderer.ts

@@ -8,10 +8,30 @@ 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";
+import { LensPass, lensEffects } from "./lensPass.js";
+import {
+  DEFAULT_GPU_RENDER_SETTINGS,
+  effectiveExposure,
+  mergeGpuSettings,
+  type GpuRenderSettings,
+  type GpuRenderSettingsInput,
+} from "./settings.js";
+import {
+  bevelOf,
+  bevelRadius,
+  type BevelMaterial,
+  subsurfaceMedium,
+  subsurfaceOf,
+  volumeMedium,
+  volumeOf,
+  type SubsurfaceMaterial,
+  type VolumeMaterial,
+} from "./subsurface.js";
+import { containingVolume, NO_MATERIAL, volumeTriangles, type VolumeTriangles } from "./volumeContainment.js";
 import {
   CONVERGED_ERROR,
   DEFAULT_DENOISER,
@@ -24,11 +44,10 @@ import { CaptureResolvePass, planarCaptures, type PlanarCaptures } from "./plana
 import { prepareSceneAssets, type SceneAssets } from "./sceneAssets.js";
 import { packVolumetricLights, VOLUMETRIC_WORDS } from "./volumetric.js";
 import { environmentPower, uploadScene, type SceneBuffers } from "./sceneUpload.js";
+import { atmosphereExtinction, averageRadiance, brightestSun, gradientAverage } from "./atmosphere.js";
 import {
   DEFAULT_RENDER_ENVIRONMENT,
-  DEFAULT_RENDER_SETTINGS,
   EventEmitter,
-  mergeSettings,
   serializeCamera,
   serializeScene,
   srgbToLinear,
@@ -41,8 +60,6 @@ import {
   type RenderPhase,
   type RenderPixels,
   type RenderScene,
-  type RenderSettings,
-  type RenderSettingsInput,
   type SerializedScene,
 } from "./upstream.js";
 
@@ -74,8 +91,11 @@ export interface GpuRendererOptions {
   scene?: RenderScene | SerializedScene;
   /** Defaults to a perspective camera at (5, 5, 5) looking at the origin. */
   camera?: RenderCamera;
-  /** Merged over `DEFAULT_RENDER_SETTINGS`, group by group. */
-  settings?: RenderSettingsInput;
+  /**
+   * Merged over `DEFAULT_GPU_RENDER_SETTINGS`, group by group: the CPU renderer's settings, and the groups only this
+   * renderer reads (`bloom`, `lens`, `camera`, `subsurface`, the roulette under `globalIllumination`).
+   */
+  settings?: GpuRenderSettingsInput;
   /** Defaults to `DEFAULT_RENDER_ENVIRONMENT`. */
   environment?: RenderEnvironment;
   /** Image size in CSS pixels; the render size also applies `pixelRatio` and `settings.renderScale`. */
@@ -130,6 +150,34 @@ 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;
+
+/** Throughput under which Russian roulette may end a path, with the chance of carrying on equal to the throughput. */
+const ROULETTE_THRESHOLD = 0.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. */
@@ -176,6 +224,8 @@ interface PackedTarget {
   skyData: number;
   volumetricData: number;
   volumetricCount: number;
+  /** The boundaries of the scene's volumes, which say whether the camera stands inside one. */
+  volumes: VolumeTriangles | null;
 }
 
 /**
@@ -183,7 +233,7 @@ interface PackedTarget {
  * `render()` opens a frame with whatever is current and accumulates samples until it reaches `settings.samples`.
  */
 export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
-  private current: RenderSettings;
+  private current: GpuRenderSettings;
   private environment: RenderEnvironment;
   // Serializing walks the whole scene, so it is started by the setter and awaited by the frame that needs it.
   private scene: Promise<SerializedScene> = Promise.resolve(EMPTY_SCENE);
@@ -223,6 +273,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   private planar = false;
   private resolve: CaptureResolvePass | null = null;
   private denoisePass: DenoisePass | null = null;
+  private lensPass: LensPass | null = null;
   private denoiserSettings: DenoiserSettings = { ...DEFAULT_DENOISER };
   // The size of the last frame that finished, which setDenoiser filters again; null while a frame traces.
   private finished: { width: number; height: number } | null = null;
@@ -232,6 +283,8 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   private denoiseView: DenoiseView = { pixelScale: 1, orthographic: false };
   // Reading an environment image is a fetch, so it is started once and awaited by the frame that needs it.
   private environmentSource = "";
+  // The surroundings' radiance averaged over the sphere, which the air glows with; null for the gradient.
+  private environmentAverage: [number, number, number] | null = null;
   private environmentImage: Promise<PackedEnvironment | null> = Promise.resolve(null);
   private canvas: HTMLCanvasElement | null = null;
   private context: GPUCanvasContext | null = null;
@@ -249,10 +302,10 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.width = Math.max(1, Math.floor(options.width));
     this.height = Math.max(1, Math.floor(options.height));
     this.pixelRatio = checkedPixelRatio(options.pixelRatio ?? 1);
-    this.current = mergeSettings(DEFAULT_RENDER_SETTINGS, options.settings);
+    this.current = mergeGpuSettings(DEFAULT_GPU_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);
@@ -260,7 +313,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   }
 
   /** The settings the next frame renders with. */
-  get settings(): Readonly<RenderSettings> {
+  get settings(): Readonly<GpuRenderSettings> {
     return this.current;
   }
 
@@ -371,15 +424,16 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   }
 
   /**
-   * Merges the given fields into the current settings, group by group. Turning the denoiser on or off also filters the
-   * finished image again at once, as `setDenoiser` does, since that needs no tracing.
+   * Merges the given fields into the current settings, group by group. Turning the denoiser on or off, or changing
+   * what is done to the light after it is traced (exposure, tone mapping, vignette, bloom, chromatic aberration, white
+   * balance), shows the finished image again at once, as `setDenoiser` does, since none of that needs tracing.
    */
-  setSettings(settings: RenderSettingsInput) {
-    const denoise = this.current.globalIllumination.denoise;
+  setSettings(settings: GpuRenderSettingsInput) {
+    const before = developing(this.current);
 
-    this.current = mergeSettings(this.current, settings);
+    this.current = mergeGpuSettings(this.current, settings);
 
-    if (this.current.globalIllumination.denoise !== denoise) this.refilter();
+    if (developing(this.current) !== before) this.refilter();
   }
 
   setEnvironment(environment: RenderEnvironment) {
@@ -482,6 +536,8 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.buffers?.destroy();
     this.accumulator?.destroy();
     this.denoisePass?.destroy();
+    this.lensPass?.destroy();
+    this.lensPass = null;
     this.imageResolve?.dispose();
     this.imageResolve = null;
     this.gpu?.device.destroy();
@@ -549,29 +605,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 +672,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 +692,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 +707,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 });
@@ -704,10 +800,20 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     height: number,
     image: PackedEnvironment | null) {
     this.pathTrace ??= new PathTracePass(gpu.device);
-    this.pathTrace.setPrograms(assets.programs);
+    const materials = assets.scene.meshes.flatMap(mesh => mesh.materials);
+
+    this.pathTrace.setPrograms(assets.programs,
+      this.current.subsurface.enabled && materials.some(material =>
+        (material.type === "MeshStandardMaterial" || material.type === "MeshPhysicalMaterial")
+        && subsurfaceOf(material) !== null),
+      // Even turned off, a volume's boundary has to stay invisible, which takes the same code.
+      materials.some(material => volumeOf(material) !== null),
+      this.current.bevel.enabled && materials.some(material => bevelOf(material) > 0));
 
     // A procedural sky stands in for the renderer's own environment, as it does in the CPU renderer.
     const environment = assets.sky?.environment ?? image;
+
+    this.environmentAverage = environment ? averageRadiance(environment) : null;
     const matrices = cameraMatrices(camera, width, height);
     const view = `${JSON.stringify(camera)}|${width}|${height}`;
     const moved = (!!this.packed?.cameraDependent || this.planar) && view !== this.packedView;
@@ -741,7 +847,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 +926,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) {
@@ -834,6 +943,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       skyData,
       volumetricData,
       volumetricCount: Math.min(volumetric.length / VOLUMETRIC_WORDS, 8),
+      volumes: volumeTriangles(geometry),
     };
   }
 
@@ -872,6 +982,10 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
         const uniforms = {
           ...this.frameUniforms(capture.camera, width, height, assets, target, capture.background),
           lens: [0, 1, 0, 0],
+          lensDistortion: 0,
+          // A capture is a texture of the scene, seen again by the camera, which lays the air over it then.
+          atmosphereColor: [0, 0, 0, 0],
+          cameraVolume: NO_MATERIAL,
           volumetricCount: 0,
           clipPlane: capture.clip ?? [0, 0, 0, 0],
           bandOrigin: [0, 0],
@@ -925,21 +1039,37 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   }
 
   private encodePresent(encoder: GPUCommandEncoder, width: number, height: number) {
-    if (!this.context || !this.present) return;
+    if (!this.context || !this.present || !this.gpu) return;
 
     this.present.encode(encoder, this.context.getCurrentTexture().createView(), {
       width,
       height,
-      exposure: this.current.exposure,
+      exposure: effectiveExposure(this.current),
       toneMapping: this.current.toneMapping,
       vignette: this.current.vignette,
       grain: this.current.grain,
       frameIndex: this.frameIndex,
       transparent: this.current.background.mode === "transparent",
-      denoised: this.denoised ? this.denoisePass?.output : null,
+      denoised: this.encodeLens(this.gpu, encoder, width, height,
+        this.denoised ? this.denoisePass?.output ?? null : null),
     });
   }
 
+  /**
+   * The lens and the sensor over the radiance (or the denoiser's output), when the settings ask for any of them: the
+   * buffer of graded colour the display transform reads instead, or the input as it was.
+   */
+  private encodeLens(gpu: RenderDevice, encoder: GPUCommandEncoder, width: number, height: number,
+    denoised: GPUBuffer | null): GPUBuffer | null {
+    const effects = lensEffects(this.current);
+
+    if (!effects) return denoised;
+
+    this.lensPass ??= new LensPass(gpu.device);
+
+    return this.lensPass.encode(encoder, (this.accumulator as Accumulator).buffer, denoised, width, height, effects);
+  }
+
   /** Denoises the accumulation as it stands, for the canvas and for the finished image. */
   private encodeDenoise(gpu: RenderDevice, encoder: GPUCommandEncoder, width: number, height: number) {
     this.denoisePass ??= new DenoisePass(gpu.device);
@@ -973,6 +1103,16 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       : 0;
 
     const backgroundMode = background.mode === "color" ? 1 : background.mode === "transparent" ? 2 : 0;
+    const { atmosphere } = this.current;
+    const strength = sky ? sky.intensity : this.environment.intensity ?? 1;
+
+    const airGlow = atmosphere.color
+      ? linearColor(atmosphere.color, [0, 0, 0])
+      : (this.environmentAverage ?? gradientAverage(linearColor(gradient?.topColor, [1, 1, 1]),
+        linearColor(gradient?.bottomColor, [0, 0, 0]), gradient?.exponent ?? 2)).map(channel => channel * strength);
+
+    const extinction = atmosphereExtinction(atmosphere);
+    const sun = brightestSun(assets.scene.lights);
 
     return {
       cameraToWorld: matrices.cameraWorld,
@@ -1001,15 +1141,35 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       resolution: [width, height],
       cameraKind: matrices.orthographic ? 1 : 0,
       bounces: Math.max(1, Math.round(this.current.globalIllumination.bounces)),
+      rouletteThreshold: this.current.globalIllumination.russianRoulette === false ? 0 : ROULETTE_THRESHOLD,
+      rouletteStart: Math.max(0, Math.round(this.current.globalIllumination.rouletteStart ?? 0)),
+      lensDistortion: Number.isFinite(this.current.lens.distortion) ? this.current.lens.distortion : 0,
+      subsurfaceEnabled: this.current.subsurface.enabled,
+      bevelEnabled: this.current.bevel.enabled,
+      volumesEnabled: this.current.volumes.enabled,
+      cameraVolume: this.current.volumes.enabled
+        ? containingVolume(target?.volumes ?? null, matrices.cameraWorld.slice(12, 15))
+        : NO_MATERIAL,
+      atmosphereColor: [...airGlow, extinction.some(value => value > 0) ? 1 : 0],
+      atmosphereExtinction: [...extinction, Math.min(1, Math.max(0, Number(atmosphere.haze) || 0))],
+      atmosphereSun: [...sun?.direction ?? [0, 1, 0], 0],
+      atmosphereSunColor: [...sun?.irradiance ?? [0, 0, 0], 0],
       triangleCount: buffers?.triangleCount ?? 0,
       lightCount: buffers?.lightCount ?? 0,
       areaLightCount: buffers?.areaLightCount ?? 0,
+      lightCdf: buffers?.lightCdf ?? 0,
+      lightTriangles: buffers?.lightTriangles ?? 0,
+      localLightCount: buffers?.localLightCount ?? 0,
+      localLightPick: buffers?.localLightPick ?? 0,
+      lightTree: this.current.globalIllumination.lightTree === false ? 0 : buffers?.lightTree ?? 0,
+      lightLeaves: buffers?.lightLeaves ?? 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,
@@ -1037,13 +1197,20 @@ 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;
-    const { exposure, toneMapping, vignette } = this.current;
+    const { toneMapping, vignette } = this.current;
+    const exposure = effectiveExposure(this.current);
     const transparent = this.current.background.mode === "transparent";
 
     // Resolved on the device, so the page only copies the bytes of the image.
     this.imageResolve ??= new ImageResolvePass(gpu.device);
 
-    const data = await this.imageResolve.read(accumulator.buffer, denoised, width, height,
+    // The lens's effects are encoded on their own, ahead of the resolve, which reads the colour they leave.
+    const encoder = gpu.device.createCommandEncoder({ label: "lens" });
+    const graded = this.encodeLens(gpu, encoder, width, height, denoised);
+
+    gpu.device.queue.submit([encoder.finish()]);
+
+    const data = await this.imageResolve.read(accumulator.buffer, graded, width, height,
       { exposure, toneMapping, vignette, transparent });
 
     return { width, height, data };
@@ -1064,6 +1231,9 @@ const SERIALIZABLE = new Set([
  */
 async function serializeLive(scene: Scene): Promise<SerializedScene> {
   const renamed = new Map<Material, string>();
+  // The snapshot keeps a material's name but not its media, so the name carries a mark to them.
+  const named = new Map<Material, string>();
+  const media: { subsurface?: unknown; volume?: unknown; bevel?: unknown }[] = [];
 
   scene.traverse(object => {
     const value = (object as Object3D & { material?: Material | Material[] }).material;
@@ -1075,15 +1245,60 @@ async function serializeLive(scene: Scene): Promise<SerializedScene> {
         renamed.set(material, material.type);
         material.type = shader.isRawShaderMaterial ? "RawShaderMaterial" : "ShaderMaterial";
       }
+
+      const data = material.userData?.cpuRenderer as
+        { subsurface?: unknown; volume?: unknown; bevel?: unknown } | undefined;
+
+      if (!named.has(material)
+        && (subsurfaceMedium(data?.subsurface) || volumeMedium(data?.volume) || bevelRadius(data?.bevel) > 0)) {
+        named.set(material, material.name);
+        material.name = `${material.name}${MEDIA_MARK}${media.length}`;
+        media.push({ subsurface: data?.subsurface, volume: data?.volume, bevel: data?.bevel });
+      }
     }
   });
 
+  let snapshot: SerializedScene;
+
   try {
     // The path tracer samples only the base level of a texture: the mip chain would be built and thrown away.
-    return (await serializeScene(scene, { mipmaps: false })).scene;
+    snapshot = (await serializeScene(scene, { mipmaps: false })).scene;
   } finally {
     for (const [material, type] of renamed) material.type = type;
+    for (const [material, name] of named) material.name = name;
+  }
+
+  // Materials are shared between the meshes that use them, so each one is unmarked once and seen marked no more.
+  for (const mesh of snapshot.meshes) {
+    for (const material of mesh.materials as (SubsurfaceMaterial & VolumeMaterial & BevelMaterial)[]) {
+      const at = material.name.lastIndexOf(MEDIA_MARK);
+
+      if (at < 0) continue;
+
+      const medium = media[Number(material.name.slice(at + MEDIA_MARK.length))];
+
+      material.name = material.name.slice(0, at) || material.type;
+      if (medium.subsurface !== undefined) material.subsurface = medium.subsurface as SubsurfaceMaterial["subsurface"];
+      if (medium.volume !== undefined) material.volume = medium.volume as VolumeMaterial["volume"];
+      if (medium.bevel !== undefined) material.bevel = medium.bevel as BevelMaterial["bevel"];
+    }
   }
+
+  return snapshot;
+}
+
+/** Ends a material's name while it is serialized, followed by the index of its media. */
+const MEDIA_MARK = "\u0000media:";
+
+/**
+ * Everything that changes the finished image without tracing it again, as one string: the denoiser switch and what
+ * happens to the light between the radiance and the screen.
+ */
+function developing(settings: GpuRenderSettings): string {
+  const { exposure, toneMapping, vignette, bloom, glare, lens, camera, depthOfField, globalIllumination } = settings;
+
+  return JSON.stringify([globalIllumination.denoise, exposure, toneMapping, vignette, bloom, glare,
+    lens.chromaticAberration, camera, camera.physicalExposure ? depthOfField.aperture : 0]);
 }
 
 /**

package/src/sceneUpload.ts

@@ -11,7 +11,7 @@ export interface SceneByteLength {
   materials: number;
   /** Vertex normals, the UV sets, vertex colours and shader varyings, in one buffer. */
   attributes: number;
-  /** One material index per triangle and then the hierarchy's triangle order, in one buffer. */
+  /** One material index per triangle, then the hierarchy's triangle order and its inverse, in one buffer. */
   indices: number;
   nodes: number;
   lights: number;
@@ -37,11 +37,21 @@ export interface SceneBuffers {
   varyingOffset: number;
   hasColors: boolean;
   orderOffset: number;
+  /** Where each triangle's position in the leaf order starts inside `indices`. */
+  leafOffset: number;
   triangleCount: number;
   /** Everything the integrator can aim a shadow ray at. */
   lightCount: number;
   /** How many of those are emissive triangles, which lead the buffer. */
   areaLightCount: number;
+  /** Where the lights' cumulative probabilities and the emissive ones' triangles sit in `textures`. */
+  lightCdf: number;
+  lightTriangles: number;
+  /** The light tree over the lights that sit in the scene: see lightTree.ts. */
+  localLightCount: number;
+  localLightPick: number;
+  lightTree: number;
+  lightLeaves: number;
   /** Radiance an ambient or hemisphere light adds, which no shadow ray can reach. */
   ambient: PackedLights["ambient"];
   /** Where the surrounding image and its distributions ended up, for the frame uniform. */
@@ -76,7 +86,7 @@ export function sceneByteLength(
   const lengths = {
     positions: sized(geometry.positions.byteLength),
     attributes: sized(attributeBytes(geometry)),
-    indices: sized(geometry.materials.byteLength + bvh.order.byteLength),
+    indices: sized(geometry.materials.byteLength + 2 * bvh.order.byteLength),
     materials: sized(Math.max(1, geometry.materialCount) * MATERIAL_WORDS * 4),
     nodes: sized(bvh.nodes.byteLength),
     lights: sized(lights.entries.byteLength),
@@ -110,6 +120,25 @@ export function environmentPower(environment: PackedEnvironment | null): number
   return environment ? environment.total * 2 * Math.PI ** 2 / (environment.width * environment.height) : 0;
 }
 
+/**
+ * The positions in the hierarchy's leaf order, which is the order its traversal reads them in, so a leaf is one run of
+ * the buffer; and where each triangle went, for everything that reads a triangle by its own number.
+ */
+export function leafOrder(
+  positions: Float32Array, order: Uint32Array): { positions: Float32Array; inverse: Uint32Array } {
+  const ordered = new Float32Array(order.length * 9);
+  const inverse = new Uint32Array(order.length);
+
+  for (let at = 0; at < order.length; at++) {
+    const triangle = order[at];
+
+    ordered.set(positions.subarray(triangle * 9, triangle * 9 + 9), at * 9);
+    inverse[triangle] = at;
+  }
+
+  return { positions: ordered, inverse };
+}
+
 export function uploadScene(
   device: GPUDevice,
   geometry: PackedGeometry,
@@ -147,11 +176,12 @@ export function uploadScene(
 
   const colors = geometry.colors ?? new Float32Array(0);
   const varyings = geometry.varyings ?? new Float32Array(0);
+  const leaves = leafOrder(geometry.positions, bvh.order);
 
   const buffers = {
-    positions: write(geometry.positions, lengths.positions),
+    positions: write(leaves.positions, lengths.positions),
     attributes: join([geometry.normals, geometry.uvs, colors, varyings], lengths.attributes),
-    indices: join([geometry.materials, bvh.order], lengths.indices),
+    indices: join([geometry.materials, bvh.order, leaves.inverse], lengths.indices),
     materials: write(new Uint8Array(packMaterials(geometry)), lengths.materials),
     nodes: write(new Uint8Array(bvh.nodes), lengths.nodes),
     lights: write(new Uint8Array(lights.entries), lengths.lights),
@@ -166,9 +196,16 @@ export function uploadScene(
     varyingOffset: geometry.normals.length + geometry.uvs.length + colors.length,
     hasColors: colors.length > 0,
     orderOffset: geometry.materials.length,
+    leafOffset: geometry.materials.length + bvh.order.length,
     triangleCount: geometry.triangleCount,
     lightCount: lights.count,
     areaLightCount: lights.areaCount,
+    lightCdf: lights.cdfAt,
+    lightTriangles: lights.trianglesAt,
+    localLightCount: lights.localCount,
+    localLightPick: lights.localPick,
+    lightTree: lights.treeAt,
+    lightLeaves: lights.leavesAt,
     ambient: lights.ambient,
     environment: {
       texture: environment ? textures.indexOf.get(environment.texture.id) ?? NO_TEXTURE : NO_TEXTURE,