@driftengine/core 4.4.0 → 4.4.2

package/src/render/temporalPass.ts

@@ -15,6 +15,9 @@ import { TEMPORAL_RESOLVE_FRAG } from './shaders/temporalResolve.ts';
  * 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 {
   private readonly program: WebGLProgram;
   private readonly uniforms: Record<string, WebGLUniformLocation | null>;
@@ -22,6 +25,21 @@ export class TemporalPass {
 
   /** The pair, and which of them the next resolve writes into. */
   private textures: (WebGLTexture | null)[] = [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.
+   */
+  private records: (WebGLTexture | null)[] = [null, null];
+  /** The rest of each pixel's record — depth, pull and recent swing — beside the first. */
+  private motions: (WebGLTexture | null)[] = [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.
+   */
+  private readonly recordFloat: boolean;
   private framebuffers: (WebGLFramebuffer | null)[] = [null, null];
   private write = 0;
 
@@ -40,6 +58,7 @@ export class TemporalPass {
      */
     private readonly floatColor: boolean,
   ) {
+    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();
@@ -55,19 +74,45 @@ 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]);
@@ -78,6 +123,22 @@ export class TemporalPass {
         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);
   }
@@ -96,6 +157,8 @@ export class TemporalPass {
     width: number,
     height: number,
     blend: number,
+    periodStart: boolean,
+    depthToViewZ: Float32Array,
   ): WebGLTexture {
     const { gl } = this;
     this.ensureSize(width, height);
@@ -120,10 +183,19 @@ 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);
@@ -141,8 +213,12 @@ export class TemporalPass {
     const { gl } = this;
     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/dist/render/shaders/agx.d.ts

@@ -1,31 +0,0 @@
-/**
- * AgX: a tone curve whose shade stays open, for scenes lit mostly by bounce.
- *
- * **What ACES does to a courtyard.** The reference RRT and ODT are graded for a dark cinema, and
- * their toe is steep: a surface at 1% of white leaves the curve at 4 of 255. A room lit by light
- * bounced off its own walls lives in exactly that range, so its arcades read black beside renders
- * of the same model, and the grime in its stone reads as ink. Measured on a bought courtyard: 39%
- * of the frame below 16 of 255, against about 5% in the model maker's own renders.
- *
- * **AgX encodes the scene logarithmically and draws one sigmoid through it**, Troy Sobotka's
- * construction as Blender, Filament and three.js ship it. The same 1% leaves at 18 of 255, middle
- * grey lands at half the display range, and a highlight desaturates toward white instead of
- * clipping to a hue. What it gives up is ACES's punch in the midtones: the same scene reads
- * flatter, which a grade adds back as a look where ACES bakes it into the conversion. What would
- * make it the wrong choice is a world graded against three.js's or Unreal's ACES, which is the
- * match `aces` exists for.
- *
- * The constants are the Filament and three.js ones: Rec. 2020 primaries, the inset and outset
- * matrices, an encoding from 2^-10 to 2^6.5 times middle grey, and the iolite polynomial fit of
- * the default contrast curve, whose mean squared error against Blender's is 3.7e-6.
- */
-/**
- * `agxFilmic(vec3)`: linear sRGB in, linear sRGB out, clamped to [0, 1]. Reads `uOutputExposure`,
- * which the including source declares.
- */
-export declare const AGX_GLSL = "\nvec3 agxContrast(vec3 x) {\n  vec3 x2 = x * x;\n  vec3 x4 = x2 * x2;\n  return 15.5 * x4 * x2 - 40.14 * x4 * x + 31.96 * x4 - 6.868 * x2 * x + 0.4298 * x2 + 0.1191 * x - 0.00232;\n}\n\nvec3 agxFilmic(vec3 x) {\n  x *= uOutputExposure;\n  // Columns, as GLSL reads them: linear sRGB to linear Rec. 2020, then the inset.\n  const mat3 SRGB_TO_REC2020 = mat3(\n    0.6274, 0.0691, 0.0164,\n    0.3293, 0.9195, 0.0880,\n    0.0433, 0.0113, 0.8956\n  );\n  const mat3 AGX_INSET = mat3(\n    0.856627153315983, 0.137318972929847, 0.11189821299995,\n    0.0951212405381588, 0.761241990602591, 0.0767994186031903,\n    0.0482516061458583, 0.101439036467562, 0.811302368396859\n  );\n  const mat3 AGX_OUTSET = mat3(\n    1.1271005818144368, -0.1413297634984383, -0.14132976349843826,\n    -0.11060664309660323, 1.157823702216272, -0.11060664309660294,\n    -0.016493938717834573, -0.016493938717834257, 1.2519364065950405\n  );\n  const mat3 REC2020_TO_SRGB = mat3(\n    1.6605, -0.1246, -0.0182,\n    -0.5876, 1.1329, -0.1006,\n    -0.0728, -0.0083, 1.1187\n  );\n  vec3 c = AGX_INSET * (SRGB_TO_REC2020 * x);\n  /* log2 of middle grey times 2^-10 and 2^6.5: -12.47393 and 4.026069, 16.5 stops apart. */\n  c = clamp((log2(max(c, vec3(1e-10))) + 12.47393) / 16.5, 0.0, 1.0);\n  c = AGX_OUTSET * agxContrast(c);\n  c = pow(max(c, vec3(0.0)), vec3(2.2));\n  return clamp(REC2020_TO_SRGB * c, 0.0, 1.0);\n}\n";
-/**
- * The curve for a neutral grey, as the shader computes it: every matrix above keeps grey grey, so
- * one channel is the whole of it. For a test to pin to hand-derived values.
- */
-export declare function agxGrey(linear: number, exposure?: number): number;

package/dist/render/shaders/agx.js

@@ -1,81 +0,0 @@
-/**
- * AgX: a tone curve whose shade stays open, for scenes lit mostly by bounce.
- *
- * **What ACES does to a courtyard.** The reference RRT and ODT are graded for a dark cinema, and
- * their toe is steep: a surface at 1% of white leaves the curve at 4 of 255. A room lit by light
- * bounced off its own walls lives in exactly that range, so its arcades read black beside renders
- * of the same model, and the grime in its stone reads as ink. Measured on a bought courtyard: 39%
- * of the frame below 16 of 255, against about 5% in the model maker's own renders.
- *
- * **AgX encodes the scene logarithmically and draws one sigmoid through it**, Troy Sobotka's
- * construction as Blender, Filament and three.js ship it. The same 1% leaves at 18 of 255, middle
- * grey lands at half the display range, and a highlight desaturates toward white instead of
- * clipping to a hue. What it gives up is ACES's punch in the midtones: the same scene reads
- * flatter, which a grade adds back as a look where ACES bakes it into the conversion. What would
- * make it the wrong choice is a world graded against three.js's or Unreal's ACES, which is the
- * match `aces` exists for.
- *
- * The constants are the Filament and three.js ones: Rec. 2020 primaries, the inset and outset
- * matrices, an encoding from 2^-10 to 2^6.5 times middle grey, and the iolite polynomial fit of
- * the default contrast curve, whose mean squared error against Blender's is 3.7e-6.
- */
-/**
- * `agxFilmic(vec3)`: linear sRGB in, linear sRGB out, clamped to [0, 1]. Reads `uOutputExposure`,
- * which the including source declares.
- */
-export const AGX_GLSL = `
-vec3 agxContrast(vec3 x) {
-  vec3 x2 = x * x;
-  vec3 x4 = x2 * x2;
-  return 15.5 * x4 * x2 - 40.14 * x4 * x + 31.96 * x4 - 6.868 * x2 * x + 0.4298 * x2 + 0.1191 * x - 0.00232;
-}
-
-vec3 agxFilmic(vec3 x) {
-  x *= uOutputExposure;
-  // Columns, as GLSL reads them: linear sRGB to linear Rec. 2020, then the inset.
-  const mat3 SRGB_TO_REC2020 = mat3(
-    0.6274, 0.0691, 0.0164,
-    0.3293, 0.9195, 0.0880,
-    0.0433, 0.0113, 0.8956
-  );
-  const mat3 AGX_INSET = mat3(
-    0.856627153315983, 0.137318972929847, 0.11189821299995,
-    0.0951212405381588, 0.761241990602591, 0.0767994186031903,
-    0.0482516061458583, 0.101439036467562, 0.811302368396859
-  );
-  const mat3 AGX_OUTSET = mat3(
-    1.1271005818144368, -0.1413297634984383, -0.14132976349843826,
-    -0.11060664309660323, 1.157823702216272, -0.11060664309660294,
-    -0.016493938717834573, -0.016493938717834257, 1.2519364065950405
-  );
-  const mat3 REC2020_TO_SRGB = mat3(
-    1.6605, -0.1246, -0.0182,
-    -0.5876, 1.1329, -0.1006,
-    -0.0728, -0.0083, 1.1187
-  );
-  vec3 c = AGX_INSET * (SRGB_TO_REC2020 * x);
-  /* log2 of middle grey times 2^-10 and 2^6.5: -12.47393 and 4.026069, 16.5 stops apart. */
-  c = clamp((log2(max(c, vec3(1e-10))) + 12.47393) / 16.5, 0.0, 1.0);
-  c = AGX_OUTSET * agxContrast(c);
-  c = pow(max(c, vec3(0.0)), vec3(2.2));
-  return clamp(REC2020_TO_SRGB * c, 0.0, 1.0);
-}
-`;
-/**
- * The curve for a neutral grey, as the shader computes it: every matrix above keeps grey grey, so
- * one channel is the whole of it. For a test to pin to hand-derived values.
- */
-export function agxGrey(linear, exposure = 1) {
-    const x = Math.max(linear * exposure, 1e-10);
-    const t = Math.min(Math.max((Math.log2(x) + 12.47393) / 16.5, 0), 1);
-    const t2 = t * t;
-    const t4 = t2 * t2;
-    const s = 15.5 * t4 * t2 -
-        40.14 * t4 * t +
-        31.96 * t4 -
-        6.868 * t2 * t +
-        0.4298 * t2 +
-        0.1191 * t -
-        0.00232;
-    return Math.min(Math.max(Math.max(s, 0) ** 2.2, 0), 1);
-}