@driftengine/core 4.8.2 → 4.8.3

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

@@ -1,6 +1,7 @@
 import { FrameBudget } from '../budget.ts';
 import { MaterialChanges, ownsMaterial } from '../materialChanges.ts';
-import { FOG_RECEDE, fogModeOf } from '../drawFog.ts';
+import { FOG_OFF, FOG_RECEDE, fogModeOf } from '../drawFog.ts';
+import { blendCovering, blendKeeping } from '../../sceneCoverage.ts';
 import { mat4 } from 'gl-matrix';
 import {
   GL_DEPTH_REMAP,
@@ -1249,6 +1250,11 @@ export class WebGL2Renderer implements RendererApi {
   private readonly surfaceScene = new Float32Array(4);
   /** The two halves of `uWriteMode`, kept here because a `vec2` is written whole. */
   private oitWeight = 0;
+  /**
+   * How the surfaces drawn next meet the medium: what `setSurfaceFog` set, and `FOG_RECEDE` from
+   * each `bindMeshPass`. A translucent draw's own fog is measured against this and puts it back.
+   */
+  private surfaceFog = FOG_RECEDE;
   private ditherFade = 0;
   /** Said once, not per frame, where the context cannot give the float target the sum needs. */
   private oitRefused = false;
@@ -1882,6 +1888,7 @@ export class WebGL2Renderer implements RendererApi {
     gl.uniform1i(u['uPeelShadowLayer'] ?? null, this.activeDepthPeel ? 1 : 0);
     if (this.activeDepthPeel) gl.uniform1i(u['uPreviousShadowMap'] ?? null, 0);
     gl.uniform2f(u['uUvScale'] ?? null, cutout.u, cutout.v);
+    gl.uniform2f(u['uUvOffset'] ?? null, cutout.uOffset, cutout.vOffset);
     gl.uniform1f(u['uAlphaCutout'] ?? null, cutout.cutoff);
     /* Narrowed for the reason the sink's own `mesh` gives: this renderer only hands out its own. */
     (cutout.albedo as SurfaceTexture).bind(gl, SURFACE_TEXTURE_UNIT);
@@ -3453,6 +3460,7 @@ export class WebGL2Renderer implements RendererApi {
      * how big a dome was — WebGPU writes it before its own early return and WebGL2 did not.
      */
     gl.uniform2f(u['uUvScale'] ?? null, material?.uScale ?? 1, material?.vScale ?? 1);
+    gl.uniform2f(u['uUvOffset'] ?? null, material?.uOffset ?? 0, material?.vOffset ?? 0);
     gl.uniform1i(u['uDoubleSided'] ?? null, material?.doubleSided === true ? 1 : 0);
 
     /* The albedo's effects table, or the stand-in the shader reads as none. Before the early
@@ -3585,6 +3593,28 @@ export class WebGL2Renderer implements RendererApi {
     this.writeFlatFloat('uGrain', Math.min(1, Math.max(0, amount)));
   }
 
+  /**
+   * Whether the surfaces drawn next meet the medium: distance fog and the global medium's haze.
+   * True is the default, and what `bindMeshPass` restores.
+   *
+   * **The opaque counterpart of `TranslucentMeshOptions.fog`**, which a translucent draw has had
+   * all along; the shader's per-draw switch was there, and nothing reached it for an ordinary mesh.
+   * What it is for is a medium that darkens one thing and not another — a floor receding into the
+   * distance under figures that must keep their full value however far from the camera they stand.
+   * Material state like `setSurfaceGrain`: instanced and skinned draws read it too, and a
+   * translucent draw's own `fog` is measured against it and puts it back.
+   *
+   * **What it gives up** is the medium's honesty: a surface out of the fog is drawn as though the
+   * air between it and the eye were empty, so it should be a surface the scene means to stand
+   * apart, not one whose distance is the point.
+   */
+  setSurfaceFog(enabled: boolean): void {
+    if (this.contextLost) return;
+    this.materials.dirty();
+    this.surfaceFog = enabled ? FOG_RECEDE : FOG_OFF;
+    this.writeFlatInt('uFogEnabled', this.surfaceFog);
+  }
+
   /**
    * One float of material state, into every flat program.
    *
@@ -3602,6 +3632,15 @@ export class WebGL2Renderer implements RendererApi {
     this.useFlatProgram();
   }
 
+  /** One int of material state, into every flat program, for `writeFlatFloat`'s reason. */
+  private writeFlatInt(name: string, value: number): void {
+    for (const target of this.flatTargets) {
+      this.gl.useProgram(target.program);
+      this.gl.uniform1i(target.uniforms[name] ?? null, value);
+    }
+    this.useFlatProgram();
+  }
+
   /**
    * How much of the surfaces drawn next survives a screen-door dither, for crossfading two levels
    * of detail of one thing.
@@ -3852,7 +3891,7 @@ export class WebGL2Renderer implements RendererApi {
     /* A blended batch shows what is behind it — refraction or glass — as a single draw does, and
        counts a material of its own for it by the rule both backends share (`materialChanges.ts`). */
     const refracting = blend && this.bindSeeThrough(u, options);
-    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
+    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting }, this.surfaceFog);
     if (own) this.materials.dirty();
     this.takeMaterial();
     const depthWrite = options.depthWrite ?? true;
@@ -3876,14 +3915,13 @@ export class WebGL2Renderer implements RendererApi {
      * part of what the count asks.
      */
     if (!lit) gl.uniform1i(u['uLightingEnabled'] ?? null, 0);
-    if (fog !== FOG_RECEDE) gl.uniform1i(u['uFogEnabled'] ?? null, fog);
+    if (fog !== this.surfaceFog) gl.uniform1i(u['uFogEnabled'] ?? null, fog);
     if (!toneMapped) gl.uniform1i(u['uOutputTransform'] ?? null, Math.min(this.gradeCode(), 1));
 
     if (blend) {
       gl.enable(gl.BLEND);
-      if (options.additive === true) gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ZERO, gl.ONE);
-      else
-        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+      if (options.additive === true) blendKeeping(gl, gl.SRC_ALPHA, gl.ONE);
+      else blendCovering(gl, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
       if (!depthWrite) gl.depthMask(false);
     }
     /* The sign follows the compare, which `depthOffsetForLayer` owns — see `drawMesh`, where the
@@ -3916,7 +3954,7 @@ export class WebGL2Renderer implements RendererApi {
        outlives its frame, so a snapshot left on unit 14 is held against the next frame's copy. */
     if (refracting) this.unbindSeeThrough(u);
     if (!lit) gl.uniform1i(u['uLightingEnabled'] ?? null, 1);
-    if (fog !== FOG_RECEDE) gl.uniform1i(u['uFogEnabled'] ?? null, FOG_RECEDE);
+    if (fog !== this.surfaceFog) gl.uniform1i(u['uFogEnabled'] ?? null, this.surfaceFog);
     if (!toneMapped) gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
     if (own) this.materials.dirty();
     this.useFlatProgram();
@@ -5256,6 +5294,7 @@ export class WebGL2Renderer implements RendererApi {
     gl.uniform4fv(u['uGlassLight'] ?? null, this.glassLight);
     if (cutout !== null) {
       gl.uniform2f(u['uUvScale'] ?? null, cutout.u, cutout.v);
+      gl.uniform2f(u['uUvOffset'] ?? null, cutout.uOffset, cutout.vOffset);
       gl.uniform1f(u['uAlphaCutout'] ?? null, cutout.cutoff);
       (cutout.albedo as SurfaceTexture).bind(gl, SURFACE_TEXTURE_UNIT);
       gl.uniform1i(u['uCutoutMap'] ?? null, SURFACE_TEXTURE_UNIT);
@@ -6072,7 +6111,7 @@ export class WebGL2Renderer implements RendererApi {
      */
     gl.disable(gl.CULL_FACE);
     gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    blendCovering(gl, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
     gl.uniform4f(this.panelUniforms['uRect'] ?? null, rect.left, rect.top, rect.width, rect.height);
     gl.uniform2f(
@@ -7509,7 +7548,8 @@ export class WebGL2Renderer implements RendererApi {
      * shape `uOpacity` and `uTint` already use.
      */
     gl.uniform1i(u['uLightingEnabled'] ?? null, 1);
-    gl.uniform1i(u['uFogEnabled'] ?? null, 1);
+    gl.uniform1i(u['uFogEnabled'] ?? null, FOG_RECEDE);
+    this.surfaceFog = FOG_RECEDE;
     /* Grain on by default, so every scene written before it was a choice looks unchanged. */
     gl.uniform1f(u['uGrain'] ?? null, 1);
     /* No dither and no weighting: every draw whole, until a crossfade asks. See `setDitherFade`. */
@@ -7709,6 +7749,7 @@ export class WebGL2Renderer implements RendererApi {
     gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
     gl.uniform1i(u['uSurfaceEffects'] ?? null, SURFACE_EFFECTS_TEXTURE_UNIT);
     gl.uniform2f(u['uUvScale'] ?? null, 1, 1);
+    gl.uniform2f(u['uUvOffset'] ?? null, 0, 0);
     gl.uniform1f(u['uAlbedoCutout'] ?? null, 0);
     gl.uniform1i(u['uDoubleSided'] ?? null, 0);
     this.materialDoubleSided = false;
@@ -8061,7 +8102,7 @@ export class WebGL2Renderer implements RendererApi {
     const fog = fogModeOf(options.fog ?? true, options.additive === true);
     const toneMapped = options.toneMapped ?? true;
     if (!lit) gl.uniform1i(u['uLightingEnabled'] ?? null, 0);
-    if (fog !== FOG_RECEDE) gl.uniform1i(u['uFogEnabled'] ?? null, fog);
+    if (fog !== this.surfaceFog) gl.uniform1i(u['uFogEnabled'] ?? null, fog);
     /* `1` is sRGB alone: the conversion without the curve, which is what dropping the tone map
        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. */
@@ -8093,15 +8134,15 @@ export class WebGL2Renderer implements RendererApi {
      */
     /* Taken for itself when any option differs from the pass, and put back below: the rule both
        backends count material changes by. See `materialChanges.ts`. */
-    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
+    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting }, this.surfaceFog);
     if (own) this.materials.dirty();
     this.takeMaterial();
     const ownsState = !this.oitReplaying;
     if (ownsState) {
       gl.enable(gl.BLEND);
       /* Added, where asked: colour times alpha onto what is there, and the target's alpha kept. */
-      if (options.additive === true) gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ZERO, gl.ONE);
-      else gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      if (options.additive === true) blendKeeping(gl, gl.SRC_ALPHA, gl.ONE);
+      else blendCovering(gl, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
     }
     /*
      * The two depth options, both scoped to this draw and handed straight back — the same
@@ -8133,7 +8174,7 @@ export class WebGL2Renderer implements RendererApi {
     /* Put back for whatever is drawn next, exactly as `uOpacity` and `uTint` are — a pass
        cannot inherit a material from the draw before it. */
     if (!lit) gl.uniform1i(u['uLightingEnabled'] ?? null, 1);
-    if (fog !== FOG_RECEDE) gl.uniform1i(u['uFogEnabled'] ?? null, FOG_RECEDE);
+    if (fog !== this.surfaceFog) gl.uniform1i(u['uFogEnabled'] ?? null, this.surfaceFog);
     if (!toneMapped) gl.uniform1i(u['uOutputTransform'] ?? null, this.gradeCode());
     if (own) this.materials.dirty();
   }
@@ -8561,7 +8602,7 @@ export class WebGL2Renderer implements RendererApi {
     }
 
     gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+    blendKeeping(gl, gl.SRC_ALPHA, gl.ONE);
     gl.depthMask(false);
     gl.cullFace(inside ? gl.FRONT : gl.BACK);
     mesh.draw(gl);
@@ -8656,7 +8697,7 @@ export class WebGL2Renderer implements RendererApi {
     );
 
     gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    blendKeeping(gl, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
     gl.depthMask(false);
     mesh.draw(gl);
     gl.depthMask(true);

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

@@ -8,6 +8,7 @@ import type { UniformFields } from './scatterPass.ts';
 import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_KEEPS } from '../../sceneCoverage.ts';
 
 /**
  * The caustics pass: a surface lit by nearby water.
@@ -162,7 +163,7 @@ export function causticsPipeline(
           format: cache.format,
           blend: {
             color: { srcFactor: 'one', dstFactor: 'one', operation: 'add' },
-            alpha: { srcFactor: 'one', dstFactor: 'one', operation: 'add' },
+            alpha: SCENE_ALPHA_KEEPS,
           },
         },
       ],

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

@@ -24,9 +24,10 @@ export const DEPTH_VERT_FIELDS = DEPTH_BINDINGS.DEPTH_VERT.fields;
 export const DEPTH_VERT_SIZE = DEPTH_BINDINGS.DEPTH_VERT.uniformSize;
 export const DEPTH_FRAG_SIZE = DEPTH_BINDINGS.DEPTH_FRAG.uniformSize;
 /*
- * The cutout variants' vertex blocks. The rigid one is the plain block with `uUvScale` and
- * `uAlphaCutout` after every other field, so a slot written for it is written with the plain
- * offsets plus these two; the instanced one has no model and no wind, so its two sit earlier.
+ * The cutout variants' vertex blocks. The rigid one is the plain block with `uUvScale`,
+ * `uUvOffset` and `uAlphaCutout` after every other field, so a slot written for it is written with
+ * the plain offsets plus these three; the instanced one has no model and no wind, so its three sit
+ * earlier.
  */
 export const DEPTH_CUTOUT_VERT_FIELDS = DEPTH_BINDINGS.DEPTH_CUTOUT_VERT.fields;
 export const DEPTH_CUTOUT_VERT_SIZE = DEPTH_BINDINGS.DEPTH_CUTOUT_VERT.uniformSize;

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

@@ -9,6 +9,7 @@ import type { UniformFields } from './scatterPass.ts';
 import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_KEEPS } from '../../sceneCoverage.ts';
 
 /**
  * The film pass: a thin wet layer — an oil slick, a puddle — lying over the world.
@@ -111,7 +112,7 @@ export function filmPipeline(
           format: cache.format,
           blend: {
             color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: SCENE_ALPHA_KEEPS,
           },
         },
       ],

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

@@ -7,6 +7,7 @@ import {
 import { vertexBufferLayouts } from './buffers.ts';
 import type { LitSwitch, PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /** The material maps the flat pass reads: `2d-array` colour, filtered, not shadow maps. */
 const SURFACE_MAPS: ReadonlySet<string> = new Set([
@@ -681,7 +682,7 @@ function flatDescriptor(
                       dstFactor: 'one-minus-src-alpha',
                       operation: 'add',
                     },
-                    alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                    alpha: SCENE_ALPHA_COVERS,
                   },
                 }
               : { format: cache.format }),

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

@@ -9,6 +9,7 @@ import type { UniformFields } from './scatterPass.ts';
 import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The line pass: a polyline with a real width, four vertices a segment.
@@ -222,7 +223,7 @@ export function linePipeline(
                   dstFactor: 'one-minus-src-alpha',
                   operation: 'add',
                 },
-                alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                alpha: SCENE_ALPHA_COVERS,
               },
         },
       ],

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

@@ -7,6 +7,7 @@ import type { UniformFields } from './scatterPass.ts';
 import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The panel pass: two triangles in screen space, one colour, one alpha.
@@ -121,7 +122,7 @@ export function panelPipeline(
           format: cache.format,
           blend: {
             color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: SCENE_ALPHA_COVERS,
           },
         },
       ],

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

@@ -8,6 +8,7 @@ import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import type { UniformFields } from './scatterPass.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The particle pass: a crossed pair of quads per live particle, rebuilt every frame.
@@ -367,7 +368,7 @@ export function particlePipeline(
                     dstFactor: 'one-minus-src-alpha',
                     operation: 'add',
                   },
-                  alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                  alpha: SCENE_ALPHA_COVERS,
                 },
         },
       ],

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

