@driftengine/core 4.4.2 → 4.5.0

package/src/render/gpudriven/sunGlass.ts

@@ -0,0 +1,117 @@
+/**
+ * The second pipeline's sunlight through glass, as a reference: `glassTintAt` over the glass depth
+ * and tint maps the GPU-driven pass draws from the sun, for `shade.wgsl.ts`'s lookup to be read
+ * against.
+ *
+ * **The forward path's rule, not a second one** (`glassShadow.ts`, and `sunGlassLookup` in
+ * `flat/directionalShadow.ts`): the outline from taps at the base filter radius that count a pane
+ * only where the receiver is behind it, and the colour from spread taps read coarse, unmixed from
+ * the ground around the pane by its clarity and weighed by its share. Frost widens only the
+ * colour's taps, so the light a frosted pane passes is the light a clear one does.
+ *
+ * **What differs is where two numbers come from.** A compute invocation has no derivatives, so the
+ * map's scale in metres is the caller's (`uvPerMetre`, which an orthographic light matrix states
+ * outright); and a coarse level here is a box average over the spread's footprint, which is what a
+ * mip level approximates on the device. `scripts/gpu-parity.mjs` holds the device's per-tap
+ * arithmetic to `glassShadow.ts`; the sampling is what the glass page measures.
+ */
+import { frostRadius, spreadTint, unmixTint, type GlassTexel } from '../glassShadow.ts';
+import { SHADOW_DEPTH_BIAS, SHADOW_PCF_OFFSETS, SHADOW_TEXEL_SCALE } from './shadow.ts';
+
+/** The two maps the sun's glass pass draws, square, row-major from v = 0. */
+export interface SunGlassMaps {
+  readonly size: number;
+  /** The nearest pane's depth a texel, 1 where no pane was drawn. */
+  readonly glassDepth: Float32Array;
+  /** What the panes on a texel's ray let through, and their clarity: four floats a texel. */
+  readonly tint: Float32Array;
+}
+
+export interface SunGlassSettings {
+  /** Metres the light's depth range spans, which turns a depth difference into a distance. */
+  readonly depthSpan: number;
+  /** Map units a metre across the light, which turns a spread in metres into one on the map. */
+  readonly uvPerMetre: number;
+  readonly taps: number;
+}
+
+const centre: GlassTexel = { r: 1, g: 1, b: 1, clarity: 1 };
+const coarse: GlassTexel = { r: 1, g: 1, b: 1, clarity: 1 };
+const pane: GlassTexel = { r: 1, g: 1, b: 1, clarity: 1 };
+const found: GlassTexel = { r: 0, g: 0, b: 0, clarity: 0 };
+
+function index(maps: SunGlassMaps, u: number, v: number): number {
+  const x = Math.min(maps.size - 1, Math.max(0, Math.floor(u * maps.size)));
+  const y = Math.min(maps.size - 1, Math.max(0, Math.floor(v * maps.size)));
+  return y * maps.size + x;
+}
+
+/** The average of every texel within `radius` of (u, v): a mip level's footprint, in the large. */
+function coarseAt(maps: SunGlassMaps, u: number, v: number, radius: number, out: GlassTexel): void {
+  const reach = radius * maps.size;
+  const x0 = Math.max(0, Math.floor(u * maps.size - reach));
+  const x1 = Math.min(maps.size - 1, Math.floor(u * maps.size + reach));
+  const y0 = Math.max(0, Math.floor(v * maps.size - reach));
+  const y1 = Math.min(maps.size - 1, Math.floor(v * maps.size + reach));
+  out.r = 0;
+  out.g = 0;
+  out.b = 0;
+  out.clarity = 0;
+  let n = 0;
+  for (let y = y0; y <= y1; y++) {
+    for (let x = x0; x <= x1; x++) {
+      const at = (y * maps.size + x) * 4;
+      out.r += maps.tint[at] as number;
+      out.g += maps.tint[at + 1] as number;
+      out.b += maps.tint[at + 2] as number;
+      out.clarity += maps.tint[at + 3] as number;
+      n++;
+    }
+  }
+  out.r /= n;
+  out.g /= n;
+  out.b /= n;
+  out.clarity /= n;
+}
+
+/** What the sun keeps through glass at a receiver at map position (u, v) and light depth `depth`. */
+export function glassTintAt(
+  u: number,
+  v: number,
+  depth: number,
+  maps: SunGlassMaps,
+  settings: SunGlassSettings,
+  out: GlassTexel,
+): GlassTexel {
+  out.r = 1;
+  out.g = 1;
+  out.b = 1;
+  out.clarity = 1;
+  if (u < 0 || u > 1 || v < 0 || v > 1) return out;
+  const texel = SHADOW_TEXEL_SCALE / maps.size;
+  const bias = SHADOW_DEPTH_BIAS / settings.depthSpan;
+  const taps = Math.min(settings.taps, SHADOW_PCF_OFFSETS.length);
+
+  const at = index(maps, u, v);
+  centre.clarity = maps.tint[at * 4 + 3] as number;
+  const behind = Math.max(depth - (maps.glassDepth[at] as number), 0) * settings.depthSpan;
+  const radius = frostRadius(centre.clarity, behind * settings.uvPerMetre, texel);
+
+  let cover = 0;
+  found.r = 0;
+  found.g = 0;
+  found.b = 0;
+  let shares = 0;
+  for (let i = 0; i < taps; i++) {
+    const offset = SHADOW_PCF_OFFSETS[i] as readonly [number, number];
+    const nearest = maps.glassDepth[index(maps, u + offset[0] * texel, v + offset[1] * texel)];
+    if (depth > (nearest as number) + bias) cover++;
+    coarseAt(maps, u + offset[0] * radius, v + offset[1] * radius, radius, coarse);
+    const share = unmixTint(coarse, centre.clarity, pane);
+    found.r += pane.r * share;
+    found.g += pane.g * share;
+    found.b += pane.b * share;
+    shares += share;
+  }
+  return spreadTint(cover / Math.max(taps, 1), found, shares, out);
+}

