@tinypoly/gpu-renderer 0.1.1 → 0.2.1

package/src/renderer.ts

@@ -40,6 +40,7 @@ import {
   type DenoiserSettings,
   type DenoiseView,
 } from "./denoise.js";
+import { DEFAULT_OIDN_WEIGHTS, OidnPass } from "./oidnPass.js";
 import { CaptureResolvePass, planarCaptures, type PlanarCaptures } from "./planarCapture.js";
 import { prepareSceneAssets, type SceneAssets } from "./sceneAssets.js";
 import { packVolumetricLights, VOLUMETRIC_WORDS } from "./volumetric.js";
@@ -123,6 +124,13 @@ interface PendingFrame {
   reject: (reason: Error) => void;
 }
 
+/** AgX's look, which a missing or broken setting leaves at the base curve's own. */
+function lookContrast(settings: GpuRenderSettings): number {
+  const contrast = Number(settings.camera.contrast);
+
+  return Number.isFinite(contrast) ? Math.min(1, Math.max(0, contrast)) : 0;
+}
+
 function abortError(message: string): Error {
   return Object.assign(new Error(message), { name: "AbortError" });
 }
@@ -291,6 +299,14 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
   private planar = false;
   private resolve: CaptureResolvePass | null = null;
   private denoisePass: DenoisePass | null = null;
+  private oidnPass: OidnPass | null = null;
+  // The buffer the last denoise wrote, whichever denoiser ran it.
+  private denoiseOutput: GPUBuffer | null = null;
+  // The network denoises one image at a time: each run waits for the one before it.
+  private oidnRun: Promise<unknown> = Promise.resolve();
+  private oidnBusy = false;
+  // Set once the network failed to load or run; SVGF stands in until the denoiser settings change.
+  private oidnFailed = false;
   private lensPass: LensPass | null = null;
   // What the lens pass last graded, and when: its input only changes when the denoiser runs or the accumulation grows.
   private lensKey = "";
@@ -351,6 +367,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
    */
   setDenoiser(input: Partial<DenoiserSettings>) {
     this.denoiserSettings = mergeDenoiser(this.denoiserSettings, input);
+    this.oidnFailed = false;
     this.refilter();
   }
 
@@ -364,16 +381,18 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     const denoise = this.current.globalIllumination.denoise;
 
     void (async() => {
-      const encoder = gpu.device.createCommandEncoder();
-
-      if (denoise) this.encodeDenoise(gpu, encoder, finished.width, finished.height);
+      if (denoise) await this.denoiseNow(gpu, finished.width, finished.height);
       else this.denoised = false;
 
+      if (revision !== this.revision || this.rendering) return;
+
+      const encoder = gpu.device.createCommandEncoder();
+
       this.encodePresent(encoder, finished.width, finished.height);
       gpu.device.queue.submit([encoder.finish()]);
 
       const image = await this.readImage(gpu, finished.width, finished.height,
-        denoise ? this.denoisePass?.output ?? null : null);
+        denoise && this.denoised ? this.denoiseOutput : null);
 
       // A frame started meanwhile owns the image now.
       if (revision !== this.revision || this.rendering) return;
@@ -472,10 +491,24 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.sceneDirty = true;
   }
 
