@driftengine/core 4.4.1 → 4.5.0

package/src/render/shaders/temporalResolve.ts

@@ -20,6 +20,15 @@
  * The vertex stage is `FULLSCREEN_VERT`, shared with the occlusion pass, its blur and the rush.
  */
 import { glslSceneDepthToNdc } from '../depthConvention.ts';
+import {
+  FLICKER_BLEND,
+  FLICKER_MEMORY,
+  FLICKER_REPEAT,
+  FLICKER_SURFACE,
+  FLICKER_WIDTH,
+  STILL_FROM,
+  STILL_TO,
+} from '../temporalAa.ts';
 
 export const TEMPORAL_RESOLVE_FRAG = `#version 300 es
 precision highp float;
@@ -30,6 +39,22 @@ in vec2 vUv;
 uniform sampler2D uScene;
 /** What this pass wrote last frame: resolved, and conceptually unjittered. */
 uniform sampler2D uHistory;
+/**
+ * Each pixel's flicker record from last frame, the anti-flicker in temporalAa.ts: its spread about
+ * its period's mean, the sum this period has gathered, the last period's mean, and how many periods
+ * running have repeated. highp for the reason the depth's is: a luma in a half-float scene is not a
+ * value from 0 to 1.
+ */
+uniform highp sampler2D uFlicker;
+/**
+ * The rest of the record: the view depth the pixel's sample stood at, so the next frame can tell
+ * whether it follows the same surface, and the pixel's own depth swing, which that test allows for.
+ */
+uniform highp sampler2D uFlickerMotion;
+/** The inverse projection's depth row and w row, as the other passes read a depth into metres. */
+uniform vec4 uDepthToViewZ;
+/** One where the records can hold what they hold, zero where they cannot: then 4.4.1's resolve. */
+uniform float uAntiFlicker;
 /**
  * The frame's depth.
  *
@@ -53,6 +78,8 @@ uniform highp sampler2D uDepth;
 uniform mat4 uReprojection;
 /** One texel of the target, for walking the neighbourhood. */
 uniform vec2 uTexel;
+/** One on the first frame of the jitter's period, where the anti-flicker compares two periods. */
+uniform float uPeriodStart;
 /**
  * How much of the clipped history to keep, 0 to 1.
  *
@@ -63,7 +90,41 @@ uniform vec2 uTexel;
  */
 uniform float uHistoryBlend;
 
-out vec4 fragColor;
+layout(location = 0) out vec4 fragColor;
+/** The record carried out, in the texture uFlicker reads next frame. */
+layout(location = 1) out vec4 flickerOut;
+/** And the rest of it, in the texture uFlickerMotion reads. */
+layout(location = 2) out vec4 flickerMotionOut;
+
+const float FLICKER_MEMORY = ${FLICKER_MEMORY.toFixed(3)};
+const float FLICKER_WIDTH = ${FLICKER_WIDTH.toFixed(1)};
+const float FLICKER_REPEAT = ${FLICKER_REPEAT.toFixed(2)};
+const float FLICKER_BLEND = ${FLICKER_BLEND.toFixed(2)};
+const float FLICKER_SURFACE = ${FLICKER_SURFACE.toFixed(2)};
+const float STILL_FROM = ${STILL_FROM.toFixed(2)};
+const float STILL_TO = ${STILL_TO.toFixed(2)};
+
+float luma(vec3 c) {
+  return dot(c, vec3(0.2126, 0.7152, 0.0722));
+}
+
+/** A record starting over: no spread, and nothing repeated yet. */
+vec4 freshRecord(vec3 current) {
+  float seen = luma(current);
+  return vec4(0.0, seen * FLICKER_MEMORY, seen, 0.0);
+}
+
+/** Metres in front of the camera, from a depth sample, as depthOfField.ts reads one. */
+float viewDepthOf(float depth) {
+  float z = ${glslSceneDepthToNdc('depth')};
+  return -(uDepthToViewZ.x * z + uDepthToViewZ.y) / (uDepthToViewZ.z * z + uDepthToViewZ.w);
+}
+
+/** Whether two periods' means are the same, one to zero. */
+float repeats(float mean, float previous) {
+  float apart = abs(mean - previous) / max(max(mean, previous), 1.0 / 255.0);
+  return 1.0 - smoothstep(FLICKER_REPEAT, 2.0 * FLICKER_REPEAT, apart);
+}
 
 /**
  * The colours actually present around this pixel this frame, as a box.
@@ -155,19 +216,45 @@ void main() {
   /* Nothing to blend towards: the first frame, a resize, a cut, or the effect switched off. */
   if (uHistoryBlend <= 0.0) {
     fragColor = vec4(current, 1.0);
+    flickerOut = freshRecord(current);
+    flickerMotionOut = vec4(0.0);
     return;
   }
 
+  /*
+   * **The motion is the nearest surface's among the nine**, the dilation every temporal resolve
+   * uses: a pixel at a thin thing samples it in some frames and what is behind it in others, and the
+   * two move apart as the camera does, so reprojecting each frame by whichever it caught sends its
+   * history and its record somewhere different every frame. A crack of light round a door moves with
+   * the door that frames it, and so does its pixel. The depth kept is that surface's too, so the record
+   * keeps and next frame tests the depth the reprojection followed.
+   */
+  vec2 nearestAt = vUv;
   float depth = textureLod(uDepth, vUv, 0.0).r;
-  vec4 clip = vec4(vUv * 2.0 - 1.0, ${glslSceneDepthToNdc('depth')}, 1.0);
+  float metres = viewDepthOf(depth);
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 at = vUv + vec2(float(x), float(y)) * uTexel;
+      float tap = textureLod(uDepth, at, 0.0).r;
+      float tapMetres = viewDepthOf(tap);
+      if (tapMetres < metres) {
+        metres = tapMetres;
+        depth = tap;
+        nearestAt = at;
+      }
+    }
+  }
+  vec4 clip = vec4(nearestAt * 2.0 - 1.0, ${glslSceneDepthToNdc('depth')}, 1.0);
   vec4 previous = uReprojection * clip;
   /* Behind the previous eye: there is no last-frame position to sample. */
   if (previous.w <= 0.0) {
     fragColor = vec4(current, 1.0);
+    flickerOut = freshRecord(current);
+    flickerMotionOut = vec4(metres, 0.0, 0.0, 0.0);
     return;
   }
 
-  vec2 wasUv = (previous.xy / previous.w) * 0.5 + 0.5;
+  vec2 wasUv = vUv + ((previous.xy / previous.w) * 0.5 + 0.5 - nearestAt);
   /*
    * **Off the edge of the last frame is a disocclusion**, and the honest answer is this frame's
    * colour rather than a clamped sample of the border, which would drag one row of pixels inward
@@ -175,6 +262,8 @@ void main() {
    */
   if (wasUv.x < 0.0 || wasUv.x > 1.0 || wasUv.y < 0.0 || wasUv.y > 1.0) {
     fragColor = vec4(current, 1.0);
+    flickerOut = freshRecord(current);
+    flickerMotionOut = vec4(metres, 0.0, 0.0, 0.0);
     return;
   }
 
@@ -182,8 +271,55 @@ void main() {
   vec3 hi;
   neighbourhood(lo, hi);
   vec3 history = historyCatmullRom(wasUv);
-  vec3 bounded = clipToNeighbourhood(history, lo, hi);
 
-  fragColor = vec4(mix(current, bounded, uHistoryBlend), 1.0);
+  /*
+   * The anti-flicker, operation for operation the one in temporalAa.ts. The record is read at the
+   * texel where the surface was rather than filtered, so two surfaces' records never mix at an
+   * edge; it is the surface's own if last frame's depth there, or at one of the texels beside it,
+   * is the depth this surface should have had — the nearest of five, because this frame's sample
+   * and last frame's can straddle an edge with nothing moved. Otherwise it is no record.
+   */
+  ivec2 size = textureSize(uFlicker, 0);
+  ivec2 was = clamp(ivec2(wasUv * vec2(size)), ivec2(0), size - 1);
+  float nearest = 1e9;
+  for (int n = 0; n < 5; n++) {
+    ivec2 at = was + (n == 1 ? ivec2(1, 0) : n == 2 ? ivec2(-1, 0) : n == 3 ? ivec2(0, 1) : n == 4 ? ivec2(0, -1) : ivec2(0));
+    float stood = texelFetch(uFlickerMotion, clamp(at, ivec2(0), size - 1), 0).r;
+    if (stood > 0.0) nearest = min(nearest, abs(stood - previous.w));
+  }
+  /* The swing is the pixel's whatever the test says: resetting it would stop it learning one. */
+  vec4 motionThere = texelFetch(uFlickerMotion, was, 0);
+  bool missedAll = nearest > 1e8;
+  bool same = uAntiFlicker > 0.5 && !missedAll &&
+    nearest <= FLICKER_WIDTH * motionThere.g + FLICKER_SURFACE * previous.w;
+  float swingOut = missedAll ? 0.0 : motionThere.g + (nearest - motionThere.g) * FLICKER_MEMORY;
+  float seen = luma(current);
+  vec4 held = same ? texelFetch(uFlicker, was, 0) : freshRecord(current);
+
+  float still = 1.0 - smoothstep(STILL_FROM, STILL_TO, length((wasUv - vUv) / uTexel));
+  float apart = abs(seen - held.b);
+  float reach = FLICKER_WIDTH * held.r + 1.0 / 255.0;
+  bool within = apart <= reach;
+  bool proven = held.a > 0.75 && within;
+  float widen = proven ? FLICKER_WIDTH * held.r * still : 0.0;
+  float blend = proven ? mix(uHistoryBlend, FLICKER_BLEND, still) : uHistoryBlend;
+  vec3 bounded = clipToNeighbourhood(history, lo - widen, hi + widen);
+
+  float sum = held.g;
+  float mean = held.b;
+  float repeated = within ? held.a : 0.0;
+  if (uPeriodStart > 0.5) {
+    repeated = repeats(sum, mean) > 0.5 ? min(1.0, repeated + 0.5) : 0.0;
+    mean = sum;
+    sum = 0.0;
+  }
+  flickerOut = vec4(
+    held.r + (apart - held.r) * FLICKER_MEMORY,
+    sum + seen * FLICKER_MEMORY,
+    mean,
+    repeated * still
+  );
+  flickerMotionOut = vec4(metres, swingOut, 0.0, 0.0);
+  fragColor = vec4(mix(current, bounded, blend), 1.0);
 }
 `;