@@ -9,6 +9,7 @@ import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import type { UniformFields } from './scatterPass.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The plume pass: crossed quads per plume, displaced and faded in the shaders.
@@ -251,7 +252,7 @@ function blendState(blend: 'additive' | 'alpha'): GPUBlendState {
       }
     : {
         color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-        alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+        alpha: SCENE_ALPHA_COVERS,
       };
 }
 

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

@@ -39,6 +39,7 @@ import {
 import type { UniformFields } from './scatterPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_KEEPS, SCENE_ALPHA_TRANSMITS } from '../../sceneCoverage.ts';
 
 /**
  * The composite: everything that happens to the frame after the world is drawn.
@@ -271,7 +272,7 @@ export function createPostStageLayout(
  */
 export const OIT_COMPOSITE_BLEND: GPUBlendState = {
   color: { srcFactor: 'one-minus-src-alpha', dstFactor: 'src-alpha', operation: 'add' },
-  alpha: { srcFactor: 'one-minus-src-alpha', dstFactor: 'src-alpha', operation: 'add' },
+  alpha: SCENE_ALPHA_TRANSMITS,
 };
 
 /**
@@ -290,17 +291,19 @@ export const OIT_COMPOSITE_BLEND: GPUBlendState = {
  * exactly the integral — and the composite therefore never samples the colour it is modifying,
  * which is the read both backends are entitled to call undefined.
  *
- * Alpha is `(zero, one)`: the frame's own alpha is not the medium's to spend. The scene target
- * carries it to the canvas, and a medium that wrote there would make a foggy frame translucent.
+ * Alpha is the transmittance again, `share * a`: the scene's alpha is how much of the pixel is
+ * still the opaque surface, which is what the composite lets ambient occlusion darken, and a
+ * medium thick enough to hide a corner hides its occlusion too (`sceneCoverage.ts`). It reaches
+ * no canvas: both are opaque, and the composite writes 1.
  */
 export const MEDIUM_TRANSMIT_BLEND: GPUBlendState = {
   color: { srcFactor: 'one', dstFactor: 'src-alpha', operation: 'add' },
-  alpha: { srcFactor: 'zero', dstFactor: 'one', operation: 'add' },
+  alpha: SCENE_ALPHA_TRANSMITS,
 };
 
 export const DECAL_MULTIPLY_BLEND: GPUBlendState = {
   color: { srcFactor: 'zero', dstFactor: 'src', operation: 'add' },
-  alpha: { srcFactor: 'zero', dstFactor: 'src', operation: 'add' },
+  alpha: SCENE_ALPHA_KEEPS,
 };
 
 /**
@@ -316,6 +319,18 @@ export const PREMULTIPLIED_OVER_BLEND: GPUBlendState = {
   alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
 };
 
+/**
+ * The same `over` for the resolve that lands a reflection on the scene, keeping the scene's alpha.
+ *
+ * A reflection is a layer of the surface it is seen in, so the surface's share of the pixel is
+ * unchanged (`sceneCoverage.ts`). The trace keeps `PREMULTIPLIED_OVER_BLEND`, because its target is
+ * the reflection's own and its alpha is the coverage this resolve reads.
+ */
+export const REFLECTION_OVER_BLEND: GPUBlendState = {
+  color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+  alpha: SCENE_ALPHA_KEEPS,
+};
+
 export const ADDITIVE_BLEND: GPUBlendState = {
   color: { srcFactor: 'one', dstFactor: 'one', operation: 'add' },
   alpha: { srcFactor: 'one', dstFactor: 'one', operation: 'add' },

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

@@ -254,6 +254,7 @@ import {
   DECAL_TEXTURES,
   DECAL_UNIFORMS,
   PREMULTIPLIED_OVER_BLEND,
+  REFLECTION_OVER_BLEND,
   SSR_FRAG_FIELDS,
   SSR_FRAG_SIZE,
   SSR_RESOLVE_FRAG_WGSL,
@@ -492,7 +493,7 @@ import {
 import { aimReflection, createGpuReflection, type GpuReflection } from './reflectionPass.ts';
 import { FrameBudget } from '../budget.ts';
 import { MaterialChanges, ownsMaterial } from '../materialChanges.ts';
-import { FOG_RECEDE, fogModeOf } from '../drawFog.ts';
+import { FOG_OFF, FOG_RECEDE, fogModeOf } from '../drawFog.ts';
 import { DYNAMIC_ALIGNMENT as DYNAMIC_UNIFORM_ALIGNMENT, UniformRing } from './uniformRing.ts';
 import { DecalQueue, MAX_DRAWN_DECALS } from '../../decalQueue.ts';
 import { DistanceFieldScene } from '../../gi/fieldScene.ts';
@@ -2805,6 +2806,13 @@ export class WebGPURenderer implements RendererApi {
   private blankAlbedoBindGroup: GPUBindGroup;
   /** Repeats across the mesh's own UV range. Per draw, because `uUvScale` is a vertex uniform. */
   private readonly uvScale = new Float32Array([1, 1]);
+  /** Where the texture starts, after the scale. Per draw, beside `uvScale`. */
+  private readonly uvOffset = new Float32Array([0, 0]);
+  /**
+   * How the surfaces drawn next meet the medium: what `setSurfaceFog` set, and `FOG_RECEDE` from
+   * each `bindMeshPass`. A translucent draw's own fog is measured against this and puts it back.
+   */
+  private surfaceFog = FOG_RECEDE;
   /** Whether the bound material is seen from both faces. See `SurfaceMaterial.doubleSided`. */
   private materialDoubleSided = false;
   /** Whether the bound material has a map, for the warning a mesh with no coordinates earns. */
@@ -2940,6 +2948,8 @@ export class WebGPURenderer implements RendererApi {
     const albedo = material?.albedo ?? null;
     this.uvScale[0] = material?.uScale ?? 1;
     this.uvScale[1] = material?.vScale ?? 1;
+    this.uvOffset[0] = material?.uOffset ?? 0;
+    this.uvOffset[1] = material?.vOffset ?? 0;
     this.materialDoubleSided = material?.doubleSided === true;
     this.materialHasMaps = materialHasMaps(material);
     const normal = (material?.normal ?? null) as GpuSurfaceTexture | null;
@@ -3104,6 +3114,14 @@ export class WebGPURenderer implements RendererApi {
     });
   }
 
+  /** Whether the surfaces drawn next meet the medium. See `renderer.ts`. */
+  setSurfaceFog(enabled: boolean): void {
+    this.surfaceFog = enabled ? FOG_RECEDE : FOG_OFF;
+    this.material((_f, i) => {
+      i[this.materialField('uFogEnabled')] = this.surfaceFog;
+    });
+  }
+
   /**
    * How much of the surfaces drawn next survives a screen-door dither. See `renderer.ts`.
    *
@@ -5392,17 +5410,20 @@ export class WebGPURenderer implements RendererApi {
     return group;
   }
 
-  /** The cutoff and UV scale into a cutout draw's slot, at the offsets its own variant declares. */
+  /** The cutoff and UV scale and offset into a cutout draw's slot, at its own variant's offsets. */
   private writeCutout(
     slot: number,
     cutout: CutoutCaster<unknown>,
     fields: {
       readonly uUvScale: { readonly offset: number };
+      readonly uUvOffset: { readonly offset: number };
       readonly uAlphaCutout: { readonly offset: number };
     },
   ): void {
     this.shadowDraws.writeFloat(slot, fields.uUvScale.offset, cutout.u);
     this.shadowDraws.writeFloat(slot, fields.uUvScale.offset + 4, cutout.v);
+    this.shadowDraws.writeFloat(slot, fields.uUvOffset.offset, cutout.uOffset);
+    this.shadowDraws.writeFloat(slot, fields.uUvOffset.offset + 4, cutout.vOffset);
     this.shadowDraws.writeFloat(slot, fields.uAlphaCutout.offset, cutout.cutoff);
   }
 
@@ -7783,7 +7804,8 @@ export class WebGPURenderer implements RendererApi {
      * these per draw through the material block, the same shape `uOpacity` already uses.
      */
     i[at('uLightingEnabled')] = 1;
-    i[at('uFogEnabled')] = 1;
+    i[at('uFogEnabled')] = FOG_RECEDE;
+    this.surfaceFog = FOG_RECEDE;
     i[at('uAlbedoEnabled')] = 0;
     this.materialHasMaps = false;
 
@@ -8235,6 +8257,8 @@ export class WebGPURenderer implements RendererApi {
     this.bindGroup = this.blankAlbedoBindGroup;
     this.uvScale[0] = 1;
     this.uvScale[1] = 1;
+    this.uvOffset[0] = 0;
+    this.uvOffset[1] = 0;
   }
 
   /**
@@ -8319,7 +8343,10 @@ export class WebGPURenderer implements RendererApi {
      */
     if (this.tracksMotionNow()) this.recordDrawMotion(mesh, model, previousModel);
     noteMapsWithoutUvs(mesh, mesh.hasUvs, this.materialHasMaps);
-    this.submitMesh(mesh, model, tint, 1, false, { depthLayer });
+    /* An opaque draw meets the medium as the dial says: `submitMesh` reads an absent `fog` as
+       true, which is a translucent draw's default and would put every opaque draw back in the fog
+       `setSurfaceFog(false)` took it out of. */
+    this.submitMesh(mesh, model, tint, 1, false, { depthLayer, fog: this.surfaceFog !== FOG_OFF });
   }
 
   /**
@@ -8501,6 +8528,7 @@ export class WebGPURenderer implements RendererApi {
     /* The material's repeats, not a constant: geometry authored in metres is textured at
        whatever density the material asks for without rebuilding it. */
     this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
+    this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvOffset.offset, this.uvOffset);
     this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
     /*
      * Whether this mesh's tangent frame is real. WebGPU has no disabled attribute, so location 10
@@ -8534,7 +8562,7 @@ export class WebGPURenderer implements RendererApi {
     /* Added light fades in the medium rather than receding into it. See `drawFog.ts`. */
     const fog = fogModeOf(options.fog ?? true, blend && options.additive === true);
     const toneMapped = options.toneMapped ?? true;
-    const unlitOrUnfogged = !lit || fog !== FOG_RECEDE;
+    const unlitOrUnfogged = !lit || fog !== this.surfaceFog;
     if (unlitOrUnfogged) {
       if (!lit) this.perFrameInts[this.materialField('uLightingEnabled')] = 0;
       this.perFrameInts[this.materialField('uFogEnabled')] = fog;
@@ -8556,7 +8584,7 @@ export class WebGPURenderer implements RendererApi {
     const refracting = this.bindSeeThrough(options);
     /* Taken for itself when any of those differs from the pass, and put back below: the rule both
        backends count material changes by. See `materialChanges.ts`. */
-    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
+    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting }, this.surfaceFog);
     if (own) this.materials.dirty();
     const base = (mesh as GpuMesh & { key?: string }).key ?? 'flat:s0:u0';
     /*
@@ -8700,7 +8728,7 @@ export class WebGPURenderer implements RendererApi {
     }
     if (unlitOrUnfogged) {
       if (!lit) this.perFrameInts[this.materialField('uLightingEnabled')] = 1;
-      this.perFrameInts[this.materialField('uFogEnabled')] = FOG_RECEDE;
+      this.perFrameInts[this.materialField('uFogEnabled')] = this.surfaceFog;
     }
     /* Back to off for every other draw in the frame, exactly as `uOpacity` is: this scratch is
        shared, so a strength left set is worn by everything drawn after it. */
@@ -8947,6 +8975,7 @@ export class WebGPURenderer implements RendererApi {
       lands ? this.correctedViewProj : this.viewProj,
     );
     this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvScale.offset, this.uvScale);
+    this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uUvOffset.offset, this.uvOffset);
     this.perDraw.writeFloats(slot, FLAT_VERT_FIELDS.uLightViewProj.offset, this.lightViewProj);
     this.perDraw.writeInt(slot, FLAT_VERT_FIELDS.uHasTangents.offset, mesh.hasTangents ? 1 : 0);
 
@@ -8957,7 +8986,7 @@ export class WebGPURenderer implements RendererApi {
     const lit = options.lit ?? true;
     const fog = fogModeOf(options.fog ?? true, blend && options.additive === true);
     const toneMapped = options.toneMapped ?? true;
-    const unlitOrUnfogged = !lit || fog !== FOG_RECEDE;
+    const unlitOrUnfogged = !lit || fog !== this.surfaceFog;
     if (unlitOrUnfogged) {
       if (!lit) this.perFrameInts[this.materialField('uLightingEnabled')] = 0;
       this.perFrameInts[this.materialField('uFogEnabled')] = fog;
@@ -8970,7 +8999,7 @@ export class WebGPURenderer implements RendererApi {
     const layer = Math.min(Math.max(Math.round(options.depthLayer ?? 0), 0), MAX_DEPTH_LAYER);
     /* A blended batch shows what is behind it — refraction or glass — as a single draw does. */
     const refracting = blend && this.bindSeeThrough(options);
-    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting });
+    const own = ownsMaterial({ opacity, lit, fog, toneMapped, refracting }, this.surfaceFog);
     if (own) this.materials.dirty();
     const base = (mesh as GpuMesh & { key?: string }).key ?? 'flat:s0:u0';
     /* `|inst` in the key, for the reason every other suffix is there: an instanced pipeline binds
@@ -9052,7 +9081,7 @@ export class WebGPURenderer implements RendererApi {
     }
     if (unlitOrUnfogged) {
       this.perFrameInts[this.materialField('uLightingEnabled')] = 1;
-      this.perFrameInts[this.materialField('uFogEnabled')] = FOG_RECEDE;
+      this.perFrameInts[this.materialField('uFogEnabled')] = this.surfaceFog;
     }
     if (!toneMapped) {
       this.perFrameInts[this.materialField('uOutputTransform')] = this.gradeCode();
@@ -11614,7 +11643,7 @@ export class WebGPURenderer implements RendererApi {
         'post.ssrResolve',
         SSR_RESOLVE_FRAG_WGSL,
         this.pipelines.format,
-        PREMULTIPLIED_OVER_BLEND,
+        REFLECTION_OVER_BLEND,
       ),
     );
     resolve.setBindGroup(0, resolveGroup);

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

@@ -11,6 +11,7 @@ import type { SdfFont } from '../../sdfFont.ts';
 import { SdfTextLayout, type SdfTextStyle } from '../../sdfTextLayout.ts';
 import type { GpuSurfaceTexture } from './surfaceTexturePass.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The SDF text pass: a string as flat, textured quads, drawn into the scene.
@@ -213,7 +214,7 @@ export function sdfTextPipeline(
           format: cache.format,
           blend: {
             color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: SCENE_ALPHA_COVERS,
           },
         },
       ],

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

@@ -9,6 +9,7 @@ import type { UniformFields } from './scatterPass.ts';
 import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The text pass: a string as instanced glyph cubes, drawn over the scene.
@@ -208,7 +209,7 @@ export function textPipeline(
           format: cache.format,
           blend: {
             color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: SCENE_ALPHA_COVERS,
           },
         },
       ],

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

@@ -9,6 +9,7 @@ import { DEPTH_FORMAT } from './flatPass.ts';
 import type { PipelineCache } from './pipelineCache.ts';
 import type { UniformFields } from './scatterPass.ts';
 import { shaderModule } from './shaderModules.ts';
+import { SCENE_ALPHA_COVERS } from '../../sceneCoverage.ts';
 
 /**
  * The water pass: two sheets and a patch, displaced by a wave field in the vertex stage.
@@ -199,7 +200,7 @@ export function waterPipeline(
           format: cache.format,
           blend: {
             color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-            alpha: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: SCENE_ALPHA_COVERS,
           },
         },
       ],