@driftengine/core 4.11.1 → 4.13.0

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

@@ -208,6 +208,7 @@ import {
   packSurfaceLayers,
 } from '../../surfaceLayers.ts';
 import type { SurfaceLayers } from '../../surfaceLayers.ts';
+import { LOOK_FLOATS, asksLayerLooks, packLayerLooks } from '../../surfaceLayerLooks.ts';
 import {
   frameReflectionsRefused,
   resolveFrameReflections,
@@ -252,8 +253,9 @@ import {
   OUTPUT_TRANSFORM_CODE,
   RUSH_REACH_UV,
   clampMotionShare,
-  forwardTransformCode,
 } from '../../vertexDefaults.ts';
+import { gradeColorInto } from '../../gradeColor.ts';
+import { interfaceGrade, passGradeCode, passGradeExposure } from '../../passGrade.ts';
 import { FRINGE_FLOATS, resolveFringe } from '../../shaders/fringe.ts';
 import { displayHeadroom, type DisplayRange } from '../../displayRange.ts';
 import {
@@ -1511,7 +1513,7 @@ export class WebGPURenderer implements RendererApi {
    * **Resolved by the caller and held, rather than defaulted per use.** Every shadow term
    * below reads it, and the constants they replaced were `DEFAULT_RENDER_QUALITY` copies —
    * which measured wrong the moment a scene overrode one. `demo/dayClock` resolves
-   * `directionalShadowMaxSlope` to 9 where the default is 3.
+   * `directionalShadowMaxSlope` to 9 where the default was 3 (60 since 4.13.0).
    */
   readonly quality: Readonly<RenderQuality>;
 
@@ -2225,6 +2227,7 @@ export class WebGPURenderer implements RendererApi {
   private readonly mediumUpsampleUniforms: GPUBuffer;
   private readonly mediumUpsampleStaging = new ArrayBuffer(MEDIUM_UPSAMPLE_SIZE);
   private readonly mediumUpsampleFloats = new Float32Array(this.mediumUpsampleStaging);
+  private readonly mediumUpsampleInts = new Int32Array(this.mediumUpsampleStaging);
   private mediumUpsampleGroup: GPUBindGroup | null = null;
   /** The inverse projection the composite linearises a depth with, built once per frame. */
   private readonly mediumInvProjection = mat4.create();
@@ -2475,6 +2478,12 @@ export class WebGPURenderer implements RendererApi {
    */
   private readonly skyUniforms: UniformRing;
   private readonly skyFloats = new Float32Array(SKY_UNIFORM_SIZE / 4);
+  /** The same block's ints: the grade the sky draws with. */
+  private readonly skyInts = new Int32Array(this.skyFloats.buffer);
+  /** `clearOf`'s scratch: a clear colour as the open target takes it. */
+  private readonly gradedClear: Vec3 = [0, 0, 0];
+  /** An inset's clear as its quad's uniform, rewritten in place: the colour and an alpha of 1. */
+  private readonly insetClear = new Float32Array([0, 0, 0, 1]);
   private readonly skyBindGroup: GPUBindGroup;
   /** The camera's inverse with the clip correction undone, rebuilt once a frame. */
   private readonly skyInvViewProj = new Float32Array(16);
@@ -2559,6 +2568,8 @@ export class WebGPURenderer implements RendererApi {
   private decalUniforms!: GPUBuffer;
   private readonly decalStaging = new ArrayBuffer(DECAL_SLOT * MAX_DRAWN_DECALS);
   private readonly decalFloats = new Float32Array(this.decalStaging);
+  /** The same slots' ints: the grade the frame under the marks was drawn with. */
+  private readonly decalInts = new Int32Array(this.decalStaging);
   private decalBindGroup: GPUBindGroup | null = null;
   /** Said once where a mark cannot be drawn at all, rather than dropped in silence. */
   private decalsRefused = false;
@@ -2742,9 +2753,10 @@ export class WebGPURenderer implements RendererApi {
      * still owed.
      */
     this.pass = null;
-    this.mirrorClearColor[0] = clearColor[0];
-    this.mirrorClearColor[1] = clearColor[1];
-    this.mirrorClearColor[2] = clearColor[2];
+    const mirrorClear = this.clearOf(clearColor);
+    this.mirrorClearColor[0] = mirrorClear[0];
+    this.mirrorClearColor[1] = mirrorClear[1];
+    this.mirrorClearColor[2] = mirrorClear[2];
     this.pendingClearMask |= MIRROR_TARGET;
     this.reflectionPassActive = true;
     /* Closed in `endPlanarReflection`, matching `renderer.ts:2054`. */
@@ -2915,6 +2927,8 @@ export class WebGPURenderer implements RendererApi {
     i[atF('uClipEnabled')] = this.reflectionPassActive ? 1 : 0;
     f.set(this.reflection?.clipPlane ?? NO_CLIP_PLANE, atF('uClipPlane'));
     f[atF('uSheen')] = sheen;
+    i[atF('uOutputTransform')] = this.passGrade();
+    f[atF('uOutputExposure')] = this.passGradeExposure();
     f[atF('uFilmRoughness')] = Math.min(1, Math.max(0, options.roughness ?? 0));
     f[atF('uFilmRoughnessCycles')] = Math.max(0.01, options.roughnessCyclesPerMetre ?? 60);
 
@@ -3015,6 +3029,8 @@ export class WebGPURenderer implements RendererApi {
   private readonly projection = new Float32Array(PROJECTION_FLOATS);
   /** `uLayers`, the material's layers packed by `packSurfaceLayers`. */
   private readonly layerFloats = new Float32Array(LAYER_FLOATS);
+  /** `uLayerLooks`, the material's layer picks and looks packed by `packLayerLooks`. */
+  private readonly lookFloats = new Float32Array(LOOK_FLOATS);
   /**
    * `uGlassTint` as the material leaves it, its light from behind and that light's colour, which a
    * pane overwrites for its own draw and `releaseSeeThrough` puts back. See `transmission.ts`.
@@ -3588,6 +3604,10 @@ export class WebGPURenderer implements RendererApi {
       packSurfaceLayers(layers, this.layerFloats);
       f.set(this.layerFloats, this.materialField('uLayers'));
       if (layers !== null) this.enableLit('LAYERED');
+      /* And which layer of shared arrays each reads, with its look: layerLooks.ts. */
+      packLayerLooks(layers, this.lookFloats);
+      f.set(this.lookFloats, this.materialField('uLayerLooks'));
+      if (asksLayerLooks(layers)) this.enableLit('LAYER_LOOKS');
       f.set(this.modelParams, this.materialField('uModelParams'));
     });
     /*
@@ -3881,6 +3901,13 @@ export class WebGPURenderer implements RendererApi {
     const fragAt = (name: string): number => PANEL_FRAG_FIELDS[name]?.offset ?? 0;
     this.panelFrags.writeFloats(fragmentSlot, fragAt('uColor'), color);
     this.panelFrags.writeFloat(fragmentSlot, fragAt('uAlpha'), alpha);
+    /* An interface: the screen encode, never the curve. See `interfaceGrade`. */
+    this.panelFrags.writeInt(
+      fragmentSlot,
+      fragAt('uOutputTransform'),
+      interfaceGrade(this.passGrade()),
+    );
+    this.panelFrags.writeFloat(fragmentSlot, fragAt('uOutputExposure'), 1);
 
     const panelPipe = panelPipeline(this.targetPipelines(), this.surface.device, this.panelLayout);
     /* `allocate` already returns a byte offset, not an index. Multiplying by the stride
@@ -4014,8 +4041,8 @@ export class WebGPURenderer implements RendererApi {
       font.atlasWidth,
       font.atlasHeight,
     ]);
-    this.sdfTextFrags.writeInt(fragmentSlot, fragAt('uOutputTransform'), this.gradeCode());
-    this.sdfTextFrags.writeFloat(fragmentSlot, fragAt('uOutputExposure'), this.gradeExposure());
+    this.sdfTextFrags.writeInt(fragmentSlot, fragAt('uOutputTransform'), this.passGrade());
+    this.sdfTextFrags.writeFloat(fragmentSlot, fragAt('uOutputExposure'), this.passGradeExposure());
 
     const sdfPipe = sdfTextPipeline(
       this.blendedPipelines(),
@@ -4136,6 +4163,13 @@ export class WebGPURenderer implements RendererApi {
     this.textFrags.writeFloats(fragmentSlot, fragAt('uColor'), style.color);
     this.textFrags.writeFloat(fragmentSlot, fragAt('uGlow'), style.glow);
     this.textFrags.writeFloat(fragmentSlot, fragAt('uAlpha'), style.alpha);
+    /* An interface: the screen encode, never the curve. See `interfaceGrade`. */
+    this.textFrags.writeInt(
+      fragmentSlot,
+      fragAt('uOutputTransform'),
+      interfaceGrade(this.passGrade()),
+    );
+    this.textFrags.writeFloat(fragmentSlot, fragAt('uOutputExposure'), 1);
 
     const pass = this.openTextPass();
     if (pass === null) return;
@@ -4498,20 +4532,29 @@ export class WebGPURenderer implements RendererApi {
    * array allocated with the batch, so the frame loop still allocates nothing.
    */
   /**
-   * The output transform a forward pass should apply, and the exposure it should apply it at.
-   *
-   * The WebGPU half of `Renderer.gradeCode`, and it has to agree with it draw for draw: this is
-   * one verb with two implementations, and a frame that grades on one backend and not the other
-   * is the silent kind of disagreement. See that method for what the gate is protecting.
+   * The grade a pass applies to what it draws into the target open now, and the exposure it
+   * applies it at: the WebGPU half of `Renderer.passGrade`, and it has to agree with it draw for
+   * draw. The decision is `passGrade.ts`'s, so both halves only gather the state it is taken from.
    */
-  private gradeCode(): number {
-    return !this.hasComposite || !this.quality.hdrScene
-      ? forwardTransformCode(this.quality.outputTransform)
-      : 0;
+  private passGrade(): number {
+    const storing = this.probePassActive || this.capturePassActive;
+    const transform = this.quality.outputTransform;
+    return passGradeCode(storing, this.framePresented, this.resolveGrades(), transform);
+  }
+
+  private passGradeExposure(): number {
+    const storing = this.probePassActive || this.capturePassActive;
+    return passGradeExposure(storing, this.framePresented, this.resolveGrades(), this.exposure);
+  }
+
+  /** Whether the frame's resolve applies the transform, so the passes before it draw linear. */
+  private resolveGrades(): boolean {
+    return this.hasComposite && this.quality.hdrScene;
   }
 
-  private gradeExposure(): number {
-    return !this.hasComposite || !this.quality.hdrScene ? this.exposure : 1;
+  /** A clear colour as the open target takes it, graded as a pass would. See `gradeColor.ts`. */
+  private clearOf(color: Readonly<Vec3>): Vec3 {
+    return gradeColorInto(this.passGrade(), this.passGradeExposure(), color, this.gradedClear);
   }
 
   drawParticles(
@@ -4634,8 +4677,8 @@ export class WebGPURenderer implements RendererApi {
     if (has('uFogEnabled')) i[atF('uFogEnabled')] = batch.fog ? 1 : 0;
     /* Every material's fragment stage declares these, so they are unconditional like
        `uCameraPos` rather than guarded like the material-specific fields above. */
-    i[atF('uOutputTransform')] = this.gradeCode();
-    f[atF('uOutputExposure')] = this.gradeExposure();
+    i[atF('uOutputTransform')] = this.passGrade();
+    f[atF('uOutputExposure')] = this.passGradeExposure();
 
     const spriteGroup = batch.material === 'sprite' ? this.spriteFades(batch, camera, f) : null;
 
@@ -4889,6 +4932,8 @@ export class WebGPURenderer implements RendererApi {
     frags.writeInt(fragmentSlot, atF('uFogMode'), medium.fogMode);
     frags.writeFloat(fragmentSlot, atF('uFogNear'), medium.fogNear);
     frags.writeFloat(fragmentSlot, atF('uFogFar'), medium.fogFar);
+    frags.writeInt(fragmentSlot, atF('uOutputTransform'), this.passGrade());
+    frags.writeFloat(fragmentSlot, atF('uOutputExposure'), this.passGradeExposure());
     /*
      * **Written for every material, not only the one that reads it.** `arcane` is the only
      * plume whose block declares `uTint`, and the slot it lands in is past the end of fire's
@@ -5089,6 +5134,8 @@ export class WebGPURenderer implements RendererApi {
     /* No reflection pass yet: the shader's own "off" path, not an improvised one. */
     i[atF('uReflectionEnabled')] = mirror === null ? 0 : 1;
     i[atF('uReflectionFilterTaps')] = water.reflectionFilterTaps;
+    i[atF('uOutputTransform')] = this.passGrade();
+    f[atF('uOutputExposure')] = this.passGradeExposure();
     f[atF('uReflectionTexelSize')] = mirror === null ? 1 : 1 / mirror.width;
     f[atF('uReflectionTexelSize') + 1] = mirror === null ? 1 : 1 / mirror.height;
 
@@ -5241,6 +5288,8 @@ export class WebGPURenderer implements RendererApi {
     ring.writeFloats(fragmentSlot, at('uDustOffset'), options.driftM ?? NO_DRIFT);
     ring.writeFloat(fragmentSlot, at('uNear'), options.nearM ?? 0);
     ring.writeInt(fragmentSlot, at('uSamples'), this.quality.lightVolumeSamples);
+    ring.writeInt(fragmentSlot, at('uOutputTransform'), this.passGrade());
+    ring.writeFloat(fragmentSlot, at('uOutputExposure'), this.passGradeExposure());
 
     /*
      * The clamp that makes a beam end on the floor, and the snapshot it reads.
@@ -5464,6 +5513,10 @@ export class WebGPURenderer implements RendererApi {
     v[at('uTime')] = timeSeconds;
 
     this.windStreakFragFloats.set(tint, (WIND_STREAK_FRAG_FIELDS.uTint.offset ?? 0) / 4);
+    this.windStreakFragBlock[WIND_STREAK_FRAG_FIELDS.uOutputTransform.offset / 4] =
+      this.passGrade();
+    this.windStreakFragFloats[WIND_STREAK_FRAG_FIELDS.uOutputExposure.offset / 4] =
+      this.passGradeExposure();
 
     this.windStreakVerts.writeBlock(vertexSlot, this.windStreakVertBlock);
     this.windStreakFrags.writeBlock(fragmentSlot, this.windStreakFragBlock);
@@ -5569,6 +5622,8 @@ export class WebGPURenderer implements RendererApi {
     v[at('uWind') + 1] = windZ;
 
     this.flockFragFloats.set(tint, (FLOCK_FRAG_FIELDS.uTint.offset ?? 0) / 4);
+    this.flockFragBlock[FLOCK_FRAG_FIELDS.uOutputTransform.offset / 4] = this.passGrade();
+    this.flockFragFloats[FLOCK_FRAG_FIELDS.uOutputExposure.offset / 4] = this.passGradeExposure();
 
     this.flockVerts.writeBlock(vertexSlot, this.flockVertBlock);
     this.flockFrags.writeBlock(fragmentSlot, this.flockFragBlock);
@@ -5680,6 +5735,8 @@ export class WebGPURenderer implements RendererApi {
     f.set(core, atF('uCoreColor'));
     f.set(edge, atF('uEdgeColor'));
     f[atF('uCoreGain')] = coreGain;
+    i[atF('uOutputTransform')] = this.passGrade();
+    f[atF('uOutputExposure')] = this.passGradeExposure();
     f.set(camera.position, atF('uCameraPos'));
     /* The medium, through the same resolver every other pass here binds from. */
     const medium = resolveAtmosphere(
@@ -5816,8 +5873,8 @@ export class WebGPURenderer implements RendererApi {
     this.lineFrags.writeFloat(fragmentSlot, atF('uOpacity'), opacity);
     this.lineFrags.writeFloats(fragmentSlot, atF('uCameraPos'), camera.position);
     this.lineFrags.writeFloat(fragmentSlot, atF('uSoftness'), softness);
-    this.lineFrags.writeInt(fragmentSlot, atF('uOutputTransform'), this.gradeCode());
-    this.lineFrags.writeFloat(fragmentSlot, atF('uOutputExposure'), this.gradeExposure());
+    this.lineFrags.writeInt(fragmentSlot, atF('uOutputTransform'), this.passGrade());
+    this.lineFrags.writeFloat(fragmentSlot, atF('uOutputExposure'), this.passGradeExposure());
     /* The medium, through the same resolver every other pass here binds from. */
     const medium = resolveAtmosphere(
       env,
@@ -8475,9 +8532,10 @@ export class WebGPURenderer implements RendererApi {
      * at 92 MB a frame at 824x1830. `ensurePass` opens it on the first draw that wants it, which
      * for such a scene is after the last mirror, so it is opened once and cleared once.
      */
-    this.pendingClearColor[0] = clearColor[0];
-    this.pendingClearColor[1] = clearColor[1];
-    this.pendingClearColor[2] = clearColor[2];
+    const frameClear = this.clearOf(clearColor);
+    this.pendingClearColor[0] = frameClear[0];
+    this.pendingClearColor[1] = frameClear[1];
+    this.pendingClearColor[2] = frameClear[2];
     this.pendingClearMask = SCENE_TARGET;
     if (this.quality.deferFramePass) {
       this.pass = null;
@@ -8976,6 +9034,7 @@ export class WebGPURenderer implements RendererApi {
     f.set(this.transmission, at('uGlassTint'));
     /* Nor layers: one layer until a material asks for more. */
     f.fill(0, at('uLayers'), at('uLayers') + LAYER_FLOATS);
+    f.fill(0, at('uLayerLooks'), at('uLayerLooks') + LOOK_FLOATS);
     f[at('uCutout')] = 0;
     f[at('uCutout') + 1] = 0;
     this.cutoutResolveStaged = 'hard';
@@ -9233,8 +9292,8 @@ export class WebGPURenderer implements RendererApi {
      * `screenEffects` off, or on without `hdrScene`, the mesh pass writes what reaches the
      * canvas and grades as it always did.
      */
-    i[at('uOutputTransform')] = this.gradeCode();
-    f[at('uOutputExposure')] = this.gradeExposure();
+    i[at('uOutputTransform')] = this.passGrade();
+    f[at('uOutputExposure')] = this.passGradeExposure();
     /* The projection occlusion needs, settled by the pass that has a camera. */
     this.frameProjection = camera.projection as Float32Array;
 
@@ -10088,7 +10147,7 @@ export class WebGPURenderer implements RendererApi {
     /* `1` is sRGB alone: the conversion without the curve. `Math.min` rather than a literal, so
        a renderer asked for `none` stays at none. See `TranslucentMeshOptions.toneMapped`. */
     if (!toneMapped) {
-      this.perFrameInts[this.materialField('uOutputTransform')] = Math.min(this.gradeCode(), 1);
+      this.perFrameInts[this.materialField('uOutputTransform')] = Math.min(this.passGrade(), 1);
     }
     /*
      * **Refraction, and the snapshot it reads is taken here or the draw does not refract.**
@@ -10260,7 +10319,7 @@ export class WebGPURenderer implements RendererApi {
        shared, so a strength left set is worn by everything drawn after it. */
     if (refracting) this.releaseSeeThrough();
     if (!toneMapped) {
-      this.perFrameInts[this.materialField('uOutputTransform')] = this.gradeCode();
+      this.perFrameInts[this.materialField('uOutputTransform')] = this.passGrade();
     }
     if (ditheredBlend) {
       this.perFrameFloats[this.materialField('uCutout') + 1] =
@@ -10728,7 +10787,7 @@ export class WebGPURenderer implements RendererApi {
       this.perFrameInts[this.materialField('uFogEnabled')] = fog;
     }
     if (!toneMapped) {
-      this.perFrameInts[this.materialField('uOutputTransform')] = Math.min(this.gradeCode(), 1);
+      this.perFrameInts[this.materialField('uOutputTransform')] = Math.min(this.passGrade(), 1);
     }
 
     const depthWrite = options.depthWrite ?? true;
@@ -10838,7 +10897,7 @@ export class WebGPURenderer implements RendererApi {
       this.perFrameInts[this.materialField('uFogEnabled')] = this.surfaceFog;
     }
     if (!toneMapped) {
-      this.perFrameInts[this.materialField('uOutputTransform')] = this.gradeCode();
+      this.perFrameInts[this.materialField('uOutputTransform')] = this.passGrade();
     }
     if (refracting) this.releaseSeeThrough();
     if (ditheredBlend) {
@@ -10955,6 +11014,8 @@ export class WebGPURenderer implements RendererApi {
     i[atF('uFogMode')] = medium.fogMode;
     f[atF('uFogNear')] = medium.fogNear;
     f[atF('uFogFar')] = medium.fogFar;
+    i[atF('uOutputTransform')] = this.passGrade();
+    f[atF('uOutputExposure')] = this.passGradeExposure();
 
     const fragmentSlot = this.scatterFrags.allocate();
     if (fragmentSlot === null) return;
@@ -12575,6 +12636,8 @@ export class WebGPURenderer implements RendererApi {
     );
     f.set(medium.underwaterColor, at('uUnderwaterColor'));
     f[at('uUnderwaterFactor')] = medium.underwaterFactor;
+    this.skyInts[at('uOutputTransform')] = this.passGrade();
+    f[at('uOutputExposure')] = this.passGradeExposure();
 
     const slot = this.skyUniforms.allocate();
     if (slot === null) {
@@ -12739,6 +12802,8 @@ export class WebGPURenderer implements RendererApi {
       ? (OUTPUT_TRANSFORM_CODE[this.quality.outputTransform] ?? 0)
       : 0;
     f[at('uOutputExposure')] = graded ? this.exposure : 1;
+    /* The occlusion multiplied in as an encoded pixel takes it, where the passes graded the scene. */
+    i[at('uSceneGraded')] = this.passGrade() !== 0 ? 1 : 0;
     f.set(this.filmA, at('uFilmA'));
     f.set(this.filmB, at('uFilmB'));
     f[at('uDisplayHeadroom')] = this.headroom;
@@ -13368,8 +13433,8 @@ export class WebGPURenderer implements RendererApi {
       });
       const context = this.passContext;
       context.pass = pass;
-      context.outputTransform = this.gradeCode();
-      context.outputExposure = this.gradeExposure();
+      context.outputTransform = this.passGrade();
+      context.outputExposure = this.passGradeExposure();
       context.jitter = this.latePassJitter;
       context.format = RECON_HISTORY_FORMAT;
       context.depthFormat = DEPTH_FORMAT;
@@ -14018,6 +14083,7 @@ export class WebGPURenderer implements RendererApi {
       f[base + at('uDecalOpacity')] = decal.opacity;
       f[base + at('uDecalFacingCos')] = decal.facingCos;
       f[base + at('uDecalSoftness')] = decal.softness;
+      this.decalInts[base + at('uOutputTransform')] = this.passGrade();
       slot++;
     });
     device.queue.writeBuffer(this.decalUniforms, 0, this.decalStaging, 0, slot * DECAL_SLOT);
@@ -14264,6 +14330,8 @@ export class WebGPURenderer implements RendererApi {
     g[upsampleAt('uDepthToViewZ') + 1] = inv[14] ?? 0;
     g[upsampleAt('uDepthToViewZ') + 2] = inv[11] ?? 0;
     g[upsampleAt('uDepthToViewZ') + 3] = inv[15] ?? 1;
+    this.mediumUpsampleInts[upsampleAt('uOutputTransform')] = this.passGrade();
+    g[upsampleAt('uOutputExposure')] = this.passGradeExposure();
     device.queue.writeBuffer(this.mediumUpsampleUniforms, 0, this.mediumUpsampleStaging);
 
     const march = encoder.beginRenderPass({
@@ -14989,6 +15057,8 @@ export class WebGPURenderer implements RendererApi {
       projection,
       this.skinInverseProjection,
       () => this.gpuTimer.writesFor(),
+      this.passGrade(),
+      this.passGradeExposure(),
     );
     this.pass = encoder.beginRenderPass({
       label: 'skin.scattered',
@@ -16199,8 +16269,8 @@ export class WebGPURenderer implements RendererApi {
     const context = this.passContext;
     context.pass = pass;
     /* The frame's grade, so a contributed pass can obey the 2026-08-17 rule. See `PassContext`. */
-    context.outputTransform = this.gradeCode();
-    context.outputExposure = this.gradeExposure();
+    context.outputTransform = this.passGrade();
+    context.outputExposure = this.passGradeExposure();
     context.format = target.format;
     context.samples = target.sampleCount;
     return context as PassContext;
@@ -16697,8 +16767,11 @@ export class WebGPURenderer implements RendererApi {
     const slot = this.insetUniforms.allocate();
     if (slot !== null) {
       /* Only the colour: the quad covers the viewport set above, so it needs no geometry. */
-      const color = clearColor ?? BLACK_CLEAR;
-      this.insetUniforms.writeFloats(slot, 0, [color[0], color[1], color[2], 1]);
+      const color = this.clearOf(clearColor ?? BLACK_CLEAR);
+      this.insetClear[0] = color[0];
+      this.insetClear[1] = color[1];
+      this.insetClear[2] = color[2];
+      this.insetUniforms.writeFloats(slot, 0, this.insetClear);
       const insetPipe = insetPipeline(
         this.targetPipelines(),
         this.surface.device,
@@ -17360,6 +17433,8 @@ export class WebGPURenderer implements RendererApi {
     f[atF('uTime')] = timeSeconds;
     f[atF('uMaxDrop')] = CAUSTICS_MAX_DROP_M;
     f[atF('uStrength')] = strength;
+    i[atF('uOutputTransform')] = this.passGrade();
+    f[atF('uOutputExposure')] = this.passGradeExposure();
     f.set(env.directionalDir, atF('uLightDir'));
 
     /*

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

@@ -41,6 +41,8 @@ export class SkinScatterPass {
   private readonly layout: GPUBindGroupLayout;
   private readonly uniforms: GPUBuffer;
   private readonly staging = new Float32Array((SLOT * 2) / 4);
+  /** The same blocks' ints: the frame's grade, which the second axis applies. */
+  private readonly stagingInts = new Int32Array(this.staging.buffer);
   private readonly linear: GPUSampler;
   private readonly nearest: GPUSampler;
   private readonly commands: CommandPool = createCommandPool(16);
@@ -212,6 +214,9 @@ export class SkinScatterPass {
     projection: ArrayLike<number>,
     inverseProjection: ArrayLike<number>,
     timestampWrites: () => GPURenderPassTimestampWrites | undefined,
+    /** The frame's grade, which the second axis applies to the light it adds. */
+    outputTransform = 0,
+    outputExposure = 1,
   ): void {
     const diffuse = this.diffuse;
     if (diffuse === null || this.diffuseView === null || this.acrossView === null) return;
@@ -221,7 +226,14 @@ export class SkinScatterPass {
       this.groupDown = this.group('skin.blurDown', this.acrossView, depth);
       this.groupsDepth = depth;
     }
-    this.writeUniforms(diffuse.width, diffuse.height, projection, inverseProjection);
+    this.writeUniforms(
+      diffuse.width,
+      diffuse.height,
+      projection,
+      inverseProjection,
+      outputTransform,
+      outputExposure,
+    );
 
     const across = postPipeline(
       pipelines,
@@ -316,6 +328,8 @@ export class SkinScatterPass {
     height: number,
     projection: ArrayLike<number>,
     inverse: ArrayLike<number>,
+    outputTransform: number,
+    outputExposure: number,
   ): void {
     const f = this.staging;
     const fields = BINDINGS.fields;
@@ -335,6 +349,8 @@ export class SkinScatterPass {
       f.set(this.profiles, base + fields.uProfiles.offset / 4);
       /* The colour is applied once, on the axis that adds into the frame. */
       f[base + fields.uApplyAlbedo.offset / 4] = axis;
+      this.stagingInts[base + fields.uOutputTransform.offset / 4] = outputTransform;
+      f[base + fields.uOutputExposure.offset / 4] = outputExposure;
     }
     this.device.queue.writeBuffer(this.uniforms, 0, f);
   }

package/src/render/causticsRenderer.ts

@@ -116,10 +116,15 @@ export class CausticsRenderer {
     windX = 0,
     windZ = 0,
     strength = 1,
+    /** The renderer's `passGrade`: the frame's, but none in a probe's face or a capture. */
+    outputTransform = 0,
+    outputExposure = 1,
   ): boolean {
     if (this.vertexCount === 0) return false;
     const u = this.uniforms;
     gl.useProgram(this.program);
+    gl.uniform1i(u['uOutputTransform'] ?? null, outputTransform);
+    gl.uniform1f(u['uOutputExposure'] ?? null, outputExposure);
     gl.uniformMatrix4fv(u['uViewProj'] ?? null, false, camera.viewProjection);
     gl.uniform3fv(u['uCameraPos'] ?? null, camera.position);
     gl.uniform1f(u['uTime'] ?? null, timeSeconds);

package/src/render/decalPass.ts

@@ -53,6 +53,8 @@ export class DecalPass {
     eye: ArrayLike<number>,
     width: number,
     height: number,
+    /** The renderer's `passGrade`: how the frame under the marks was graded, 0 for not yet. */
+    outputTransform = 0,
   ): void {
     if (queue.length === 0) return;
     const { gl } = this;
@@ -62,6 +64,7 @@ export class DecalPass {
     mat4.multiply(this.depthToWorld, this.depthToWorld, DEPTH_01_TO_CLIP);
 
     gl.useProgram(this.program);
+    gl.uniform1i(u['uOutputTransform'] ?? null, outputTransform);
     gl.bindVertexArray(this.vao);
     gl.disable(gl.DEPTH_TEST);
     gl.depthMask(false);

package/src/render/flockRenderer.ts

@@ -74,9 +74,14 @@ export class FlockRenderer {
     tint: Vec3,
     windX = 0,
     windZ = 0,
+    outputTransform = 0,
+    outputExposure = 1,
   ): void {
     const u = this.uniforms;
     gl.useProgram(this.program);
+    /* The renderer's `passGrade`: the frame's, but none in a probe's face or a capture. */
+    gl.uniform1i(u['uOutputTransform'] ?? null, outputTransform);
+    gl.uniform1f(u['uOutputExposure'] ?? null, outputExposure);
     gl.uniformMatrix4fv(u['uViewProj'] ?? null, false, camera.viewProjection);
     /*
      * No `uCameraPos` here, and the shader no longer declares one. It fed the banking that

package/src/render/globalMediumPass.ts

@@ -268,7 +268,14 @@ export class GlobalMediumPass {
    * `(ONE, SRC_ALPHA)` on colour is `dst * transmittance + inscatter`; alpha is left alone with
    * `(ZERO, ONE)`, because the frame's own alpha is not the medium's to spend.
    */
-  compositeMedium(depth: WebGLTexture, frameWidth: number, frameHeight: number): void {
+  compositeMedium(
+    depth: WebGLTexture,
+    frameWidth: number,
+    frameHeight: number,
+    /** The renderer's `passGrade`: how the frame under the medium was graded. */
+    outputTransform = 0,
+    outputExposure = 1,
+  ): void {
     if (this.target === null || this.unavailable) return;
     const { gl } = this;
     const u = this.upsampleUniforms;
@@ -292,6 +299,8 @@ export class GlobalMediumPass {
     this.mediumTexel[1] = 1 / Math.max(1, this.height);
     gl.uniform2fv(u['uMediumTexel'] ?? null, this.mediumTexel);
     gl.uniform4fv(u['uDepthToViewZ'] ?? null, this.depthToViewZ);
+    gl.uniform1i(u['uOutputTransform'] ?? null, outputTransform);
+    gl.uniform1f(u['uOutputExposure'] ?? null, outputExposure);
 
     gl.drawArrays(gl.TRIANGLES, 0, 3);
 

package/src/render/gradeColor.ts

@@ -0,0 +1,90 @@
+/**
+ * The forward grade on the CPU: what `applyOutputTransform` in `shaders/outputTransform.ts` does to
+ * a colour, for a colour no shader draws — a clear colour, written to a target before any pass runs.
+ *
+ * **Why a clear colour is graded at all.** Every pass grades what it draws when nothing after it
+ * will, so a colour handed to the renderer means one thing wherever it lands: linear light. A clear
+ * left as it was given is the one colour in the frame read as a display value, so a scene whose fog
+ * fades to its background colour fades to a different colour than the background it meets; with
+ * `hdrScene` the resolve grades the clear with everything else, and a frame without it has to agree.
+ *
+ * **A second copy of the curve, and what holds the two together** is the hand-derived values in
+ * `gradeColor.test.ts`, the same ones the shader's own constants give: the sRGB encode's two
+ * segments, the ACES fit through its two matrices, and the highlight shoulder. Code 4, the filmic
+ * curve, is the composite's alone, so a forward code never carries it (`forwardTransformCode`).
+ */
+import type { Vec3 } from '../math/color.ts';
+
+/* Columns as the shader's `mat3` reads them, written here as rows of the product. */
+const IN_R = [0.59719, 0.35458, 0.04823];
+const IN_G = [0.076, 0.90834, 0.01566];
+const IN_B = [0.0284, 0.13383, 0.83777];
+const OUT_R = [1.60475, -0.53108, -0.07367];
+const OUT_G = [-0.10208, 1.10813, -0.00605];
+const OUT_B = [-0.00327, -0.07276, 1.07602];
+
+/**
+ * `color` graded by forward code `code` at `exposure` into `out`, which may be `color`: 0 leaves it
+ * as it is, 1 encodes it as sRGB, 2 runs ACES first and 3 the highlight shoulder. Allocates nothing.
+ */
+export function gradeColorInto(
+  code: number,
+  exposure: number,
+  color: Readonly<Vec3>,
+  out: Vec3,
+): Vec3 {
+  let r = color[0];
+  let g = color[1];
+  let b = color[2];
+  if (code === 0) {
+    out[0] = r;
+    out[1] = g;
+    out[2] = b;
+    return out;
+  }
+  if (code === 2) {
+    const x = r * exposure;
+    const y = g * exposure;
+    const z = b * exposure;
+    const ir = fit(dot(IN_R, x, y, z));
+    const ig = fit(dot(IN_G, x, y, z));
+    const ib = fit(dot(IN_B, x, y, z));
+    r = clamp01(dot(OUT_R, ir, ig, ib));
+    g = clamp01(dot(OUT_G, ir, ig, ib));
+    b = clamp01(dot(OUT_B, ir, ig, ib));
+  } else if (code === 3) {
+    r *= exposure;
+    g *= exposure;
+    b *= exposure;
+    const m = Math.max(r, g, b);
+    if (m > 0.8) {
+      const e = m - 0.8;
+      const k = (0.8 + (0.2 * e) / (e + 0.2)) / m;
+      r *= k;
+      g *= k;
+      b *= k;
+    }
+  }
+  out[0] = encode(r);
+  out[1] = encode(g);
+  out[2] = encode(b);
+  return out;
+}
+
+function dot(row: readonly number[], x: number, y: number, z: number): number {
+  return (row[0] as number) * x + (row[1] as number) * y + (row[2] as number) * z;
+}
+
+/** The RRT and ODT fit, `rrtAndOdtFit` in the shader. */
+function fit(v: number): number {
+  return (v * (v + 0.0245786) - 0.000090537) / (v * (0.983729 * v + 0.432951) + 0.238081);
+}
+
+/** Linear to sRGB, the piecewise form the shader uses. */
+function encode(c: number): number {
+  return c <= 0.0031308 ? c * 12.92 : 1.055 * Math.max(c, 0) ** (1 / 2.4) - 0.055;
+}
+
+function clamp01(v: number): number {
+  return v < 0 ? 0 : v > 1 ? 1 : v;
+}