@driftengine/core 4.4.1 → 4.4.2

package/dist/render/temporalAa.js

@@ -129,6 +129,189 @@ export function clipToNeighbourhood(out, history, min, max) {
     out[2] = centre[2] + offset[2] * scale;
     return out;
 }
+/**
+ * **The anti-flicker: a still pixel's neighbourhood widened by its own flicker.**
+ *
+ * A thread, a crack of light round a door, a leaf finer than a pixel: the jitter catches it in some
+ * phases and misses it in others, and in a phase that misses it the nine taps round a pixel can all
+ * miss it at once. The box collapses onto the background, the history — which had settled on the
+ * thread's share of the pixel — is clipped out, and it grows back a tenth a frame until the next
+ * miss. That is a paused frame flashing at every fine edge, and the clip is doing its job: nothing
+ * in one frame says the thread is still there.
+ *
+ * What does say so is the pixel's own record. **A still camera over a still scene samples every pixel
+ * the same way every period of the jitter, exactly**, so aliasing repeats itself; a surface that moves
+ * across the pixel, a flame, a light that shimmers, does not. So each pixel keeps the mean of its
+ * samples over the last period, the sum it is gathering for this one, how many periods running have
+ * repeated, and the running mean of how far its samples land from their period's mean — and its box
+ * widens by that spread only once two periods running have repeated. Measured on the samples rather
+ * than against the history, because the history is what the clip cuts. **And a sample farther from
+ * its period's mean than the box would widen to is not the flicker the pixel has shown**: something
+ * has arrived, and the count starts again on that frame rather than at the end of the period. **Two, and a mean rather than
+ * one sample**, because one sample repeats by coincidence: stripes sliding across a pixel land on the
+ * same colour at two period starts about as often as not.
+ *
+ * **What it gives up.** A surface arriving over a pixel that was flickering is held back until the
+ * period ends and fails to repeat — at most eight frames, fading a tenth a frame meanwhile; a still
+ * pixel needs three periods before it is helped at all; and a pixel that flickers in a scene that is
+ * itself moving is not helped, since nothing repeats there. Nothing moving past a twentieth of a
+ * pixel a frame is touched, since the reprojection is then what decides.
+ *
+ * **A moving camera had a weaker proof of its own, and it was taken out.** It widened a pixel's box
+ * while its samples swung both ways about their mean, with the record carried through the
+ * reprojection. Measured on a moving courtyard it removed a twentieth of what flickered, and it broke
+ * a sun's shadow line on the floor into dashes that were not there before: the record is read at the
+ * nearest texel, so under sub-pixel motion one pixel widened and its neighbour did not. The resolve
+ * already removes nineteen twentieths of a moving frame's flicker without it. **What would make it wrong** is a jitter
+ * whose sequence does not repeat, where no period is the same twice however still the scene is.
+ */
+/** This frame's share of the running spread, and of a period's mean: one period of the jitter. */
+export const FLICKER_MEMORY = 1 / JITTER_PERIOD;
+/**
+ * How many spreads a flickering pixel's box widens by. The hardest thread is one missed in a single
+ * phase of eight: that miss needs the box to reach 7/8 of its contrast, and the running spread,
+ * worn down by seven catches that each land an eighth of the contrast from the period's mean, has
+ * fallen to a = 1/8 + (7/8 a + 7/64 − 1/8)·(7/8)⁷ of the contrast by then — 0.181, a steady state
+ * solved by hand — against the 7/32 it averages. Seven eighths over that is 4.8; six leaves room.
+ * Threads caught in a share nearer a half spread more and need fewer.
+ */
+export const FLICKER_WIDTH = 6;
+/**
+ * How far apart two periods' means may be, relative to the larger, and still repeat: fully below
+ * this, not at all at twice it. Above an eight-bit record's rounding and a lamp's slow breathing; far
+ * below what anything crossing the pixel does to it.
+ */
+export const FLICKER_REPEAT = 0.05;
+/**
+ * How much of the history a pixel proven to repeat keeps, where an unproven one keeps
+ * `TEMPORAL_HISTORY_BLEND`. A settled thread still breathes with the jitter by the share of each
+ * frame's sample that goes into what is shown — a tenth of its contrast at the base blend — and a
+ * pixel that has repeated for two periods has nothing to respond to, so it keeps more: three
+ * hundredths of each frame instead of a tenth. What it costs is a surface arriving inside the
+ * pixel's own swing, which fades in at that rate until the period's check lets it through.
+ */
+export const FLICKER_BLEND = 0.97;
+/**
+ * How far last frame's depth may be from the depth a surface should have had there, relative, and
+ * still be that surface: two percent beyond the pixel's own depth swing, taken as the nearest of the
+ * texel where it stood and the four beside it. **The nearest of five and not the one**, because this
+ * frame's sample and last frame's can straddle an edge with nothing moved — the lesson
+ * `recon/resolve.ts` learned the expensive way.
+ *
+ * **And beyond its own swing, because depth aliases the way colour does.** A crack of light round a
+ * door is a pixel whose sample lands on the door in some phases and on what is behind it in others,
+ * so its depth jumps metres with nothing moved, and a test held to two percent reset the record of
+ * exactly the pixels the anti-flicker is for: a held frame went from 5 flickering pixels back to 774.
+ * So each pixel keeps the running mean of how far last frame's depth missed — kept whatever the test
+ * says, since resetting it would stop it ever learning the swing — and the test allows
+ * `FLICKER_WIDTH` of those, as the box does of the colour's. A flat surface's swing is none and its
+ * test stays tight; a surface revealed by the camera is a jump nothing in the pixel's past explains.
+ */
+export const FLICKER_SURFACE = 0.02;
+/** Whether a record follows the surface it was kept for: see `FLICKER_SURFACE`. */
+export function sameSurface(expected, stood, swing) {
+    return missedBy(expected, stood) <= FLICKER_WIDTH * swing + FLICKER_SURFACE * expected;
+}
+/**
+ * How far the nearest of last frame's depths missed the one expected. A depth of nought is a texel
+ * with nothing recorded — the frame after a cut — and is no texel; with none, nothing is missed by
+ * any amount.
+ */
+export function missedBy(expected, stood) {
+    let nearest = Number.POSITIVE_INFINITY;
+    for (let i = 0; i < stood.length; i++) {
+        const depth = stood[i];
+        if (depth > 0)
+            nearest = Math.min(nearest, Math.abs(depth - expected));
+    }
+    return nearest;
+}
+/**
+ * The pixel's depth swing carried on: the running mean of `missedBy`, over a period, and none where
+ * there was nothing to miss — a swing learned from a cut would loosen the test for a whole period.
+ */
+export function nextDepthSwing(swing, missed) {
+    return Number.isFinite(missed) ? swing + (missed - swing) * FLICKER_MEMORY : 0;
+}
+/**
+ * Reprojected motion in pixels a frame: still below the first, moving from the second. **Small,
+ * because repetition breaks long before motion is visible**: a camera drifting a fifth of a pixel a
+ * frame shifts the grid more than a pixel a period, so nothing repeats, and a ramp to half a pixel
+ * counted that as mostly still and kept vouching for samples that had stopped repeating.
+ */
+export const STILL_FROM = 0.01;
+export const STILL_TO = 0.05;
+/**
+ * A fresh record for a surface first seen this frame: no spread and nothing repeated. **A
+ * record of another surface is no record**, so the resolve starts one over wherever last frame's
+ * depth says the surface is not the one it followed, before this frame widens by anything.
+ */
+export function freshFlicker(out, sample) {
+    out.spread = 0;
+    out.sum = sample * FLICKER_MEMORY;
+    out.mean = sample;
+    out.repeated = 0;
+    return out;
+}
+function smoothstep(edge0, edge1, x) {
+    const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0)));
+    return t * t * (3 - 2 * t);
+}
+/** Rec. 709 luma, which is what the record measures in. */
+export function luma(c) {
+    return c[0] * 0.2126 + c[1] * 0.7152 + c[2] * 0.0722;
+}
+/** One for a pixel whose reprojection did not move, falling to none at a twentieth of a pixel. */
+export function stillness(motionPixels) {
+    return 1 - smoothstep(STILL_FROM, STILL_TO, motionPixels);
+}
+/**
+ * Whether a pixel is proven to repeat this frame: two periods running have, and this frame's sample
+ * lands within the reach of the box it would widen to. A sample beyond that reach is something
+ * arriving, and it disqualifies the frame it lands in as well as the count it carries out.
+ */
+export function proven(record, sample) {
+    return record.repeated > 0.75 && within(record, sample);
+}
+/** Whether this frame's sample lands inside the reach of the box the record would widen to. */
+function within(record, sample) {
+    return Math.abs(sample - record.mean) <= FLICKER_WIDTH * record.spread + 1 / 255;
+}
+/** How far a pixel's box widens this frame: by its spread, once proven, and only while still. */
+export function flickerWidening(record, sample, still) {
+    return proven(record, sample) ? FLICKER_WIDTH * record.spread * still : 0;
+}
+/** How much of the history this frame keeps: the base blend, or more once proven. */
+export function flickerBlend(base, record, sample, still) {
+    return proven(record, sample) ? base + (FLICKER_BLEND - base) * still : base;
+}
+/** Whether two periods' means are the same, one to zero. */
+export function repeats(mean, previous) {
+    const apart = Math.abs(mean - previous) / Math.max(mean, previous, 1 / 255);
+    return 1 - smoothstep(FLICKER_REPEAT, 2 * FLICKER_REPEAT, apart);
+}
+/**
+ * The record carried out, from the one carried in and this frame's sample in luma. `periodStart`
+ * is the first frame of the jitter's period, where the period just gathered is compared with the
+ * one before. Forgotten in proportion to motion — a moving pixel's record would be a record of
+ * somewhere else.
+ */
+export function nextFlicker(out, previous, sample, still, periodStart) {
+    const apart = Math.abs(sample - previous.mean);
+    let { sum, mean, repeated } = previous;
+    if (apart > FLICKER_WIDTH * previous.spread + 1 / 255)
+        repeated = 0;
+    if (periodStart) {
+        repeated = repeats(sum, mean) > 0.5 ? Math.min(1, repeated + 0.5) : 0;
+        mean = sum;
+        sum = 0;
+    }
+    out.spread = previous.spread + (apart - previous.spread) * FLICKER_MEMORY;
+    out.sum = sum + sample * FLICKER_MEMORY;
+    out.mean = mean;
+    out.repeated = repeated * still;
+    return out;
+}
 /**
  * Whether the last frame left a picture this one may sample, and where the jitter has got to.
  *
@@ -158,6 +341,13 @@ export class TemporalHistory {
         this.height = height;
         return usable;
     }
+    /**
+     * Whether this frame samples the first phase of the jitter's period, where the anti-flicker
+     * compares the period just gathered with the one before. One answer for both backends.
+     */
+    get periodStart() {
+        return this.frameIndex % JITTER_PERIOD === 0;
+    }
     /** A resolved picture is now in the history, at the size the frame was opened with. */
     accumulated() {
         this.picture = true;

package/dist/render/temporalPass.d.ts

@@ -1,16 +1,3 @@
-/**
- * The temporal resolve on WebGL2: this frame blended into where the last one was.
- *
- * **Two targets and a swap, because a pass cannot read the texture it is writing.** The history is
- * sampled at a reprojected coordinate, which is somewhere else in the same image, so reading and
- * writing one texture is a feedback loop — undefined in WebGL2 and in practice whatever the driver
- * left in the cache. So the resolve writes into the one it did not read and the pair swaps, which
- * costs one more full-size texture and nothing per pixel.
- *
- * **What it returns is what the composite must then treat as the scene.** Bloom, occlusion and the
- * grade all read the scene texture, and reading the unresolved one would grade a stable picture
- * from an unstable source and put the crawl back on screen through the bloom.
- */
 export declare class TemporalPass {
     private readonly gl;
     /**
@@ -27,6 +14,21 @@ export declare class TemporalPass {
     private readonly vao;
     /** The pair, and which of them the next resolve writes into. */
     private textures;
+    /**
+     * Each pixel's flicker record, a pair beside the history's and swapped with it: see the
+     * anti-flicker in `temporalAa.ts`. In the history's own format, which holds what the record does —
+     * a change and a sample are colours' luma, and eight bits hold them wherever eight bits hold the
+     * colour.
+     */
+    private records;
+    /** The rest of each pixel's record — depth, pull and recent swing — beside the first. */
+    private motions;
+    /**
+     * Whether the records can be half float, which the depth in them needs. Asked of the context
+     * rather than taken from the scene's format, since a record of an eight-bit scene still holds
+     * metres. Without it the anti-flicker is off and the resolve is the one before it existed.
+     */
+    private readonly recordFloat;
     private framebuffers;
     private write;
     private width;
@@ -49,6 +51,6 @@ export declare class TemporalPass {
      * first frame, the frame after a resize and the frame after a cut pass zero, and the shader
      * then returns this frame before it touches depth or history at all.
      */
-    temporalResolve(scene: WebGLTexture, depth: WebGLTexture, reprojection: Float32Array, width: number, height: number, blend: number): WebGLTexture;
+    temporalResolve(scene: WebGLTexture, depth: WebGLTexture, reprojection: Float32Array, width: number, height: number, blend: number, periodStart: boolean, depthToViewZ: Float32Array): WebGLTexture;
     dispose(): void;
 }

package/dist/render/temporalPass.js

@@ -14,6 +14,8 @@ import { TEMPORAL_RESOLVE_FRAG } from './shaders/temporalResolve.js';
  * grade all read the scene texture, and reading the unresolved one would grade a stable picture
  * from an unstable source and put the crawl back on screen through the bloom.
  */
+/** The resolve's three outputs: the picture and the two halves of the flicker record. */
+const DRAW_ALL = [0x8ce0, 0x8ce1, 0x8ce2]; // COLOR_ATTACHMENT0, 1, 2
 export class TemporalPass {
     gl;
     floatColor;
@@ -22,6 +24,21 @@ export class TemporalPass {
     vao;
     /** The pair, and which of them the next resolve writes into. */
     textures = [null, null];
+    /**
+     * Each pixel's flicker record, a pair beside the history's and swapped with it: see the
+     * anti-flicker in `temporalAa.ts`. In the history's own format, which holds what the record does —
+     * a change and a sample are colours' luma, and eight bits hold them wherever eight bits hold the
+     * colour.
+     */
+    records = [null, null];
+    /** The rest of each pixel's record — depth, pull and recent swing — beside the first. */
+    motions = [null, null];
+    /**
+     * Whether the records can be half float, which the depth in them needs. Asked of the context
+     * rather than taken from the scene's format, since a record of an eight-bit scene still holds
+     * metres. Without it the anti-flicker is off and the resolve is the one before it existed.
+     */
+    recordFloat;
     framebuffers = [null, null];
     write = 0;
     width = 0;
@@ -38,6 +55,7 @@ export class TemporalPass {
     floatColor) {
         this.gl = gl;
         this.floatColor = floatColor;
+        this.recordFloat = gl.getExtension('EXT_color_buffer_float') !== null;
         this.program = compileProgram(gl, FULLSCREEN_VERT, TEMPORAL_RESOLVE_FRAG, 'temporalResolve');
         this.uniforms = uniformLocations(gl, this.program, 'temporalPass');
         const vao = gl.createVertexArray();
@@ -54,24 +72,36 @@ export class TemporalPass {
         for (let i = 0; i < 2; i++) {
             if (this.textures[i] === null)
                 this.textures[i] = gl.createTexture();
-            gl.bindTexture(gl.TEXTURE_2D, this.textures[i]);
-            if (this.floatColor) {
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, width, height, 0, gl.RGBA, gl.HALF_FLOAT, null);
-            }
-            else {
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            if (this.records[i] === null)
+                this.records[i] = gl.createTexture();
+            if (this.motions[i] === null)
+                this.motions[i] = gl.createTexture();
+            for (const texture of [this.textures[i], this.records[i], this.motions[i]]) {
+                gl.bindTexture(gl.TEXTURE_2D, texture);
+                if (texture === this.textures[i] ? this.floatColor : this.recordFloat) {
+                    /* The depth record is two numbers a pixel: metres, and how far they swing. */
+                    const pair = texture === this.motions[i];
+                    gl.texImage2D(gl.TEXTURE_2D, 0, pair ? gl.RG16F : gl.RGBA16F, width, height, 0, pair ? gl.RG : gl.RGBA, gl.HALF_FLOAT, null);
+                }
+                else {
+                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+                }
+                /* Linear, because the history is sampled between texels wherever the reprojection lands;
+                   clamped, because a sample that wrapped would pull the far edge of the screen into the
+                   corner — and the shader rejects an off-screen reprojection before it can anyway. */
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
             }
-            /* Linear, because the history is sampled between texels wherever the reprojection lands;
-               clamped, because a sample that wrapped would pull the far edge of the screen into the
-               corner — and the shader rejects an off-screen reprojection before it can anyway. */
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
             if (this.framebuffers[i] === null)
                 this.framebuffers[i] = gl.createFramebuffer();
             gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffers[i]);
             gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.textures[i], 0);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this.records[i], 0);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT2, gl.TEXTURE_2D, this.motions[i], 0);
+            /* Per framebuffer, so set once here: the resolve writes the picture and the record. */
+            gl.drawBuffers(DRAW_ALL);
         }
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
@@ -82,7 +112,7 @@ export class TemporalPass {
      * first frame, the frame after a resize and the frame after a cut pass zero, and the shader
      * then returns this frame before it touches depth or history at all.
      */
-    temporalResolve(scene, depth, reprojection, width, height, blend) {
+    temporalResolve(scene, depth, reprojection, width, height, blend, periodStart, depthToViewZ) {
         const { gl } = this;
         this.ensureSize(width, height);
         const target = this.write;
@@ -103,9 +133,18 @@ export class TemporalPass {
         gl.activeTexture(gl.TEXTURE2);
         gl.bindTexture(gl.TEXTURE_2D, depth);
         gl.uniform1i(this.uniforms['uDepth'] ?? null, 2);
+        gl.activeTexture(gl.TEXTURE3);
+        gl.bindTexture(gl.TEXTURE_2D, this.records[history]);
+        gl.uniform1i(this.uniforms['uFlicker'] ?? null, 3);
+        gl.activeTexture(gl.TEXTURE4);
+        gl.bindTexture(gl.TEXTURE_2D, this.motions[history]);
+        gl.uniform1i(this.uniforms['uFlickerMotion'] ?? null, 4);
+        gl.uniform4fv(this.uniforms['uDepthToViewZ'] ?? null, depthToViewZ);
+        gl.uniform1f(this.uniforms['uAntiFlicker'] ?? null, this.recordFloat ? 1 : 0);
         gl.uniformMatrix4fv(this.uniforms['uReprojection'] ?? null, false, reprojection);
         gl.uniform2f(this.uniforms['uTexel'] ?? null, 1 / width, 1 / height);
         gl.uniform1f(this.uniforms['uHistoryBlend'] ?? null, blend);
+        gl.uniform1f(this.uniforms['uPeriodStart'] ?? null, periodStart ? 1 : 0);
         gl.bindVertexArray(this.vao);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
         gl.bindVertexArray(null);
@@ -122,9 +161,15 @@ export class TemporalPass {
         for (let i = 0; i < 2; i++) {
             if (this.textures[i] !== null)
                 gl.deleteTexture(this.textures[i]);
+            if (this.records[i] !== null)
+                gl.deleteTexture(this.records[i]);
+            if (this.motions[i] !== null)
+                gl.deleteTexture(this.motions[i]);
             if (this.framebuffers[i] !== null)
                 gl.deleteFramebuffer(this.framebuffers[i]);
             this.textures[i] = null;
+            this.records[i] = null;
+            this.motions[i] = null;
             this.framebuffers[i] = null;
         }
         gl.deleteProgram(this.program);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@driftengine/core",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "description": "DriftEngine reusable browser 3D runtime",
   "license": "Apache-2.0",
   "type": "module",
@@ -29,8 +29,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@driftengine/drft": "4.4.1",
-    "@driftengine/physics": "4.4.1",
+    "@driftengine/drft": "4.4.2",
+    "@driftengine/physics": "4.4.2",
     "gl-matrix": "^3.4.3"
   },
   "author": "Drift Technologies",
@@ -63,8 +63,8 @@
     "prepack": "node ../../scripts/build.mjs @driftengine/core"
   },
   "devDependencies": {
-    "@driftengine/nav": "4.4.1",
-    "@driftengine/network": "4.4.1",
-    "@driftengine/texture": "4.4.1"
+    "@driftengine/nav": "4.4.2",
+    "@driftengine/network": "4.4.2",
+    "@driftengine/texture": "4.4.2"
   }
 }

package/src/render/backend/webgl2/renderer.ts

@@ -1263,6 +1263,9 @@ export class WebGL2Renderer implements RendererApi {
    * Scratch, filled in `endFrame`, which may not allocate.
    */
   private frameProjection: ReadonlyMat4 | null = null;
+  /** The temporal resolve's depth-to-metres row, from the inverse of `frameProjection`. */
+  private readonly taaInvProjection = mat4.create();
+  private readonly taaDepthToViewZ = Float32Array.of(0, 0, 0, 1);
   private readonly aoInvProjection = mat4.create();
   private readonly aoProjScale = new Float32Array(2);
   /**
@@ -6193,7 +6196,14 @@ export class WebGL2Renderer implements RendererApi {
     const view = this.frameViewProj;
     const blur = this.quality.cameraMotionBlur * this.motionBlurScale;
     let motion: { reprojection: Float32Array; strength: number; max: number } | undefined;
-    let temporal: { reprojection: Float32Array; blend: number } | undefined;
+    let temporal:
+      | {
+          reprojection: Float32Array;
+          blend: number;
+          periodStart: boolean;
+          depthToViewZ: Float32Array;
+        }
+      | undefined;
     /*
      * **Both effects want the same one matrix**, so it is built once when either asks. The
      * reprojection was previously kept only while the blur was on, which is why this reads as it
@@ -6222,9 +6232,19 @@ export class WebGL2Renderer implements RendererApi {
        * its early exit on it — so this is present every jittered frame rather than absent on some,
        * and the pass still runs and fills the history for the next one.
        */
+      /* The anti-flicker's same-surface test reads depths in metres, as the occlusion does. */
+      if (this.frameProjection !== null) {
+        mat4.invert(this.taaInvProjection, this.frameProjection);
+        this.taaDepthToViewZ[0] = this.taaInvProjection[10] ?? 0;
+        this.taaDepthToViewZ[1] = this.taaInvProjection[14] ?? 0;
+        this.taaDepthToViewZ[2] = this.taaInvProjection[11] ?? 0;
+        this.taaDepthToViewZ[3] = this.taaInvProjection[15] ?? 1;
+      }
       temporal = {
         reprojection: this.reprojection as Float32Array,
         blend: this.temporalHistoryUsable ? TEMPORAL_HISTORY_BLEND : 0,
+        periodStart: this.temporalHistory.periodStart,
+        depthToViewZ: this.taaDepthToViewZ,
       };
     }
 

package/src/render/backend/webgpu/postPass.ts

@@ -331,7 +331,37 @@ export function postPipeline(
   format: GPUTextureFormat,
   blend?: GPUBlendState,
 ): GPURenderPipeline {
-  return cache.get(key, () => ({
+  return cache.get(key, () =>
+    describePost(device, layout, key, fragment, [
+      blend === undefined ? { format } : { format, blend },
+    ]),
+  );
+}
+
+/**
+ * The same over several colour targets, in the fragment's output order: the temporal resolve
+ * writes its picture and each pixel's flicker record in one pass. `targets` is the caller's, held
+ * rather than built per call, since this is asked for every frame.
+ */
+export function postPipelineTargets(
+  cache: PipelineCache,
+  device: GPUDevice,
+  layout: GPUBindGroupLayout,
+  key: string,
+  fragment: string,
+  targets: GPUColorTargetState[],
+): GPURenderPipeline {
+  return cache.get(key, () => describePost(device, layout, key, fragment, targets));
+}
+
+function describePost(
+  device: GPUDevice,
+  layout: GPUBindGroupLayout,
+  key: string,
+  fragment: string,
+  targets: GPUColorTargetState[],
+): GPURenderPipelineDescriptor {
+  return {
     label: key,
     layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
     vertex: {
@@ -341,7 +371,7 @@ export function postPipeline(
     fragment: {
       module: shaderModule(device, { label: key, code: fragment }),
       entryPoint: 'main',
-      targets: [blend === undefined ? { format } : { format, blend }],
+      targets,
     },
     /*
      * No depth at all, which is what makes this different from every other pipeline here: the
@@ -349,11 +379,11 @@ export function postPipeline(
      * disables the test, the write and culling by hand for the same draw.
      */
     primitive: { topology: 'triangle-list' as const, cullMode: 'none' as const },
-  }));
+  };
 }
 
 /**
- * The temporal resolve's block and its three inputs.
+ * The temporal resolve's block and its four inputs.
  *
  * Named like the occlusion's beside it, and for the same reason `BLOOM_DOWNSAMPLE_FIELDS` is: a
  * block read by assumption rather than by name is a uniform written to the wrong offset, which

package/src/render/backend/webgpu/renderer.ts

@@ -190,6 +190,7 @@ import {
   createPostStageLayout,
   depthResolvePipeline,
   postPipeline,
+  postPipelineTargets,
   sceneColorFormat,
   AO_BLUR_FIELDS,
   AO_BLUR_FRAG_WGSL,
@@ -1926,6 +1927,16 @@ export class WebGPURenderer implements RendererApi {
   private taaUniforms!: GPUBuffer;
   private taaTextures: (GPUTexture | null)[] = [null, null];
   private taaViews: (GPUTextureView | null)[] = [null, null];
+  /** Each pixel's flicker record, paired with the history and swapped with it: see `temporalAa.ts`. */
+  private taaRecords: (GPUTexture | null)[] = [null, null];
+  private taaRecordViews: (GPUTextureView | null)[] = [null, null];
+  /** The rest of each pixel's record — depth, pull and recent swing — beside the first. */
+  private taaMotions: (GPUTexture | null)[] = [null, null];
+  private taaMotionViews: (GPUTextureView | null)[] = [null, null];
+  /** The resolve's depth-to-metres row, from the inverse of `frameProjection`. */
+  private readonly taaInvProjection = new Float32Array(16);
+  /** The resolve's two targets, the picture and the record, held for the pipeline cache's sake. */
+  private taaTargets: GPUColorTargetState[] = [];
   /** Group `i` reads history `i` and the pass writes into the other one. */
   private taaBindGroups: (GPUBindGroup | null)[] = [null, null];
   private taaWrite = 0;
@@ -6395,6 +6406,8 @@ export class WebGPURenderer implements RendererApi {
     this.taaLayout = createPostStageLayout(device, TAA_UNIFORMS, TAA_FRAG_SIZE, [
       { binding: TAA_TEXTURES.uScene },
       { binding: TAA_TEXTURES.uHistory },
+      { binding: TAA_TEXTURES.uFlicker },
+      { binding: TAA_TEXTURES.uFlickerMotion },
       { binding: TAA_TEXTURES.uDepth, filterable: false },
     ]);
     this.taaUniforms = device.createBuffer({
@@ -10468,8 +10481,10 @@ export class WebGPURenderer implements RendererApi {
     if (!this.temporalJittering) return;
     const write = this.taaWrite;
     const target = this.taaViews[write];
+    const record = this.taaRecordViews[write];
+    const motion = this.taaMotionViews[write];
     const group = this.taaBindGroups[1 - write];
-    if (target === null || group === null) return;
+    if (target === null || record === null || motion === null || group === null) return;
     const { device } = this.surface;
 
     const f = this.taaFloats;
@@ -10478,6 +10493,22 @@ export class WebGPURenderer implements RendererApi {
     f[at('uTexel')] = 1 / this.renderWidth;
     f[at('uTexel') + 1] = 1 / this.renderHeight;
     f[at('uHistoryBlend')] = this.temporalHistoryUsable ? TEMPORAL_HISTORY_BLEND : 0;
+    f[at('uPeriodStart')] = this.temporalHistory.periodStart ? 1 : 0;
+    /* The anti-flicker's same-surface test reads depths in metres, as the occlusion does. */
+    const depthRow = at('uDepthToViewZ');
+    if (this.frameProjection !== null) {
+      mat4.invert(this.taaInvProjection, this.frameProjection);
+      f[depthRow] = this.taaInvProjection[10] ?? 0;
+      f[depthRow + 1] = this.taaInvProjection[14] ?? 0;
+      f[depthRow + 2] = this.taaInvProjection[11] ?? 0;
+      f[depthRow + 3] = this.taaInvProjection[15] ?? 1;
+    } else {
+      f[depthRow] = 0;
+      f[depthRow + 1] = 0;
+      f[depthRow + 2] = 0;
+      f[depthRow + 3] = 1;
+    }
+    f[at('uAntiFlicker')] = 1;
     device.queue.writeBuffer(this.taaUniforms, 0, this.taaStaging);
 
     const pass = encoder.beginRenderPass({
@@ -10485,16 +10516,18 @@ export class WebGPURenderer implements RendererApi {
       timestampWrites: this.gpuTimer.writesFor(),
       colorAttachments: [
         { view: target, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 1] },
+        { view: record, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 0] },
+        { view: motion, loadOp: 'clear', storeOp: 'store', clearValue: [0, 0, 0, 0] },
       ],
     });
     pass.setPipeline(
-      postPipeline(
+      postPipelineTargets(
         this.pipelines,
         device,
         this.taaLayout,
         'post.taa',
         TEMPORAL_RESOLVE_FRAG_WGSL,
-        sceneColorFormat(this.quality.hdrScene),
+        this.taaTargets,
       ),
     );
     pass.setBindGroup(0, group, [0]);
@@ -14551,7 +14584,28 @@ export class WebGPURenderer implements RendererApi {
       });
       this.taaTextures[i] = texture;
       this.taaViews[i] = texture.createView();
+      /* The records in half float, whatever the picture's format: one of them holds metres. */
+      this.taaRecords[i]?.destroy();
+      const record = device.createTexture({
+        label: `post.taaRecord${i}`,
+        size: [width, height],
+        format: 'rgba16float',
+        usage: USAGE,
+      });
+      this.taaRecords[i] = record;
+      this.taaRecordViews[i] = record.createView();
+      this.taaMotions[i]?.destroy();
+      /* Two numbers a pixel: the depth its sample stood at, in metres, and how far that swings. */
+      const motion = device.createTexture({
+        label: `post.taaMotion${i}`,
+        size: [width, height],
+        format: 'rg16float',
+        usage: USAGE,
+      });
+      this.taaMotions[i] = motion;
+      this.taaMotionViews[i] = motion.createView();
     }
+    this.taaTargets = [{ format }, { format: 'rgba16float' }, { format: 'rg16float' }];
     this.taaWrite = 0;
     /* A resized target is a new texture, so whatever the history held is gone. */
     this.temporalHistory.invalidate();
@@ -14747,7 +14801,17 @@ export class WebGPURenderer implements RendererApi {
       const scene = this.sceneColorView;
       const history = this.taaViews[i];
       const resolved = this.taaViews[1 - i];
-      if (scene === null || history === null || resolved === null) continue;
+      const record = this.taaRecordViews[i];
+      const motion = this.taaMotionViews[i];
+      if (
+        scene === null ||
+        history === null ||
+        resolved === null ||
+        record === null ||
+        motion === null
+      ) {
+        continue;
+      }
       this.taaBindGroups[i] = device.createBindGroup({
         label: `post.taaBindGroup${i}`,
         layout: this.taaLayout,
@@ -14755,6 +14819,8 @@ export class WebGPURenderer implements RendererApi {
           { binding: TAA_UNIFORMS, resource: { buffer: this.taaUniforms, size: TAA_FRAG_SIZE } },
           ...entry(TAA_TEXTURES.uScene, scene),
           ...entry(TAA_TEXTURES.uHistory, history),
+          ...entry(TAA_TEXTURES.uFlicker, record),
+          ...entry(TAA_TEXTURES.uFlickerMotion, motion),
           ...entry(TAA_TEXTURES.uDepth, this.resolvedDepthView, true),
         ],
       });