-  /** Used by `attachCanvas`; pass `null` to detach. */
+  /**
+   * Used by `attachCanvas`; pass `null` to detach. A canvas attached after a frame started, or after it finished,
+   * shows what the accumulation already holds at once, instead of staying empty until the next frame.
+   */
   setOutputCanvas(canvas: HTMLCanvasElement | null) {
     this.canvas = canvas;
     this.context = null;
+
+    const gpu = this.gpu, accumulator = this.accumulator;
+
+    if (!canvas || !gpu || !accumulator || this.disposed) return;
+
+    this.configureCanvas(gpu, accumulator.width, accumulator.height);
+
+    const encoder = gpu.device.createCommandEncoder();
+
+    this.encodePresent(encoder, accumulator.width, accumulator.height);
+    gpu.device.queue.submit([encoder.finish()]);
   }
 
   /**
@@ -558,6 +591,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.buffers?.destroy();
     this.accumulator?.destroy();
     this.denoisePass?.destroy();
+    this.oidnPass?.destroy();
     this.lensPass?.destroy();
     this.lensPass = null;
     this.imageResolve?.dispose();
@@ -738,14 +772,30 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
 
       // 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
+      if (denoise && this.canvas && this.context && !this.oidnBusy && performance.now() - denoisedAt
         >= denoiseInterval(width, height, this.denoiserSettings.passes)) {
-        const encoder = gpu.device.createCommandEncoder();
+        if (this.usesOidn()) {
+          // The network takes longer than a pass: it runs beside the tracing, and the canvas takes its image when done.
+          this.oidnBusy = true;
+          void this.denoiseNow(gpu, width, height).then(() => {
+            if (revision !== this.revision || !this.denoised) return;
+
+            const encoder = gpu.device.createCommandEncoder();
+
+            this.encodePresent(encoder, width, height);
+            gpu.device.queue.submit([encoder.finish()]);
+          }).finally(() => {
+            this.oidnBusy = false;
+            denoisedAt = performance.now();
+          });
+        } else {
+          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.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 });
@@ -766,14 +816,16 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.check(revision);
 
     if (denoise) {
+      await this.denoiseNow(gpu, width, height);
+      this.check(revision);
+
       const encoder = gpu.device.createCommandEncoder();
 
-      this.encodeDenoise(gpu, encoder, width, height);
       this.encodePresent(encoder, width, height);
       gpu.device.queue.submit([encoder.finish()]);
     }
 
-    const image = await this.readImage(gpu, width, height, denoise ? this.denoisePass?.output ?? null : null);
+    const image = await this.readImage(gpu, width, height, denoise && this.denoised ? this.denoiseOutput : null);
 
     this.check(revision);
     this.output = image;
@@ -831,7 +883,11 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
         && 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));
+      this.current.bevel.enabled && materials.some(material => bevelOf(material) > 0),
+      // Portals need windows: thin glass, which is what a physical material with transmission and no thickness is.
+      this.current.globalIllumination.portals !== false && materials.some(material =>
+        material.type === "MeshPhysicalMaterial" && Number(material.values.transmission) > 0
+        && !(Number(material.values.thickness) > 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;
@@ -1071,10 +1127,11 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       toneMapping: this.current.toneMapping,
       vignette: this.current.vignette,
       grain: this.current.grain,
+      contrast: lookContrast(this.current),
       frameIndex: this.frameIndex,
       transparent: this.current.background.mode === "transparent",
       denoised: this.encodeLens(this.gpu, encoder, width, height,
-        this.denoised ? this.denoisePass?.output ?? null : null),
+        this.denoised ? this.denoiseOutput : null),
     });
   }
 
@@ -1110,10 +1167,67 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.denoisePass ??= new DenoisePass(gpu.device);
     this.denoisePass.encode(encoder, (this.accumulator as Accumulator).buffer, width, height, this.denoiserSettings,
       this.denoiseView);
+    this.denoiseOutput = this.denoisePass.output;
     this.denoised = true;
     this.denoiseVersion++;
   }
 
+  private usesOidn(): boolean {
+    return this.denoiserSettings.algorithm === "oidn" && !this.oidnFailed;
+  }
+
+  /**
+   * Denoises the accumulation as it stands with the chosen denoiser, and resolves once the output holds it. SVGF is
+   * submitted at once; OIDN runs after any run still in flight, and is dropped when a newer frame starts meanwhile.
+   */
+  private async denoiseNow(gpu: RenderDevice, width: number, height: number): Promise<void> {
+    if (this.usesOidn()) {
+      const revision = this.revision;
+      const run = this.oidnRun.then(() => this.runOidn(gpu, width, height, revision));
+
+      this.oidnRun = run.catch(() => undefined);
+
+      // Denoised, or replaced by a newer frame: either way nothing is left to do here.
+      if (await run || !this.oidnFailed) return;
+    }
+
+    const encoder = gpu.device.createCommandEncoder();
+
+    this.encodeDenoise(gpu, encoder, width, height);
+    gpu.device.queue.submit([encoder.finish()]);
+  }
+
+  private async runOidn(gpu: RenderDevice, width: number, height: number, revision: number): Promise<boolean> {
+    if (revision !== this.revision || !this.accumulator) return false;
+
+    const signal = { cancelled: false };
+
+    const watch = () => { signal.cancelled = revision !== this.revision; };
+
+    this.oidnPass ??= new OidnPass(gpu.device);
+
+    try {
+      const { strength, oidnWeights } = this.denoiserSettings;
+      const timer = setInterval(watch, 50);
+
+      const done = await this.oidnPass.run(this.accumulator.buffer, width, height, strength,
+        oidnWeights || DEFAULT_OIDN_WEIGHTS, signal).finally(() => clearInterval(timer));
+
+      if (!done || revision !== this.revision) return false;
+
+      this.denoiseOutput = this.oidnPass.output;
+      this.denoised = true;
+      this.denoiseVersion++;
+
+      return true;
+    } catch(error) {
+      this.oidnFailed = true;
+      console.warn("GPU renderer: OIDN could not denoise, so SVGF does.", error);
+
+      return false;
+    }
+  }
+
   private frameUniforms(
     camera: CameraState,
     width: number,
@@ -1201,6 +1315,9 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       lightTree: this.current.globalIllumination.lightTree === false ? 0 : buffers?.lightTree ?? 0,
       lightLeaves: buffers?.lightLeaves ?? 0,
       lightList: buffers?.lightList ?? 0,
+      portals: buffers?.portals ?? 0,
+      portalCount: this.current.globalIllumination.portals === false ? 0 : buffers?.portalCount ?? 0,
+      portalList: buffers?.portalList ?? 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,
@@ -1249,7 +1366,7 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     gpu.device.queue.submit([encoder.finish()]);
 
     const data = await this.imageResolve.read(accumulator.buffer, graded, width, height,
-      { exposure, toneMapping, vignette, transparent });
+      { exposure, toneMapping, vignette, contrast: lookContrast(this.current), transparent });
 
     return { width, height, data };
   }

