@driftengine/core 4.8.5 → 4.8.7

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

@@ -0,0 +1,130 @@
+import { glSceneDepthFormat } from '../../depthConvention.ts';
+import type { SurfaceTexture } from '../../surfaceTexture.ts';
+
+/**
+ * A scene capture's framebuffers on WebGL2: the capture's own texture as the colour a pass resolves
+ * into, and a depth of its own, at the capture's size. See `sceneCapture.ts` for what a capture is.
+ *
+ * **At the frame's sample count, as WebGPU's is**, so a capture's edges are antialiased exactly as
+ * the frame's are: drawn into multisampled renderbuffers and blitted into the texture at the end,
+ * since a texture layer cannot be multisampled and sampled both. A count the driver refuses falls
+ * back to one, as the scene target's does, rather than drawing nothing.
+ */
+export class GlSceneCaptureTarget {
+  /** Where the capture resolves: its texture's layer, and a depth when it is drawn into directly. */
+  private readonly resolveFramebuffer: WebGLFramebuffer;
+  private readonly resolveDepth: WebGLRenderbuffer;
+  /** Where it is drawn above one sample, or null. */
+  private multisampleFramebuffer: WebGLFramebuffer | null = null;
+  private multisampleColor: WebGLRenderbuffer | null = null;
+  private multisampleDepth: WebGLRenderbuffer | null = null;
+  /** False where the driver refused the attachment, said once by the renderer. */
+  readonly usable: boolean;
+
+  constructor(
+    gl: WebGL2RenderingContext,
+    texture: SurfaceTexture,
+    readonly width: number,
+    readonly height: number,
+    samples: number,
+    float: boolean,
+  ) {
+    const depthFormat = glSceneDepthFormat(gl).internalFormat;
+    this.resolveFramebuffer = must(gl.createFramebuffer());
+    this.resolveDepth = must(gl.createRenderbuffer());
+    gl.bindRenderbuffer(gl.RENDERBUFFER, this.resolveDepth);
+    gl.renderbufferStorage(gl.RENDERBUFFER, depthFormat, width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.resolveFramebuffer);
+    texture.attachColor(gl);
+    gl.framebufferRenderbuffer(
+      gl.FRAMEBUFFER,
+      gl.DEPTH_ATTACHMENT,
+      gl.RENDERBUFFER,
+      this.resolveDepth,
+    );
+    this.usable = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+
+    const maximum = gl.getParameter(gl.MAX_SAMPLES) as number;
+    const count = Math.max(
+      1,
+      Math.min(Math.round(samples), Number.isFinite(maximum) ? maximum : 1),
+    );
+    if (this.usable && count > 1) {
+      const color = must(gl.createRenderbuffer());
+      const depth = must(gl.createRenderbuffer());
+      gl.bindRenderbuffer(gl.RENDERBUFFER, color);
+      gl.renderbufferStorageMultisample(
+        gl.RENDERBUFFER,
+        count,
+        float ? gl.RGBA16F : gl.RGBA8,
+        width,
+        height,
+      );
+      gl.bindRenderbuffer(gl.RENDERBUFFER, depth);
+      gl.renderbufferStorageMultisample(gl.RENDERBUFFER, count, depthFormat, width, height);
+      const framebuffer = must(gl.createFramebuffer());
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, color);
+      gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depth);
+      if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
+        this.multisampleFramebuffer = framebuffer;
+        this.multisampleColor = color;
+        this.multisampleDepth = depth;
+      } else {
+        gl.deleteFramebuffer(framebuffer);
+        gl.deleteRenderbuffer(color);
+        gl.deleteRenderbuffer(depth);
+      }
+    }
+    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  }
+
+  /** Bind where the pass draws, size the viewport and clear: colour to `clear`, depth to `depthClear`. */
+  begin(
+    gl: WebGL2RenderingContext,
+    clear: readonly [number, number, number],
+    depthClear: number,
+  ): void {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.multisampleFramebuffer ?? this.resolveFramebuffer);
+    gl.viewport(0, 0, this.width, this.height);
+    gl.clearColor(clear[0], clear[1], clear[2], 1);
+    gl.clearDepth(depthClear);
+    gl.depthMask(true);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+  }
+
+  /** Resolve the multisampled colour into the texture, where there is any. */
+  end(gl: WebGL2RenderingContext): void {
+    if (this.multisampleFramebuffer === null) return;
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.multisampleFramebuffer);
+    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.resolveFramebuffer);
+    gl.blitFramebuffer(
+      0,
+      0,
+      this.width,
+      this.height,
+      0,
+      0,
+      this.width,
+      this.height,
+      gl.COLOR_BUFFER_BIT,
+      gl.NEAREST,
+    );
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+  }
+
+  dispose(gl: WebGL2RenderingContext): void {
+    gl.deleteFramebuffer(this.resolveFramebuffer);
+    gl.deleteRenderbuffer(this.resolveDepth);
+    if (this.multisampleFramebuffer !== null) gl.deleteFramebuffer(this.multisampleFramebuffer);
+    if (this.multisampleColor !== null) gl.deleteRenderbuffer(this.multisampleColor);
+    if (this.multisampleDepth !== null) gl.deleteRenderbuffer(this.multisampleDepth);
+  }
+}
+
+function must<T>(made: T | null): T {
+  if (made === null) throw new Error('GlSceneCaptureTarget: a GL object could not be created');
+  return made;
+}

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