package/src/render/lightBudget.ts

@@ -38,13 +38,14 @@ export const MAX_POINT_LIGHTS = 16;
 export const LIVE_POINT_SHADOW_MAPS = 2;
 
 /**
- * Texture units the directional cascade binds: static, its depth peel, and dynamic.
+ * Texture units the sun's shadow binds: one, for its static, moving and peeled layers.
  *
- * Named because the shading pass's total unit count has to be compared against what a
- * device offers, and a budget assembled from three literals scattered across two files
- * is a budget nobody can check. See the guard in `Renderer`'s constructor.
+ * **It was three**, a `sampler2D` per map, until 4.5.0 folded them into one `sampler2DArray`
+ * (`shadowMap.ts`) the way the lamps' twelve cubemaps became one — which is where the two tints
+ * glass casts with found their units. Named because the shading pass's total has to be compared
+ * against what a device offers; see the guard in `Renderer`'s constructor.
  */
-export const DIRECTIONAL_SHADOW_UNITS = 3;
+export const DIRECTIONAL_SHADOW_UNITS = 1;
 
 /**
  * Texture units every point light's shadow binds: one, for all of them.
@@ -230,6 +231,19 @@ export const REFRACT_SCENE_TEXTURE_UNIT = COOKIE_ATLAS_TEXTURE_UNIT + 1;
 export const DRIFT_LIGHT_INDEX_TEXTURE_UNIT = REFRACT_SCENE_TEXTURE_UNIT + 1;
 export const DRIFT_LIGHT_ATLAS_TEXTURE_UNIT = DRIFT_LIGHT_INDEX_TEXTURE_UNIT + 1;
 
+/**
+ * What the sun keeps through glass (`sunGlassTint.ts`), the lit program's fourteenth fragment
+ * sampler: the unit the sun's three maps gave back when they became one array.
+ */
+export const SUN_GLASS_TINT_TEXTURE_UNIT = DRIFT_LIGHT_ATLAS_TEXTURE_UNIT + 1;
+
+/**
+ * What each lamp keeps through glass (`pointGlassTint.ts`), the lit program's fifteenth fragment
+ * sampler and the last one that leaves a sixteenth spare. Unit sixteen of the combined pool, which
+ * WebGL2 guarantees thirty-two of; what a stage may declare is the sixteen, and this is fifteen.
+ */
+export const POINT_GLASS_TINT_TEXTURE_UNIT = SUN_GLASS_TINT_TEXTURE_UNIT + 1;
+
 /**
  * A cookie's tile, in texels a side.
  *

package/src/render/pointGlassTint.ts

@@ -0,0 +1,250 @@
+import { mat3 } from 'gl-matrix';
+
+import { createEmptyTexture2D } from './emptyTexture.ts';
+import { pointShadowFaceRotation } from './pointShadowImage.ts';
+import { compileProgram, uniformLocations } from './shader.ts';
+import {
+  OCTAHEDRAL_RESOLVE_TINT_FRAG,
+  OCTAHEDRAL_RESOLVE_VERT,
+} from './shaders/octahedralResolve.ts';
+
+/** Filled per resolved face, at module scope, because a bake runs inside the frame's budget. */
+const faceRotation = mat3.create();
+const CLEAR = new Float32Array([1, 1, 1, 1]);
+
+/**
+ * What a lamp's light keeps through glass: an RGBA8 array of one layer a light, parallel to the
+ * point shadow array and indexed by the light, not by the interleaved depth layer. RGB is the
+ * product of every pane's `transmission × (1 − F) × tint`, A the product of their clarities
+ * (`glassShadow.ts`).
+ *
+ * **Drawn a face at a time, as the depth is**: into a face-sized colour scratch cleared to white,
+ * with a multiplying blend and no depth test, then resolved into the face's region of the layer by
+ * `OCTAHEDRAL_RESOLVE_TINT_FRAG`. One scratch for the whole engine, for the reason
+ * `PointShadowArray` gives for its own.
+ *
+ * **Which faces hold glass is remembered, six bits a layer**, so a face with no glass and none to
+ * forget costs nothing, and a face that inherited a previous owner's glass is cleared. **The chain
+ * frost reads is rebuilt once a round**, for the layers the round touched, through a 2D staging
+ * chain: `generateMipmap` on an array rebuilds every layer, which is the whole pool's texels for one
+ * lamp's glass. What that costs is one layer of memory with its chain — 5.6 MB at 1024, 1.4 MB at
+ * `'half'` — and a copy out and back per touched layer.
+ */
+export class PointGlassTint {
+  readonly texture: WebGLTexture;
+  readonly edge: number;
+
+  private readonly layers: number;
+  private readonly levels: number;
+  private readonly faceSize: number;
+  private readonly scratch: WebGLTexture;
+  private readonly scratchFramebuffer: WebGLFramebuffer;
+  private readonly staging: WebGLTexture;
+  private readonly framebuffer: WebGLFramebuffer;
+  private readonly readFramebuffer: WebGLFramebuffer;
+  /** Parked on the resolve's unit while the scratch is a render target; see `beginFace`. */
+  private readonly parked: WebGLTexture;
+  private readonly program: WebGLProgram;
+  private readonly uniforms: Record<string, WebGLUniformLocation>;
+  private readonly vao: WebGLVertexArrayObject;
+  /** Six bits a layer: which faces' regions hold glass. */
+  private readonly heldFaces: Uint8Array;
+  /** Layers whose level 0 changed since the chain was last rebuilt. */
+  private readonly dirty: Uint8Array;
+
+  constructor(gl: WebGL2RenderingContext, faceSize: number, edge: number, layers: number) {
+    this.edge = edge;
+    this.layers = layers;
+    this.faceSize = faceSize;
+    this.levels = Math.floor(Math.log2(Math.max(1, edge))) + 1;
+    this.heldFaces = new Uint8Array(layers);
+    this.dirty = new Uint8Array(layers);
+
+    this.texture = colourTexture(gl, gl.TEXTURE_2D_ARRAY, this.levels, edge, layers);
+    this.scratch = colourTexture(gl, gl.TEXTURE_2D, 1, faceSize, 1);
+    this.staging = colourTexture(gl, gl.TEXTURE_2D, this.levels, edge, 1);
+    this.parked = createEmptyTexture2D(gl);
+    this.scratchFramebuffer = framebufferOf(gl);
+    this.framebuffer = framebufferOf(gl);
+    this.readFramebuffer = framebufferOf(gl);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.scratchFramebuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.scratch, 0);
+
+    this.program = compileProgram(
+      gl,
+      OCTAHEDRAL_RESOLVE_VERT,
+      OCTAHEDRAL_RESOLVE_TINT_FRAG,
+      'octahedralResolveTint',
+    );
+    this.uniforms = uniformLocations(gl, this.program, 'octahedralResolveTint');
+    const vao = gl.createVertexArray();
+    if (vao === null) throw new Error('PointGlassTint: createVertexArray failed');
+    this.vao = vao;
+
+    /* Every layer born clear: a light no pane has reached lets everything through. */
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    for (let layer = 0; layer < layers; layer++) {
+      gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this.texture, 0, layer);
+      gl.clearBufferfv(gl.COLOR, 0, CLEAR);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    /* Once, for every layer: white all the way down. */
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
+    gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+  }
+
+  /** Whether `face` of `layer` holds glass: a face that does must be cleared before it is reused. */
+  held(layer: number, face: number): boolean {
+    return (((this.heldFaces[layer] ?? 0) >> face) & 1) === 1;
+  }
+
+  /**
+   * Bind the colour scratch, clear it to white, and set the multiplying state.
+   *
+   * The previous resolve left the scratch bound for sampling on unit 0, and it is about to be the
+   * target: parked first, for the reason `PointShadowArray.beginFace` gives.
+   */
+  beginFace(gl: WebGL2RenderingContext): void {
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.parked);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.scratchFramebuffer);
+    gl.viewport(0, 0, this.faceSize, this.faceSize);
+    gl.clearBufferfv(gl.COLOR, 0, CLEAR);
+    gl.disable(gl.DEPTH_TEST);
+    gl.depthMask(false);
+    gl.enable(gl.BLEND);
+    gl.blendEquation(gl.FUNC_ADD);
+    gl.blendFuncSeparate(gl.DST_COLOR, gl.ZERO, gl.DST_ALPHA, gl.ZERO);
+  }
+
+  /**
+   * Copy the scratch into `face`'s region of `layer`, and remember whether it held glass.
+   *
+   * Leaves depth testing and writing on, which is what the next face's casters expect: the depth
+   * resolve that runs before them turns both on, and this one ran after it and turned them off.
+   */
+  resolveFace(gl: WebGL2RenderingContext, layer: number, face: number, drawn: boolean): void {
+    gl.disable(gl.BLEND);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this.texture, 0, layer);
+    gl.viewport(0, 0, this.edge, this.edge);
+    gl.useProgram(this.program);
+    gl.bindVertexArray(this.vao);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.scratch);
+    gl.uniform1i(this.uniforms['uFace'] ?? null, 0);
+    gl.uniform1i(this.uniforms['uFaceIndex'] ?? null, face);
+    gl.uniformMatrix3fv(
+      this.uniforms['uFaceRotation'] ?? null,
+      false,
+      pointShadowFaceRotation(face, faceRotation),
+    );
+    gl.uniform1f(this.uniforms['uEdge'] ?? null, this.edge);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.bindVertexArray(null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthMask(true);
+
+    const bit = 1 << face;
+    const was = this.heldFaces[layer] ?? 0;
+    this.heldFaces[layer] = drawn ? was | bit : was & ~bit;
+    this.dirty[layer] = 1;
+  }
+
+  /** Rebuild the chain of every layer touched since the last call, one layer at a time. */
+  fillMips(gl: WebGL2RenderingContext): void {
+    for (let layer = 0; layer < this.layers; layer++) {
+      if (this.dirty[layer] !== 1) continue;
+      this.dirty[layer] = 0;
+      /* Level 0 out into the staging chain, which mipmaps as one 2D texture. */
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.readFramebuffer);
+      gl.framebufferTextureLayer(gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this.texture, 0, layer);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
+      gl.framebufferTexture2D(
+        gl.DRAW_FRAMEBUFFER,
+        gl.COLOR_ATTACHMENT0,
+        gl.TEXTURE_2D,
+        this.staging,
+        0,
+      );
+      blit(gl, this.edge, this.edge);
+      gl.bindTexture(gl.TEXTURE_2D, this.staging);
+      gl.generateMipmap(gl.TEXTURE_2D);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+      /* And every level after it back into the layer. */
+      for (let level = 1; level < this.levels; level++) {
+        const size = Math.max(1, this.edge >> level);
+        gl.framebufferTexture2D(
+          gl.READ_FRAMEBUFFER,
+          gl.COLOR_ATTACHMENT0,
+          gl.TEXTURE_2D,
+          this.staging,
+          level,
+        );
+        gl.framebufferTextureLayer(
+          gl.DRAW_FRAMEBUFFER,
+          gl.COLOR_ATTACHMENT0,
+          this.texture,
+          level,
+          layer,
+        );
+        blit(gl, size, size);
+      }
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+    }
+  }
+
+  dispose(gl: WebGL2RenderingContext): void {
+    gl.deleteFramebuffer(this.scratchFramebuffer);
+    gl.deleteFramebuffer(this.framebuffer);
+    gl.deleteFramebuffer(this.readFramebuffer);
+    gl.deleteTexture(this.texture);
+    gl.deleteTexture(this.scratch);
+    gl.deleteTexture(this.staging);
+    gl.deleteTexture(this.parked);
+    gl.deleteProgram(this.program);
+    gl.deleteVertexArray(this.vao);
+  }
+}
+
+/** A colour texture with `levels` levels: nearest for a single level, trilinear for a chain. */
+function colourTexture(
+  gl: WebGL2RenderingContext,
+  target: number,
+  levels: number,
+  edge: number,
+  layers: number,
+): WebGLTexture {
+  const texture = gl.createTexture();
+  if (texture === null) throw new Error('PointGlassTint: createTexture failed');
+  gl.bindTexture(target, texture);
+  if (target === gl.TEXTURE_2D_ARRAY) {
+    gl.texStorage3D(target, levels, gl.RGBA8, edge, edge, layers);
+  } else {
+    gl.texStorage2D(target, levels, gl.RGBA8, edge, edge);
+  }
+  gl.texParameteri(
+    target,
+    gl.TEXTURE_MIN_FILTER,
+    levels > 1 ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST,
+  );
+  gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, levels > 1 ? gl.LINEAR : gl.NEAREST);
+  gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.bindTexture(target, null);
+  return texture;
+}
+
+function framebufferOf(gl: WebGL2RenderingContext): WebGLFramebuffer {
+  const framebuffer = gl.createFramebuffer();
+  if (framebuffer === null) throw new Error('PointGlassTint: createFramebuffer failed');
+  return framebuffer;
+}
+
+/** The bound read framebuffer's colour into the bound draw framebuffer's, texel for texel. */
+function blit(gl: WebGL2RenderingContext, width: number, height: number): void {
+  gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+}