package/src/render/shadowCasters.ts

@@ -1,3 +1,4 @@
+import { resolveGlass, type GlassOptions, type ResolvedGlass } from './glass.ts';
 import type { ReadonlyMat4 } from 'gl-matrix';
 import type { InstanceData } from './instancedMesh.ts';
 import type { InstancedHandle, MeshHandle, ScatterHandle } from './backend/api.ts';
@@ -41,7 +42,33 @@ import type { SurfaceTextureHandle } from './backend/api.ts';
  * outwards, so a required parameter added in a minor stops every consumer's sink and every test
  * double compiling. A sink that ignores it behaves exactly as it did.
  */
-export type SceneCasterMaterial = SurfaceMaterial<SurfaceTextureHandle> | null;
+export type SceneCasterMaterial =
+  | (SurfaceMaterial<SurfaceTextureHandle> & {
+      /**
+       * The caster is glass: it lets light through, so it writes no depth into any shadow map and a
+       * lamp behind it lights what is beyond. The colour replay into a mirror or a probe still draws
+       * it. With `RenderQuality.glassShadows` on it casts a coloured shadow instead: see
+       * `glassShadow.ts`.
+       */
+      readonly glass?: GlassOptions;
+    })
+  | null;
+
+/**
+ * Whether a caster writes depth into a shadow map: everything but glass. One line in each depth
+ * sink, so the answer is the same in every shadow a backend draws.
+ */
+export function castsDepth(material: SceneCasterMaterial | undefined): boolean {
+  return (material?.glass?.transmission ?? 0) <= 0;
+}
+
+/**
+ * The caster's glass, resolved into `out`, and whether it is glass at all — the rule `castsDepth`
+ * states from the other side, so a caster is exactly one of the two.
+ */
+export function glassOf(material: SceneCasterMaterial | undefined, out: ResolvedGlass): boolean {
+  return resolveGlass(material?.glass, out);
+}
 
 export interface ShadowCasterSink {
   /** A rigid mesh at a model transform: the world, a prop, a static piece of scenery. */

package/src/render/shadowMap.ts

@@ -1,49 +1,106 @@
 /**
- * Single-cascade directional shadow map: one depth texture, one extra draw of
- * the static world per update.
+ * The sun's shadow: one depth array whose layers are the static world, its movers, and the static
+ * world's second occluder (the peel), drawn one at a time and sampled together.
  *
- * Filtering belongs to the receiving material shader, so the depth target can
- * stay a single-sample texture shared by every mesh pass.
+ * **One array rather than three maps since 4.5.0**, for the reason the lamps' twelve cubemaps
+ * became one: a texture unit. The lit pass binds all three through one `sampler2DArray`, which is
+ * what paid for the two tints glass casts with. The layers share one size and one format, so
+ * nothing about how each is drawn or read moved — only where it lives.
  *
- * Note this is a depth *render target*, not an art texture: AGENTS.md's
- * "zero textures" rule is about the art direction (no image assets in the
- * payload), and nothing here adds a byte to it.
+ * Filtering belongs to the receiving material shader, so the depth target can stay a
+ * single-sample texture shared by every mesh pass. This is a depth *render target*, not an art
+ * texture: AGENTS.md's "zero textures" rule is about the payload, and nothing here adds to it.
  */
 import { SHADOW_DEPTH_CLEAR } from './depthConvention.ts';
 import { DEFAULT_RENDER_QUALITY } from './renderQuality.ts';
 
-export class ShadowMap {
+/** Where each of the sun's maps lives in the array. The shaders read these same numbers. */
+export const SUN_STATIC_LAYER = 0;
+export const SUN_DYNAMIC_LAYER = 1;
+/** Present only when more than one static depth layer is asked for. */
+export const SUN_PEELED_LAYER = 2;
+/**
+ * Where the nearest pane's depth lives once glass has cast: after the three maps, at fixed places,
+ * because a shader cannot ask an array how many layers it has here — naga refuses the third
+ * component of an arrayed size query. A profile with no peel grows past an unused third layer to
+ * reach them, which is one map's memory in a profile that already declined one.
+ */
+export const SUN_GLASS_STATIC_LAYER = 3;
+export const SUN_GLASS_MOVING_LAYER = 4;
+
+/** The three passes a scene opens, by the names `beginShadowPass` takes. */
+export type SunShadowLayer = 'static' | 'static-peel' | 'dynamic';
+
+/** The array layer a pass draws into. */
+export function sunLayerIndex(layer: SunShadowLayer): number {
+  return layer === 'static'
+    ? SUN_STATIC_LAYER
+    : layer === 'dynamic'
+      ? SUN_DYNAMIC_LAYER
+      : SUN_PEELED_LAYER;
+}
+
+export class SunShadowArray {
   readonly size: number;
-  readonly texture: WebGLTexture;
+  /** Replaced once, when glass first casts: see `growForGlass`. */
+  private current: WebGLTexture;
+  private layerCount: number;
+  private glass = false;
 
   private readonly framebuffer: WebGLFramebuffer;
+  /**
+   * **The peel is drawn here and copied into its layer when the pass ends.** It reads the static
+   * layer while it is drawn, and WebGL2 calls a texture both sampled and attached a feedback loop
+   * whatever layer each names — so drawing the peel into the array would draw nothing at all.
+   * What it costs is one more map's memory where a peel is asked for, and one blit per peel.
+   */
+  private readonly peelTexture: WebGLTexture | null;
+  private readonly peelFramebuffer: WebGLFramebuffer | null;
+  private peeling = false;
 
-  constructor(gl: WebGL2RenderingContext, size = DEFAULT_RENDER_QUALITY.directionalShadowMapSize) {
+  constructor(
+    gl: WebGL2RenderingContext,
+    size = DEFAULT_RENDER_QUALITY.directionalShadowMapSize,
+    peeled = false,
+  ) {
     this.size = size;
+    this.layerCount = peeled ? 3 : 2;
 
-    const texture = gl.createTexture();
-    if (texture === null) throw new Error('ShadowMap: createTexture failed');
-    this.texture = texture;
-
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texStorage2D(gl.TEXTURE_2D, 1, gl.DEPTH_COMPONENT24, size, size);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-    // Clamp so anything outside the light frustum samples the border and is
-    // treated as lit, rather than wrapping into a spurious shadow.
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const texture = createSunTexture(gl, size, this.layerCount);
+    this.current = texture;
 
     const framebuffer = gl.createFramebuffer();
-    if (framebuffer === null) throw new Error('ShadowMap: createFramebuffer failed');
+    if (framebuffer === null) throw new Error('SunShadowArray: createFramebuffer failed');
     this.framebuffer = framebuffer;
-
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, texture, 0);
+    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, texture, 0, SUN_STATIC_LAYER);
     // Depth-only: without this WebGL expects a colour attachment.
     gl.drawBuffers([gl.NONE]);
     gl.readBuffer(gl.NONE);
 
+    if (peeled) {
+      const peelTexture = gl.createTexture();
+      const peelFramebuffer = gl.createFramebuffer();
+      if (peelTexture === null || peelFramebuffer === null) {
+        throw new Error('SunShadowArray: the peel target could not be created');
+      }
+      gl.bindTexture(gl.TEXTURE_2D, peelTexture);
+      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.DEPTH_COMPONENT24, size, size);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, peelFramebuffer);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, peelTexture, 0);
+      gl.drawBuffers([gl.NONE]);
+      gl.readBuffer(gl.NONE);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+      this.peelTexture = peelTexture;
+      this.peelFramebuffer = peelFramebuffer;
+    } else {
+      this.peelTexture = null;
+      this.peelFramebuffer = null;
+    }
+
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
     const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
     if (status !== gl.FRAMEBUFFER_COMPLETE) {
       /*
@@ -52,29 +109,121 @@ export class ShadowMap {
        * because the context cannot be lost before it exists.
        */
       if (gl.isContextLost()) return;
-      throw new Error(`ShadowMap: framebuffer incomplete (0x${status.toString(16)})`);
+      throw new Error(`SunShadowArray: framebuffer incomplete (0x${status.toString(16)})`);
     }
 
     /*
-     * **Cleared once, here, to the far plane, because nothing else says what the texture holds.**
-     * WebGL zeroes it, and a zero compared with `LEQUAL` is an occluder at the light itself, so
-     * a layer no pass has drawn put the whole world in shade. ANGLE on Vulkan hands the same
-     * texture back reading 1, which is lit, and that is what every capture here ran on: a scene
-     * with a second depth layer it never peeled lost its sun only under ANGLE's GL backend, the
-     * one Chrome on Linux runs by default. The frame's clear value is borrowed and put back.
+     * **Every layer cleared once, here, to the far plane, because nothing else says what it
+     * holds.** WebGL zeroes the texture, and a zero compared with `LEQUAL` is an occluder at the
+     * light itself, so a layer no pass has drawn put the whole world in shade. ANGLE on Vulkan
+     * hands the same texture back reading 1, which is lit, and that is what every capture here
+     * ran on: a scene with a second depth layer it never peeled lost its sun only under ANGLE's
+     * GL backend, the one Chrome on Linux runs by default. The frame's clear value is put back.
      */
     const frameClear = gl.getParameter(gl.DEPTH_CLEAR_VALUE) as number;
     gl.clearDepth(SHADOW_DEPTH_CLEAR);