@@ -5,14 +5,19 @@
  *
  * **Drawn as it goes, not kept**: this backend issues a draw when it is asked for, and the state a
  * skin draw reads — its joint palette, its uniforms — is rewritten by the draw after it. So the
- * renderer draws each skin twice in place, the frame's half and then at once its diffuse half into
- * this target, which shares the frame's depth and tests for equality against it.
+ * renderer draws each skin three times in place: the frame's half, then at once the diffuse's light
+ * alone into this target and its colour alone into the other, both sharing the frame's depth and
+ * testing for equality against it. The blur spreads the light and multiplies it by the colour.
  *
  * **The units it reads are its own** — `SKIN_BLUR_TEXTURE_UNIT` and the one after — past every
  * unit a lit program binds, because it runs in the middle of a frame and the draws after it must
  * find their textures where they left them.
  */
-import { SKIN_BLUR_DEPTH_UNIT, SKIN_BLUR_TEXTURE_UNIT } from '../../lightBudget.ts';
+import {
+  SKIN_BLUR_ALBEDO_UNIT,
+  SKIN_BLUR_DEPTH_UNIT,
+  SKIN_BLUR_TEXTURE_UNIT,
+} from '../../lightBudget.ts';
 import { blendKeeping } from '../../sceneCoverage.ts';
 import type { SceneTarget } from '../../sceneTarget.ts';
 import { compileProgram, uniformLocations } from '../../shader.ts';