package/src/render/pointShadowArray.ts

@@ -2,6 +2,7 @@ import { mat3 } from 'gl-matrix';
 
 import { createEmptyTexture2D } from './emptyTexture.ts';
 import { LIVE_POINT_SHADOW_MAPS, POINT_SHADOW_POOL } from './lightBudget.ts';
+import { PointGlassTint } from './pointGlassTint.ts';
 import { pointShadowFaceRotation } from './pointShadowImage.ts';
 import { compileProgram, uniformLocations } from './shader.ts';
 import { OCTAHEDRAL_RESOLVE_FRAG, OCTAHEDRAL_RESOLVE_VERT } from './shaders/octahedralResolve.ts';
@@ -34,6 +35,37 @@ export interface PointShadowTarget {
     far: number,
     near: number,
   ): void;
+  /** Whether the array has grown its glass layers: `growForGlass`. */
+  readonly hasGlass: boolean;
+  /** Whether `face` of `layer` holds glass, which a face that offers none must clear. */
+  heldGlass(layer: number, face: number): boolean;
+  /** The depth scratch again, cleared, for the face's glass. */
+  beginGlassFace(gl: WebGL2RenderingContext): void;
+  resolveGlassFace(
+    gl: WebGL2RenderingContext,
+    layer: number,
+    face: number,
+    far: number,
+    near: number,
+  ): void;
+  /** The colour scratch, cleared to white, for what the face's glass lets through. */
+  beginTintFace(gl: WebGL2RenderingContext): void;
+  resolveTintFace(gl: WebGL2RenderingContext, layer: number, face: number, drawn: boolean): void;
+}
+
+/**
+ * Every published layer as the array stores it: `layer × stride`, and −1 left as −1.
+ *
+ * **Applied to the resolved arrays right after each resolve**, so every consumer of an uploaded
+ * index reads the physical layer: once glass arrives, light L's depth is at 2L and its glass at
+ * 2L + 1 (`PointShadowArray.growForGlass`). In place, because the resolve rewrites these every time.
+ */
+export function strideLayers(layers: Int32Array, stride: number): void {
+  if (stride === 1) return;
+  for (let i = 0; i < layers.length; i++) {
+    const layer = layers[i] as number;
+    if (layer >= 0) layers[i] = layer * stride;
+  }
 }
 
 /**
@@ -53,12 +85,16 @@ export interface PointShadowTarget {
  * never the same object.
  */
 export class PointShadowArray implements PointShadowTarget {
-  readonly texture: WebGLTexture;
   /**
-   * How many layers this array holds: the point pool, the two live transition maps, and two more
-   * for each rectangle a world said would cast. See the constructor's `extraLayers`.
+   * How many lights this array holds: the point pool, the two live transition maps, and two more
+   * for each rectangle a world said would cast. See the constructor's `extraLayers`. Counted in
+   * lights, so it does not move when glass doubles the storage under it.
    */
   readonly layers: number;
+  /** Replaced once, when glass first casts: see `growForGlass`. */
+  private current: WebGLTexture;
+  /** What the lights' glass lets through, made with the glass layers. */
+  private tint: PointGlassTint | null = null;
 
   private readonly framebuffer: WebGLFramebuffer;
   private readonly scratchTexture: WebGLTexture;
@@ -96,23 +132,8 @@ export class PointShadowArray implements PointShadowTarget {
     this.layers =
       Math.min(lightCount, POINT_SHADOW_POOL) + LIVE_POINT_SHADOW_MAPS + Math.max(0, extraLayers);
 
-    const texture = gl.createTexture();
-    if (texture === null) throw new Error('PointShadowArray: createTexture failed');
-    this.texture = texture;
-    gl.bindTexture(gl.TEXTURE_2D_ARRAY, texture);
-    gl.texStorage3D(
-      gl.TEXTURE_2D_ARRAY,
-      1,
-      gl.DEPTH_COMPONENT24,
-      OCTAHEDRAL_EDGE,
-      OCTAHEDRAL_EDGE,
-      this.layers,
-    );
-    /* One storage level and no filtering, so textureLod(..., 0.0) is the only fetch there is. */
-    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const texture = depthArray(gl, this.layers);
+    this.current = texture;
 
     const scratchTexture = gl.createTexture();
     if (scratchTexture === null) throw new Error('PointShadowArray: createTexture failed');
@@ -183,6 +204,117 @@ export class PointShadowArray implements PointShadowTarget {
     gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
   }
 
+  /** The array texture the lit pass samples. Replaced once, when glass first casts. */
+  get texture(): WebGLTexture {
+    return this.current;
+  }
+
+  get hasGlass(): boolean {
+    return this.tint !== null;
+  }
+
+  /** Physical layers a light: 1, or 2 once glass has interleaved the array. */
+  get stride(): number {
+    return this.tint === null ? 1 : 2;
+  }
+
+  /** The glass tint, one layer a light, once glass has cast; the lit pass samples it. */
+  get tintTexture(): WebGLTexture | null {
+    return this.tint?.texture ?? null;
+  }
+
+  /**
+   * Interleave the array for glass: light L's depth moves to 2L and its glass takes 2L + 1, and
+   * the tint is made. Returns whether it grew — once, on the first face whose casters held glass.
+   *
+   * **Interleaved rather than stacked above the opaque half** because a shader cannot ask an array
+   * its layer count under naga, so it cannot find `L + N`; `layer + 1` it can. **Every map already
+   * baked is carried across** by a depth blit, so nothing goes dark, and **no map needs baking
+   * again**: this runs on the first face that saw glass, so no map baked before it saw any, and a
+   * glass layer born at the far plane with a white tint is exactly what its bake would draw. What
+   * it costs is the doubled depth (4.19 MB a light at 1024) and the tint (5.6 MB a light with its
+   * chain, 1.4 MB at `'half'`), from then on.
+   */
+  growForGlass(gl: WebGL2RenderingContext, tintEdge: number): boolean {
+    if (this.tint !== null) return false;
+    const old = this.current;
+    const texture = depthArray(gl, this.layers * 2);
+    /* Off the unit it was made on, as the constructor leaves its own: see `beginFace`. */
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+    const read = gl.createFramebuffer();
+    if (read === null) throw new Error('PointShadowArray: createFramebuffer failed');
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, read);
+    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
+    for (let layer = 0; layer < this.layers; layer++) {
+      gl.framebufferTextureLayer(gl.READ_FRAMEBUFFER, gl.DEPTH_ATTACHMENT, old, 0, layer);
+      gl.framebufferTextureLayer(gl.DRAW_FRAMEBUFFER, gl.DEPTH_ATTACHMENT, texture, 0, 2 * layer);
+      gl.blitFramebuffer(
+        0,
+        0,
+        OCTAHEDRAL_EDGE,
+        OCTAHEDRAL_EDGE,
+        0,
+        0,
+        OCTAHEDRAL_EDGE,
+        OCTAHEDRAL_EDGE,
+        gl.DEPTH_BUFFER_BIT,
+        gl.NEAREST,
+      );
+    }
+    /* Nothing is nearer a lamp than a pane that has not been drawn. */
+    for (let layer = 0; layer < this.layers; layer++) {
+      gl.framebufferTextureLayer(
+        gl.DRAW_FRAMEBUFFER,
+        gl.DEPTH_ATTACHMENT,
+        texture,
+        0,
+        2 * layer + 1,
+      );
+      gl.clearBufferfv(gl.DEPTH, 0, FAR_PLANE);
+    }
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.deleteFramebuffer(read);
+    gl.deleteTexture(old);
+    this.current = texture;
+    this.tint = new PointGlassTint(gl, this.faceSize, tintEdge, this.layers);
+    return true;
+  }
+
+  heldGlass(layer: number, face: number): boolean {
+    return this.tint?.held(layer, face) ?? false;
+  }
+
+  /** The depth scratch, cleared, for the face's glass: `beginFace` exactly. */
+  beginGlassFace(gl: WebGL2RenderingContext): void {
+    this.beginFace(gl);
+  }
+
+  /** The face's glass depth into light `layer`'s glass layer, 2L + 1. */
+  resolveGlassFace(
+    gl: WebGL2RenderingContext,
+    layer: number,
+    face: number,
+    far: number,
+    near: number,
+  ): void {
+    if (this.tint === null) return;
+    this.resolveInto(gl, 2 * layer + 1, face, far, near);
+  }
+
+  beginTintFace(gl: WebGL2RenderingContext): void {
+    this.tint?.beginFace(gl);
+  }
+
+  resolveTintFace(gl: WebGL2RenderingContext, layer: number, face: number, drawn: boolean): void {
+    this.tint?.resolveFace(gl, layer, face, drawn);
+  }
+
+  /** The chain frost reads, for every light whose tint a round touched: once a round. */
+  finishTints(gl: WebGL2RenderingContext): void {
+    this.tint?.fillMips(gl);
+  }
+
   /**
    * Bind the scratch as the render target for one face of one bake, and clear it.
    *
@@ -224,9 +356,20 @@ export class PointShadowArray implements PointShadowTarget {
     face: number,
     far: number,
     near: number,
+  ): void {
+    this.resolveInto(gl, layer * this.stride, face, far, near);
+  }
+
+  /** The scratch into physical layer `physical`'s region for `face`. */
+  private resolveInto(
+    gl: WebGL2RenderingContext,
+    physical: number,
+    face: number,
+    far: number,
+    near: number,
   ): void {
     gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
-    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, this.texture, 0, layer);
+    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, this.current, 0, physical);
     gl.viewport(0, 0, OCTAHEDRAL_EDGE, OCTAHEDRAL_EDGE);
 
     gl.useProgram(this.program);
