@driftengine/core 4.8.1 → 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,
@@ -257,6 +258,9 @@ import type { InstancedOptions, MeshInstances } from '../../instances.ts';
 import { cutoutOf } from '../../cutoutCaster.ts';
 import type { CutoutCaster } from '../../cutoutCaster.ts';
 import type { SurfaceTextureHandle } from '../api.ts';
+import { materialHasMaps, noteMapsWithoutUvs } from '../../mapsWithoutUvs.ts';
+import { VIEW_MODEL_DEPTH_SHARE, viewModelDepthRange } from '../../viewModel.ts';
+import { noLitSwitches, type LitSwitch } from '../../shaders/flat/glassTint.ts';
 
 /**
  * How many frames `firstFrameSettled` will ask before it stops asking.
@@ -1087,8 +1091,8 @@ export class WebGL2Renderer implements RendererApi {
 
   private presentedFrameCount = 0;
 
-  private readonly flatProgram: WebGLProgram;
-  private readonly flatUniforms: Record<string, WebGLUniformLocation>;
+  private flatProgram: WebGLProgram;
+  private flatUniforms: Record<string, WebGLUniformLocation>;
   /**
    * The lit fragment source every flat program is built from, and the budget it was built at.
    *
@@ -1099,7 +1103,7 @@ export class WebGL2Renderer implements RendererApi {
    * for a lazily compiled variant to end up at a different light budget from the one the renderer
    * uploads for, which is a picture nobody could explain.
    */
-  private readonly flatFragSource: string;
+  private flatFragSource: string;
   /**
    * How many lights this renderer's shader has room for, after the device had its say.
    *
@@ -1246,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;
@@ -1683,6 +1692,33 @@ export class WebGL2Renderer implements RendererApi {
    * each such draw and handed back, where the other backend bakes it into a pipeline.
    */
   private materialDoubleSided = false;
+  /** Whether the bound material has a map, for the warning a mesh with no coordinates earns. */
+  private materialHasMaps = false;
+  /** The material last set, so a lit program rebuilt for glass can be given it. */
+  private currentMaterial: SurfaceMaterial | null = null;
+  /**
+   * The lit stage's switches: what the lit programs were compiled with (`litOn`), and what the
+   * profile and the content have asked for since (`litWanted`).
+   *
+   * **Each is off until it is used** — glass until a pane is offered, a fixture until one is loaded,
+   * the effects until a material carries a table, DriftLight until a volume is set — and then on for
+   * good, rebuilt at the next `beginFrame`. Clustering is the profile's. The code costs the lit pass
+   * registers on every surface whether it finds anything or not, and a world without the feature
+   * draws the same picture without it. `PipelineCache.litSwitches` makes the same decision on the
+   * other backend. The frame a feature is first used in draws without it; the rebuild is a
+   * synchronous compile, and the next frame waits for it.
+   */
+  private readonly litOn = noLitSwitches();
+  private readonly litWanted = noLitSwitches();
+  private litAsked = false;
+
+  /** Ask for a switch, which the next `beginFrame` compiles in. Never glass with it turned off. */
+  private askLit(feature: LitSwitch): void {
+    if (this.litWanted[feature]) return;
+    if (feature === 'GLASS_SHADOWS' && this.quality.glassShadows === 'off') return;
+    this.litWanted[feature] = true;
+    this.litAsked = true;
+  }
 
   /**
    * The one sink handed to every caster enumeration.
@@ -1715,6 +1751,7 @@ export class WebGL2Renderer implements RendererApi {
         /* Glass: kept aside for its own two passes rather than dropped. See `glassCasters.ts`. */
         if (this.quality.glassShadows !== 'off' && glassOf(material, this.glassCasterScratch)) {
           this.glassCasters.recordMesh(mesh, model, material, this.glassCasterScratch);
+          this.askLit('GLASS_SHADOWS');
         }
         return;
       }