@@ -33,9 +38,13 @@ export class GlSkinScatter {
   private readonly depthToViewZ = new Float32Array(4);
   private diffuse: WebGLTexture | null = null;
   private across: WebGLTexture | null = null;
+  private albedo: WebGLTexture | null = null;
   private multisampled: WebGLRenderbuffer | null = null;
+  private albedoMultisampled: WebGLRenderbuffer | null = null;
   private drawFramebuffer: WebGLFramebuffer | null = null;
   private resolveFramebuffer: WebGLFramebuffer | null = null;
+  private albedoFramebuffer: WebGLFramebuffer | null = null;
+  private albedoResolveFramebuffer: WebGLFramebuffer | null = null;
   private acrossFramebuffer: WebGLFramebuffer | null = null;
   private width = 0;
   private height = 0;
@@ -44,6 +53,7 @@ export class GlSkinScatter {
   /** Refused once and for good: a driver that will not render to half floats. */
   private unavailable = false;
   private cleared = false;
+  private albedoCleared = false;
   private drawn = false;
 
   constructor(gl: WebGL2RenderingContext) {
@@ -115,6 +125,17 @@ export class GlSkinScatter {
     this.drawn = true;
   }
 
+  /** Bind the target for the same skin's colour half, cleared the first time a frame does. */
+  beginAlbedo(): void {
+    const { gl } = this;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.albedoFramebuffer);
+    gl.viewport(0, 0, this.width, this.height);
+    if (!this.albedoCleared) {
+      gl.clearBufferfv(gl.COLOR, 0, CLEAR);
+      this.albedoCleared = true;
+    }
+  }
+
   /**
    * Across into the second target, then down and added into the frame, which `scene` binds. `depth`
    * is the frame's depth as a single-sampled texture, or null where none could be had — and then
@@ -129,20 +150,8 @@ export class GlSkinScatter {
   ): void {
     const { gl } = this;
     if (this.multisampled !== null) {
-      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.drawFramebuffer);
-      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.resolveFramebuffer);
-      gl.blitFramebuffer(
-        0,
-        0,
-        this.width,
-        this.height,
-        0,
-        0,
-        this.width,
-        this.height,
-        gl.COLOR_BUFFER_BIT,
-        gl.NEAREST,
-      );
+      this.resolve(this.drawFramebuffer, this.resolveFramebuffer);
+      this.resolve(this.albedoFramebuffer, this.albedoResolveFramebuffer);
     }
     gl.disable(gl.DEPTH_TEST);
     gl.disable(gl.CULL_FACE);
@@ -153,6 +162,9 @@ export class GlSkinScatter {
     const u = this.uniforms;
     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.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. */
     this.depthToViewZ[0] = (inverse[10] as number) ?? 0;
     this.depthToViewZ[1] = (inverse[14] as number) ?? 0;
@@ -175,6 +187,8 @@ export class GlSkinScatter {
     this.step[0] = 1 / this.width;
     this.step[1] = 0;
     gl.uniform2fv(u['uStep'] ?? null, this.step);
+    /* The light spreads on both axes; the colour is applied once, on the one adding into the frame. */
+    gl.uniform1f(u['uApplyAlbedo'] ?? null, 0);
     gl.drawArrays(gl.TRIANGLES, 0, 3);
 
     scene.bind();
@@ -182,6 +196,7 @@ export class GlSkinScatter {
     this.step[0] = 0;
     this.step[1] = 1 / this.height;
     gl.uniform2fv(u['uStep'] ?? null, this.step);
+    gl.uniform1f(u['uApplyAlbedo'] ?? null, 1);
     /* Added: its colour onto the frame's, the frame's alpha kept. */
     gl.enable(gl.BLEND);
     gl.blendEquation(gl.FUNC_ADD);
@@ -199,9 +214,29 @@ export class GlSkinScatter {
   /** Spent at the frame's start: what was drawn into the target was last frame's. */
   reset(): void {
     this.cleared = false;
+    this.albedoCleared = false;
     this.drawn = false;
   }
 
+  /** A multisampled target into its single-sampled texture. */
+  private resolve(from: WebGLFramebuffer | null, to: WebGLFramebuffer | null): void {
+    const { gl } = this;
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, from);
+    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, to);
+    gl.blitFramebuffer(
+      0,
+      0,
+      this.width,
+      this.height,
+      0,
+      0,
+      this.width,
+      this.height,
+      gl.COLOR_BUFFER_BIT,
+      gl.NEAREST,
+    );
+  }
+
   dispose(): void {
     const { gl } = this;
     this.release();
@@ -226,19 +261,59 @@ export class GlSkinScatter {
     this.sharedDepth = depthRenderbuffer ?? depthTexture;
     this.diffuse = this.halfFloatTexture(width, height);
     this.across = this.halfFloatTexture(width, height);
+    this.albedo = this.halfFloatTexture(width, height);
 
-    this.drawFramebuffer = gl.createFramebuffer();
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this.drawFramebuffer);
-    if (samples > 1 && depthRenderbuffer !== null) {
-      this.multisampled = gl.createRenderbuffer();
-      gl.bindRenderbuffer(gl.RENDERBUFFER, this.multisampled);
-      gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.RGBA16F, width, height);
-      gl.framebufferRenderbuffer(
-        gl.FRAMEBUFFER,
-        gl.COLOR_ATTACHMENT0,
+    const multisampled = samples > 1 && depthRenderbuffer !== null;
+    const diffuse = this.drawTarget(this.diffuse, multisampled, depthTexture, depthRenderbuffer);
+    this.drawFramebuffer = diffuse.framebuffer;
+    this.multisampled = diffuse.multisampled;
+    this.resolveFramebuffer = diffuse.resolve;
+    const albedo = this.drawTarget(this.albedo, multisampled, depthTexture, depthRenderbuffer);
+    this.albedoFramebuffer = albedo.framebuffer;
+    this.albedoMultisampled = albedo.multisampled;
+    this.albedoResolveFramebuffer = albedo.resolve;
+
+    this.acrossFramebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.acrossFramebuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.across, 0);
+    const acrossReady = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    if (diffuse.ready && albedo.ready && acrossReady) return true;
+    this.release();
+    this.refuse();
+    return false;
+  }
+
+  /**
+   * A framebuffer a skin half draws into against the frame's depth: the texture itself, or a
+   * multisampled renderbuffer and the framebuffer that resolves it into the texture.
+   */
+  private drawTarget(
+    texture: WebGLTexture | null,
+    multisampled: boolean,
+    depthTexture: WebGLTexture | null,
+    depthRenderbuffer: WebGLRenderbuffer | null,
+  ): {
+    framebuffer: WebGLFramebuffer | null;
+    multisampled: WebGLRenderbuffer | null;
+    resolve: WebGLFramebuffer | null;
+    ready: boolean;
+  } {
+    const { gl } = this;
+    const framebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    let samples: WebGLRenderbuffer | null = null;
+    if (multisampled && depthRenderbuffer !== null) {
+      samples = gl.createRenderbuffer();
+      gl.bindRenderbuffer(gl.RENDERBUFFER, samples);
+      gl.renderbufferStorageMultisample(
         gl.RENDERBUFFER,
-        this.multisampled,
+        this.samples,
+        gl.RGBA16F,
+        this.width,
+        this.height,
       );
+      gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, samples);
       gl.framebufferRenderbuffer(
         gl.FRAMEBUFFER,
         gl.DEPTH_ATTACHMENT,
@@ -246,25 +321,17 @@ export class GlSkinScatter {
         depthRenderbuffer,
       );
     } else {
-      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.diffuse, 0);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
     }
-    const drawReady = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
-
-    if (this.multisampled !== null) {
-      this.resolveFramebuffer = gl.createFramebuffer();
-      gl.bindFramebuffer(gl.FRAMEBUFFER, this.resolveFramebuffer);
-      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.diffuse, 0);
+    const ready = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+    let resolve: WebGLFramebuffer | null = null;
+    if (samples !== null) {
+      resolve = gl.createFramebuffer();
+      gl.bindFramebuffer(gl.FRAMEBUFFER, resolve);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
     }
-    this.acrossFramebuffer = gl.createFramebuffer();
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this.acrossFramebuffer);
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.across, 0);
-    const acrossReady = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
-    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-    if (drawReady && acrossReady) return true;
-    this.release();
-    this.refuse();
-    return false;
+    return { framebuffer, multisampled: samples, resolve, ready };
   }
 
   private refuse(): void {
@@ -294,16 +361,26 @@ export class GlSkinScatter {
     const { gl } = this;
     if (this.drawFramebuffer !== null) gl.deleteFramebuffer(this.drawFramebuffer);
     if (this.resolveFramebuffer !== null) gl.deleteFramebuffer(this.resolveFramebuffer);
+    if (this.albedoFramebuffer !== null) gl.deleteFramebuffer(this.albedoFramebuffer);
+    if (this.albedoResolveFramebuffer !== null) {
+      gl.deleteFramebuffer(this.albedoResolveFramebuffer);
+    }
     if (this.acrossFramebuffer !== null) gl.deleteFramebuffer(this.acrossFramebuffer);
     if (this.multisampled !== null) gl.deleteRenderbuffer(this.multisampled);
+    if (this.albedoMultisampled !== null) gl.deleteRenderbuffer(this.albedoMultisampled);
     if (this.diffuse !== null) gl.deleteTexture(this.diffuse);
     if (this.across !== null) gl.deleteTexture(this.across);
+    if (this.albedo !== null) gl.deleteTexture(this.albedo);
     this.drawFramebuffer = null;
     this.resolveFramebuffer = null;
+    this.albedoFramebuffer = null;
+    this.albedoResolveFramebuffer = null;
     this.acrossFramebuffer = null;
     this.multisampled = null;
+    this.albedoMultisampled = null;
     this.diffuse = null;
     this.across = null;
+    this.albedo = null;
     this.sharedDepth = null;
   }
 }

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