@@ -267,10 +410,33 @@ export class PointShadowArray implements PointShadowTarget {
   dispose(gl: WebGL2RenderingContext): void {
     gl.deleteFramebuffer(this.framebuffer);
     gl.deleteFramebuffer(this.scratchFramebuffer);
-    gl.deleteTexture(this.texture);
+    gl.deleteTexture(this.current);
     gl.deleteTexture(this.scratchTexture);
+    this.tint?.dispose(gl);
     gl.deleteTexture(this.parked);
     gl.deleteProgram(this.program);
     gl.deleteVertexArray(this.vao);
   }
 }
+
+const FAR_PLANE = new Float32Array([1]);
+
+/** The depth array: one storage level and no filtering, so textureLod(..., 0.0) is the only fetch. */
+function depthArray(gl: WebGL2RenderingContext, layers: number): WebGLTexture {
+  const texture = gl.createTexture();
+  if (texture === null) throw new Error('PointShadowArray: createTexture failed');
+  gl.bindTexture(gl.TEXTURE_2D_ARRAY, texture);
+  gl.texStorage3D(
+    gl.TEXTURE_2D_ARRAY,
+    1,
+    gl.DEPTH_COMPONENT24,
+    OCTAHEDRAL_EDGE,
+    OCTAHEDRAL_EDGE,
+    layers,
+  );
+  gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  return texture;
+}