@@ -1756,6 +1793,7 @@ export class WebGL2Renderer implements RendererApi {
       if (!this.drawingGlassDepth && !castsDepth(material)) {
         if (this.quality.glassShadows !== 'off' && glassOf(material, this.glassCasterScratch)) {
           this.glassCasters.recordInstanced(batch, data, material, this.glassCasterScratch);
+          this.askLit('GLASS_SHADOWS');
         }
         return;
       }
@@ -1789,6 +1827,7 @@ export class WebGL2Renderer implements RendererApi {
       if (!this.drawingGlassDepth && !castsDepth(material)) {
         if (this.quality.glassShadows !== 'off' && glassOf(material, this.glassCasterScratch)) {
           this.glassCasters.recordSkinned(mesh, model, palette, material, this.glassCasterScratch);
+          this.askLit('GLASS_SHADOWS');
         }
         return;
       }
@@ -1849,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);
@@ -2297,6 +2337,8 @@ export class WebGL2Renderer implements RendererApi {
     this.iesRows = this.iesAtlas.height;
     this.iesPlanes = this.iesAtlas.planes;
     this.cookieTiles = this.cookieImages.length;
+    /* The first profile or cookie is when the lit programs start reading them. See `litOn`. */
+    if (this.iesRows > 1 || this.cookieTiles > 0) this.askLit('LIGHT_FIXTURES');
     gl.bindTexture(gl.TEXTURE_2D, null);
     gl.activeTexture(gl.TEXTURE0);
   }
@@ -2714,6 +2756,9 @@ export class WebGL2Renderer implements RendererApi {
      * Built for the profile this renderer resolved, not for every profile at once — so a
      * world with shadows off compiles none of the shadow path. See `shaders/flat.ts`.
      */
+    /* The one switch the profile decides; the rest wait for their content. See `litOn`. */
+    this.litOn.CLUSTERED_LIGHTS = this.quality.clusteredLights;
+    this.litWanted.CLUSTERED_LIGHTS = this.quality.clusteredLights;
     const fitted = this.fitFlatProgram(gl);
     this.flatProgram = fitted.program;
     this.flatFragSource = fitted.source;
@@ -3306,6 +3351,8 @@ export class WebGL2Renderer implements RendererApi {
     this.materials.dirty();
     this.currentSurfaceTexture = material?.albedo ?? null;
     this.materialDoubleSided = material?.doubleSided === true;
+    this.materialHasMaps = materialHasMaps(material);
+    this.currentMaterial = material;
     /*
      * Written to every flat program, because material state persists across draws and a skinned
      * draw is entitled to the material the caller set before it. A second program holding none of
@@ -3413,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
@@ -3422,6 +3470,8 @@ export class WebGL2Renderer implements RendererApi {
       gl.bindTexture(gl.TEXTURE_2D, this.emptyTexture2D);
     } else {
       albedo.bindEffects(gl, SURFACE_EFFECTS_TEXTURE_UNIT, this.emptyTexture2D);
+      /* The first table bound is when the lit programs start reading one. See `litOn`. */
+      if (albedo.hasEffects) this.askLit('SURFACE_EFFECTS');
     }
     gl.uniform1i(u['uSurfaceEffects'] ?? null, SURFACE_EFFECTS_TEXTURE_UNIT);
     if (albedo === null) {
@@ -3543,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.
    *
@@ -3560,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.
@@ -3810,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;
@@ -3834,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
@@ -3874,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();
@@ -5214,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);
@@ -5317,21 +5398,91 @@ export class WebGL2Renderer implements RendererApi {
    * rather than propagating. Only a shader that will not link at *any* budget throws, and it
    * throws a sentence with the device's numbers in it rather than a bare driver string.
    */
-  private fitFlatProgram(gl: WebGL2RenderingContext): {
-    program: WebGLProgram;
-    source: string;
-    budget: LightBudget;
-  } {
-    const variant = {
+  /** The lit fragment source this renderer's profile compiles, at a light budget. */
+  private flatFragAt(budget: LightBudget): string {
+    return flatFrag({
       pointShadows: this.quality.pointShadows,
       directionalShadows: this.quality.directionalShadows,
       environmentProbe: this.probeCapture !== null,
       nightEmissive: this.quality.nightEmissive,
-      /* Off compiles none of the glass lookup: see `FlatShaderOptions.glassShadows`. */
-      glassShadows: this.quality.glassShadows !== 'off',
+      /* Each off until it is used: see `litOn`. */
+      glassShadows: this.litOn.GLASS_SHADOWS,
+      clusteredLights: this.litOn.CLUSTERED_LIGHTS,
+      lightFixtures: this.litOn.LIGHT_FIXTURES,
+      surfaceEffects: this.litOn.SURFACE_EFFECTS,
+      driftLight: this.litOn.DRIFT_LIGHT,
+      maxLights: budget.maxLights,
+      maxAreaLights: budget.maxAreaLights,
+    });
+  }
+
+  /**
+   * Every lit program that exists, compiled again with the switches asked for since, at the budget
+   * the renderer already uploads for, and given the pass and the material the old one held.
+   *
+   * At `beginFrame`, not where a feature was first used: a pane is offered inside a shadow pass
+   * with the depth program bound, and a program swapped under it would draw the next caster with
+   * the lit one.
+   */
+  private rebuildLit(): void {
+    const { gl } = this;
+    Object.assign(this.litOn, this.litWanted);
+    this.flatFragSource = this.flatFragAt(this.lightBudget);
+    const recompile = (
+      old: WebGLProgram | null,
+      skinned: boolean,
+      morphed: boolean,
+      instanced: boolean,
+      label: string,
+    ): { program: WebGLProgram; uniforms: Record<string, WebGLUniformLocation> } | null => {
+      if (old === null) return null;
+      const program = compileProgram(
+        gl,
+        flatVert({ skinned, morphed, instanced }),
+        this.flatFragSource,
+        label,
+      );
+      gl.deleteProgram(old);
+      return { program, uniforms: uniformLocations(gl, program, label) };
     };
-    const build = (budget: LightBudget): string =>
-      flatFrag({ ...variant, maxLights: budget.maxLights, maxAreaLights: budget.maxAreaLights });
+    const plain = recompile(this.flatProgram, false, false, false, 'flat');
+    if (plain !== null) {
+      this.flatProgram = plain.program;
+      this.flatUniforms = plain.uniforms;
+    }
+    const skinned = recompile(this.flatSkinnedProgram, true, false, false, 'flat.skinned');
+    this.flatSkinnedProgram = skinned?.program ?? null;
+    this.flatSkinnedUniforms = skinned?.uniforms ?? null;
+    const morphed = recompile(this.flatMorphedProgram, false, true, false, 'flat.morphed');
+    this.flatMorphedProgram = morphed?.program ?? null;
+    this.flatMorphedUniforms = morphed?.uniforms ?? null;
+    const both = recompile(this.flatBothProgram, true, true, false, 'flat.morphedskinned');
+    this.flatBothProgram = both?.program ?? null;
+    this.flatBothUniforms = both?.uniforms ?? null;
+    const instanced = recompile(this.flatInstancedProgram, false, false, true, 'flat.instanced');
+    this.flatInstancedProgram = instanced?.program ?? null;
+    this.flatInstancedUniforms = instanced?.uniforms ?? null;
+
+    this.flatTargets.length = 0;
+    for (const target of [plain, skinned, morphed, both, instanced]) {
+      if (target !== null) this.flatTargets.push(target);
+    }
+    const camera = this.lastPassCamera;
+    const env = this.lastPassEnv;
+    for (const target of this.flatTargets) {
+      gl.useProgram(target.program);
+      if (camera !== null && env !== null) this.writeMeshPassState(target.uniforms, camera, env);
+      this.writeMaterialState(target.uniforms, this.currentMaterial);
+    }
+    this.useFlatProgram();
+  }
+
+  private fitFlatProgram(gl: WebGL2RenderingContext): {
+    program: WebGLProgram;
+    source: string;
+    budget: LightBudget;
+  } {
+    const build = (budget: LightBudget): string => this.flatFragAt(budget);
     const vert = flatVert({ skinned: false, morphed: false, instanced: false });
     const limit = gl.getParameter(gl.MAX_FRAGMENT_UNIFORM_VECTORS) as number;
     const ceiling: LightBudget = {
@@ -5960,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(
@@ -5989,6 +6140,35 @@ export class WebGL2Renderer implements RendererApi {
     this.restoreViewport();
   }
 
+  /**
+   * Draw what follows as a **view model**, in the nearest sliver of depth, until `endViewModel`.
+   *
+   * A first-person view model — arms and a held weapon — drawn with the frame's camera, or with one
+   * of its own through `bindMeshPass`, lands in front of anything past the near plane without the
+   * world's depth being cleared, so every pass that reads depth afterwards still sees the world.
+   * `share` is how much of the range it takes, 1% by default. See `viewModel.ts` for what it gives
+   * up, which includes temporal reconstruction: draw a view model with multisampling.
+   *
+   * Not inside an inset: an inset has its own depth, cleared for it, and needs no squeeze.
+   */
+  beginViewModel(share = VIEW_MODEL_DEPTH_SHARE): void {
+    if (this.contextLost) return;
+    viewModelDepthRange(this.reversedDepth, share, this.viewModelRange);
+    this.gl.depthRange(this.viewModelRange[0], this.viewModelRange[1]);
+    this.viewModelActive = true;
+  }
+
+  /** Give the whole depth range back. Safe to call without a matching `beginViewModel`. */
+  endViewModel(): void {
+    this.viewModelActive = false;
+    if (this.contextLost) return;
+    this.gl.depthRange(0, 1);
+  }
+
+  /** Whether a view model is being drawn, so `endFrame` can close one the caller left open. */
+  private viewModelActive = false;
+  private readonly viewModelRange: [number, number] = [0, 1];
+
   /**
    * How much speed blur the frame about to be drawn should resolve with, 0 to 1.
    *
@@ -6508,6 +6688,10 @@ export class WebGL2Renderer implements RendererApi {
 
   beginFrame(clearColor: Vec3): void {
     if (this.contextLost) return;
+    if (this.litAsked) {
+      this.litAsked = false;
+      this.rebuildLit();
+    }
     this.budget.reset();
     this.materials.dirty();
     /*
@@ -6584,6 +6768,8 @@ export class WebGL2Renderer implements RendererApi {
    */
   endFrame(): void {
     if (this.contextLost) return;
+    /* A view model left open would squeeze every pass after the world, the composite included. */
+    if (this.viewModelActive) this.endViewModel();
 
     /*
      * Camera motion blur, built from the camera the frame was *rendered* with.
@@ -7240,6 +7426,8 @@ export class WebGL2Renderer implements RendererApi {
     gl.bindTexture(gl.TEXTURE_3D, null);
     this.driftIndex = index;
     this.driftAtlas = atlas;
+    /* The first volume is when the lit programs start reading one. See `litOn`. */
+    this.askLit('DRIFT_LIGHT');
   }
 
   /** The field's uniforms and volumes for this pass, or the stand-ins that switch it off. */
@@ -7360,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`. */
@@ -7560,9 +7749,12 @@ 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;
+    this.materialHasMaps = false;
+    this.currentMaterial = null;
     this.currentSurfaceTexture = null;
 
     /*
@@ -7689,6 +7881,7 @@ export class WebGL2Renderer implements RendererApi {
     /* Geometry that has not all arrived is not drawn, nor a mesh with none. See `Mesh.complete`
        and `Mesh.indexCount`. */
     if (!mesh.complete || mesh.indexCount === 0) return;
+    noteMapsWithoutUvs(mesh, mesh.hasUvs, this.materialHasMaps);
 
     /*
      * Skipped where the flag asks and the bounds say so.
@@ -7877,6 +8070,7 @@ export class WebGL2Renderer implements RendererApi {
     /* Geometry that has not all arrived is not drawn, nor a mesh with none. See `Mesh.complete`
        and `Mesh.indexCount`. */
     if (!mesh.complete || mesh.indexCount === 0) return;
+    noteMapsWithoutUvs(mesh, mesh.hasUvs, this.materialHasMaps);
 
     if (opacity <= 0) return;
 
@@ -7908,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. */
@@ -7940,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
@@ -7980,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();
   }
@@ -8408,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);
@@ -8503,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/buffers.ts

@@ -200,6 +200,8 @@ export interface GpuMesh {
    * the key is built before the present map is consulted.
    */
   readonly isSkinned: boolean;
+  /** Whether it has texture coordinates, without which a material's maps read one texel. */
+  readonly hasUvs: boolean;
   /**
    * Whether this mesh carries the per-vertex channel, which an instanced draw cannot.
    *
@@ -425,6 +427,7 @@ export function createGpuMeshIncremental(
     progress,
     hasTangents: data.tangents !== undefined,
     isSkinned: data.joints !== undefined,
+    hasUvs: data.uvs !== undefined,
     skinOffsets: skinOffsetsOf(supplied),
     hasChannel: data.channel !== undefined,
     morph:
@@ -595,6 +598,7 @@ function gpuMeshOf(parts: {
   readonly progress: { readonly uploaded: boolean };
   readonly hasTangents: boolean;
   readonly isSkinned: boolean;
+  readonly hasUvs: boolean;
   readonly skinOffsets: GpuMesh['skinOffsets'];
   readonly hasChannel: boolean;
   readonly morph: MorphTexture | null;
@@ -614,6 +618,7 @@ function gpuMeshOf(parts: {
     },
     hasTangents: parts.hasTangents,
     isSkinned: parts.isSkinned,
+    hasUvs: parts.hasUvs,
     hasChannel: parts.hasChannel,
     morph: parts.morph,
     update: parts.update,

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,
           },
         },
       ],