package/src/sceneUpload.ts

@@ -53,6 +53,10 @@ export interface SceneBuffers {
   lightTree: number;
   lightLeaves: number;
   lightList: number;
+  /** The windows the sky is sampled through: see lights.ts. */
+  portals: number;
+  portalCount: number;
+  portalList: 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. */
@@ -208,6 +212,9 @@ export function uploadScene(
     lightTree: lights.treeAt,
     lightLeaves: lights.leavesAt,
     lightList: lights.listAt,
+    portals: lights.portalTreeAt,
+    portalCount: lights.portalCount,
+    portalList: lights.portalListAt,
     ambient: lights.ambient,
     environment: {
       texture: environment ? textures.indexOf.get(environment.texture.id) ?? NO_TEXTURE : NO_TEXTURE,

package/src/settings.ts

@@ -20,6 +20,12 @@ export interface GpuRenderSettings extends Omit<RenderSettings, "globalIlluminat
      * gets the samples a large panel far away would have taken.
      */
     lightTree: boolean;
+    /**
+     * Inside a room, aims at the sky through its windows (every thin transmissive material) as well as by its
+     * brightness, as Cycles' portals do, so daylight that enters through glass is found instead of stumbled upon.
+     * A point counts as inside when something is above it; elsewhere the sky is sampled as before.
+     */
+    portals: boolean;
   };
   /**
    * The light a real lens and sensor scatter around anything bright: a soft halo that fades with distance. Energy
@@ -60,11 +66,24 @@ export interface GpuRenderSettings extends Omit<RenderSettings, "globalIlluminat
   };
   /** A camera's exposure triangle and white balance. */
   camera: {
+    /**
+     * The contrast and saturation of AgX's look, `0` to `1`: `0` is its base curve, flat on purpose, and `1` a look
+     * like Blender's Punchy, pivoted on middle grey so the image keeps its brightness. The other tone mappings ignore it.
+     */
+    contrast: number;
     /**
      * Exposes from `iso`, `shutterSpeed` and `depthOfField.aperture` as a camera would, with `exposure` as a
      * compensation on top. The scene's lights then have to be in physical units (lux, candela, nits).
      */
     physicalExposure: boolean;
+    /**
+     * Meters the image as a camera in automatic does and exposes it to middle grey, from the mean of the logarithms of
+     * its luminance, weighed towards the centre: a bright window or sky cannot darken the rest. It takes the place of
+     * `exposure` and of the physical exposure, with `exposureCompensation` on top.
+     */
+    autoExposure: boolean;
+    /** Stops added to the metered exposure: positive brightens, as on a camera's dial. */
+    exposureCompensation: number;
     iso: number;
     /** Seconds. */
     shutterSpeed: number;
@@ -130,11 +149,14 @@ export const DEFAULT_GPU_RENDER_SETTINGS: Readonly<GpuRenderSettings> = Object.f
     // AgX rolls highlights off as film does, where ACES pushes saturated colours to the gamut's edge.
     toneMapping: "agx",
     globalIllumination: { ...DEFAULT_RENDER_SETTINGS.globalIllumination, russianRoulette: true, rouletteStart: 1,
-      lightTree: true },
+      lightTree: true, portals: true },
     bloom: { enabled: true, intensity: 0.04, radius: 0.65 },
     glare: { enabled: true, intensity: 0.06, blades: 6, length: 0.25, rotation: 15 },
-    lens: { chromaticAberration: 0.2, distortion: 0 },
-    camera: { physicalExposure: false, iso: 100, shutterSpeed: 1 / 125, whiteBalance: 6500 },
+    lens: { chromaticAberration: 0.05, distortion: 0 },
+    camera: {
+      contrast: 1, physicalExposure: false, autoExposure: false, exposureCompensation: 0, iso: 100,
+      shutterSpeed: 1 / 125, whiteBalance: 6500,
+    },
     subsurface: { enabled: true, depth: 2 },
     atmosphere: { enabled: true, visibility: 20000, haze: 0.6, color: "" },
     volumes: { enabled: true },
@@ -160,10 +182,16 @@ export function physicalExposure(aperture: number, shutterSpeed: number, iso: nu
   return 1 / (1.2 * 2 ** ev100);
 }
 
-/** The exposure the image is multiplied by: the setting itself, or a camera's on top of it as compensation. */
+/**
+ * The exposure the image is multiplied by: the setting itself, or a camera's on top of it as compensation, or with
+ * the automatic exposure only its compensation, the meter's own exposure being applied on the device.
+ */
 export function effectiveExposure(settings: GpuRenderSettings): number {
   const { camera, depthOfField, exposure } = settings;
 
+  // The meter's exposure is applied on the device, by the lens pass; what is left here is the compensation.
+  if (camera.autoExposure) return 2 ** (Number(camera.exposureCompensation) || 0);
+
   return camera.physicalExposure
     ? exposure * physicalExposure(depthOfField.aperture, camera.shutterSpeed, camera.iso)
     : exposure;

package/src/wgsl/lens.wgsl.ts

@@ -46,7 +46,8 @@ struct Lens {
   // The size of the level the rays are gathered at, and the angle of the first ray, in radians.
   streakSize: vec2<u32>,
   glareAngle: f32,
-  pad0: f32,
+  // Whether the camera meters the image and exposes it to middle grey, which the meter pass works out.
+  autoExposure: f32,
 };
 
 const PI: f32 = 3.14159265358979;
@@ -61,6 +62,108 @@ const STREAK_TAPS: i32 = 24;
 @group(0) @binding(4) var<storage, read_write> up: array<vec4<f32>>;
 @group(0) @binding(5) var<storage, read_write> graded: array<vec4<f32>>;
 @group(0) @binding(6) var<storage, read_write> streaked: array<vec4<f32>>;
+// What the camera's meter read: the exposure that brings the image's average to middle grey, in x.
+@group(0) @binding(7) var<storage, read_write> metered: array<vec4<f32>>;
+
+/** What a light meter calibrates to: an average scene reflects about eighteen percent. */
+const MIDDLE_GREY: f32 = 0.18;
+const METER_GRID: vec2<u32> = vec2<u32>(64u, 36u);
+const METER_THREADS: u32 = 256u;
+
+/**
+ * How far above middle grey the meter lets the bright end of the image land: three stops, where AgX still shows
+ * detail, three and a half under where it reaches white.
+ */
+const HIGHLIGHT_CEILING: f32 = 8.0;
+/** The share of the metered points that counts as the bright end: the light through a window, not a lamp's own pixels. */
+const HIGHLIGHT_SHARE: f32 = 0.03;
+/** Half stops of luminance, from 2^-16 to 2^16, which the bright end is found in. */
+const METER_BINS: u32 = 64u;
+
+var<workgroup> meterSums: array<vec2<f32>, 256>;
+var<workgroup> meterHistogram: array<atomic<u32>, 64>;
+
+/**
+ * The camera's meter: the image's average luminance over a grid of points, taken as the mean of the logarithms so that
+ * a bright window or a patch of sky cannot darken everything else, weighed towards the centre as a camera's
+ * centre-weighted metering is. What no path has reached yet, or is black, does not count. One workgroup reads the
+ * grid and sums it in shared memory.
+ *
+ * Then it guards the highlights, as a camera's matrix metering does: the average alone takes a dim attic with a shaft
+ * of sun in it to middle grey and burns the shaft out, where a photographer keeps the room dim. The brightest few
+ * percent of the points, found in a histogram of half stops, may land no more than {@link HIGHLIGHT_CEILING} times
+ * brighter; an even scene, whose bright end is close to its average, is left as the average says.
+ */
+@compute @workgroup_size(256, 1, 1)
+fn meter(@builtin(local_invocation_index) thread: u32) {
+  var sum = vec2<f32>(0.0);
+  let count = METER_GRID.x * METER_GRID.y;
+
+  if (thread < METER_BINS) {
+    atomicStore(&meterHistogram[thread], 0u);
+  }
+
+  workgroupBarrier();
+
+  for (var k = thread; k < count; k = k + METER_THREADS) {
+    let cell = vec2<f32>(f32(k % METER_GRID.x), f32(k / METER_GRID.x)) + 0.5;
+    let uv = cell / vec2<f32>(METER_GRID);
+    let luminance = dot(imageTexel(i32(uv.x * f32(lens.resolution.x)), i32(uv.y * f32(lens.resolution.y))),
+      vec3<f32>(0.2126, 0.7152, 0.0722));
+    let away = (uv - 0.5) * 2.0;
+    let weight = select(0.0, 1.0 - 0.6 * min(dot(away, away) * 0.5, 1.0), luminance > 0.0);
+
+    sum = sum + vec2<f32>(log(max(luminance, 1e-6)) * weight, weight);
+
+    if (luminance > 0.0) {
+      let bin = u32(clamp((log2(luminance) + 16.0) * 2.0, 0.0, f32(METER_BINS - 1u)));
+
+      atomicAdd(&meterHistogram[bin], 1u);
+    }
+  }
+
+  meterSums[thread] = sum;
+  workgroupBarrier();
+
+  for (var stride = METER_THREADS / 2u; stride > 0u; stride = stride / 2u) {
+    if (thread < stride) {
+      meterSums[thread] = meterSums[thread] + meterSums[thread + stride];
+    }
+
+    workgroupBarrier();
+  }
+
+  if (thread == 0u) {
+    let total = meterSums[0];
+    let average = select(MIDDLE_GREY, exp(total.x / max(total.y, 1e-6)), total.y > 0.0);
+    var exposure = MIDDLE_GREY / average;
+
+    // From the top down, the first half stop by which the bright share is reached; its upper edge is that end.
+    var points = 0u;
+
+    for (var bin = 0u; bin < METER_BINS; bin = bin + 1u) {
+      points = points + atomicLoad(&meterHistogram[bin]);
+    }
+
+    var above = 0u;
+    var bright = 0.0;
+
+    for (var bin = i32(METER_BINS) - 1; bin >= 0 && points > 0u; bin = bin - 1) {
+      above = above + atomicLoad(&meterHistogram[u32(bin)]);
+
+      if (f32(above) >= HIGHLIGHT_SHARE * f32(points)) {
+        bright = exp2(f32(bin + 1) * 0.5 - 16.0);
+        break;
+      }
+    }
+
+    if (bright > 0.0) {
+      exposure = min(exposure, HIGHLIGHT_CEILING * MIDDLE_GREY / bright);
+    }
+
+    metered[0] = vec4<f32>(clamp(exposure, 1e-4, 1e4), average, bright, 0.0);
+  }
+}
 
 /** The image's own texel: its mean so far, or nothing where no path has landed yet. */
 fn imageTexel(x: i32, y: i32) -> vec3<f32> {
@@ -293,6 +396,10 @@ fn composite(@builtin(global_invocation_id) id: vec3<u32>) {
     color = mix(color, streakBilinear(position * vec2<f32>(lens.streakSize) / size), lens.glare);
   }
 
+  if (lens.autoExposure > 0.0) {
+    color = color * metered[0].x;
+  }
+
   let balanced = vec3<f32>(dot(lens.white0.xyz, color), dot(lens.white1.xyz, color), dot(lens.white2.xyz, color));
 
   graded[id.y * lens.resolution.x + id.x] = vec4<f32>(max(balanced, vec3<f32>(0.0)), 1.0);