-    gl.clear(gl.DEPTH_BUFFER_BIT);
+    gl.viewport(0, 0, size, size);
+    for (let layer = 0; layer < this.layers; layer++) {
+      gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, texture, 0, layer);
+      gl.clear(gl.DEPTH_BUFFER_BIT);
+    }
     gl.clearDepth(frameClear);
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+  }
+
+  get texture(): WebGLTexture {
+    return this.current;
+  }
+
+  get layers(): number {
+    return this.layerCount;
+  }
+
+  /** Whether the two glass layers exist: from the first glass a sun pass is offered, for good. */
+  get hasGlass(): boolean {
+    return this.glass;
   }
 
-  /** Bind as the render target and clear. Caller then draws the casters. */
-  begin(gl: WebGL2RenderingContext): void {
+  /** The glass depth layer beside a map: fixed places after the three maps. */
+  glassLayer(which: 'static' | 'dynamic'): number {
+    return which === 'static' ? SUN_GLASS_STATIC_LAYER : SUN_GLASS_MOVING_LAYER;
+  }
+
+  /**
+   * Add the two glass layers, once, carrying every layer already held across.
+   *
+   * **Carried rather than re-baked**, because the sun's static map is the consumer's to bake and
+   * it may bake it once: the glass that grows the array arrives in the very pass that drew that
+   * map, so a copy is what keeps it. A depth blit per layer, same size and format, and the glass
+   * layers cleared to the far plane — nothing nearer than the sun until a pane is drawn there.
+   * Returns whether it grew, so the caller knows every bind of the old texture is stale.
+   */
+  growForGlass(gl: WebGL2RenderingContext): boolean {
+    if (this.glass) return false;
+    const old = this.current;
+    const oldLayers = this.layerCount;
+    const layers = SUN_GLASS_MOVING_LAYER + 1;
+    const texture = createSunTexture(gl, this.size, layers);
+    const read = gl.createFramebuffer();
+    if (read === null) throw new Error('SunShadowArray: createFramebuffer failed');
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, read);
+    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
+    for (let layer = 0; layer < oldLayers; layer++) {
+      gl.framebufferTextureLayer(gl.READ_FRAMEBUFFER, gl.DEPTH_ATTACHMENT, old, 0, layer);
+      gl.framebufferTextureLayer(gl.DRAW_FRAMEBUFFER, gl.DEPTH_ATTACHMENT, texture, 0, layer);
+      gl.blitFramebuffer(
+        0,
+        0,
+        this.size,
+        this.size,
+        0,
+        0,
+        this.size,
+        this.size,
+        gl.DEPTH_BUFFER_BIT,
+        gl.NEAREST,
+      );
+    }
+    for (let layer = oldLayers; layer < layers; layer++) {
+      gl.framebufferTextureLayer(gl.DRAW_FRAMEBUFFER, gl.DEPTH_ATTACHMENT, texture, 0, layer);
+      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.layerCount = layers;
+    this.glass = true;
+    return true;
+  }
+
+  /** Bind `layer` as the render target and clear it. Caller then draws the casters. */
+  begin(gl: WebGL2RenderingContext, layer: SunShadowLayer): void {
+    this.peeling = layer === 'static-peel' && this.peelFramebuffer !== null;
+    if (this.peeling) {
+      gl.bindFramebuffer(gl.FRAMEBUFFER, this.peelFramebuffer);
+    } else {
+      this.attach(gl, sunLayerIndex(layer));
+    }
+    this.clearAndRaster(gl);
+  }
+
+  /** Bind a glass depth layer as the render target and clear it: where the nearest pane is. */
+  beginGlass(gl: WebGL2RenderingContext, which: 'static' | 'dynamic'): void {
+    this.peeling = false;
+    this.attach(gl, this.glassLayer(which));
+    this.clearAndRaster(gl);
+  }
+
+  private attach(gl: WebGL2RenderingContext, layer: number): void {
     gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, this.current, 0, layer);
+  }
+
+  private clearAndRaster(gl: WebGL2RenderingContext): void {
     gl.viewport(0, 0, this.size, this.size);
     gl.clear(gl.DEPTH_BUFFER_BIT);
     /*
@@ -93,11 +242,56 @@ export class ShadowMap {
   end(gl: WebGL2RenderingContext): void {
     gl.disable(gl.POLYGON_OFFSET_FILL);
     gl.cullFace(gl.BACK);
+    if (this.peeling) {
+      /* The peel into its layer: same size, same format, so a nearest depth blit is a copy. */
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.peelFramebuffer);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
+      gl.framebufferTextureLayer(
+        gl.DRAW_FRAMEBUFFER,
+        gl.DEPTH_ATTACHMENT,
+        this.current,
+        0,
+        SUN_PEELED_LAYER,
+      );
+      gl.blitFramebuffer(
+        0,
+        0,
+        this.size,
+        this.size,
+        0,
+        0,
+        this.size,
+        this.size,
+        gl.DEPTH_BUFFER_BIT,
+        gl.NEAREST,
+      );
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+      this.peeling = false;
+    }
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   }
 
   dispose(gl: WebGL2RenderingContext): void {
     gl.deleteFramebuffer(this.framebuffer);
-    gl.deleteTexture(this.texture);
+    gl.deleteTexture(this.current);
+    if (this.peelFramebuffer !== null) gl.deleteFramebuffer(this.peelFramebuffer);
+    if (this.peelTexture !== null) gl.deleteTexture(this.peelTexture);
   }
 }
