@driftengine/core 4.11.1 → 4.13.0

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

@@ -41,6 +41,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 { FILM_FRAG, FILM_VERT } from '../../shaders/film.js';
 import { SceneTarget } from '../../sceneTarget.js';
 import { FILM_LOOK_WITHOUT_COMPOSITE } from '../../shaders/filmLook.js';
@@ -118,7 +119,9 @@ import { FlockRenderer } from '../../flockRenderer.js';
 import { TextRenderer } from '../../textRenderer.js';
 import { SdfTextRenderer } from '../../sdfTextRenderer.js';
 import { MOTION_BLUR_MAX_UV, OBJECT_BLUR_UNKEPT, RUSH_REACH_UV, clampMotionShare, } from '../../vertexDefaults.js';
-import { OUTPUT_TRANSFORM_CODE, forwardTransformCode } from '../../vertexDefaults.js';
+import { OUTPUT_TRANSFORM_CODE } from '../../vertexDefaults.js';
+import { gradeColorInto } from '../../gradeColor.js';
+import { interfaceGrade, passGradeCode, passGradeExposure } from '../../passGrade.js';
 import { DEFAULT_FILMIC_CURVE, FILMIC_CLAMPED, FILMIC_CONSTANTS, FILMIC_WITHOUT_COMPOSITE, resolveFilmicCurve, } from '../../filmicCurve.js';
 import { deviceSnappedCellSize } from '../../textLayout.js';
 import { WindStreakRenderer } from '../../windStreakRenderer.js';
@@ -963,15 +966,22 @@ export class WebGL2Renderer {
     transmission = new Float32Array([-1, -1, -1, 0]);
     /** `uLayers`, the current material's layers packed. See `surfaceLayers.ts`. */
     layerFloats = new Float32Array(LAYER_FLOATS);
+    /** `uLayerLooks`, the current material's layer picks and looks packed. See `surfaceLayerLooks.ts`. */
+    lookFloats = new Float32Array(LOOK_FLOATS);
     /** Whether the lit stage has room for layers' two vectors, and which refusals were said. */
     layersRoom = null;
     warnedLayersRoom = false;
+    /** Whether it has room for the layers' looks beside them, and whether the refusal was said. */
+    looksRoom = null;
+    warnedLooksRoom = false;
     warnedLayersModelMap = false;
     warnedLayersTriplanar = false;
     warnedOverlayRoom = false;
     warnedOverlayBlocks = false;
     /** Whether a probe is being baked, so the passes that would recurse into one can tell. */
     probePassActive = false;
+    /** `clearOf`'s scratch: a clear colour as the open target takes it. */
+    gradedClear = [0, 0, 0];
     /**
      * Whether a scene capture is being drawn (`captureScene`): an off-screen pass like a bake, so the
      * frame's own view, its refraction copy and skin's spread are left alone, but lit as the frame is.
@@ -1685,8 +1695,8 @@ export class WebGL2Renderer {
             sceneDepth: null,
         };
         const context = this.passContext;
-        context.outputTransform = this.gradeCode();
-        context.outputExposure = this.gradeExposure();
+        context.outputTransform = this.passGrade();
+        context.outputExposure = this.passGradeExposure();
         /*
          * The copies a pass declared it reads, taken here with everything drawn before it: colour
          * afresh at each reading pass, as WebGPU's `takePassColour` does, so a full-screen effect drawn
@@ -2815,11 +2825,11 @@ export class WebGL2Renderer {
         finally {
             target.end(gl);
             gl.frontFace(gl.CCW);
+            this.capturePassActive = false;
             this.useFlatProgram();
-            gl.uniform1i(this.flatUniforms['uOutputTransform'] ?? null, this.gradeCode());
-            gl.uniform1f(this.flatUniforms['uOutputExposure'] ?? null, this.gradeExposure());
+            gl.uniform1i(this.flatUniforms['uOutputTransform'] ?? null, this.passGrade());
+            gl.uniform1f(this.flatUniforms['uOutputExposure'] ?? null, this.passGradeExposure());
             this.materials.dirty();
-            this.capturePassActive = false;
             this.temporalJittering = jittering;
             this.restoreViewport();
         }
@@ -3267,6 +3277,10 @@ export class WebGL2Renderer {
         if (layers !== null)
             this.askLit('LAYERED');
         gl.uniform4fv(u['uLayers'] ?? null, this.layerFloats);
+        packLayerLooks(layers, this.lookFloats);
+        if (this.looksFit(layers))
+            this.askLit('LAYER_LOOKS');
+        gl.uniform4fv(u['uLayerLooks'] ?? null, this.lookFloats);
         gl.uniform1i(u['uModelMap'] ?? null, MODEL_MAP_TEXTURE_UNIT);
         packModel(material?.model ?? null, modelMap !== null, this.modelParams, material?.physicalSpecular === true);
         /* The first physical highlight asked for is when the lit programs start carrying one. */
@@ -3539,6 +3553,27 @@ export class WebGL2Renderer {
         }
         return null;
     }
