@driftengine/core 4.11.1 → 4.13.0

package/dist/render/backend/webgpu/gpuDrivenPass.js

@@ -646,7 +646,16 @@ export class GpuDrivenPass {
         shadowed: true,
         blended: false,
     };
-    gradeWarned = false;
+    /**
+     * The frame's grade for the blit, `PassContext.outputTransform` and its exposure, and the code it
+     * was last written with, so a frame writes it only when it changes. See `present.wgsl.ts`.
+     */
+    gradeBuffer = null;
+    gradeStaging = new ArrayBuffer(16);
+    gradeInts = new Int32Array(this.gradeStaging);
+    gradeFloats = new Float32Array(this.gradeStaging);
+    gradeWrittenCode = Number.NaN;
+    gradeWrittenExposure = Number.NaN;
     constructor(scene, materials, shadow = {}) {
         if (materials.length > MATERIAL_SLOTS) {
             throw new Error(`[driftengine] the gpu-driven pass holds ${MATERIAL_SLOTS} materials and was given ` +
@@ -1937,10 +1946,17 @@ export class GpuDrivenPass {
                 { binding: 21, resource: this.glassSamplerFor(device) },
             ],
         });
+        this.gradeBuffer ??= device.createBuffer({
+            label: 'gpu-driven blit grade',
+            size: this.gradeStaging.byteLength,
+            usage: UNIFORM | COPY_DST,
+        });
+        this.gradeWrittenCode = Number.NaN;
         this.blitGroup = device.createBindGroup({
             layout: this.blitPipeline.getBindGroupLayout(0),
             entries: [
                 { binding: 0, resource: this.colourView },
+                { binding: 2, resource: { buffer: this.gradeBuffer } },
                 /* The depth the raster wrote, sampled so the blit can hand it to the frame. */
                 ...(this.presentDepth
                     ? [
@@ -2867,16 +2883,15 @@ export class GpuDrivenPass {
             return;
         if (this.blitPipeline === null || this.blitGroup === null)
             return;
-        if (ctx.outputTransform !== 0 && !this.gradeWarned) {
-            this.gradeWarned = true;
-            /*
-             * The pass writes linear light and expects a composite to grade it. A frame with no
-             * composite grades per pass, and applying the curve here would be a second copy of it —
-             * which is the thing `SHADE_MATERIAL_WGSL` is built to avoid. Said once, out loud, because
-             * a silently ungraded frame is a difference somebody would attribute to the pipeline.
-             */
-            console.warn('[driftengine] the gpu-driven pass writes linear light and this frame has no composite ' +
-                'to grade it, so the picture will be flat. Use a quality profile with a scene target.');
+        /* The frame's grade, written when it changes: 0 where the resolve grades. See present.wgsl.ts. */
+        const changed = ctx.outputTransform !== this.gradeWrittenCode ||
+            ctx.outputExposure !== this.gradeWrittenExposure;
+        if (changed && this.device !== null && this.gradeBuffer !== null) {
+            this.gradeWrittenCode = ctx.outputTransform;
+            this.gradeWrittenExposure = ctx.outputExposure;
+            this.gradeInts[0] = ctx.outputTransform;
+            this.gradeFloats[1] = ctx.outputExposure;
+            this.device.queue.writeBuffer(this.gradeBuffer, 0, this.gradeStaging);
         }
         ctx.pass.setPipeline(this.blitPipeline);
         ctx.pass.setBindGroup(0, this.blitGroup);
@@ -2888,6 +2903,8 @@ export class GpuDrivenPass {
         if (device.backend !== 'webgpu')
             return;
         this.disposeTargets();
+        this.gradeBuffer?.destroy();
+        this.gradeBuffer = null;
         this.shadowTexture?.destroy();
         this.glassTintTexture?.destroy();
         this.glassTintNone?.destroy();

package/dist/render/backend/webgpu/panelPass.d.ts

@@ -13,7 +13,7 @@ import type { PipelineCache } from './pipelineCache.ts';
 export declare const PANEL_VERT_FIELDS: UniformFields;
 export declare const PANEL_VERT_SIZE: 96;
 export declare const PANEL_FRAG_FIELDS: UniformFields;
-export declare const PANEL_FRAG_SIZE: 16;
+export declare const PANEL_FRAG_SIZE: 32;
 export declare const PANEL_VERTEX_COUNT: number;
 export declare function createPanelCorners(device: GPUDevice): GPUBuffer;
 export declare function createPanelBindGroupLayout(device: GPUDevice): GPUBindGroupLayout;

package/dist/render/backend/webgpu/postPass.d.ts

@@ -26,7 +26,7 @@ import type { PipelineCache } from './pipelineCache.ts';
  * float target the generated shaders can sample as an ordinary texture.
  */
 export declare const RUSH_FRAG_FIELDS: UniformFields;
-export declare const RUSH_FRAG_SIZE: 272;
+export declare const RUSH_FRAG_SIZE: 288;
 declare const RUSH_UNIFORMS: 1;
 declare const RUSH_TEXTURES: {
     readonly uScene: {
@@ -77,7 +77,7 @@ export declare const AO_BLUR_SIZE: 48;
 export declare const MEDIUM_FRAG_FIELDS: UniformFields;
 export declare const MEDIUM_FRAG_SIZE: 304;
 export declare const MEDIUM_UPSAMPLE_FIELDS: UniformFields;
-export declare const MEDIUM_UPSAMPLE_SIZE: 32;
+export declare const MEDIUM_UPSAMPLE_SIZE: 48;
 export declare const BLOOM_PREFILTER_FIELDS: UniformFields;
 /**
  * The other two stages' blocks, read by name like every other block here.

package/dist/render/backend/webgpu/renderer.d.ts

@@ -99,7 +99,7 @@ export declare 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>;
     /** Whether `endFrame` put an image on the canvas. Read by the recorder and the harness. */
@@ -716,6 +716,7 @@ export declare class WebGPURenderer implements RendererApi {
     private readonly mediumUpsampleUniforms;
     private readonly mediumUpsampleStaging;
     private readonly mediumUpsampleFloats;
+    private readonly mediumUpsampleInts;
     private mediumUpsampleGroup;
     /** The inverse projection the composite linearises a depth with, built once per frame. */
     private readonly mediumInvProjection;
@@ -944,6 +945,12 @@ export declare class WebGPURenderer implements RendererApi {
      */
     private readonly skyUniforms;
     private readonly skyFloats;
+    /** The same block's ints: the grade the sky draws with. */
+    private readonly skyInts;
+    /** `clearOf`'s scratch: a clear colour as the open target takes it. */
+    private readonly gradedClear;
+    /** An inset's clear as its quad's uniform, rewritten in place: the colour and an alpha of 1. */
+    private readonly insetClear;
     private readonly skyBindGroup;
     /** The camera's inverse with the clip correction undone, rebuilt once a frame. */
     private readonly skyInvViewProj;
@@ -1026,6 +1033,8 @@ export declare class WebGPURenderer implements RendererApi {
     private decalUniforms;
     private readonly decalStaging;
     private readonly decalFloats;
+    /** The same slots' ints: the grade the frame under the marks was drawn with. */
+    private readonly decalInts;
     private decalBindGroup;
     /** Said once where a mark cannot be drawn at all, rather than dropped in silence. */
     private decalsRefused;
@@ -1189,6 +1198,8 @@ export declare class WebGPURenderer implements RendererApi {
     private readonly projection;
     /** `uLayers`, the material's layers packed by `packSurfaceLayers`. */
     private readonly layerFloats;
+    /** `uLayerLooks`, the material's layer picks and looks packed by `packLayerLooks`. */
+    private readonly lookFloats;
     /**
      * `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`.
@@ -1544,14 +1555,16 @@ export declare 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;
-    private gradeExposure;
+    private passGrade;
+    private passGradeExposure;
+    /** Whether the frame's resolve applies the transform, so the passes before it draw linear. */
+    private resolveGrades;
+    /** A clear colour as the open target takes it, graded as a pass would. See `gradeColor.ts`. */
+    private clearOf;
     drawParticles(batch: GpuParticles, data: ParticleInstances, camera: Camera, env: Environment, timeSeconds: number): void;
     /**
      * Draw particles a caller's own compute wrote, where they lie. See `DeviceParticles`.

package/dist/render/backend/webgpu/renderer.js

@@ -67,6 +67,7 @@ import { resolveTransmission } from '../../transmission.js';
 import { resolveOcclusionFade } from '../../occlusionFade.js';
 import { orthographicDepthSpan } from '../../lightMatrix.js';
 import { LAYER_FLOATS, layerMaskMap, layeredProjection, layersFitBeside, packSurfaceLayers, } from '../../surfaceLayers.js';
+import { LOOK_FLOATS, asksLayerLooks, packLayerLooks } from '../../surfaceLayerLooks.js';
 import { frameReflectionsRefused, resolveFrameReflections, } from '../../frameReflections.js';
 import { REFLECTION_SURFACE_FORMAT, ReflectionSurfacePass } from './reflectionSurfacePass.js';
 import { validateClothBinding } from '../../clothBindingData.js';
@@ -74,7 +75,9 @@ import { createSdfTextBindGroup, createSdfTextBindGroupLayout, GpuSdfText, sdfTe
 import { createFilmBindGroup, createFilmBindGroupLayout, filmPipeline, FILM_FRAG_FIELDS, FILM_FRAG_SIZE, FILM_VERT_FIELDS, FILM_VERT_SIZE, } from './filmPass.js';
 import { reflectionTargetSize } from '../../planarReflectionDraw.js';
 import { drawingBufferSize } from '../../drawingBuffer.js';
-import { MOTION_BLUR_MAX_UV, OBJECT_BLUR_UNKEPT, OUTPUT_TRANSFORM_CODE, RUSH_REACH_UV, clampMotionShare, forwardTransformCode, } from '../../vertexDefaults.js';
+import { MOTION_BLUR_MAX_UV, OBJECT_BLUR_UNKEPT, OUTPUT_TRANSFORM_CODE, RUSH_REACH_UV, clampMotionShare, } from '../../vertexDefaults.js';
+import { gradeColorInto } from '../../gradeColor.js';
+import { interfaceGrade, passGradeCode, passGradeExposure } from '../../passGrade.js';
 import { FRINGE_FLOATS, resolveFringe } from '../../shaders/fringe.js';
 import { displayHeadroom } from '../../displayRange.js';
 import { DEFAULT_FILMIC_CURVE, FILMIC_CLAMPED, FILMIC_CONSTANTS, FILMIC_WITHOUT_COMPOSITE, resolveFilmicCurve, } from '../../filmicCurve.js';
@@ -833,7 +836,7 @@ export class WebGPURenderer {
      * **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).
      */
     quality;
     /** Whether `endFrame` put an image on the canvas. Read by the recorder and the harness. */
@@ -1518,6 +1521,7 @@ export class WebGPURenderer {
     mediumUpsampleUniforms;
     mediumUpsampleStaging = new ArrayBuffer(MEDIUM_UPSAMPLE_SIZE);
     mediumUpsampleFloats = new Float32Array(this.mediumUpsampleStaging);
+    mediumUpsampleInts = new Int32Array(this.mediumUpsampleStaging);
     mediumUpsampleGroup = null;
     /** The inverse projection the composite linearises a depth with, built once per frame. */
     mediumInvProjection = mat4.create();
@@ -1763,6 +1767,12 @@ export class WebGPURenderer {
      */
     skyUniforms;
     skyFloats = new Float32Array(SKY_UNIFORM_SIZE / 4);
+    /** The same block's ints: the grade the sky draws with. */
+    skyInts = new Int32Array(this.skyFloats.buffer);
+    /** `clearOf`'s scratch: a clear colour as the open target takes it. */
+    gradedClear = [0, 0, 0];
+    /** An inset's clear as its quad's uniform, rewritten in place: the colour and an alpha of 1. */
+    insetClear = new Float32Array([0, 0, 0, 1]);
     skyBindGroup;
     /** The camera's inverse with the clip correction undone, rebuilt once a frame. */
     skyInvViewProj = new Float32Array(16);
@@ -1846,6 +1856,8 @@ export class WebGPURenderer {
     decalUniforms;
     decalStaging = new ArrayBuffer(DECAL_SLOT * MAX_DRAWN_DECALS);
     decalFloats = new Float32Array(this.decalStaging);
+    /** The same slots' ints: the grade the frame under the marks was drawn with. */
+    decalInts = new Int32Array(this.decalStaging);
     decalBindGroup = null;
     /** Said once where a mark cannot be drawn at all, rather than dropped in silence. */
     decalsRefused = false;
@@ -2016,9 +2028,10 @@ export class WebGPURenderer {
          * 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`. */
@@ -2170,6 +2183,8 @@ export class WebGPURenderer {
         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);
         const medium = resolveAtmosphere(env, this.atmosphereHeight(camera), this.quality.underwaterAtmosphere, this.medium);
@@ -2256,6 +2271,8 @@ export class WebGPURenderer {
     projection = new Float32Array(PROJECTION_FLOATS);
     /** `uLayers`, the material's layers packed by `packSurfaceLayers`. */
     layerFloats = new Float32Array(LAYER_FLOATS);
+    /** `uLayerLooks`, the material's layer picks and looks packed by `packLayerLooks`. */
+    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`.
@@ -2745,6 +2762,11 @@ export class WebGPURenderer {
             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'));
         });
         /*
@@ -3012,6 +3034,9 @@ export class WebGPURenderer {
         const fragAt = (name) => 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
             again put the second panel 64 KB into a 16 KB ring — the device said so, in as many
@@ -3119,8 +3144,8 @@ export class WebGPURenderer {
             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(), this.surface.device, this.sdfTextLayout);
         const sdfGroup = this.sdfTextBindGroupFor(atlas);
         const sdfCommand = this.recordBlended(0);
@@ -3222,6 +3247,9 @@ export class WebGPURenderer {
         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;
@@ -3565,19 +3593,26 @@ export class WebGPURenderer {
      * 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.
      */
-    gradeCode() {
-        return !this.hasComposite || !this.quality.hdrScene
-            ? forwardTransformCode(this.quality.outputTransform)
-            : 0;
+    passGrade() {
+        const storing = this.probePassActive || this.capturePassActive;
+        const transform = this.quality.outputTransform;
+        return passGradeCode(storing, this.framePresented, this.resolveGrades(), transform);
+    }
+    passGradeExposure() {
+        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. */
+    resolveGrades() {
+        return this.hasComposite && this.quality.hdrScene;
     }
-    gradeExposure() {
-        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`. */
+    clearOf(color) {
+        return gradeColorInto(this.passGrade(), this.passGradeExposure(), color, this.gradedClear);
     }
     drawParticles(batch, data, camera, env, timeSeconds) {
         if (!this.canDraw() || data.count === 0)
@@ -3679,8 +3714,8 @@ export class WebGPURenderer {
             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;
         device.queue.writeBuffer(batch.vertUniforms, 0, batch.vertStaging);
         device.queue.writeBuffer(batch.fragUniforms, 0, batch.fragStaging);
@@ -3886,6 +3921,8 @@ export class WebGPURenderer {
         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
@@ -4037,6 +4074,8 @@ export class WebGPURenderer {
         /* 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;
         /*
@@ -4166,6 +4205,8 @@ export class WebGPURenderer {
         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.
          *
@@ -4340,6 +4381,10 @@ export class WebGPURenderer {
         v[at('uCellSize')] = streaks.cellSize;
         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);
         const windPipe = windStreakPipeline(this.blendedPipelines(), this.surface.device, this.windStreakLayout);
@@ -4425,6 +4470,8 @@ export class WebGPURenderer {
         v[at('uWind')] = windX;
         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);
         const flockPipe = flockPipeline(this.pipelines, this.surface.device, this.flockLayout);
@@ -4517,6 +4564,8 @@ export class WebGPURenderer {
         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(env, camera.position[1] ?? 0, this.quality.underwaterAtmosphere, this.medium);
@@ -4628,8 +4677,8 @@ export class WebGPURenderer {
         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, camera.position[1] ?? 0, this.quality.underwaterAtmosphere, this.medium);
         this.lineFrags.writeFloats(fragmentSlot, atF('uFogColor'), medium.fogColor);
@@ -6726,9 +6775,10 @@ export class WebGPURenderer {
          * 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;
@@ -7186,6 +7236,7 @@ export class WebGPURenderer {
         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';
@@ -7429,8 +7480,8 @@ export class WebGPURenderer {
          * `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;
         /*
@@ -8148,7 +8199,7 @@ export class WebGPURenderer {
         /* `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.**
@@ -8289,7 +8340,7 @@ export class WebGPURenderer {
         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] =
@@ -8646,7 +8697,7 @@ export class WebGPURenderer {
             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;
         const layer = Math.min(Math.max(Math.round(options.depthLayer ?? 0), 0), MAX_DEPTH_LAYER);
@@ -8729,7 +8780,7 @@ export class WebGPURenderer {
             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();
@@ -8828,6 +8879,8 @@ export class WebGPURenderer {
         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;
@@ -10219,6 +10272,8 @@ export class WebGPURenderer {
         const medium = resolveAtmosphere(env, this.atmosphereHeight(camera), this.quality.underwaterAtmosphere, this.medium);
         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) {
             if (!this.warnedSkyFull) {
@@ -10383,6 +10438,8 @@ export class WebGPURenderer {
             ? (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;
@@ -10917,8 +10974,8 @@ export class WebGPURenderer {
             });
             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;
@@ -11471,6 +11528,7 @@ export class WebGPURenderer {
             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);
@@ -11680,6 +11738,8 @@ export class WebGPURenderer {
         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({
             label: 'post.medium',
@@ -12213,7 +12273,7 @@ export class WebGPURenderer {
         this.resolveDepth(encoder);
         mat4.invert(this.skinInverseProjection, projection);
         const multisampled = this.compositeMsaa();
-        skin.spread(encoder, this.pipelines, resolved, multisampled ?? target, multisampled === null ? null : target, this.samples, projection, this.skinInverseProjection, () => this.gpuTimer.writesFor());
+        skin.spread(encoder, this.pipelines, resolved, multisampled ?? target, multisampled === null ? null : target, this.samples, projection, this.skinInverseProjection, () => this.gpuTimer.writesFor(), this.passGrade(), this.passGradeExposure());
         this.pass = encoder.beginRenderPass({
             label: 'skin.scattered',
             timestampWrites: this.gpuTimer.writesFor(),
@@ -13365,8 +13425,8 @@ export class WebGPURenderer {
         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;
@@ -13824,8 +13884,11 @@ export class WebGPURenderer {
         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, this.insetLayout, clearColor !== null);
             /*
              * Recorded even though the viewport it fills is state on the pass, because it is set
@@ -14418,6 +14481,8 @@ export class WebGPURenderer {
         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'));
         /*
          * What the water is reflecting: the dominant source plus a share of the ambient standing in

package/dist/render/backend/webgpu/scatterPass.d.ts

@@ -21,7 +21,7 @@ export declare const SCATTER_DEPTH_SIZE: 240;
 export declare const SCATTER_VERT_FIELDS: UniformFields;
 export declare const SCATTER_VERT_SIZE: 240;
 export declare const SCATTER_FRAG_FIELDS: UniformFields;
-export declare const SCATTER_FRAG_SIZE: 128;
+export declare const SCATTER_FRAG_SIZE: 144;
 export declare function scatterVertexLayouts(): GPUVertexBufferLayout[];
 /** Geometry and placement on the device, behind the opaque handle the surface hands out. */
 export interface GpuScatter {

package/dist/render/backend/webgpu/skinScatterPass.d.ts

@@ -7,6 +7,8 @@ export declare class SkinScatterPass {
     private readonly layout;
     private readonly uniforms;
     private readonly staging;
+    /** The same blocks' ints: the frame's grade, which the second axis applies. */
+    private readonly stagingInts;
     private readonly linear;
     private readonly nearest;
     private readonly commands;
@@ -48,7 +50,9 @@ export declare class SkinScatterPass {
      * attachment its pass draws into, `resolve` where a multisampled one resolves, `samples` its
      * count. `projection` is the frame's, `height` the frame's height in pixels.
      */
-    spread(encoder: GPUCommandEncoder, pipelines: PipelineCache, depth: GPUTextureView, frame: GPUTextureView, resolve: GPUTextureView | null, samples: number, projection: ArrayLike<number>, inverseProjection: ArrayLike<number>, timestampWrites: () => GPURenderPassTimestampWrites | undefined): void;
+    spread(encoder: GPUCommandEncoder, pipelines: PipelineCache, depth: GPUTextureView, frame: GPUTextureView, resolve: GPUTextureView | null, samples: number, projection: ArrayLike<number>, inverseProjection: ArrayLike<number>, timestampWrites: () => GPURenderPassTimestampWrites | undefined, 
+    /** The frame's grade, which the second axis applies to the light it adds. */
+    outputTransform?: number, outputExposure?: number): void;
     /** Spent at the frame's start: the kept draws were this frame's. */
     reset(): void;
     dispose(): void;