+
+/** The far plane, as `clearBufferfv` takes it: a layer no pane has reached is clear of glass. */
+const FAR_PLANE = new Float32Array([SHADOW_DEPTH_CLEAR]);
+
+function createSunTexture(gl: WebGL2RenderingContext, size: number, layers: number): WebGLTexture {
+  const texture = gl.createTexture();
+  if (texture === null) throw new Error('SunShadowArray: createTexture failed');
+  gl.bindTexture(gl.TEXTURE_2D_ARRAY, texture);
+  gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.DEPTH_COMPONENT24, size, size, 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);
+  // Clamp so anything outside the light frustum samples the border and is
+  // treated as lit, rather than wrapping into a spurious shadow.
+  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;
+}

package/src/render/sunGlassTint.ts

@@ -0,0 +1,86 @@
+/**
+ * What the sun's light keeps of itself through glass: an RGBA8 array of two layers, static and
+ * moving, beside the sun's depth array. RGB is the product of every pane's
+ * `transmission × (1 − F) × tint`, A the product of their clarities (`glassShadow.ts`).
+ *
+ * **Cleared to white and drawn with a multiplying blend and no depth test**, so every pane on a ray
+ * contributes and the order they come in cannot matter. **Mipmapped and filtered**, unlike the
+ * depths beside it: a frosted pane's colour is read at the level its spread asks for, so a wide
+ * spread is smooth rather than a scatter of taps — the chain is rebuilt after every draw of a layer.
+ * `'half'` makes it half the depth map's size and nothing else changes: the light matrix is the
+ * same, so a texel is a texel of the same place, only larger.
+ */
+export class SunGlassTint {
+  readonly size: number;
+  readonly texture: WebGLTexture;
+  private readonly framebuffer: WebGLFramebuffer;
+
+  constructor(gl: WebGL2RenderingContext, size: number) {
+    this.size = size;
+    const texture = gl.createTexture();
+    const framebuffer = gl.createFramebuffer();
+    if (texture === null || framebuffer === null) {
+      throw new Error('SunGlassTint: the tint target could not be created');
+    }
+    this.texture = texture;
+    this.framebuffer = framebuffer;
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, texture);
+    gl.texStorage3D(gl.TEXTURE_2D_ARRAY, mipLevels(size), gl.RGBA8, size, size, 2);
+    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    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);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+    /* Both layers born clear: a layer no pane has reached lets everything through. */
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    for (let layer = 0; layer < 2; layer++) {
+      gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, texture, 0, layer);
+      gl.clearBufferfv(gl.COLOR, 0, CLEAR);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    this.fillMips(gl);
+  }
+
+  /** Bind `layer` (0 static, 1 moving), clear it to white, and set the multiplying state. */
+  begin(gl: WebGL2RenderingContext, layer: number): void {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this.texture, 0, layer);
+    gl.viewport(0, 0, this.size, this.size);
+    gl.clearBufferfv(gl.COLOR, 0, CLEAR);
+    gl.disable(gl.DEPTH_TEST);
+    gl.depthMask(false);
+    gl.disable(gl.POLYGON_OFFSET_FILL);
+    gl.enable(gl.BLEND);
+    gl.blendEquation(gl.FUNC_ADD);
+    gl.blendFuncSeparate(gl.DST_COLOR, gl.ZERO, gl.DST_ALPHA, gl.ZERO);
+  }
+
+  /** Put back what `begin` changed, and rebuild the mip chain the frost reads. */
+  end(gl: WebGL2RenderingContext): void {
+    gl.disable(gl.BLEND);
+    gl.depthMask(true);
+    gl.enable(gl.DEPTH_TEST);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    this.fillMips(gl);
+  }
+
+  /** Every level from level 0, both layers: bound on the active unit and handed back. */
+  private fillMips(gl: WebGL2RenderingContext): void {
+    const previous = gl.getParameter(gl.TEXTURE_BINDING_2D_ARRAY) as WebGLTexture | null;
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
+    gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, previous);
+  }
+
+  dispose(gl: WebGL2RenderingContext): void {
+    gl.deleteFramebuffer(this.framebuffer);
+    gl.deleteTexture(this.texture);
+  }
+}
+
+const CLEAR = new Float32Array([1, 1, 1, 1]);
+
+/** A full chain down to one texel. */
+function mipLevels(size: number): number {
+  return Math.floor(Math.log2(Math.max(1, size))) + 1;
+}