@tinypoly/gpu-renderer 0.1.0 → 0.2.0

package/src/frameLayout.ts

@@ -35,6 +35,10 @@ export const FRAME_LAYOUT = layoutStruct("Frame", [
   { name: "localLightCount", type: "u32", doc: "How many leading lights sit in the scene, which the light tree picks." },
   { name: "localLightPick", type: "f32", doc: "The chance of picking one of them, the last one's cumulative probability." },
   { name: "lightTree", type: "u32", doc: "Where the light tree's nodes start in the texture buffer; zero picks by power alone." },
+  { name: "portals", type: "u32", doc: "Where the tree of the windows the sky is sampled through starts in the texture buffer." },
+  { name: "portalCount", type: "u32", doc: "How many window triangles there are; zero samples the sky by its brightness alone." },
+  { name: "portalList", type: "u32", doc: "Where the windows of that tree's leaves are listed in the texture buffer." },
+  { name: "lightList", type: "u32", doc: "Where the lights of the tree's leaves are listed in the texture buffer." },
   { name: "lightLeaves", type: "u32", doc: "Where the leaf of every local light 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." },
@@ -54,7 +58,7 @@ export const FRAME_LAYOUT = layoutStruct("Frame", [
   { name: "skyProgram", type: "u32", doc: "A procedural sky's foreground program, or NO_PROGRAM." },
   { name: "skyData", type: "u32" },
   { name: "skyBackground", type: "u32", doc: "Whether a procedural sky paints the background (1) or leaves it black (0)." },
-  { name: "skyIntensity", type: "f32", doc: "The strength a procedural sky lights with, which its background ignores." },
+  { name: "skyIntensity", type: "f32", doc: "The strength a procedural sky lights with, and shows with as the background." },
   { name: "pixelCount", type: "u32", doc: "Where the alpha half of the accumulation buffer starts." },
   { name: "volumetricCount", type: "u32", doc: "Lights that scatter in the air, and where their records start." },
   { name: "volumetricData", type: "u32" },
@@ -63,6 +67,7 @@ export const FRAME_LAYOUT = layoutStruct("Frame", [
   { name: "lensDistortion", type: "f32", doc: "Radial distortion of the camera ray: positive is barrel, negative pincushion." },
   { name: "rouletteThreshold", type: "f32", doc: "Throughput under which a path may be ended by chance; zero never." },
   { name: "rouletteStart", type: "u32", doc: "Bounces every path takes before the roulette may end it." },
+  { name: "subsurfaceDepth", type: "u32", doc: "Bounces at which light still walks inside a material; deeper it reflects." },
   { name: "subsurfaceEnabled", type: "u32", doc: "Whether materials that scatter light inside do; 0 renders them opaque." },
   { name: "bevelEnabled", type: "u32", doc: "Whether materials with a bevel radius round their edges." },
   { name: "volumesEnabled", type: "u32", doc: "Whether volumes scatter light; 0 leaves their meshes out altogether." },

package/src/imageResolve.ts

@@ -62,6 +62,7 @@ export interface ResolveSettings {
   exposure: number;
   toneMapping: RenderToneMapping;
   vignette: number;
+  contrast: number;
   transparent: boolean;
 }
 
@@ -92,6 +93,7 @@ export class ImageResolvePass {
     floats[4] = settings.vignette;
     integers[7] = settings.transparent ? 1 : 0;
     integers[8] = denoised ? 1 : 0;
+    floats[9] = settings.contrast;
     this.device.queue.writeBuffer(this.uniforms, 0, this.values);
 
     const bytes = width * height * 4;

package/src/index.ts

@@ -19,7 +19,8 @@ export type {
 export { attachCanvas } from "./canvas.js";
 
 export { DEFAULT_DENOISER } from "./denoise.js";
-export type { DenoiserSettings } from "./denoise.js";
+export { DEFAULT_OIDN_WEIGHTS } from "./oidnPass.js";
+export type { DenoiserAlgorithm, DenoiserSettings } from "./denoise.js";
 
 // The settings only this renderer reads, beside the CPU renderer's, and the defaults it renders with.
 export {

package/src/lensPass.ts

@@ -27,6 +27,8 @@ export interface LensEffects {
   glareAngle: number;
   /** A linear sRGB matrix, row by row, or `null` for a neutral white balance. */
   whiteBalance: number[] | null;
+  /** Whether the image is metered and exposed to middle grey before the display transform. */
+  autoExposure: boolean;
 }
 
 /** The lens effects these settings ask for, or `null` when they ask for none and the pass can be skipped. */
@@ -38,7 +40,9 @@ export function lensEffects(settings: GpuRenderSettings): LensEffects | null {
   const neutral = !Number.isFinite(camera.whiteBalance) || camera.whiteBalance === NEUTRAL_WHITE_BALANCE;
   const blades = Math.min(16, Math.max(3, Math.round(Number(glare.blades) || 6)));
 
-  if (intensity <= 0 && streaks <= 0 && aberration <= 0 && neutral) return null;
+  const autoExposure = camera.autoExposure === true;
+
+  if (intensity <= 0 && streaks <= 0 && aberration <= 0 && neutral && !autoExposure) return null;
 
   return {
     bloom: intensity,
@@ -50,6 +54,7 @@ export function lensEffects(settings: GpuRenderSettings): LensEffects | null {
     glareLength: Math.min(1, Math.max(0, Number(glare.length) || 0)),
     glareAngle: (Number(glare.rotation) || 0) * Math.PI / 180,
     whiteBalance: neutral ? null : whiteBalanceMatrix(camera.whiteBalance),
+    autoExposure,
   };
 }
 
@@ -93,6 +98,8 @@ export class LensPass {
   private readonly upsample: GPUComputePipeline;
   private readonly composite: GPUComputePipeline;
   private readonly streaks: GPUComputePipeline;
+  private readonly meter: GPUComputePipeline;
+  private readonly metered: GPUBuffer;
   /** One uniform buffer per dispatch, so every one of them keeps its own values until the queue runs it. */
   private readonly uniforms: GPUBuffer[] = [];
   private readonly values = new ArrayBuffer(UNIFORM_BYTES);
@@ -116,6 +123,7 @@ export class LensPass {
         { binding: 4, visibility: GPUShaderStage.COMPUTE, buffer: storage("storage") },
         { binding: 5, visibility: GPUShaderStage.COMPUTE, buffer: storage("storage") },
         { binding: 6, visibility: GPUShaderStage.COMPUTE, buffer: storage("storage") },
+        { binding: 7, visibility: GPUShaderStage.COMPUTE, buffer: storage("storage") },
       ],
     });
 
@@ -126,6 +134,8 @@ export class LensPass {
     this.upsample = pipeline("upsample");
     this.composite = pipeline("composite");
     this.streaks = pipeline("streaks");
+    this.meter = pipeline("meter");
+    this.metered = device.createBuffer({ label: "lens meter", size: 16, usage: GPUBufferUsage.STORAGE });
   }
 
   /** The graded image of the last `encode`, one vec4 of linear colour per pixel. */
@@ -201,6 +211,7 @@ export class LensPass {
       integers[32] = streak.width;
       integers[33] = streak.height;
       floats[34] = effects.glareAngle;
+      floats[35] = effects.autoExposure ? 1 : 0;
       for (let row = 0; row < 3; row++) for (let column = 0; column < 3; column++)
         floats[20 + row * 4 + column] = white[row * 3 + column];
       fill();
@@ -222,6 +233,7 @@ export class LensPass {
           { binding: 4, resource: { buffer: this.up as GPUBuffer } },
           { binding: 5, resource: { buffer: this.graded as GPUBuffer } },
           { binding: 6, resource: { buffer: this.streaked as GPUBuffer } },
+          { binding: 7, resource: { buffer: this.metered } },
         ],
       }));
       pass.dispatchWorkgroups(Math.ceil(target.width / WORKGROUP), Math.ceil(target.height / WORKGROUP));
@@ -278,6 +290,9 @@ export class LensPass {
       }
     }
 
+    // The meter is one workgroup, whatever the size: dispatched as a single tile of the grid it reads.
+    if (effects.autoExposure) dispatch(this.meter, { width: 1, height: 1 }, () => {});
+
     dispatch(this.composite, { width, height }, () => {});
 
     return this.graded as GPUBuffer;
@@ -293,6 +308,7 @@ export class LensPass {
 
   destroy() {
     this.destroyBuffers();
+    this.metered.destroy();
     for (const buffer of this.uniforms) buffer.destroy();
     this.uniforms.length = 0;
   }

package/src/lightTree.ts

@@ -24,9 +24,23 @@ export interface TreeLight {
 /** Sixteen words a node: low and power, high and cos theta_o, axis and cos theta_e, then the links. */
 export const TREE_NODE_WORDS = 16;
 
-/** The high bit of a node's first link marks a leaf, whose low bits are its light's index. */
+/**
+ * The high bit of a node's first link marks a leaf, whose low bits say where its lights start in the list after the
+ * nodes; its second link says how many there are.
+ */
 export const TREE_LEAF = 0x80000000;
 
+/** Four words a light in a leaf's list: the light, its chance within the leaf, its area density, the running chance. */
+export const TREE_ENTRY_WORDS = 4;
+
+/**
+ * A leaf holds up to this many lights, when they are so close together, against how far the lights spread, that from
+ * any point the tree could not tell them apart: the triangles of one small lamp. Lights further apart each keep a leaf,
+ * which keeps every choice between them by distance and facing.
+ */
+const LEAF_LIGHTS = 8;
+const LEAF_EXTENT = 0.02;
+
 export const TREE_ROOT_PARENT = 0xffffffff;
 
 interface Cone {
@@ -77,18 +91,22 @@ interface Node {
   left: number;
   right: number;
   parent: number;
-  /** The light of a leaf, or -1. */
-  light: number;
-  density: number;
+  /** The lights of a leaf, or none. */
+  lights: number[];
 }
 
 /**
- * The tree over these lights, as words for the texture buffer, and the leaf each light ended in. Split at the median
- * of the longest axis of the centres, which needs no cost model and keeps the depth near log2 of the count.
+ * The tree over these lights, as words for the texture buffer, the leaf and list slot each light ended in, and where
+ * the list of the leaves' lights starts. Split at the middle of the longest axis of the centres, which needs no cost
+ * model and keeps a tight group, such as one lamp's triangles, on one side to share a leaf.
  */
-export function buildLightTree(lights: readonly TreeLight[]): { words: Uint32Array; leafOf: Uint32Array } {
+export function buildLightTree(lights: readonly TreeLight[]): {
+  words: Uint32Array; leafOf: Uint32Array; listAt: number;
+} {
   const nodes: Node[] = [];
-  const leafOf = new Uint32Array(lights.length);
+  // Two words a light: its leaf, and where it sits in the list of lights after the nodes.
+  const leafOf = new Uint32Array(lights.length * 2);
+  let span = 0;
 
   const build = (indices: number[], parent: number): number => {
     const index = nodes.length;
@@ -111,29 +129,35 @@ export function buildLightTree(lights: readonly TreeLight[]): { words: Uint32Arr
       cone = cone ? unionCone(cone, own) : own;
     }
 
-    const node: Node = { low, high, power, cone: cone as Cone, left: -1, right: -1, parent, light: -1, density: 1 };
+    const node: Node = { low, high, power, cone: cone as Cone, left: -1, right: -1, parent, lights: [] };
 
     nodes.push(node);
 
-    if (indices.length === 1) {
-      node.light = indices[0];
-      node.density = lights[indices[0]].density;
-      leafOf[indices[0]] = index;
+    const extent = Math.hypot(high[0] - low[0], high[1] - low[1], high[2] - low[2]);
+
+    if (index === 0) span = extent;
+
+    if (indices.length === 1 || (indices.length <= LEAF_LIGHTS && extent <= span * LEAF_EXTENT)) {
+      node.lights = indices;
 
       return index;
     }
 
     const centre = (i: number, k: number) => (lights[i].low[k] + lights[i].high[k]) / 2;
 
-    const extent = [0, 1, 2].map(k => {
+    const spread = [0, 1, 2].map(k => {
       const values = indices.map(i => centre(i, k));
 
       return Math.max(...values) - Math.min(...values);
     });
 
-    const axis = extent.indexOf(Math.max(...extent));
+    const axis = spread.indexOf(Math.max(...spread));
     const sorted = [...indices].sort((a, b) => centre(a, axis) - centre(b, axis));
-    const half = sorted.length >> 1;
+    // Split at the middle of the extent, which keeps a tight group of lights together on one side; the median only
+    // when that leaves a side empty, as lights all at one place do.
+    const middle = (centre(sorted[0], axis) + centre(sorted[sorted.length - 1], axis)) / 2;
+    const below = sorted.findIndex(i => centre(i, axis) > middle);
+    const half = below > 0 ? below : sorted.length >> 1;
 
     node.left = build(sorted.slice(0, half), index);
     node.right = build(sorted.slice(half), index);
@@ -143,8 +167,11 @@ export function buildLightTree(lights: readonly TreeLight[]): { words: Uint32Arr
 
   if (lights.length) build(lights.map((_, i) => i), TREE_ROOT_PARENT);
 
-  const words = new Uint32Array(nodes.length * TREE_NODE_WORDS);
+  const listAt = nodes.length * TREE_NODE_WORDS;
+  const entries = nodes.reduce((sum, node) => sum + node.lights.length, 0);
+  const words = new Uint32Array(listAt + entries * TREE_ENTRY_WORDS);
   const floats = new Float32Array(words.buffer);
+  let entry = 0;
 
   nodes.forEach((node, k) => {
     const at = k * TREE_NODE_WORDS;
@@ -157,9 +184,28 @@ export function buildLightTree(lights: readonly TreeLight[]): { words: Uint32Arr
     floats.set(node.cone.axis, at + 8);
     floats[at + 11] = Math.cos(Math.min(node.cone.thetaE, Math.PI));
 
-    if (node.light >= 0) {
-      words[at + 12] = (TREE_LEAF | node.light) >>> 0;
-      floats[at + 13] = node.density;
+    if (node.lights.length) {
+      words[at + 12] = (TREE_LEAF | entry) >>> 0;
+      words[at + 13] = node.lights.length;
+
+      // Within a leaf, by power: the lights are too close together for anything else to tell them apart.
+      const total = node.lights.reduce((sum, i) => sum + lights[i].power, 0);
+      let running = 0;
+
+      node.lights.forEach((light, j) => {
+        const chance = total > 0 ? lights[light].power / total : 1 / node.lights.length;
+        const slot = listAt + entry * TREE_ENTRY_WORDS;
+
+        running += chance;
+        words[slot] = light;
+        floats[slot + 1] = chance;
+        floats[slot + 2] = lights[light].density;
+        // The last closes the range exactly, so a unit sample never falls past it.
+        floats[slot + 3] = j === node.lights.length - 1 ? 1 : running;
+        leafOf[light * 2] = k;
+        leafOf[light * 2 + 1] = entry;
+        entry++;
+      });
     } else {
       words[at + 12] = node.left;
       words[at + 13] = node.right;
@@ -168,5 +214,5 @@ export function buildLightTree(lights: readonly TreeLight[]): { words: Uint32Arr
     words[at + 14] = node.parent >>> 0;
   });
 
-  return { words, leafOf };
+  return { words, leafOf, listAt };
 }

package/src/lights.ts

@@ -71,6 +71,51 @@ export interface PackedLights {
   /** Where the light tree's nodes start in the texture buffer, and the leaf of every local entry; zero for no tree. */
   treeAt: number;
   leavesAt: number;
+  /** Where the lights of the tree's leaves are listed in the texture buffer. */
+  listAt: number;
+  /**
+   * The windows the sky is also sampled through, from inside: the triangles of every thin transmissive material, in a
+   * tree of their own, as the lights have, so a point aims at the windows near it rather than at every one in the
+   * building alike. Where its nodes start, where its leaves' list starts, and how many windows there are.
+   */
+  portalTreeAt: number;
+  portalListAt: number;
+  portalCount: number;
+}
+
+/**
+ * The triangles of thin glass, which is where daylight enters a room, as the tree sees them: their bounds, their area
+ * as power, so a window weighs by the solid angle it takes from a point, and no orientation, since a pane lets the sky
+ * through from either side.
+ */
+export function portalTriangles(geometry: PackedGeometry): { triangles: number[]; lights: TreeLight[] } {
+  const windows = geometry.materialProperties.map(p => p.transmission > 0 && p.thickness <= 0);
+  const triangles: number[] = [], lights: TreeLight[] = [];
+
+  for (let triangle = 0; triangle < geometry.triangleCount; triangle++) {
+    if (!windows[geometry.materials[triangle]]) continue;
+
+    const at = triangle * 9;
+    const area = doubleArea(geometry.positions, at) / 2;
+
+    if (!(area > 0)) continue;
+
+    const corner = (k: number) => [0, 1, 2].map(c => geometry.positions[at + k * 3 + c]);
+    const points = [corner(0), corner(1), corner(2)];
+
+    triangles.push(triangle);
+    lights.push({
+      low: [0, 1, 2].map(c => Math.min(points[0][c], points[1][c], points[2][c])),
+      high: [0, 1, 2].map(c => Math.max(points[0][c], points[1][c], points[2][c])),
+      power: area,
+      axis: [0, 1, 0],
+      thetaO: Math.PI,
+      thetaE: Math.PI / 2,
+      density: 1 / area,
+    });
+  }
+
+  return { triangles, lights };
 }
 
 const luminance = (color: ArrayLike<number>) => 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2];
@@ -425,22 +470,41 @@ export function packLights(
 
   for (let index = 0; index < areas.length; index++) extra.push(words[index * LIGHT_WORDS + 3]);
 
-  let treeAt = 0, leavesAt = 0;
+  let treeAt = 0, leavesAt = 0, listAt = 0;
 
   if (localCount > 0) {
     const tree = buildLightTree(candidates.slice(0, localCount).map(candidate => candidate.tree as TreeLight));
 
     treeAt = base + extra.length;
+    listAt = treeAt + tree.listAt;
     for (const word of tree.words) extra.push(word);
     leavesAt = base + extra.length;
     for (const leaf of tree.leafOf) extra.push(leaf);
   }
 
+  const portals = environment && environment.power > 0 ? portalTriangles(geometry) : { triangles: [], lights: [] };
+  let portalTreeAt = 0, portalListAt = 0;
+
+  if (portals.triangles.length) {
+    const tree = buildLightTree(portals.lights);
+
+    portalTreeAt = base + extra.length;
+    portalListAt = portalTreeAt + tree.listAt;
+
+    // The leaves list window numbers; the kernel wants the triangles they stand for.
+    for (let k = tree.listAt; k < tree.words.length; k += 4) tree.words[k] = portals.triangles[tree.words[k]];
+    for (const word of tree.words) extra.push(word);
+  }
+
   return {
+    portalTreeAt,
+    portalListAt,
+    portalCount: portals.triangles.length,
     localCount,
     localPick: localCount > 0 ? floats[(localCount - 1) * LIGHT_WORDS + 1] : 0,
     treeAt,
     leavesAt,
+    listAt,
     cdfAt,
     trianglesAt,
     entries,

package/src/oidnPass.ts

@@ -0,0 +1,284 @@
+import type { UNet } from "oidn-webgpu";
+import { initUNetFromURL } from "oidn-webgpu/dist/oidn.js";
+import { createShaderModule } from "./shaderModule.js";
+
+/**
+ * The weights the OIDN denoiser loads by default: the HDR ray tracing network that takes the albedo and the normal as
+ * well as the colour (RenderKit's oidn-weights, Apache-2.0), shipped with the package. A bundler that moves the package
+ * elsewhere, or an app that serves its own copy, passes `denoiser.oidnWeights` instead.
+ */
+export const DEFAULT_OIDN_WEIGHTS = new URL("../weights/rt_hdr_alb_nrm.tza", import.meta.url).href;
+
+const WORKGROUP = 8;
+const METER_GRID = [64, 36] as const;
+
+/**
+ * Reads the accumulation into the three images OIDN takes, and back.
+ *
+ * The network was trained on images whose average sits near middle grey, which its own CPU path reaches by an
+ * automatic exposure; on the device that scale is left to the caller. `meter` takes the mean of the logarithms of the
+ * image's luminance over a grid, as the lens pass's meter does, `prepare` writes the colour times the scale that brings
+ * it to middle grey, the albedo (diffuse and specular, so a mirror is not taken for black) and the normal, and `finish`
+ * divides the network's output by the same scale and mixes it with the traced image by the strength.
+ */
+export const OIDN_WGSL = /* wgsl */ `
+struct Params {
+  size: vec2<u32>,
+  count: u32,
+  strength: f32,
+};
+
+@group(0) @binding(0) var<uniform> params: Params;
+@group(0) @binding(1) var<storage, read> accumulation: array<vec4<f32>>;
+@group(0) @binding(2) var<storage, read_write> color: array<vec4<f32>>;
+@group(0) @binding(3) var<storage, read_write> albedo: array<vec4<f32>>;
+@group(0) @binding(4) var<storage, read_write> normal: array<vec4<f32>>;
+@group(0) @binding(5) var<storage, read_write> scale: array<f32>;
+
+const MIDDLE_GREY: f32 = 0.18;
+const GRID: vec2<u32> = vec2<u32>(${METER_GRID[0]}u, ${METER_GRID[1]}u);
+
+var<workgroup> sums: array<vec2<f32>, 256>;
+
+fn luminance(value: vec3<f32>) -> f32 {
+  return dot(value, vec3<f32>(0.2126, 0.7152, 0.0722));
+}
+
+fn mean(index: u32) -> vec3<f32> {
+  let stored = accumulation[index];
+
+  return select(vec3<f32>(0.0), stored.rgb / stored.w, stored.w > 0.0);
+}
+
+@compute @workgroup_size(256, 1, 1)
+fn meter(@builtin(local_invocation_index) thread: u32) {
+  var sum = vec2<f32>(0.0);
+
+  for (var k = thread; k < GRID.x * GRID.y; k = k + 256u) {
+    let uv = (vec2<f32>(f32(k % GRID.x), f32(k / GRID.x)) + 0.5) / vec2<f32>(GRID);
+    let pixel = min(vec2<u32>(uv * vec2<f32>(params.size)), params.size - 1u);
+    let value = luminance(mean(pixel.y * params.size.x + pixel.x));
+
+    if (value > 0.0) {
+      sum = sum + vec2<f32>(log(value), 1.0);
+    }
+  }
+
+  sums[thread] = sum;
+  workgroupBarrier();
+
+  for (var stride = 128u; stride > 0u; stride = stride / 2u) {
+    if (thread < stride) {
+      sums[thread] = sums[thread] + sums[thread + stride];
+    }
+
+    workgroupBarrier();
+  }
+
+  if (thread == 0u) {
+    let total = sums[0];
+
+    scale[0] = select(1.0, clamp(MIDDLE_GREY / exp(total.x / total.y), 1e-6, 1e6), total.y > 0.0);
+  }
+}
+
+@compute @workgroup_size(${WORKGROUP}, ${WORKGROUP})
+fn prepare(@builtin(global_invocation_id) id: vec3<u32>) {
+  if (id.x >= params.size.x || id.y >= params.size.y) {
+    return;
+  }
+
+  let index = id.y * params.size.x + id.x;
+  let samples = max(accumulation[index].w, 1.0);
+  let traced = mean(index) * scale[0];
+  let normalSum = accumulation[3u * params.count + index].xyz;
+  let size = length(normalSum);
+  let surface = size > 1e-6;
+  let reflectance = (accumulation[2u * params.count + index].rgb + accumulation[5u * params.count + index].rgb)
+    / samples;
+
+  color[index] = vec4<f32>(max(traced, vec3<f32>(0.0)), 1.0);
+  // Where the camera sees no surface, the sky, the albedo is the colour itself, as OIDN asks of the background.
+  albedo[index] = vec4<f32>(select(clamp(traced, vec3<f32>(0.0), vec3<f32>(1.0)),
+    clamp(reflectance, vec3<f32>(0.0), vec3<f32>(1.0)), surface), 1.0);
+  normal[index] = vec4<f32>(select(vec3<f32>(0.0), normalSum / size, surface), 0.0);
+}
+
+// The network's output arrives in the colour binding; the albedo binding takes the result.
+@compute @workgroup_size(${WORKGROUP}, ${WORKGROUP})
+fn finish(@builtin(global_invocation_id) id: vec3<u32>) {
+  if (id.x >= params.size.x || id.y >= params.size.y) {
+    return;
+  }
+
+  let index = id.y * params.size.x + id.x;
+  let traced = mean(index);
+  let denoised = max(color[index].rgb, vec3<f32>(0.0)) / scale[0];
+
+  albedo[index] = vec4<f32>(mix(traced, denoised, clamp(params.strength, 0.0, 1.0)), 1.0);
+}
+`;
+
+const networks = new WeakMap<GPUDevice, Map<string, Promise<UNet>>>();
+
+/** One network per device and weights file, kept for as long as the device lives: loading it compiles its kernels. */
+function network(device: GPUDevice, weights: string): Promise<UNet> {
+  let byUrl = networks.get(device);
+
+  if (!byUrl) networks.set(device, byUrl = new Map());
+
+  let unet = byUrl.get(weights);
+
+  if (!unet) {
+    unet = initUNetFromURL(weights, { device }, { aux: true, hdr: true });
+    // A file that failed to load may load on a later attempt.
+    unet.catch(() => byUrl.delete(weights));
+    byUrl.set(weights, unet);
+  }
+
+  return unet;
+}
+
+/**
+ * Open Image Denoise (Intel's neural denoiser, through oidn-webgpu): the image, its albedo and its normal through a
+ * U-Net trained on path traced images, entirely on the device. It keeps texture and fine detail that a hand-made
+ * filter blurs, at the cost of a fraction of a second for a large image.
+ */
+export class OidnPass {
+  private readonly layout: GPUBindGroupLayout;
+  private readonly meter: GPUComputePipeline;
+  private readonly prepare: GPUComputePipeline;
+  private readonly finish: GPUComputePipeline;
+  private readonly params: GPUBuffer;
+  private readonly scale: GPUBuffer;
+  private buffers: GPUBuffer[] = [];
+  private width = 0;
+  private height = 0;
+  /** The denoised radiance, one vec4 per pixel, once `run` has resolved. */
+  output: GPUBuffer | null = null;
+
+  constructor(private readonly device: GPUDevice) {
+    const module = createShaderModule(device, "oidn", OIDN_WGSL);
+    const visibility = GPUShaderStage.COMPUTE;
+    const storage = (type: GPUBufferBindingType) => ({ binding: 0, visibility, buffer: { type } });
+
+    this.layout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility, buffer: { type: "uniform" } },
+        { ...storage("read-only-storage"), binding: 1 },
+        { ...storage("storage"), binding: 2 },
+        { ...storage("storage"), binding: 3 },
+        { ...storage("storage"), binding: 4 },
+        { ...storage("storage"), binding: 5 },
+      ],
+    });
+
+    const layout = device.createPipelineLayout({ bindGroupLayouts: [this.layout] });
+    const pipeline = (entryPoint: string) => device.createComputePipeline({ layout, compute: { module, entryPoint } });
+
+    this.meter = pipeline("meter");
+    this.prepare = pipeline("prepare");
+    this.finish = pipeline("finish");
+    this.params = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    this.scale = device.createBuffer({ size: 16, usage: GPUBufferUsage.STORAGE });
+  }
+
+  private resize(width: number, height: number) {
+    if (width === this.width && height === this.height && this.buffers.length) return;
+
+    for (const buffer of this.buffers) buffer.destroy();
+
+    const size = Math.max(16, width * height * 16);
+    const usage = GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST;
+
+    // Colour, albedo and normal for the network, then the result.
+    this.buffers = Array.from({ length: 4 }, () => this.device.createBuffer({ size, usage }));
+    this.output = this.buffers[3];
+    this.width = width;
+    this.height = height;
+  }
+
+  private group(accumulation: GPUBuffer, color: GPUBuffer, albedo: GPUBuffer, normal: GPUBuffer): GPUBindGroup {
+    return this.device.createBindGroup({
+      layout: this.layout,
+      entries: [
+        { binding: 0, resource: { buffer: this.params } },
+        { binding: 1, resource: { buffer: accumulation } },
+        { binding: 2, resource: { buffer: color } },
+        { binding: 3, resource: { buffer: albedo } },
+        { binding: 4, resource: { buffer: normal } },
+        { binding: 5, resource: { buffer: this.scale } },
+      ],
+    });
+  }
+
+  private dispatch(encoder: GPUCommandEncoder, pipeline: GPUComputePipeline, group: GPUBindGroup, x: number,
+    y: number) {
+    const pass = encoder.beginComputePass({ label: "oidn" });
+
+    pass.setPipeline(pipeline);
+    pass.setBindGroup(0, group);
+    pass.dispatchWorkgroups(x, y);
+    pass.end();
+  }
+
+  /**
+   * Denoises what `accumulation` holds into `output`. The images are read from it as it stands on the queue when this
+   * is called; the promise resolves once the result has been written, and rejects when the network cannot load.
+   */
+  async run(accumulation: GPUBuffer, width: number, height: number, strength: number, weights: string,
+    signal?: { cancelled: boolean }): Promise<boolean> {
+    const unet = await network(this.device, weights);
+
+    if (signal?.cancelled) return false;
+
+    this.resize(width, height);
+
+    const [color, albedo, normal, output] = this.buffers;
+    const values = new ArrayBuffer(16);
+
+    new Uint32Array(values).set([width, height, width * height]);
+    new Float32Array(values)[3] = strength;
+    this.device.queue.writeBuffer(this.params, 0, values);
+
+    const groups = [Math.ceil(width / WORKGROUP), Math.ceil(height / WORKGROUP)] as const;
+    const inputs = this.group(accumulation, color, albedo, normal);
+    const encoder = this.device.createCommandEncoder({ label: "oidn prepare" });
+
+    this.dispatch(encoder, this.meter, inputs, 1, 1);
+    this.dispatch(encoder, this.prepare, inputs, ...groups);
+    this.device.queue.submit([encoder.finish()]);
+
+    const denoised = await new Promise<GPUBuffer | null>((resolve, reject) => {
+      const abort = unet.tileExecute({
+        color: { data: color, width, height },
+        albedo: { data: albedo, width, height },
+        normal: { data: normal, width, height },
+        done: result => resolve(result.data),
+        error: reject,
+        progress: () => {
+          if (signal?.cancelled) {
+            abort();
+            resolve(null);
+          }
+        },
+      });
+    });
+
+    if (!denoised || signal?.cancelled) return false;
+
+    const finishing = this.device.createCommandEncoder({ label: "oidn finish" });
+
+    this.dispatch(finishing, this.finish, this.group(accumulation, denoised, output, normal), ...groups);
+    this.device.queue.submit([finishing.finish()]);
+
+    return true;
+  }
+
+  destroy() {
+    for (const buffer of [...this.buffers, this.params, this.scale]) buffer.destroy();
+
+    this.buffers = [];
+    this.output = null;
+  }
+}

package/src/oidnWebgpu.d.ts

@@ -0,0 +1,5 @@
+// The package's lib/ imports its modules without extensions, which only a bundler resolves; its dist/ is one ES module
+// that a browser and Node both load, with the same exports as lib/main.
+declare module "oidn-webgpu/dist/oidn.js" {
+  export * from "oidn-webgpu";
+}