+    /**
+     * Whether a layered material's picks and looks are drawn: asked for, and room for their fifteen
+     * vectors beside the layers' four. Refused, the layers are drawn reading layer `i` of their arrays
+     * as they are, said once — which on a material sharing its arrays reads the wrong textures, so
+     * the sentence names the way out.
+     */
+    looksFit(layers) {
+        if (!asksLayerLooks(layers))
+            return false;
+        this.looksRoom ??= this.switchFits('LAYER_LOOKS', 'LAYERED');
+        if (this.looksRoom)
+            return true;
+        if (!this.warnedLooksRoom) {
+            this.warnedLooksRoom = true;
+            console.warn("Renderer: a layered material's picks and looks are refused on this device. They take " +
+                'fifteen fragment uniform vectors the lit shader does not have, so its layers read layer ' +
+                'i of its arrays, untinted, at one repeat each. A lower `maxLights` makes the room, or ' +
+                'WebGPU has it.');
+        }
+        return false;
+    }
     /** Says once that a layered material's triplanar projection is laid on the horizontal plane. */
     warnLayersTriplanar() {
         if (this.warnedLayersTriplanar)
@@ -3547,9 +3582,14 @@ export class WebGL2Renderer {
         console.warn("Renderer: a layered material's triplanar projection is laid on the horizontal plane: every " +
             "layer's maps on three planes would be three times the reads. See `SurfaceMaterial.layers`.");
     }
-    /** Whether the lit shader with `feature` compiled in fits this GPU's fragment uniform vectors. */
-    switchFits(feature) {
+    /**
+     * Whether the lit shader with `feature` compiled in, and `beside` with it where a switch means
+     * nothing alone, fits this GPU's fragment uniform vectors.
+     */
+    switchFits(feature, beside) {
         const asIf = { [feature]: true };
+        if (beside !== undefined)
+            asIf[beside] = true;
         return (countUniformVectors(this.flatFragAt(this.lightBudget, asIf)) <= this.fragmentVectorLimit());
     }
     /**
@@ -4069,7 +4109,7 @@ export class WebGL2Renderer {
         if (fog !== this.surfaceFog)
             gl.uniform1i(u['uFogEnabled'] ?? null, fog);
         if (!toneMapped)
-            gl.uniform1i(u['uOutputTransform'] ?? null, Math.min(this.gradeCode(), 1));
+            gl.uniform1i(u['uOutputTransform'] ?? null, Math.min(this.passGrade(), 1));
         if (blend) {
             gl.enable(gl.BLEND);
             if (options.additive === true)
@@ -4140,7 +4180,7 @@ export class WebGL2Renderer {
         if (fog !== this.surfaceFog)
             gl.uniform1i(u['uFogEnabled'] ?? null, this.surfaceFog);
         if (!toneMapped)
-            gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
+            gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
         if (own)
             this.materials.dirty();
         this.useFlatProgram();
@@ -4292,7 +4332,7 @@ export class WebGL2Renderer {
         // raining dust into the sea.
         const surface = env.underwater?.surfaceY;
         const submerged = surface !== undefined && (camera.position[1] ?? 0) < surface;
-        if (streaks.draw(this.gl, this.frameViewFor(camera), wind, timeSeconds, tint, submerged)) {
+        if (streaks.draw(this.gl, this.frameViewFor(camera), wind, timeSeconds, tint, submerged, this.passGrade(), this.passGradeExposure())) {
             this.windStreakBudget.ask();
         }
     }
@@ -4320,7 +4360,7 @@ export class WebGL2Renderer {
      */
     drawText(text, viewportWidth, viewportHeight, originX, originY, style, timeSec) {
         this.scatterSkin();
-        if (text.draw(viewportWidth, viewportHeight, originX, originY, style, timeSec)) {
+        if (text.draw(viewportWidth, viewportHeight, originX, originY, style, timeSec, interfaceGrade(this.passGrade()), 1)) {
             this.textBudget.ask();
         }
     }
@@ -4387,7 +4427,9 @@ export class WebGL2Renderer {
      * real draw call touches the unit in the first place.
      */
     /**
-     * The output transform a forward pass should apply, and the exposure it should apply it at.
+     * The grade a pass applies to what it draws into the target open now, and the exposure it
+     * applies it at. The decision is `passGrade.ts`'s, for both backends; this only gathers the
+     * state it is taken from.
      *
      * **Only where that pass is genuinely the last one to touch the frame.** With a scene target
      * the resolve grades, so a pass that graded as well would be applying a curve to its own
@@ -4395,20 +4437,34 @@ export class WebGL2Renderer {
      * `screenEffects` off there is no resolve at all and every pass writes straight to the canvas,
      * so each one has to grade itself or the frame comes out half converted: linear values in an
      * eight-bit buffer read as display values, which is a saturated, clipped version of the colour
-     * the caller asked for rather than a slightly different one.
+     * the caller asked for rather than a slightly different one. A probe's face or a capture is
+     * never graded, and past the present every pass grades itself, composite or not.
      *
      * One pair of accessors rather than the expression written out at each site, because that is
      * how the mesh pass and the particle pass came to disagree in the first place: the mesh pass
      * gated, and the particle pass uploaded the transform unconditionally to a stage that did not
      * yet declare it.
      */
-    gradeCode() {
-        return this.sceneTarget === null || !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.sceneTarget !== null && this.quality.hdrScene;
     }
-    gradeExposure() {
-        return this.sceneTarget === null || !this.quality.hdrScene ? this.exposure : 1;
+    /**
+     * A clear colour as the target open now takes it: graded as a pass would grade it, so a colour
+     * handed to the renderer is linear wherever it lands — the clear too, which the resolve grades
+     * with everything else under `hdrScene`. See `gradeColor.ts`. Into one scratch, read at once.
+     */
+    clearOf(color) {
+        return gradeColorInto(this.passGrade(), this.passGradeExposure(), color, this.gradedClear);
     }
     drawSdfText(handle, model, color, opacity) {
         this.scatterSkin();
@@ -4418,7 +4474,7 @@ export class WebGL2Renderer {
         if (viewProj === null)
             return;
         /* Geometry, so the remapped matrix: `frameViewProj` itself stays raw for the motion blur. */
-        if (handle.draw(this.sceneMatrix(viewProj), model, color, opacity, this.gradeCode(), this.gradeExposure())) {
+        if (handle.draw(this.sceneMatrix(viewProj), model, color, opacity, this.passGrade(), this.passGradeExposure())) {
             this.sdfTextBudget.ask();
             this.restoreSurfaceTextureUnit();
         }
@@ -4432,7 +4488,7 @@ export class WebGL2Renderer {
     }
     drawFlock(flock, camera, timeSeconds, params, tint, windX = 0, windZ = 0) {
         this.flockBudget.ask();
-        flock.draw(this.gl, this.frameViewFor(camera), timeSeconds, params, tint, windX, windZ);
+        flock.draw(this.gl, this.frameViewFor(camera), timeSeconds, params, tint, windX, windZ, this.passGrade(), this.passGradeExposure());
     }
     /**
      * Build a scatter batch and fill it. Takes the data rather than handing back
@@ -4516,8 +4572,8 @@ export class WebGL2Renderer {
            the uniform at all, so it was a write to a location that did not exist; now that the
            stage grades itself it has to obey the same "only where this pass is last" rule the mesh
            pass does, or a scene with a composite grades its particles twice. */
-        gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
-        gl.uniform1f(u['uOutputExposure'] ?? null, this.gradeExposure());
+        gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
+        gl.uniform1f(u['uOutputExposure'] ?? null, this.passGradeExposure());
         gl.uniform3fv(u['uAmbient'] ?? null, env.ambient);
         gl.uniform3fv(u['uAmbientGround'] ?? null, env.ambientGround ?? env.ambient);
         gl.uniform1i(u['uNoiseOctaves'] ?? null, this.quality.plumeNoiseOctaves);
@@ -4595,6 +4651,8 @@ export class WebGL2Renderer {
         gl.uniform3fv(u['uCoreColor'] ?? null, core);
         gl.uniform3fv(u['uEdgeColor'] ?? null, edge);
         gl.uniform1f(u['uCoreGain'] ?? null, coreGain);
+        gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
+        gl.uniform1f(u['uOutputExposure'] ?? null, this.passGradeExposure());
         bindAtmosphere(gl, u, env, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.quality.underwaterAtmosphere);
         batch.drawTo(gl, count);
     }
@@ -4652,8 +4710,8 @@ export class WebGL2Renderer {
         gl.uniform3fv(u['uColor'] ?? null, color);
         gl.uniform1f(u['uOpacity'] ?? null, opacity);
         gl.uniform1f(u['uSoftness'] ?? null, softness);
-        gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
-        gl.uniform1f(u['uOutputExposure'] ?? null, this.gradeExposure());
+        gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
+        gl.uniform1f(u['uOutputExposure'] ?? null, this.passGradeExposure());
         bindAtmosphere(gl, u, env, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.quality.underwaterAtmosphere);
         lines.drawTo(gl, count, additive);
     }
@@ -4686,6 +4744,8 @@ export class WebGL2Renderer {
         gl.uniform3fv(u['uDirectionalColor'] ?? null, env.directionalColor);
         gl.uniform3fv(u['uAmbient'] ?? null, env.ambient);
         gl.uniform3fv(u['uCameraPos'] ?? null, camera.position);
+        gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
+        gl.uniform1f(u['uOutputExposure'] ?? null, this.passGradeExposure());
         bindAtmosphere(gl, u, env, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.quality.underwaterAtmosphere);
         // Foliage is thin and seen from both faces; culling it loses half of it.
         gl.disable(gl.CULL_FACE);
@@ -4819,13 +4879,13 @@ export class WebGL2Renderer {
     // --- Draws that own their context ----------------------------------------
     drawPlumes(plumes, camera, timeSeconds, env, windX = 0, windZ = 0, originX = 0, originY = 0, originZ = 0) {
         this.scatterSkin();
-        plumes.draw(this.gl, this.frameViewFor(camera), timeSeconds, env, this.quality.underwaterAtmosphere, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.reflectionPassActive ? (this.planarReflection?.clipPlane ?? null) : null, windX, windZ, originX, originY, originZ);
+        plumes.draw(this.gl, this.frameViewFor(camera), timeSeconds, env, this.quality.underwaterAtmosphere, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.reflectionPassActive ? (this.planarReflection?.clipPlane ?? null) : null, windX, windZ, originX, originY, originZ, this.passGrade(), this.passGradeExposure());
     }
     drawWater(water, camera, timeSeconds, settings, env, windX = 0, windZ = 0) {
         if (!this.quality.water)
             return;
         this.waterBudget.ask();
-        water.draw(this.gl, this.frameViewFor(camera), timeSeconds, settings, env.directionalDir, env.directionalColor, env.ambient, env, this.quality.underwaterAtmosphere, this.reflectionReadyThisFrame ? this.planarReflection : null, env, this.quality.pointLightFalloff, windX, windZ);
+        water.draw(this.gl, this.frameViewFor(camera), timeSeconds, settings, env.directionalDir, env.directionalColor, env.ambient, env, this.quality.underwaterAtmosphere, this.reflectionReadyThisFrame ? this.planarReflection : null, env, this.quality.pointLightFalloff, windX, windZ, this.passGrade(), this.passGradeExposure());
     }
     /**
      * Draw after the opaque scene: this is light added to surfaces already shaded,
@@ -4835,7 +4895,7 @@ export class WebGL2Renderer {
         this.scatterSkin();
         if (caustics === null || !this.quality.water)
             return;
-        const drew = caustics.draw(this.gl, this.frameViewFor(camera), timeSeconds, env.directionalDir, env.directionalColor, env.ambient, env, this.quality.underwaterAtmosphere, windX, windZ, strength);
+        const drew = caustics.draw(this.gl, this.frameViewFor(camera), timeSeconds, env.directionalDir, env.directionalColor, env.ambient, env, this.quality.underwaterAtmosphere, windX, windZ, strength, this.passGrade(), this.passGradeExposure());
         if (drew)
             this.causticsBudget.ask();
     }
@@ -4872,7 +4932,7 @@ export class WebGL2Renderer {
             return null;
         this.reflectionReadyThisFrame = false;
         this.reflectionAtmosphereY = source.position[1] ?? 0;
-        const camera = reflection.begin(this.gl, this.canvas.width, this.canvas.height, source, planeY, clearColor);
+        const camera = reflection.begin(this.gl, this.canvas.width, this.canvas.height, source, planeY, this.clearOf(clearColor));
         this.gpuTimer.begin('reflection');
         this.reflectionPassActive = true;
         return camera;
@@ -5495,6 +5555,7 @@ export class WebGL2Renderer {
             worldUvs: asIf.WORLD_UVS ?? this.litOn.WORLD_UVS,
             movingSun: asIf.MOVING_SUN ?? this.litOn.MOVING_SUN,
             layered: asIf.LAYERED ?? this.litOn.LAYERED,
+            layerLooks: asIf.LAYER_LOOKS ?? this.litOn.LAYER_LOOKS,
             maxLights: budget.maxLights,
             maxAreaLights: budget.maxAreaLights,
         });
@@ -6009,7 +6070,8 @@ export class WebGL2Renderer {
             gl.clear(gl.DEPTH_BUFFER_BIT);
         }
         else {
-            gl.clearColor(clearColor[0], clearColor[1], clearColor[2], 1);
+            const clear = this.clearOf(clearColor);
+            gl.clearColor(clear[0], clear[1], clear[2], 1);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         }
         /*
@@ -6103,6 +6165,9 @@ export class WebGL2Renderer {
         gl.uniformMatrix4fv(this.panelUniforms['uClipCorrection'] ?? null, false, IDENTITY_MAT4);
         gl.uniform3fv(this.panelUniforms['uColor'] ?? null, color);
         gl.uniform1f(this.panelUniforms['uAlpha'] ?? null, alpha);
+        /* An interface: the screen encode, never the curve. See `interfaceGrade`. */
+        gl.uniform1i(this.panelUniforms['uOutputTransform'] ?? null, interfaceGrade(this.passGrade()));
+        gl.uniform1f(this.panelUniforms['uOutputExposure'] ?? null, 1);
         gl.drawArrays(gl.TRIANGLES, 0, 6);
         gl.bindVertexArray(null);
         gl.depthMask(true);
@@ -6785,7 +6850,8 @@ export class WebGL2Renderer {
         this.sceneTarget?.begin(this.canvas.width, this.canvas.height);
         /* The materials' maps on the scene's framebuffer, cleared and disabled: `reflectionKeeps`. */
         this.reflectionTargets?.begin(this.canvas.width, this.canvas.height);
-        gl.clearColor(clearColor[0], clearColor[1], clearColor[2], 1);
+        const clear = this.clearOf(clearColor);
+        gl.clearColor(clear[0], clear[1], clear[2], 1);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     }
     /**
@@ -6920,7 +6986,7 @@ export class WebGL2Renderer {
                 exposure: this.exposure,
                 film: this.filmConstants,
             }
-            : { transform: 0, exposure: 1 };
+            : { transform: 0, exposure: 1, sceneGraded: this.passGrade() !== 0 };
         /*
          * Depth of field, on the same ceiling-and-dial split as bloom above: `depthOfField` decides
          * how far a defocused point may spread and this frame's `setDepthOfField` decides where the
@@ -6970,7 +7036,7 @@ export class WebGL2Renderer {
             else if (this.sceneTarget !== null) {
                 this.decals ??= new DecalPass(this.gl);
                 this.sceneTarget.bind();
-                this.decals.drawDecals(this.decalQueue, marks, this.frameViewProj, this.frameEye, this.canvas.width, this.canvas.height);
+                this.decals.drawDecals(this.decalQueue, marks, this.frameViewProj, this.frameEye, this.canvas.width, this.canvas.height, this.passGrade());
             }
         }
         /*
@@ -7122,7 +7188,7 @@ export class WebGL2Renderer {
                     /* The march finished on the default framebuffer, which is not where the frame is being
                        drawn. See `resolveReflections`, which is the same two-step for the same reason. */
                     this.sceneTarget.bind();
-                    this.medium.compositeMedium(depthCopy, this.canvas.width, this.canvas.height);
+                    this.medium.compositeMedium(depthCopy, this.canvas.width, this.canvas.height, this.passGrade(), this.passGradeExposure());
                 }
             }
         }
@@ -7351,6 +7417,7 @@ export class WebGL2Renderer {
         resolveTransmission(null, this.transmission);
         /* Nor layers: one layer until a material asks for more. */
         this.layerFloats.fill(0);
+        this.lookFloats.fill(0);
         this.overlayMaps = null;
         this.overlayTexture = null;
         /* Nor an ambient of its own: the frame's, until a draw asks. See `setAmbientSH`. */
@@ -7494,6 +7561,7 @@ export class WebGL2Renderer {
         gl.uniform4fv(u['uOverlay'] ?? null, this.overlayFloats);
         gl.uniform4fv(u['uWorldUv'] ?? null, this.projection);
         gl.uniform4fv(u['uLayers'] ?? null, this.layerFloats);
+        gl.uniform4fv(u['uLayerLooks'] ?? null, this.lookFloats);
         /* Neither refracting nor glass, which is every draw that does not say otherwise. See
            `bindSeeThrough` for the four numbers in the one vector. */
         gl.uniform4f(u['uSeeThrough'] ?? null, 0, 0, 0, 0);
@@ -7541,12 +7609,11 @@ export class WebGL2Renderer {
          * exists to keep. With `screenEffects` off there is no resolve at all and the mesh pass
          * writes straight to the canvas, so it stays where it always was.
          *
-         * The consequence worth stating: full grading needs the composite. Without it the sky, the
-         * particles, the film and the water are still ungraded beside a world that is, which is the
-         * inconsistency that existed everywhere before this moved.
+         * Every other pass grades through the same gate, `passGrade`, so a frame without a composite
+         * is graded pass by pass to the curve a composite would have applied once.
          */
-        gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
-        gl.uniform1f(u['uOutputExposure'] ?? null, this.gradeExposure());
+        gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
+        gl.uniform1f(u['uOutputExposure'] ?? null, this.passGradeExposure());
         gl.uniform3fv(u['uCameraPos'] ?? null, camera.position);
         /*
          * Solid, every frame, before anything asks otherwise. A GL uniform starts at
@@ -7999,7 +8066,7 @@ export class WebGL2Renderer {
             return;
         const depth = scene.snapshotDepth(true);
         mat4.invert(this.skinInverseProjection, projection);
-        skin.spread(scene, depth, this.emptyTexture2D, projection, this.skinInverseProjection);
+        skin.spread(scene, depth, this.emptyTexture2D, projection, this.skinInverseProjection, this.passGrade(), this.passGradeExposure());
         this.useFlatProgram();
     }
     /** One draw of a mesh, as `drawMesh` describes, of the half of a skin `half` names. */
@@ -8322,7 +8389,7 @@ export class WebGL2Renderer {
            means rather than dropping the whole transform. `Math.min` rather than a literal, so a
            renderer asked for `none` stays at none and one asked for `srgb` is already there. */
         if (!toneMapped)
-            gl.uniform1i(u['uOutputTransform'] ?? null, Math.min(this.gradeCode(), 1));
+            gl.uniform1i(u['uOutputTransform'] ?? null, Math.min(this.passGrade(), 1));
         /* Scoped and handed back like every other state here, so a tinted draw cannot leak its
            colour onto the next one. See `TranslucentMeshOptions.tint`. */
         const tint = options.tint ?? null;
@@ -8407,7 +8474,7 @@ export class WebGL2Renderer {
         if (fog !== this.surfaceFog)
             gl.uniform1i(u['uFogEnabled'] ?? null, this.surfaceFog);
         if (!toneMapped)
-            gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
+            gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
         if (own)
             this.materials.dirty();
     }
@@ -8496,7 +8563,7 @@ export class WebGL2Renderer {
         /*
          * **A probe stores radiance, not display pixels.**
          *
-         * `gradeCode()` is the ACES curve and the sRGB encode whenever the frame has no HDR target,
+         * `passGrade()` is the ACES curve and the sRGB encode whenever the frame has no HDR target,
          * so every face was baked through the whole output transform and the shader then sampled the
          * result as though it were light. Two things came of that and both read as "the reflection is
          * dull": the curve pulls everything bright toward 1 *before* it reaches the cube, so no
@@ -8546,16 +8613,17 @@ export class WebGL2Renderer {
         }
         finally {
             this.gl.frontFace(this.gl.CCW);
-            this.useFlatProgram();
-            this.gl.uniform1i(this.flatUniforms['uOutputTransform'] ?? null, this.gradeCode());
-            this.gl.uniform1f(this.flatUniforms['uOutputExposure'] ?? null, this.gradeExposure());
-            this.materials.dirty();
             /*
              * Cleared even if a caller's own draw threw, because leaving this set would keep every
-             * later frame reading the placeholder and quietly reflecting nothing.
+             * later frame reading the placeholder and quietly reflecting nothing. Before the grade is
+             * put back, which asks it.
              */
             this.probePassActive = false;
             this.probeBounce = false;
+            this.useFlatProgram();
+            this.gl.uniform1i(this.flatUniforms['uOutputTransform'] ?? null, this.passGrade());
+            this.gl.uniform1f(this.flatUniforms['uOutputExposure'] ?? null, this.passGradeExposure());
+            this.materials.dirty();
             /* Back to the canvas, or to the frame's own target if one is bound. See `SceneTarget`. */
             if (this.sceneTarget !== null && !this.framePresented)
                 this.sceneTarget.bind();
@@ -8739,6 +8807,8 @@ export class WebGL2Renderer {
         gl.uniformMatrix4fv(u['uModel'] ?? null, false, model);
         gl.uniform3fv(u['uCameraPos'] ?? null, camera.position);
         gl.uniform1f(u['uStrength'] ?? null, Math.min(shown, 1));
+        gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
+        gl.uniform1f(u['uOutputExposure'] ?? null, this.passGradeExposure());
         gl.uniform1f(u['uLength'] ?? null, length);
         gl.uniform1f(u['uSpread'] ?? null, spread);
         gl.uniform1f(u['uDust'] ?? null, clamp(options.dust ?? 0, 0, 1));
@@ -8871,6 +8941,8 @@ export class WebGL2Renderer {
         gl.uniform3fv(u['uCameraPos'] ?? null, camera.position);
         gl.uniform1f(u['uTime'] ?? null, timeSeconds);
         gl.uniform1f(u['uSheen'] ?? null, sheen);
+        gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
+        gl.uniform1f(u['uOutputExposure'] ?? null, this.passGradeExposure());
         gl.uniform1f(u['uFilmRoughness'] ?? null, Math.min(1, Math.max(0, options.roughness ?? 0)));
         gl.uniform1f(u['uFilmRoughnessCycles'] ?? null, Math.max(0.01, options.roughnessCyclesPerMetre ?? 60));
         gl.uniform1i(u['uClipEnabled'] ?? null, this.reflectionPassActive ? 1 : 0);
@@ -8914,6 +8986,8 @@ export class WebGL2Renderer {
         gl.uniform1f(u['uMoonPhase'] ?? null, sky.moonPhase);
         gl.uniform1f(u['uNightFactor'] ?? null, sky.nightFactor);
         gl.uniform2f(u['uCloudOffset'] ?? null, sky.cloudOffsetX, sky.cloudOffsetZ);
+        gl.uniform1i(u['uOutputTransform'] ?? null, this.passGrade());
+        gl.uniform1f(u['uOutputExposure'] ?? null, this.passGradeExposure());
         bindAtmosphere(gl, u, env, this.reflectionPassActive ? this.reflectionAtmosphereY : (camera.position[1] ?? 0), this.quality.underwaterAtmosphere);
         gl.bindVertexArray(this.skyVao);
         gl.depthMask(false);

package/dist/render/backend/webgl2/skinScatter.d.ts

@@ -46,7 +46,9 @@ export declare class GlSkinScatter {
      * is the frame's depth as a single-sampled texture, or null where none could be had — and then
      * the diffuse goes back unspread rather than not at all, so the skin keeps its light.
      */
-    spread(scene: SceneTarget, depth: WebGLTexture | null, empty: WebGLTexture, projection: ArrayLike<number>, inverse: ArrayLike<number>): void;
+    spread(scene: SceneTarget, depth: WebGLTexture | null, empty: WebGLTexture, projection: ArrayLike<number>, inverse: ArrayLike<number>, 
+    /** 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: what was drawn into the target was last frame's. */
     reset(): void;
     /** A multisampled target into its single-sampled texture. */

package/dist/render/backend/webgl2/skinScatter.js

@@ -123,7 +123,9 @@ export class GlSkinScatter {
      * is the frame's depth as a single-sampled texture, or null where none could be had — and then
      * the diffuse goes back unspread rather than not at all, so the skin keeps its light.
      */
-    spread(scene, depth, empty, projection, inverse) {
+    spread(scene, depth, empty, projection, inverse, 
+    /** The frame's grade, which the second axis applies to the light it adds. */
+    outputTransform = 0, outputExposure = 1) {
         const { gl } = this;
         if (this.multisampled !== null) {
             this.resolve(this.drawFramebuffer, this.resolveFramebuffer);
@@ -139,6 +141,8 @@ export class GlSkinScatter {
         gl.uniform1i(u['uSkin'] ?? null, SKIN_BLUR_TEXTURE_UNIT);
         gl.uniform1i(u['uDepth'] ?? null, SKIN_BLUR_DEPTH_UNIT);
         gl.uniform1i(u['uAlbedo'] ?? null, SKIN_BLUR_ALBEDO_UNIT);
+        gl.uniform1i(u['uOutputTransform'] ?? null, outputTransform);
+        gl.uniform1f(u['uOutputExposure'] ?? null, outputExposure);
         gl.activeTexture(gl.TEXTURE0 + SKIN_BLUR_ALBEDO_UNIT);
         gl.bindTexture(gl.TEXTURE_2D, this.albedo ?? empty);
         /* The four terms that carry a depth back to view-space metres: the occlusion blur's own. */

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

@@ -11,7 +11,7 @@ import type { PipelineCache } from './pipelineCache.ts';
 export declare const BOLT_VERT_FIELDS: UniformFields;
 export declare const BOLT_VERT_SIZE: 96;
 export declare const BOLT_FRAG_FIELDS: UniformFields;
-export declare const BOLT_FRAG_SIZE: 128;
+export declare const BOLT_FRAG_SIZE: 144;
 /** A batch of arcs on the device, behind the surface's opaque handle. */
 export interface GpuBolts {
     readonly fromBuffer: GPUBuffer;

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

@@ -10,7 +10,7 @@ import type { PipelineCache } from './pipelineCache.ts';
 export declare const CAUSTICS_VERT_FIELDS: UniformFields;
 export declare const CAUSTICS_VERT_SIZE: 64;
 export declare const CAUSTICS_FRAG_FIELDS: UniformFields;
-export declare const CAUSTICS_FRAG_SIZE: 144;
+export declare const CAUSTICS_FRAG_SIZE: 160;
 /** A lit surface on the device, behind the API's opaque handle. */
 export interface GpuCaustics {
     readonly vertexBuffers: readonly GPUBuffer[];

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

@@ -14,7 +14,7 @@ import type { PipelineCache } from './pipelineCache.ts';
 export declare const FILM_VERT_FIELDS: UniformFields;
 export declare const FILM_VERT_SIZE: 128;
 export declare const FILM_FRAG_FIELDS: UniformFields;
-export declare const FILM_FRAG_SIZE: 144;
+export declare const FILM_FRAG_SIZE: 160;
 export declare function createFilmBindGroupLayout(device: GPUDevice): GPUBindGroupLayout;
 /** Bound once against both rings; a dynamic offset per film. See `createPanelBindGroup`. */
 export declare function createFilmBindGroup(device: GPUDevice, layout: GPUBindGroupLayout, vertices: GPUBuffer, fragments: GPUBuffer, reflection: GPUTextureView, sampler: GPUSampler): GPUBindGroup;

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

@@ -10,7 +10,7 @@ import type { PipelineCache } from './pipelineCache.ts';
 export declare const FLOCK_VERT_FIELDS: UniformFields;
 export declare const FLOCK_VERT_SIZE: 112;
 export declare const FLOCK_FRAG_FIELDS: UniformFields;
-export declare const FLOCK_FRAG_SIZE: 16;
+export declare const FLOCK_FRAG_SIZE: 32;
 /** A flock on the device, behind the surface's opaque handle. */
 export interface GpuFlock {
     readonly corners: GPUBuffer;

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

@@ -19,7 +19,9 @@ import type { PassContext, PassDefinition, PassDevice, PrepareContext } from '..
  * can look at, and looking is what a number cannot replace: if the geometry is in the right places
  * at the right sizes the composition is right, and if a cascade boundary shows as a seam the fade
  * is wrong. Wave 4A's own recorded failure — a phantom surface that passed 111,907 parity samples
- * and was found by looking at a picture — is why this exists at all.
+ * and was found by looking at a picture — is why this exists at all. **So it is not graded**, alone
+ * of the passes that draw into a frame: what it shows are the field's values, which a curve would
+ * bend into a picture of something else.
  *
  * **The field it marches is one frame old**, because the renderer composes at `endFrame` and
  * `prepare` runs at `beginFrame`. `PrepareContext.distanceField` says why that is right rather

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

@@ -660,7 +660,16 @@ export declare class GpuDrivenPass implements PassDefinition {
     private readonly scheduled;
     private readonly graphScratch;
     private readonly shape;
-    private gradeWarned;
+    /**
+     * 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`.
+     */
+    private gradeBuffer;
+    private readonly gradeStaging;
+    private readonly gradeInts;
+    private readonly gradeFloats;
+    private gradeWrittenCode;
+    private gradeWrittenExposure;
     constructor(scene: StreamingScene, materials: readonly GpuDrivenMaterial[], shadow?: GpuDrivenShadowOptions);
     /** How many clusters the scene holds, which every per-cluster dispatch is sized by. */
     get clusterCount(): number;