@@ -766,7 +766,8 @@ const INSTANCE_ATTRIBUTES: GPUVertexAttribute[] = [
   { shaderLocation: 12, offset: 16, format: 'float32x4' },
   { shaderLocation: 13, offset: 32, format: 'float32x4' },
   { shaderLocation: 14, offset: 48, format: 'float32x4' },
-  { shaderLocation: 15, offset: 64, format: 'float32x3' },
+  /* The tint and, in w, the opacity. See `INSTANCE_FLOATS`. */
+  { shaderLocation: 15, offset: 64, format: 'float32x4' },
 ];
 
 /** The locations above, as the set the base layout must stand clear of on an instanced draw. */

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

@@ -5,6 +5,7 @@ import {
   TABLE_HEIGHT,
   TABLE_WIDTH,
   type ClusterLightSet,
+  clusteredLightTotal,
   writeLightRecord,
 } from '../../clusteredLights.ts';
 import { MAX_POINT_LIGHTS } from '../../lightBudget.ts';
@@ -167,7 +168,8 @@ export class ClusterBinner {
     if (frame === null || device === null || pipeline === null || group === null) return;
     if (params === null || lightBuffer === null) return;
 
-    const count = Math.min(frame.lights.count, MAX_CLUSTERED_LIGHTS);
+    /* The lamps and the clustered rectangles after them. See `ClusterLightSet.areas`. */
+    const count = clusteredLightTotal(frame.lights);
 
     /*
      * The records, by the function `buildLightClusters` writes them with, because the shader

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

@@ -1,6 +1,6 @@
 import { SURFACE_MODEL_SWITCH } from '../../surfaceModel.ts';
 import type { SurfaceModelKind } from '../../surfaceModel.ts';
-import type { SkinHalf } from '../../shaders/flat/models.ts';
+import { SKIN_HALF_SWITCH, type SkinHalf } from '../../shaders/flat/models.ts';
 import { DEPTH_COMPARE, DEPTH_FORMAT, depthOffsetForLayer } from '../../depthConvention.ts';
 import {
   FLAT_BINDINGS,
@@ -153,8 +153,8 @@ export function flatVertexBindings(
 const PLAIN_VERTEX = flatVertexBindings(false);
 
 /**
- * A vertex stage's constants, keyed by each override's **id** as the fragment's are: `SKIN_EIGHT` in
- * a skinned stage, nothing in any other. Every override a stage declares is set, and one this does
+ * A vertex stage's constants, keyed by each override's **id** as the fragment's are: `SKIN_EIGHT` and
+ * `CLOTH_BOUND` in a skinned stage, `LIGHTMAP_REGIONS` in an instanced one, nothing in any other. Every override a stage declares is set, and one this does
  * not know is refused here rather than defaulted. Shared with the shadow and glass-tint casters,
  * whose skinned stages declare the same switch.
  */
@@ -162,11 +162,14 @@ export function vertexConstants(
   bindings: StageBindings,
   skinEight: boolean,
   cloth = false,
+  /** Whether an instanced stage reads its tint lane as a lightmap region. See `lightmap.ts`. */
+  lightmapRegions = false,
 ): Record<string, number> {
   const constants: Record<string, number> = {};
   for (const [name, id] of Object.entries(bindings.overrides ?? {})) {
     if (name === 'SKIN_EIGHT') constants[String(id)] = skinEight ? 1 : 0;
     else if (name === 'CLOTH_BOUND') constants[String(id)] = cloth ? 1 : 0;
+    else if (name === 'LIGHTMAP_REGIONS') constants[String(id)] = lightmapRegions ? 1 : 0;
     else throw new Error(`flatPass: a vertex stage declares a switch "${name}" nothing sets`);
   }
   return constants;
@@ -263,13 +266,9 @@ function flatFragmentConstants(
       constants[String(id)] = name === modelSwitch ? 1 : 0;
       continue;
     }
-    /* Skin's two halves under the screen-space blur, set from the key as a model's switch is. */
-    if (name === 'SKIN_SCREEN' || name === 'SKIN_DIFFUSE') {
-      constants[String(id)] =
-        (name === 'SKIN_SCREEN' && skinPass === 'scene') ||
-        (name === 'SKIN_DIFFUSE' && skinPass === 'diffuse')
-          ? 1
-          : 0;
+    /* Skin's halves under the screen-space blur, set from the key as a model's switch is. */
+    if (name === 'SKIN_SCREEN' || name === 'SKIN_DIFFUSE' || name === 'SKIN_ALBEDO') {
+      constants[String(id)] = skinPass !== 'whole' && name === SKIN_HALF_SWITCH[skinPass] ? 1 : 0;
       continue;
     }
     if (!(name in cache.litSwitches)) {
@@ -608,7 +607,7 @@ export function flatPipeline(
   cloth = false,
   /** Which shading model its fragment stage shades by, null the standard. The key must carry it. */
   model: SurfaceModelKind | null = null,
-  /** Which half of a skin it draws. The key must carry it: `|ss` or `|sd`. See `SkinHalf`. */
+  /** Which half of a skin it draws. The key must carry it: `|ss`, `|sd` or `|sa`. See `SkinHalf`. */
   skinPass: SkinHalf = 'whole',
 ): GPURenderPipeline {
   return cache.get(
@@ -768,7 +767,8 @@ function flatDescriptor(
   skinPass: SkinHalf = 'whole',
 ): GPURenderPipelineDescriptor {
   const offset = depthOffsetForLayer(depthLayer);
-  const diffuseAlone = skinPass === 'diffuse';
+  /* The diffuse and colour halves are the same surface again, into the blur's targets. */
+  const diffuseAlone = skinPass === 'diffuse' || skinPass === 'albedo';
   return {
     label: key,
     layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
@@ -784,7 +784,12 @@ function flatDescriptor(
       }),
       entryPoint: 'main',
       buffers: vertexBufferLayouts(present, instanced),
-      constants: vertexConstants(flatVertexBindings(skinned, morphed, instanced), skinEight, cloth),
+      constants: vertexConstants(
+        flatVertexBindings(skinned, morphed, instanced),
+        skinEight,
+        cloth,
+        model === 'lightmap',
+      ),
     },
     fragment: {
       module: shaderModule(device, {