reze-engine 0.64.0 → 0.66.0

package/src/engine.ts

@@ -25,8 +25,6 @@ import {
   normalizeAssetPath,
   type AssetReader,
 } from "./asset-reader"
-import { BRDF_LUT_SIZE, BRDF_LUT_BAKE_WGSL } from "./shaders/dfg_lut"
-import { LTC_MAG_LUT_SIZE, LTC_MAG_LUT_DATA } from "./shaders/ltc_mag_lut"
 import { SHADOW_DEPTH_SHADER_WGSL } from "./shaders/passes/shadow"
 import { ID_DEBUG_SHADER_WGSL } from "./shaders/passes/id-debug"
 import { paramChanged, sampleParamTrack, type ParamKey, type ParamValue } from "./param-track"
@@ -46,13 +44,19 @@ import {
 import { parentKeySpan, type ModelParentKey } from "./parent-keys"
 import { NativeHost } from "./unity/host"
 import { NativeLooks, type NativeLook } from "./unity/looks"
-import { NativeStage, type NativeStagePackage, type NativeStageReader } from "./unity/stage"
+import { NativeStage, type NativeStageLights, type NativeStagePackage, type NativeStageReader } from "./unity/stage"
 import { gameDir, unityFrameGlobals } from "./unity/globals"
 import { outlineMaxOffsetMultiplier, towardMatrix } from "./unity/character"
-import type { NativeValue } from "./unity/host"
+import { sameValue, type NativeValue } from "./unity/host"
 import { SHADOW_ATLAS_SIZE, SHADOW_CASCADES, buildShadowCascades, cascadeSpheres, type ShadowBounds, type ShadowView } from "./shadow-cascades"
 import { REFLECTION_DEBUG_WGSL, buildMirrorCamera, planeFromPointNormal } from "./reflection"
-import { MIRROR_MASK_DOWNSAMPLE_WGSL, MIRROR_MAT_BYTES, mirrorShaderWgsl, mirrorShadowWgsl } from "./shaders/passes/mirror"
+import {
+  MIRROR_DOWNSAMPLE_WGSL,
+  MIRROR_MASK_DOWNSAMPLE_WGSL,
+  MIRROR_MAT_BYTES,
+  mirrorShaderWgsl,
+  mirrorShadowWgsl,
+} from "./shaders/passes/mirror"
 import { packHalf, type HdrImage } from "./hdr"
 import { evalIrradianceSH, projectIrradianceSH, gradientIrradianceSH } from "./ibl"
 import { LYRIC_ATLAS_MAX_H, LYRIC_ATLAS_MAX_W, LYRICS_FLOATS, lyricsApi, packLyrics, type LyricLine, type LyricRect } from "./shaders/lyrics-api"
@@ -104,11 +108,11 @@ import {
   type RigidbodyOverlayOptions,
 } from "./overlay"
 import {
-  BLOOM_BLIT_SHADER_WGSL,
-  BLOOM_DOWNSAMPLE_SHADER_WGSL,
+  BLOOM_BLUR_H_SHADER_WGSL,
+  BLOOM_BLUR_V_SHADER_WGSL,
+  BLOOM_PREFILTER_SHADER_WGSL,
   BLOOM_UPSAMPLE_SHADER_WGSL,
 } from "./shaders/passes/bloom"
-import { AGX_LUT_GZ, AGX_LUT_SIZE } from "./shaders/agx-lut"
 import {
   buildCompositeShader,
   EFFECT_SCENE_API,
@@ -153,6 +157,17 @@ import {
 import { buildTrailShader, trailEntryPoints, TRAIL_SUBDIVISIONS } from "./shaders/passes/trails"
 import { PICK_SHADER_WGSL } from "./shaders/passes/pick"
 import { MIPMAP_BLIT_SHADER_WGSL } from "./shaders/passes/mipmap"
+import {
+  PROBE_CAPTURE_LEVELS,
+  PROBE_CAPTURE_SIZE,
+  PROBE_COMPOSE_WGSL,
+  PROBE_FILTER_WGSL,
+  PROBE_LEVELS,
+  PROBE_SIZE,
+  SKY_PREFILTER_WGSL,
+  probeLevelRoughness,
+  skyLevelRoughness,
+} from "./shaders/passes/probe"
 import { compileGraph, type CompileOptions, type StyleSlot } from "./graph/compile"
 import type { Diagnostic, ShaderGraph } from "./graph/schema"
 import type { AlphaMode, RenderClass, StyleBlend } from "./graph/render-class"
@@ -355,12 +370,13 @@ export type LoadModelFromFilesOptions = {
   pmxFile?: File
 }
 
-// Blender-style scene config. World = environment lighting (ambient);
-// Sun = the single directional lamp; Camera = view framing.
+// Scene config, as Unity's Lighting window lays it out: World = Environment
+// Lighting (ambient and reflections); Sun = the main directional light;
+// Camera = view framing.
 type WorldOptions = {
-  /** Linear scene-referred color of the World Background (Blender: World > Surface > Color). */
+  /** Linear colour of the ambient when the World is a flat colour (Unity: Environment Lighting > Source Color). */
   color?: Vec3
-  /** Multiplier on world color (Blender: World > Surface > Strength). */
+  /** Multiplier on the ambient and the sky's reflection (Unity: the Environment Lighting intensity multiplier). */
   strength?: number
   /**
    * A sky that changes with the direction you look: one colour overhead, one at
@@ -468,14 +484,14 @@ type HeldParentKey = { time: number; parent: string | null; bone: string; positi
 type ParentTrack = { keys: HeldParentKey[]; applied: number; seat: [number, number, number] }
 
 type SunOptions = {
-  /** Linear color of the sun lamp (Blender: Light > Color). */
+  /** Linear colour of the main light (Unity: Light > Color). */
   color?: Vec3
   /** The rendering layers it keys, as bits; every layer by default. A
    *  directional light from setLights takes the layers the sun leaves. */
   layers?: number
-  /** Lamp power in Blender units (Blender: Light > Strength). */
+  /** Unity's light intensity: a white sun of 1 lights albedo 1:1 at N·L = 1. */
   strength?: number
-  /** Direction sunlight travels (points FROM sun TO scene, Blender: -light.rotation.Z). */
+  /** Direction sunlight travels (points FROM the sun TO the scene, Unity: the light's forward). */
   direction?: Vec3
   /**
    * How much shadow the sun casts: 1 full, 0 none, and anything between.
@@ -556,25 +572,30 @@ type CameraOptions = {
   fov?: number
 }
 
-/** EEVEE Bloom panel (3D Viewport > Render > Bloom). Fields map 1:1 to Blender's UI. */
+/** Bloom — Aether Gazer's own (shaders/passes/bloom.ts): a soft-knee prefilter,
+ *  a Gaussian chain down to a few pixels, and a scatter blend back up, added to
+ *  the scene before the view transform. The defaults ARE the game. */
 export type BloomOptions = {
   enabled: boolean
+  /** Brightest-channel level where the glow starts (the game's per-scene
+   *  threshold). The soft knee is always half of it. */
   threshold: number
-  knee: number
-  radius: number
+  /** 0..1, URP's Scatter: how far each level leans toward the wider one on the
+   *  way up, as lerp(0.05, 0.95, scatter) — low is a tight halo, high a wide
+   *  haze, and the top still keeps the finest level. 0.8 is the game's 0.77. */
+  scatter: number
+  /** Tint on the glow; white is the game. */
   color: Vec3
+  /** Multiplier on the glow added in the composite; 1 is the game. */
   intensity: number
-  clamp: number
 }
 
 export const DEFAULT_BLOOM_OPTIONS: BloomOptions = {
   enabled: true,
-  threshold: 0.5,
-  knee: 0.5,
-  radius: 4.0,
-  color: new Vec3(1.0, 0.7247558832168579, 0.6487361788749695),
-  intensity: 0.05,
-  clamp: 0.0,
+  threshold: 0.7,
+  scatter: 0.8,
+  color: new Vec3(1, 1, 1),
+  intensity: 1,
 }
 
 /** Camera depth of field — a bokeh gather in the composite pass. Costs nothing
@@ -613,34 +634,33 @@ export const DEFAULT_DEPTH_OF_FIELD_OPTIONS: DepthOfFieldOptions = {
   quality: "balanced",
 }
 
-/** Blender Color Management / View (rendering.txt: Filmic, exposure, gamma). `look` is reserved for future curve tweaks. */
+/** How the scene-linear frame becomes a display image: exposure, then a tone
+ *  transform, then display gamma. */
 export type ViewTransformOptions = {
-  /** Stops applied before Filmic: `linear *= 2^exposure`. */
+  /** Stops applied before the transform: `linear *= 2^exposure`. */
   exposure: number
-  /** After Filmic, display gamma (`pow(rgb, 1/gamma)`). */
+  /** After the transform, display gamma (`pow(rgb, 1/gamma)`). */
   gamma: number
   /**
-   * Which display transform the frame is formed with.
+   * Which display transform the frame is formed with (composite.ts, viewTransform).
    *
-   * "standard" is Blender's Standard: the sRGB encoding and nothing else, which
-   * is what NPR and anime work uses — the colours the graph computes are the
-   * colours that land, with no film curve reinterpreting them. Both of the
-   * reference Wuthering Waves projects render this way.
+   * "soft" — Aether Gazer's own final curve, (1 - e^(-2.5x))^1.4. The default.
+   * "neutral" — Unity URP's Neutral, the Khronos PBR Neutral operator: colour
+   *   passes through until the top fifth, which rolls off.
+   * "aces" — Unity URP's ACES (RRT + ODT approximation from the Core RP).
+   * "none" — the sRGB encoding and nothing else.
    *
-   * "filmic" is Blender 3.6's Filmic, Medium High Contrast, baked as a LUT.
-   *
-   * "aether-gazer" is that game's own final curve, (1 - e^(-2.5x))^1.4 — what
-   * its scenes are graded through (composite.ts, agTransform).
+   * All four end in the sRGB encoding.
    */
-  transform: "agx" | "filmic" | "standard" | "aether-gazer"
+  transform: ViewTransformName
 }
 
-// Matches the reference Blender project: Filmic view, Medium High Contrast look,
-// exposure 0.3, gamma 1.0, sRGB display, no curves.
+export type ViewTransformName = "soft" | "neutral" | "aces" | "none"
+
 export const DEFAULT_VIEW_TRANSFORM: ViewTransformOptions = {
-  exposure: 0.6,
+  exposure: 0,
   gamma: 1.0,
-  transform: "filmic",
+  transform: "soft",
 }
 
 /** Color grading applied to the tonemapped scene (ASC CDL — see grade() in
@@ -735,9 +755,9 @@ export type EngineOptions = {
   /** Canvas background (display-space sRGB 0–1), composited under the scene after
    *  tonemapping. Omit/null = transparent canvas (see setBackgroundColor). */
   background?: Vec3 | null
-  /** Initial EEVEE-style bloom; tune at runtime with `setBloomOptions`. */
+  /** Initial bloom; tune at runtime with `setBloomOptions`. */
   bloom?: Partial<BloomOptions>
-  /** View transform (exposure/gamma) applied in composite before/after Filmic. */
+  /** View transform (exposure, tone transform, gamma) applied in the composite. */
   view?: Partial<ViewTransformOptions>
   onRaycast?: RaycastCallback
   /** See {@link GizmoDragCallback}. */
@@ -746,7 +766,7 @@ export type EngineOptions = {
 
 const DEFAULT_ENGINE_OPTIONS = {
   world: { color: new Vec3(0.4014, 0.4944, 0.647), strength: 0.3 },
-  sun: { color: new Vec3(1.0, 1.0, 1.0), strength: 2.0, direction: new Vec3(-0.0873, -0.3844, 0.919) },
+  sun: { color: new Vec3(1.0, 1.0, 1.0), strength: 0.64, direction: new Vec3(-0.0873, -0.3844, 0.919) },
   camera: { distance: 26.6, target: new Vec3(0, 12.5, 0), fov: Math.PI / 4 },
   onRaycast: undefined,
 }
@@ -930,12 +950,19 @@ interface ModelInstance {
   indexBuffer: GPUBuffer
   jointsBuffer: GPUBuffer
   weightsBuffer: GPUBuffer
+  /** Vertex colour and second UV, per vertex — the material pipelines' slot 4.
+   *  See createAttributeBuffer. */
+  attributeBuffer: GPUBuffer
+  /** The outline hull's own stream — smoothed normal + PMX edge scale per
+   *  vertex (outline-normals.ts). Made with the first edge-flagged material,
+   *  so a model with no outline never pays for it. */
+  outlineVertexBuffer?: GPUBuffer
   skinMatrixBuffer: GPUBuffer
   drawCalls: DrawCall[]
   shadowDrawCalls: DrawCall[]
   shadowBindGroups: GPUBindGroup[]
   mainPerInstanceBindGroup: GPUBindGroup
-  /** Its ObjectLight — rendering layers, its own ambient — and the CPU copy it
+  /** Its ObjectLight — rendering layers, its own ambient, its fill — and the CPU copy it
    *  is written from. Every model has one: its layers decide its lights. */
   lightBuffer: GPUBuffer
   objectLight: Float32Array<ArrayBuffer>
@@ -1745,7 +1772,7 @@ interface EffectInstance {
   distVariant: number
   /** Bones this source asked for, in ITS OWN declaration order. The scene table
    *  maps these onto shared addresses; this list is what it is rebuilt from. */
-  anchors: { bone: string; trail: boolean }[]
+  anchors: { bone: string; trail: boolean; along?: number; step?: number }[]
   /** Where this effect's own clock started, in scene seconds. */
   epochScene: number
   /**
@@ -1850,6 +1877,17 @@ export type SceneLight = {
    * cast's key on RENDERING_LAYER_CHARACTER is how a game lights the two apart.
    */
   layers?: number
+  /**
+   * The bulb's radius in engine units: inside it the lamp stops getting
+   * brighter (intensity / max(d², near²)). Omitted keeps the default small
+   * bulb; a large soft lamp (a game rig light's shape radius) is wider.
+   */
+  near?: number
+  /**
+   * A spot's cookie: the key of a picture given to loadLightCookie, projected
+   * along the cone the way a stage light throws a gobo. Ignored on a point.
+   */
+  cookie?: string
 }
 
 /**
@@ -1925,6 +1963,9 @@ export class Engine {
   private mainPipelineLayout!: GPUPipelineLayout
   private sceneTargets!: GPUColorTargetState[]
   private sceneTargetsAdditive!: GPUColorTargetState[]
+  /** A group blending "premultiplied" — see scene-contract's
+   *  material-premultiplied. */
+  private sceneTargetsPremultiplied!: GPUColorTargetState[]
   /** The scene pass's attachment formats, settled at init once the device has
    *  said which HDR format it will blend. Every scene-pass pipeline asks
    *  scene-contract for its targets against these. */
@@ -1932,6 +1973,11 @@ export class Engine {
     return { hdr: this.hdrFormat, aux: Engine.BLOOM_MASK_FORMAT }
   }
   private fullVertexBufferLayouts!: GPUVertexBufferLayout[]
+  /** What a MATERIAL pipeline reads: the full set, then (slot 4, past the
+   *  outline hull's slot 3) the model's attribute stream — vertex colour and a
+   *  second UV (see createAttributeBuffer). Only the material shaders declare
+   *  those inputs; every other pass keeps fullVertexBufferLayouts. */
+  private materialVertexBufferLayouts!: (GPUVertexBufferLayout | null)[]
   // 1×64 vertical ramp for shared-toon materials: lit (top) → soft shadow
   // tone (bottom). Stand-in for MMD's toon01–10.bmp, which we can't ship.
   private defaultToonRampTexture!: GPUTexture
@@ -2084,6 +2130,8 @@ export class Engine {
   private multisampleTexture!: GPUTexture
   private hdrResolveTexture!: GPUTexture
   private static readonly MULTISAMPLE_COUNT = 4
+  /** Floats per vertex in a model's attribute stream: colour RGBA, then UV2. */
+  private static readonly ATTRIBUTE_FLOATS = 6
   /**
    * Shadow map depth format — 16-bit, deliberately.
    *
@@ -2477,6 +2525,9 @@ export class Engine {
   /** Where addGround put the floor. The mirror reflects across it, so a raised
    *  floor that kept y = 0 would reflect the scene into the wrong plane. */
   private groundY = 0
+  /** The built-in floor's half size on x and z — what it covers, for the
+   *  shadow's reach (updateShadowSceneBounds). */
+  private groundHalf: [number, number] = [0, 0]
   private mirrorPlane = new Float32Array([0, 1, 0, 0])
   private mirrorCameraData = new Float32Array(40)
   private mirrorCameraBuffer!: GPUBuffer
@@ -2505,6 +2556,7 @@ export class Engine {
    *  premultiplied quantity and a blur has to move them together. */
   private mirrorMaskMipViews: GPUTextureView[] = []
   private mirrorMaskBlurBindGroups: GPUBindGroup[] | null = null
+  private mirrorDownsamplePipeline: GPURenderPipeline | null = null
   private mirrorMaskDownsamplePipeline: GPURenderPipeline | null = null
   /** Two blocks the ground reads its clip from: the camera's is inert, the
    *  mirror's carries the live plane. Which one a draw sees is decided by which
@@ -2610,6 +2662,50 @@ export class Engine {
   private worldAmbientSH: Float32Array | null = null
   private fallbackEquirectTexture!: GPUTexture
   private fallbackEquirectView!: GPUTextureView
+  // ── The stage's reflection probe (captureReflectionProbe) ──
+  /** The cube the materials read: 64² GGX-prefiltered down seven levels. */
+  private probeTexture!: GPUTexture
+  private probeView!: GPUTextureView
+  /** 1×1 black cube, bound while a probe is being captured so no material
+   *  reads the cube it is drawing into. */
+  private probeFallbackView!: GPUTextureView
+  /** The spot lamps' cookies: one picture a layer of a 512² array, made on the
+   *  first cookie (a 1×1 white stand-in until then), and the layer each key holds. */
+  private cookieTexture!: GPUTexture
+  private cookieView!: GPUTextureView
+  private cookieLayers = new Map<string, number>()
+  /** What setLights was last given, rewritten when a cookie it names arrives. */
+  private sceneLights: SceneLight[] | null = null
+  private static readonly COOKIE_SIZE = 512
+  private static readonly COOKIE_LAYERS = 16
+  /** ProbeUniforms for the scene (centre + strength, box min + on-flag, box
+   *  max), and a zeroed copy — the off flag — for the capture's own draws. */
+  private probeUniformBuffer!: GPUBuffer
+  private probeOffBuffer!: GPUBuffer
+  private probeData = new Float32Array(12)
+  /** The capture camera: CameraUniforms for one cube face at a time. */
+  private probeCameraBuffer!: GPUBuffer
+  private probeCameraData = new Float32Array(40)
+  private probeCaptureBindGroup: GPUBindGroup | null = null
+  /** Set when the stage or what it wears changes; the capture runs once the
+   *  scene has stayed put for PROBE_SETTLE_FRAMES (see maybeCaptureProbe). */
+  private probeDirty = false
+  private probeDirtyFrame = 0
+  private probeFrame = 0
+  private probeCapture: {
+    msTargets: GPUTexture[]
+    depth: GPUTexture
+    color: GPUTexture
+    aux: GPUTexture
+    cube: GPUTexture
+    steps: GPUBuffer
+    composePipeline: GPURenderPipeline
+    filterPipeline: GPURenderPipeline
+    composeGroups: GPUBindGroup[]
+    filterGroups: GPUBindGroup[]
+  } | null = null
+  private static readonly PROBE_SETTLE_FRAMES = 20
+  private skyPrefilterPipeline: GPURenderPipeline | null = null
   // The scene's user WGSL effect (setEffect). ONE per scene, mounted under the
   // scene, over it, or both — whichever of background()/foreground() the code
   // defines. The composite pipelines are REBUILT with the user code injected;
@@ -2677,7 +2773,7 @@ export class Engine {
    *  shader's index 0 is now — written by unshifting rather than by tracking a
    *  head, because 64 is short and the alternative is an index the GPU side
    *  would also have to know about. */
-  private anchorTrail = new Map<string, { pos: number[]; t: number[] }>()
+  private anchorTrail = new Map<string, { pos: number[]; t: number[]; live?: boolean }>()
   /** Scene seconds, advanced by the frame delta — NOT wall time, so an offline
    *  export samples the same path the editor showed. */
   private sceneClock = 0
@@ -2699,8 +2795,6 @@ export class Engine {
   /** Trail samples owed this frame, computed once so every trail on every
    *  character samples in lockstep and their paths stay comparable. */
   private trailDue = 0
-  private agxLutTexture: GPUTexture | null = null
-  private agxFallbackTexture!: GPUTexture
   /** The scene's own grade (setStageGrade): the cube as handed over, kept so a
    *  call before init() still lands, and its texture once uploaded. */
   private stageGradeCube: StageGradeLut | null = null
@@ -2714,12 +2808,8 @@ export class Engine {
    *  `time` is measured from here — see where it is written. */
   private compositeBloomView: GPUTextureView | null = null
 
-  // EEVEE-style bloom pyramid (mirrors Blender 3.6 effect_bloom_frag.glsl):
-  //   blit (HDR → half-res, 4-tap Karis + soft threshold/knee)
-  //   N-1 downsamples (13-tap Jimenez/COD box filter, 5 group averages)
-  //   N-1 upsamples (9-tap tent, additively combined with corresponding downsample mip)
-  //   composite adds bloomUp mip 0 × (color × intensity) to HDR before Filmic.
-  // Matches EEVEE energy: tint/intensity applied at composite, not prefilter.
+  // Linear clamp sampler for the bloom chain (also the mirror blur and the
+  // composite's bloom read).
   private bloomSampler!: GPUSampler
   // Screen-space subsurface scattering (passes/subsurface.ts). The scratch target
   // is the X pass's output and lives with the canvas size; the bind groups name
@@ -2737,33 +2827,56 @@ export class Engine {
   private readonly pipelineDescs = new WeakMap<GPURenderPipeline, GPURenderPipelineDescriptor>()
   private readonly singleSided = new WeakMap<GPURenderPipeline, GPURenderPipeline>()
   private readonly singleSidedMirror = new WeakMap<GPURenderPipeline, GPURenderPipeline>()
+  /** Twins whose async build is in flight, so a draw asks for each once. */
+  private readonly sidedPending = new WeakSet<GPURenderPipeline>()
+  private readonly sidedPendingMirror = new WeakSet<GPURenderPipeline>()
+  // The engine-wide shader cache (see cachedRenderPipeline). Modules by WGSL
+  // source, pipelines by module + descriptor state: one compile per source,
+  // whoever asks — a graph on two models, an effect reinstalled, the composite.
+  private readonly shaderModuleCache = new Map<string, GPUShaderModule>()
+  private readonly pipelineCache = new Map<string, Promise<GPURenderPipeline | GPUComputePipeline>>()
+  private readonly bindGroupLayoutCache = new Map<string, GPUBindGroupLayout>()
+  private readonly pipelineLayoutCache = new Map<string, GPUPipelineLayout>()
+  private readonly gpuObjectIds = new WeakMap<object, number>()
+  private gpuObjectNext = 1
+  /** Init's pipelines, built async and in parallel; init awaits them. Null
+   *  outside init, where a pipeline job builds the way it always did. */
+  private initPipelineJobs: Promise<unknown>[] | null = null
   // Stepped motion (#stepped). The models whose pose is being HELD this frame —
   // their skinning and morph uploads wait for the stepped clock's next tick —
   // and the tick each was last shown at. Empty while no effect declares it.
   private readonly steppedHeld = new Set<string>()
   private readonly steppedTick = new Map<string, number>()
   private steppedLastClock = -1
-  private bloomBlitUniformBuffer!: GPUBuffer
-  private bloomUpsampleUniformBuffer!: GPUBuffer
-  private readonly bloomBlitUniformData = new Float32Array(4)
-  private readonly bloomUpsampleUniformData = new Float32Array(4)
-  private bloomBlitPipeline!: GPURenderPipeline
-  private bloomDownsamplePipeline!: GPURenderPipeline
-  private bloomUpsamplePipeline!: GPURenderPipeline
-  private bloomBlitBindGroupLayout!: GPUBindGroupLayout
-  private bloomDownsampleBindGroupLayout!: GPUBindGroupLayout
-  private bloomUpsampleBindGroupLayout!: GPUBindGroupLayout
-  private bloomDownTexture!: GPUTexture
-  private bloomUpTexture!: GPUTexture
-  private bloomMipCount = 0
-  private bloomDownMipViews: GPUTextureView[] = []
-  private bloomUpMipViews: GPUTextureView[] = []
-  private bloomBlitBindGroup!: GPUBindGroup
-  private bloomDownsampleBindGroups: GPUBindGroup[] = []
-  private bloomUpsampleBindGroups: GPUBindGroup[] = []
+
+  // Bloom (shaders/passes/bloom.ts), Aether Gazer's chain. One level per halving
+  // down to a few pixels (the game's count, up to 16), each a down/up pair;
+  // up[i] holds the horizontal blur on the way down and the scatter blend on the
+  // way up. The composite adds up[0] × (color × intensity) before the view transform.
+  private bloomPrefilterBindGroupLayout!: GPUBindGroupLayout
+  private bloomBlurBindGroupLayout!: GPUBindGroupLayout
   /** Single-attachment pass; colorAttachments[0].view set per bloom step. */
   private bloomPassDescriptor!: GPURenderPassDescriptor
-  private static readonly BLOOM_MAX_LEVELS = 5
+  private bloomPrefilterPipeline: GPURenderPipeline | null = null
+  private bloomBlurHPipeline: GPURenderPipeline | null = null
+  private bloomBlurVPipeline: GPURenderPipeline | null = null
+  private bloomUpsamplePipeline: GPURenderPipeline | null = null
+  private bloomUpsampleBindGroupLayout: GPUBindGroupLayout | null = null
+  private bloomUniformBuffer: GPUBuffer | null = null
+  private readonly bloomUniformData = new Float32Array(4)
+  private bloomDownTexture: GPUTexture | null = null
+  private bloomUpTexture: GPUTexture | null = null
+  private bloomLevels = 0
+  private bloomDownViews: GPUTextureView[] = []
+  private bloomUpViews: GPUTextureView[] = []
+  private bloomPrefilterBindGroup: GPUBindGroup | null = null
+  private bloomBlurHBindGroups: GPUBindGroup[] = []
+  private bloomBlurVBindGroups: GPUBindGroup[] = []
+  private bloomUpsampleBindGroups: GPUBindGroup[] = []
+  /** The game's prefilter clamps at 6550.4 — a tenth of the half-float ceiling
+   *  (its BloomPass _Params.y of 100 never reaches the shader). */
+  private static readonly BLOOM_CLAMP = 6550.4
+  private static readonly BLOOM_MAX_LEVELS = 16
 
   // Ground properties (shadow only)
   private groundVertexBuffer?: GPUBuffer
@@ -2775,12 +2888,6 @@ export class Engine {
   /** The sun's shadow atlas: every cascade in its own tile (shadow-cascades.ts). */
   private shadowAtlasTexture!: GPUTexture
   private shadowAtlasView!: GPUTextureView
-  private brdfLutTexture!: GPUTexture
-  private brdfLutView!: GPUTextureView
-  private filmicLutTexture!: GPUTexture
-  private filmicLutView!: GPUTextureView
-  // Width of the baked Filmic tone LUT (composite.ts FILMIC_LUT_W must match).
-  private static readonly FILMIC_LUT_WIDTH = 256
   private shadowDepthPipeline!: GPURenderPipeline
   private shadowLightVPBuffer!: GPUBuffer
   // The shadow PASS reads one cascade's matrix per pass, and a uniform binding
@@ -2922,18 +3029,16 @@ export class Engine {
     this.backgroundColor = bg ? new Vec3(bg.x, bg.y, bg.z) : null
   }
 
-  /** Merge partial bloom with EEVEE defaults (same as constructor). */
+  /** Merge partial bloom with the defaults (same as constructor). */
   static mergeBloomDefaults(partial?: Partial<BloomOptions>): BloomOptions {
     const d = DEFAULT_BLOOM_OPTIONS
     const c = partial?.color
     return {
       enabled: partial?.enabled ?? d.enabled,
       threshold: partial?.threshold ?? d.threshold,
-      knee: partial?.knee ?? d.knee,
-      radius: partial?.radius ?? d.radius,
+      scatter: partial?.scatter ?? d.scatter,
       color: c ? new Vec3(c.x, c.y, c.z) : new Vec3(d.color.x, d.color.y, d.color.z),
       intensity: partial?.intensity ?? d.intensity,
-      clamp: partial?.clamp ?? d.clamp,
     }
   }
 
@@ -2946,17 +3051,15 @@ export class Engine {
     }
   }
 
-  /** Current bloom settings (Blender names; tint is a copied `Vec3`). */
+  /** Current bloom settings (tint is a copied `Vec3`). */
   getBloomOptions(): BloomOptions {
     const b = this.bloomSettings
     return {
       enabled: b.enabled,
       threshold: b.threshold,
-      knee: b.knee,
-      radius: b.radius,
+      scatter: b.scatter,
       color: new Vec3(b.color.x, b.color.y, b.color.z),
       intensity: b.intensity,
-      clamp: b.clamp,
     }
   }
 
@@ -3052,8 +3155,8 @@ export class Engine {
     }
   }
 
-  /** Sensor grain: how much, and whether it moves. */
-  private grain = { amount: 0, animated: true }
+  /** Sensor grain: how much. */
+  private grain = { amount: 0 }
 
   /**
    * Film grain over the rendered scene, 0–1.
@@ -3063,19 +3166,14 @@ export class Engine {
    * a background image or a backdrop video, which arrived with grain of their
    * own and would be graded rather than matched by a second helping.
    *
-   * `animated` false freezes it. A still photograph's grain does not move, and
-   * noise crawling over a frozen picture makes the rendering look more alive
-   * than the thing it is standing in.
-   *
    * Costs one hash per pixel in a pass that already runs, and nothing at all at
    * zero — the branch is on a uniform.
    */
-  setFilmGrain(amount: number, animated = true): void {
+  setFilmGrain(amount: number): void {
     this.grain.amount = Math.min(Math.max(amount, 0), 1)
-    this.grain.animated = animated
     if (this.device && this.compositeUniformBuffer) this.writeCompositeViewUniforms()
   }
-  getFilmGrain(): Readonly<{ amount: number; animated: boolean }> {
+  getFilmGrain(): Readonly<{ amount: number }> {
     return this.grain
   }
 
@@ -3110,6 +3208,14 @@ export class Engine {
     return b.enabled && b.intensity > 0
   }
 
+  /** viewU[6].y per transform — see viewTransform in composite.ts. */
+  private static readonly VIEW_TRANSFORM_ID: Record<string, number> = {
+    soft: 0,
+    none: 1,
+    neutral: 2,
+    aces: 3,
+  }
+
   private writeCompositeViewUniforms(): void {
     const v = this.viewTransform
     const b = this.bloomSettings
@@ -3121,10 +3227,8 @@ export class Engine {
     // a uniform branch that skips the pow entirely in the common case.
     u[1] = 1.0 / Math.max(v.gamma, 1e-4)
     u[2] = this.grain.amount
-    // The seed. Zero means STILL: a plate that is one photograph has grain that
-    // does not move, and CG noise crawling over a frozen picture makes the CG
-    // look more alive than the footage — the opposite of the point.
-    u[3] = this.grain.animated ? Math.floor(this.sceneClock * 24) % 1024 : 0
+    // The seed, stepped at 24 a second like a film gate.
+    u[3] = Math.floor(this.sceneClock * 24) % 1024
     u[4] = b.color.x
     u[5] = b.color.y
     u[6] = b.color.z
@@ -3136,7 +3240,7 @@ export class Engine {
     // exposure and view transform as the scene — a sun rolls off like a sun).
     // The camera basis at u[12..23] is refreshed per frame.
     // In modes 2 and 3 the colour slot is dead, so mode 3 carries the world
-    // STRENGTH in u[8] — Blender's world-strength dial, the SAME number that
+    // STRENGTH in u[8] — the World's intensity, the SAME number that
     // scales the irradiance. A sky you can see at full brightness while it
     // lights at two thirds is two skies.
     const bg = this.backgroundColor
@@ -3152,7 +3256,7 @@ export class Engine {
     // rebuilt per effect, so the compiled variant IS the flag.
     u[11] = this.backdropEquirectView ? 2 : showingWorld ? 3 : bg ? 1 : 0
     // Which display transform forms the frame (see viewTransform in composite.ts).
-    u[25] = v.transform === "aether-gazer" ? 3 : v.transform === "agx" ? 2 : v.transform === "standard" ? 1 : 0
+    u[25] = Engine.VIEW_TRANSFORM_ID[v.transform] ?? 0
     u[26] = this.canvas.width
     u[27] = this.canvas.height
     // ── Grade (viewU[7..9]) ── The UI's three tonal COLORS map to ASC CDL here,
@@ -3882,7 +3986,7 @@ export class Engine {
   }
 
   /**
-   * Fill the mirror's mip levels — the bloom pyramid's own 13-tap downsample,
+   * Fill the mirror's mip levels — a 13-tap downsample (MIRROR_DOWNSAMPLE_WGSL),
    * one pass per level. Only when the blur dial is up: at zero the ground
    * samples level 0 exactly and the chain would be work nobody reads.
    */
@@ -3892,8 +3996,19 @@ export class Engine {
     // memory, which read as the model going black the moment the slider moved.
     const blur = Math.max(this.groundMirrorBlur, this.mirrorSurface?.blur ?? 0)
     if (blur <= 0 || this.mirrorMipCount < 2) return
+    if (!this.mirrorDownsamplePipeline) {
+      const module = this.device.createShaderModule({ label: "mirror downsample", code: MIRROR_DOWNSAMPLE_WGSL })
+      this.mirrorDownsamplePipeline = this.device.createRenderPipeline({
+        label: "mirror downsample pipeline",
+        layout: "auto",
+        vertex: { module, entryPoint: "vs" },
+        fragment: { module, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
+        primitive: { topology: "triangle-list" },
+      })
+    }
+    const downsample = this.mirrorDownsamplePipeline
     if (!this.mirrorBlurBindGroups) {
-      const layout = this.bloomDownsamplePipeline.getBindGroupLayout(0)
+      const layout = downsample.getBindGroupLayout(0)
       this.mirrorBlurBindGroups = []
       for (let i = 1; i < this.mirrorMipCount; i++) {
         this.mirrorBlurBindGroups.push(
@@ -3913,7 +4028,7 @@ export class Engine {
         label: `mirror blur ${i}`,
         colorAttachments: [{ view: this.mirrorMipViews[i], loadOp: "clear", storeOp: "store" }],
       })
-      p.setPipeline(this.bloomDownsamplePipeline)
+      p.setPipeline(downsample)
       p.setBindGroup(0, this.mirrorBlurBindGroups[i - 1])
       p.draw(3)
       p.end()
@@ -4081,7 +4196,6 @@ export class Engine {
         { binding: 2, resource: this.bloomSampler },
         { binding: 3, resource: { buffer: this.compositeUniformBuffer } },
         { binding: 4, resource: this.maskResolveView },
-        { binding: 5, resource: this.filmicLutView },
         // Whichever equirect is SHOWING — the backdrop if there is one, the
         // world otherwise. The world's light does not come through here; it
         // rides worldSH into the material shells.
@@ -4089,7 +4203,6 @@ export class Engine {
         { binding: 7, resource: { buffer: this.effect?.paramsBuffer ?? this.bgParamsDummyBuffer } },
         { binding: 8, resource: this.depthReadView },
         { binding: 9, resource: { buffer: this.dofUniformBuffer } },
-        { binding: 10, resource: (this.agxLutTexture ?? this.agxFallbackTexture).createView({ dimension: "3d" }) },
         { binding: 12, resource: (this.stageGradeTexture ?? this.stageGradeFallback).createView({ dimension: "3d" }) },
         { binding: 11, resource: { buffer: this.castBuffer } },
         { binding: 13, resource: { buffer: this.audioBuffer } },
@@ -4527,8 +4640,6 @@ export class Engine {
           { binding: 31, resource: layers[2] },
           { binding: 32, resource: layers[3] },
           { binding: 2, resource: this.bloomSampler },
-          { binding: 5, resource: this.filmicLutView },
-          { binding: 10, resource: (this.agxLutTexture ?? this.agxFallbackTexture).createView({ dimension: "3d" }) },
           { binding: 12, resource: (this.stageGradeTexture ?? this.stageGradeFallback).createView({ dimension: "3d" }) },
           { binding: 1, resource: bloom },
           { binding: 4, resource: this.maskResolveView },
@@ -4650,7 +4761,7 @@ export class Engine {
    * whether or not it is the thing you see — and it IS the thing you see until
    * a backdrop is set, which is what an HDRI on its own has always done.
    *
-   * `strength` is Blender's world-strength dial and is folded into the
+   * `strength` is the World's intensity and is folded into the
    * coefficients, so what lights her is what you see.
    */
   setWorldEquirect(source: HdrImage | null): void {
@@ -4717,8 +4828,11 @@ export class Engine {
           [w, h],
         )
       }
-      this.worldEquirectTexture = tex
-      this.worldEquirectView = tex.createView()
+      // The box chain above is the SOURCE: the levels the materials read are
+      // the GGX convolution of it, one roughness per level (prefilterSky).
+      const filtered = this.prefilterSky(tex, source.width, source.height, levels)
+      this.worldEquirectTexture = filtered
+      this.worldEquirectView = filtered.createView()
       // The sky lights the scene, not only backs it. The sun keeps the toon
       // ramp — this is the ambient term, exactly where the flat world colour
       // used to sit.
@@ -4738,6 +4852,9 @@ export class Engine {
     this.worldBindingsDirty = true
     this.rebuildPerFrameBindGroups()
     this.rebuildCompositeBindGroup()
+    // The probe's compose step binds the sky it lays in behind the stage.
+    this.dropProbeCapture()
+    this.captureReflectionProbe()
     if (this.device && this.compositeUniformBuffer) this.writeCompositeViewUniforms()
   }
 
@@ -4790,21 +4907,38 @@ export class Engine {
     if (this.device && this.compositeUniformBuffer) this.writeCompositeViewUniforms()
   }
 
-  private makeCompositePipeline(module: GPUShaderModule, applyGamma: boolean, label: string): GPURenderPipeline {
-    return this.device.createRenderPipeline({
-      label,
-      layout: this.compositePipelineLayout,
-      vertex: { module, entryPoint: "vs" },
-      fragment: {
-        module,
-        entryPoint: "fs",
-        constants: { APPLY_GAMMA: applyGamma ? 1 : 0 },
-        targets: [{ format: this.presentationFormat }],
-      },
-      primitive: { topology: "triangle-list" },
-    })
+  /**
+   * The scene composite's pair (gamma = 1, gamma ≠ 1), async and from the
+   * shader cache. Its source depends only on which field mounts the scene
+   * samples, so there are four at most, and an effect install that keeps the
+   * mounts it had gets the pair already built.
+   */
+  private compositePipelines(hasBackground: boolean, hasForeground: boolean): Promise<[GPURenderPipeline, GPURenderPipeline]> {
+    const code = buildCompositeShader(
+      hasBackground || hasForeground
+        ? // No wgsl and so no trails: the composite hosts no effect source at
+          // all, it only decides whether to sample the layer the field pass drew.
+          { wgsl: "", paramsDecl: "", hasBackground, hasForeground, gridSize: 0, trailCount: 0 }
+        : null,
+    )
+    const module = this.cachedShaderModule(code, "composite shader")
+    const make = (applyGamma: boolean, label: string) =>
+      this.cachedRenderPipeline({
+        label,
+        layout: this.compositePipelineLayout,
+        vertex: { module, entryPoint: "vs" },
+        fragment: {
+          module,
+          entryPoint: "fs",
+          constants: { APPLY_GAMMA: applyGamma ? 1 : 0 },
+          targets: [{ format: this.presentationFormat }],
+        },
+        primitive: { topology: "triangle-list" },
+      })
+    return Promise.all([make(false, "composite pipeline (gamma=1)"), make(true, "composite pipeline (gamma!=1)")])
   }
 
+
   /**
    * Install the scene's WGSL effect (shadertoy-style), rendered per-pixel in the
    * composite pass. ONE effect per scene, and the code says where it mounts by
@@ -4847,7 +4981,7 @@ export class Engine {
     params: Record<string, EffectParamValue> | undefined,
     /** This effect's own declarations, already parsed by the caller — which had
      *  to read them anyway to build the scene table. */
-    anchors: { bone: string; trail: boolean }[],
+    anchors: { bone: string; trail: boolean; along?: number; step?: number }[],
     /** Its row of that table: local slot → scene slot. */
     alias: number[],
     /** The pictures for `#textures`, as the host passed them. */
@@ -5042,11 +5176,11 @@ export class Engine {
       hasBackground || hasForeground
         ? { wgsl, paramsDecl, hasBackground, hasForeground, gridSize, alias, trailCount: anchors.filter((a) => a.trail).length, filter, additiveLayer: d.additiveLayer }
         : null
-    const source = buildCompositeShader(fieldEffect)
-    this.device.pushErrorScope("validation")
-    const module = this.device.createShaderModule({ label: "composite shader (effect)", code: source })
-    const scopeErr = await this.device.popErrorScope()
-    if (scopeErr) return { ok: false, diagnostics: [scopeErr.message], mounts, params: d.params, duration: d.duration, readsCast: false }
+    // No composite is built here. One used to be — a module and two pipelines
+    // per effect, then dropped: the composite is static (no user code reaches
+    // it) and setEffects builds the scene's one after the list is in. Those
+    // two compiles were most of a second each and validated nothing an author
+    // wrote.
 
     // Declared like every other mount property: by what the source says, not by
     // a setting somewhere else that an author cannot see from the file.
@@ -5058,16 +5192,11 @@ export class Engine {
       const fieldSource = buildFieldShader({ ...fieldEffect, ids: mrtIdsEnabled() })
       const userLineOffset = fieldSource.slice(0, fieldSource.indexOf(wgsl)).split("\n").length - 1
       this.device.pushErrorScope("validation")
-      const fieldModule = this.device.createShaderModule({ label: "field shader (effect)", code: fieldSource })
-      const info = await fieldModule.getCompilationInfo()
-      const fieldScopeErr = await this.device.popErrorScope()
-      const diagnostics = info.messages
-        .filter((m) => m.type === "error")
-        .map((m) => `${Math.max(0, m.lineNum - userLineOffset)}:${m.linePos} ${m.message}`)
-      if (diagnostics.length === 0 && fieldScopeErr) diagnostics.push(fieldScopeErr.message)
-      if (diagnostics.length > 0) return { ok: false, diagnostics, mounts, params: d.params, duration: d.duration, readsCast: false }
-      try {
-        fieldPipeline = await this.device.createRenderPipelineAsync({
+      const fieldModule = this.cachedShaderModule(fieldSource, "field shader (effect)")
+      const fieldScope = this.device.popErrorScope()
+      // Started before the diagnostics are read, which only decide whether it
+      // is kept: the compile and the check overlap.
+      const fieldBuild = this.cachedRenderPipeline({
           label: "field layer pipeline",
           layout: this.fieldPipelineLayout,
           vertex: { module: fieldModule, entryPoint: "fieldVs" },
@@ -5095,33 +5224,22 @@ export class Engine {
           primitive: { topology: "triangle-list" },
           multisample: { count: 1 },
         })
+      fieldBuild.catch(() => {})
+      const [info, fieldScopeErr] = await Promise.all([fieldModule.getCompilationInfo(), fieldScope])
+      const diagnostics = info.messages
+        .filter((m) => m.type === "error")
+        .map((m) => `${Math.max(0, m.lineNum - userLineOffset)}:${m.linePos} ${m.message}`)
+      if (diagnostics.length === 0 && fieldScopeErr) diagnostics.push(fieldScopeErr.message)
+      if (diagnostics.length > 0) {
+        this.forgetShaderModule(fieldSource)
+        return { ok: false, diagnostics, mounts, params: d.params, duration: d.duration, readsCast: false }
+      }
+      try {
+        fieldPipeline = await fieldBuild
       } catch (e) {
         return { ok: false, diagnostics: [e instanceof Error ? e.message : String(e)], mounts, params: d.params, duration: d.duration, readsCast: false }
       }
     }
-    let identity: GPURenderPipeline
-    let gamma: GPURenderPipeline
-    try {
-      const make = (applyGamma: boolean, label: string) =>
-        this.device.createRenderPipelineAsync({
-          label,
-          layout: this.compositePipelineLayout,
-          vertex: { module, entryPoint: "vs" },
-          fragment: {
-            module,
-            entryPoint: "fs",
-            constants: { APPLY_GAMMA: applyGamma ? 1 : 0 },
-            targets: [{ format: this.presentationFormat }],
-          },
-          primitive: { topology: "triangle-list" },
-        })
-      ;[identity, gamma] = await Promise.all([
-        make(false, "composite pipeline (effect, gamma=1)"),
-        make(true, "composite pipeline (effect, gamma!=1)"),
-      ])
-    } catch (e) {
-      return { ok: false, diagnostics: [e instanceof Error ? e.message : String(e)], mounts, params: d.params, duration: d.duration, readsCast: false }
-    }
 
     // Built BEFORE the swap: a particle stage that fails to compile has to leave
     // the previously installed effect running, exactly as a bad composite does.
@@ -5365,6 +5483,9 @@ export class Engine {
 
     const requested = list ?? []
     if (requested.length === 0) {
+      // Built (or found) before anything is torn down, so no frame draws
+      // between the old effects and the composite that no longer samples them.
+      const [identity, gamma] = await this.compositePipelines(false, false)
       for (const e of this.effects) {
       e.paramsBuffer?.destroy()
       e.lights?.uniform.destroy()
@@ -5377,9 +5498,8 @@ export class Engine {
       this.allocateLightSlots()
       this.anchorTable = EMPTY_ANCHOR_TABLE
       this.clearTrailHistory()
-      const module = this.device.createShaderModule({ label: "composite shader", code: buildCompositeShader(null) })
-      this.compositePipelineIdentity = this.makeCompositePipeline(module, false, "composite pipeline (gamma=1)")
-      this.compositePipelineGamma = this.makeCompositePipeline(module, true, "composite pipeline (gamma!=1)")
+      this.compositePipelineIdentity = identity
+      this.compositePipelineGamma = gamma
       this.rebuildCompositeBindGroup()
       this.writeCompositeViewUniforms()
       return []
@@ -5435,6 +5555,14 @@ export class Engine {
       if (r) r.diagnostics.push(`anchor "${d.bone}" dropped: the scene is already using all ${MAX_EFFECT_ANCHORS} slots`)
     }
 
+    // The composite for the new list, built before the swap below so the swap
+    // stays one synchronous step. From the shader cache: it was rebuilt, and
+    // synchronously, on every install.
+    const [compositeIdentity, compositeGamma] = await this.compositePipelines(
+      instances.some((e) => e.hasBackground),
+      instances.some((e) => e.hasForeground),
+    )
+
     // ── Swap. Everything above either succeeded or was excluded, so the scene
     // that was running is only torn down now.
     for (const e of this.effects) {
@@ -5486,20 +5614,8 @@ export class Engine {
     // Scene-level, from the union: the composite decides only whether to SAMPLE
     // the field layers, so one effect with a background is enough to turn that
     // on for the frame.
-    const hasBackground = instances.some((e) => e.hasBackground)
-    const hasForeground = instances.some((e) => e.hasForeground)
-    const compositeModule = this.device.createShaderModule({
-      label: "composite shader (effects)",
-      code: buildCompositeShader(
-        hasBackground || hasForeground
-          ? // No wgsl and so no trails: the composite hosts no effect source at
-            // all, it only decides whether to sample the layer the field pass drew.
-            { wgsl: "", paramsDecl: "", hasBackground, hasForeground, gridSize: 0, trailCount: 0 }
-          : null,
-      ),
-    })
-    this.compositePipelineIdentity = this.makeCompositePipeline(compositeModule, false, "composite pipeline (gamma=1)")
-    this.compositePipelineGamma = this.makeCompositePipeline(compositeModule, true, "composite pipeline (gamma!=1)")
+    this.compositePipelineIdentity = compositeIdentity
+    this.compositePipelineGamma = compositeGamma
 
     // Nothing to promote any more: `#fullres` is per effect, read into
     // fieldLayer when the instance is built, and both target pairs exist for
@@ -5537,7 +5653,7 @@ export class Engine {
     /** What the file declared. Read here rather than re-parsed: the source no
      *  longer carries the lines, and two readers is how they drift. */
     d: EffectDirectives,
-    anchors: { bone: string; trail: boolean }[],
+    anchors: { bone: string; trail: boolean; along?: number; step?: number }[],
     /** This effect's local→scene slot map. Passed rather than read off the
      *  engine: the builders run BEFORE the swap, so this.anchorTable still
      *  describes the effect that is still on screen. */
@@ -5596,26 +5712,32 @@ export class Engine {
       alias,
     }
 
+    // The scope is popped before the first await: compiles run side by side
+    // (both modules here, other effects, style groups), and a scope held open
+    // across an await would catch whichever of them errored first.
     const compile = async (code: string, label: string): Promise<GPUShaderModule | string[]> => {
       const offset = code.slice(0, code.indexOf(wgsl)).split("\n").length - 1
       this.device.pushErrorScope("validation")
-      const module = this.device.createShaderModule({ label, code })
-      const info = await module.getCompilationInfo()
-      const scopeErr = await this.device.popErrorScope()
+      const module = this.cachedShaderModule(code, label)
+      const scope = this.device.popErrorScope()
+      const [info, scopeErr] = await Promise.all([module.getCompilationInfo(), scope])
       const diagnostics = info.messages
         .filter((m) => m.type === "error")
         .map((m) => `${Math.max(0, m.lineNum - offset)}:${m.linePos} ${m.message}`)
       if (diagnostics.length === 0 && scopeErr) diagnostics.push(scopeErr.message)
+      if (diagnostics.length) this.forgetShaderModule(code)
       return diagnostics.length ? diagnostics : module
     }
 
-    const computeModule = await compile(buildParticleComputeShader(src, cast), "particle compute")
+    const [computeModule, renderModule] = await Promise.all([
+      compile(buildParticleComputeShader(src, cast), "particle compute"),
+      compile(buildParticleRenderShader(src, cast), "particle render"),
+    ])
     if (Array.isArray(computeModule)) {
       points?.buffer.destroy()
       dropTextures()
       return { ok: false, diagnostics: computeModule }
     }
-    const renderModule = await compile(buildParticleRenderShader(src, cast), "particle render")
     if (Array.isArray(renderModule)) {
       points?.buffer.destroy()
       dropTextures()
@@ -5656,7 +5778,7 @@ export class Engine {
     // layout invalid, and the error surfaces later and unhelpfully as "invalid
     // due to a previous error".
     const layoutFor = (storage: GPUBufferBindingType, visibility: number, shadow: boolean, withIndirect: boolean) =>
-      this.device.createBindGroupLayout({
+      this.cachedBindGroupLayout({
         entries: [
           { binding: 0, visibility, buffer: { type: storage } },
           { binding: 1, visibility, buffer: { type: "uniform" } },
@@ -5768,32 +5890,29 @@ export class Engine {
     const targets = sceneTargetsFor(src.blend === "additive" ? "particle-additive" : "particle", this.sceneFormats)
     const cutout = src.blend === "cutout"
 
+    // ALL STAGES AT ONCE: compute, count, prepass and shading compile side by
+    // side rather than in turn. The scope closes before the first await, for
+    // the reason compile() gives.
     this.device.pushErrorScope("validation")
-    try {
-      const computePipelineLayout = this.device.createPipelineLayout({ bindGroupLayouts: [computeLayout] })
-      const compute = await this.device.createComputePipelineAsync({
+    const renderLayoutObj = this.cachedPipelineLayout([renderLayout])
+    const builds = Promise.all([
+      this.cachedComputePipeline({
         label: "particle compute pipeline",
-        layout: computePipelineLayout,
+        layout: this.cachedPipelineLayout([computeLayout]),
         compute: { module: computeModule, entryPoint: "main" },
-      })
-      const live =
-        indirect && countLayout
-          ? {
-              pipeline: await this.device.createComputePipelineAsync({
-                label: "particle count pipeline",
-                layout: this.device.createPipelineLayout({ bindGroupLayouts: [countLayout] }),
-                compute: { module: computeModule, entryPoint: "rzCount" },
-              }),
-              indirect,
-              binds: bindFor(countLayout, this.cameraUniformBuffer, false, true),
-            }
-          : null
-      const renderLayoutObj = this.device.createPipelineLayout({ bindGroupLayouts: [renderLayout] })
+      }),
+      indirect && countLayout
+        ? this.cachedComputePipeline({
+            label: "particle count pipeline",
+            layout: this.cachedPipelineLayout([countLayout]),
+            compute: { module: computeModule, entryPoint: "rzCount" },
+          })
+        : null,
       // The prepass, when the effect gave the cutout a cheap shape: coverage to
       // depth, colour targets at writeMask 0 (the depth-prepass class), and
       // the shading pass below then tests EQUAL and writes no depth.
-      const depth = prepass
-        ? await this.device.createRenderPipelineAsync({
+      prepass
+        ? this.cachedRenderPipeline({
             label: "particle depth prepass pipeline",
             layout: renderLayoutObj,
             vertex: { module: renderModule, entryPoint: "vs" },
@@ -5802,8 +5921,8 @@ export class Engine {
             depthStencil: { format: this.depthFormat, depthWriteEnabled: true, depthCompare: this.depthAhead },
             multisample: { count: Engine.MULTISAMPLE_COUNT },
           })
-        : null
-      const render = await this.device.createRenderPipelineAsync({
+        : null,
+      this.cachedRenderPipeline({
         label: "particle render pipeline",
         layout: renderLayoutObj,
         vertex: { module: renderModule, entryPoint: "vs" },
@@ -5822,10 +5941,26 @@ export class Engine {
         // shading ten layers and shading about three.
         depthStencil: prepass
           ? { format: this.depthFormat, depthWriteEnabled: false, depthCompare: "equal" }
-          : { format: this.depthFormat, depthWriteEnabled: cutout, depthCompare: this.depthAhead },
+          : d.depthAlways
+            ? // `#depth always`: over the scene, Unity's ZTest Always (a moon's halo
+              // drawn in front of the sky dome it sits behind)
+              { format: this.depthFormat, depthWriteEnabled: false, depthCompare: "always" }
+            : { format: this.depthFormat, depthWriteEnabled: cutout, depthCompare: this.depthAhead },
         multisample: { count: Engine.MULTISAMPLE_COUNT },
-      })
-      const scoped = await this.device.popErrorScope()
+      }),
+    ])
+    const scope = this.device.popErrorScope()
+    try {
+      const [compute, countPipeline, depth, render] = await builds
+      const live =
+        indirect && countLayout && countPipeline
+          ? {
+              pipeline: countPipeline,
+              indirect,
+              binds: bindFor(countLayout, this.cameraUniformBuffer, false, true),
+            }
+          : null
+      const scoped = await scope
       if (scoped) {
         buffer.destroy()
         uniform.destroy()
@@ -5865,7 +6000,7 @@ export class Engine {
         },
       }
     } catch (e) {
-      await this.device.popErrorScope()
+      await scope
       buffer.destroy()
       uniform.destroy()
       points?.buffer.destroy()
@@ -5894,7 +6029,7 @@ export class Engine {
     wgsl: string,
     count: number,
     alias: number[],
-    anchors: { bone: string; trail: boolean }[],
+    anchors: { bone: string; trail: boolean; along?: number; step?: number }[],
     params: EffectParamsBinding,
   ): Promise<{ ok: true; state: NonNullable<EffectInstance["lights"]> } | { ok: false; diagnostics: string[] }> {
     const layout = this.device.createBindGroupLayout({
@@ -6148,7 +6283,7 @@ export class Engine {
     /** What the file declared. Read here rather than re-parsed: the source no
      *  longer carries the lines, and two readers is how they drift. */
     d: EffectDirectives,
-    anchors: { bone: string; trail: boolean }[],
+    anchors: { bone: string; trail: boolean; along?: number; step?: number }[],
     /** This effect's local→scene slot map. Passed rather than read off the
      *  engine: the builders run BEFORE the swap, so this.anchorTable still
      *  describes the effect that is still on screen. */
@@ -6238,8 +6373,10 @@ export class Engine {
     // point: a layer composited after tone mapping can never bloom.
     //
     // Additive, where this used to be MAX. Max was right for a post-tonemap
-    // layer; in HDR before bloom, overlapping light sums.
-    const targets = sceneTargetsFor("trail", this.sceneFormats)
+    // layer; in HDR before bloom, overlapping light sums. `#blend over` lays the
+    // ribbon over the scene by its alpha instead — a game trail's own blend,
+    // under which its dark smoke darkens rather than vanishing.
+    const targets = sceneTargetsFor(d.trailBlend === "over" ? "trail-over" : "trail", this.sceneFormats)
     this.device.pushErrorScope("validation")
     try {
       const pipeline = await this.device.createRenderPipelineAsync({
@@ -6657,7 +6794,7 @@ export class Engine {
     /** What the file declared. Read here rather than re-parsed: the source no
      *  longer carries the lines, and two readers is how they drift. */
     d: EffectDirectives,
-    anchors: { bone: string; trail: boolean }[],
+    anchors: { bone: string; trail: boolean; along?: number; step?: number }[],
     /** This effect's local→scene slot map. Passed rather than read off the
      *  engine: the builders run BEFORE the swap, so this.anchorTable still
      *  describes the effect that is still on screen. */
@@ -7120,41 +7257,172 @@ export class Engine {
     const b = this.bloomSettings
     if (patch.enabled !== undefined) b.enabled = patch.enabled
     if (patch.threshold !== undefined) b.threshold = patch.threshold
-    if (patch.knee !== undefined) b.knee = patch.knee
-    if (patch.radius !== undefined) b.radius = patch.radius
+    if (patch.scatter !== undefined) b.scatter = patch.scatter
     if (patch.color !== undefined) {
       b.color.x = patch.color.x
       b.color.y = patch.color.y
       b.color.z = patch.color.z
     }
     if (patch.intensity !== undefined) b.intensity = patch.intensity
-    if (patch.clamp !== undefined) b.clamp = patch.clamp
-    if (this.device && this.bloomBlitUniformBuffer) {
+    if (this.device && this.compositeUniformBuffer) {
       this.writeBloomUniforms()
       this.writeCompositeViewUniforms()
     }
   }
 
-  // EEVEE prefilter uniforms (blit stage) + upsample sample scale. Intensity/tint live in composite.
+  private ensureBloomPipelines(): void {
+    // The buffer, not a pipeline, says "already built": at init the pipelines
+    // land async (initRenderPipeline) and are absent for a moment.
+    if (this.bloomUniformBuffer) return
+    const device = this.device
+    this.bloomUniformBuffer = device.createBuffer({
+      label: "bloomuniforms",
+      size: 16,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+    this.bloomUpsampleBindGroupLayout = device.createBindGroupLayout({
+      label: "bloomupsample layout",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+      ],
+    })
+    const pipeline = (label: string, code: string, layout: GPUBindGroupLayout, assign: (p: GPURenderPipeline) => void) => {
+      const module = device.createShaderModule({ label, code })
+      this.initRenderPipeline(
+        {
+          label,
+          layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+          vertex: { module, entryPoint: "vs" },
+          fragment: { module, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
+          primitive: { topology: "triangle-list" },
+        },
+        assign,
+      )
+    }
+    pipeline("bloomprefilter", BLOOM_PREFILTER_SHADER_WGSL, this.bloomPrefilterBindGroupLayout, (p) => (this.bloomPrefilterPipeline = p))
+    pipeline("bloomblur H", BLOOM_BLUR_H_SHADER_WGSL, this.bloomBlurBindGroupLayout, (p) => (this.bloomBlurHPipeline = p))
+    pipeline("bloomblur V", BLOOM_BLUR_V_SHADER_WGSL, this.bloomBlurBindGroupLayout, (p) => (this.bloomBlurVPipeline = p))
+    pipeline("bloomupsample", BLOOM_UPSAMPLE_SHADER_WGSL, this.bloomUpsampleBindGroupLayout, (p) => (this.bloomUpsamplePipeline = p))
+  }
+
+  /** The game's chain at the current canvas size (AGSimPostFX.Bloom): half
+   *  size, then floor(log2(longest side)) - 1 levels, each half the last. */
+  private buildBloomTargets(): void {
+    if (!this.device || !this.hdrResolveTexture || !this.maskResolveView || !this.bloomPrefilterBindGroupLayout) return
+    this.ensureBloomPipelines()
+    const w0 = Math.max(1, Math.floor(this.hdrResolveTexture.width / 2))
+    const h0 = Math.max(1, Math.floor(this.hdrResolveTexture.height / 2))
+    const levels = Math.min(Engine.BLOOM_MAX_LEVELS, Math.max(1, Math.floor(Math.log2(Math.max(w0, h0)) - 1)))
+    // Mip chains, whose sizes are floor-halved exactly as the game's targets are.
+    const make = (label: string) =>
+      this.device.createTexture({
+        label,
+        size: [w0, h0],
+        mipLevelCount: levels,
+        format: this.hdrFormat,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+      })
+    this.bloomDownTexture?.destroy()
+    this.bloomUpTexture?.destroy()
+    this.bloomDownTexture = make("bloomdown")
+    this.bloomUpTexture = make("bloomup")
+    this.bloomLevels = levels
+    const views = (t: GPUTexture) =>
+      Array.from({ length: levels }, (_, i) => t.createView({ baseMipLevel: i, mipLevelCount: 1 }))
+    this.bloomDownViews = views(this.bloomDownTexture)
+    this.bloomUpViews = views(this.bloomUpTexture)
+    this.writeBloomUniforms()
+    const uniform = { buffer: this.bloomUniformBuffer! }
+    this.bloomPrefilterBindGroup = this.device.createBindGroup({
+      label: "bloomprefilter",
+      layout: this.bloomPrefilterBindGroupLayout,
+      entries: [
+        { binding: 0, resource: this.hdrResolveTexture.createView() },
+        { binding: 1, resource: uniform },
+        { binding: 2, resource: this.maskResolveView },
+      ],
+    })
+    const blur = (label: string, src: GPUTextureView) =>
+      this.device.createBindGroup({
+        label,
+        layout: this.bloomBlurBindGroupLayout,
+        entries: [
+          { binding: 0, resource: src },
+          { binding: 1, resource: this.bloomSampler },
+        ],
+      })
+    // [i - 1] is level i: blurH reads down[i-1] into up[i], blurV up[i] into down[i].
+    this.bloomBlurHBindGroups = []
+    this.bloomBlurVBindGroups = []
+    for (let i = 1; i < levels; i++) {
+      this.bloomBlurHBindGroups.push(blur(`bloomblur H ${i}`, this.bloomDownViews[i - 1]))
+      this.bloomBlurVBindGroups.push(blur(`bloomblur V ${i}`, this.bloomUpViews[i]))
+    }
+    // [k] writes up[levels - 2 - k], coarsest first.
+    this.bloomUpsampleBindGroups = []
+    for (let i = levels - 2; i >= 0; i--) {
+      const low = i === levels - 2 ? this.bloomDownViews[i + 1] : this.bloomUpViews[i + 1]
+      this.bloomUpsampleBindGroups.push(
+        this.device.createBindGroup({
+          label: `bloomupsample ${i}`,
+          layout: this.bloomUpsampleBindGroupLayout!,
+          entries: [
+            { binding: 0, resource: this.bloomDownViews[i] },
+            { binding: 1, resource: low },
+            { binding: 2, resource: this.bloomSampler },
+            { binding: 3, resource: uniform },
+          ],
+        }),
+      )
+    }
+  }
+
   private writeBloomUniforms(): void {
+    if (!this.bloomUniformBuffer) return
     const b = this.bloomSettings
-    const bu = this.bloomBlitUniformData
-    // EEVEE prefilter: threshold, knee_half, clamp (0 → disabled), _unused
-    // Blender halves the knee before passing to the shader (eevee_bloom.c: knee * 0.5f).
-    // The blit shader's quadratic soft-knee curve uses knee_half as the offset from threshold,
-    // so the soft ramp spans [threshold - knee/2 .. threshold + knee/2] — NOT [threshold - knee .. threshold + knee].
-    bu[0] = b.threshold
-    bu[1] = b.knee * 0.5
-    bu[2] = b.clamp
-    bu[3] = 0.0
-    this.device.queue.writeBuffer(this.bloomBlitUniformBuffer, 0, bu)
-    const us = this.bloomUpsampleUniformData
-    // Blender: bloom.radius directly controls the tent-filter sample scale in texel units.
-    us[0] = Math.max(0.5, b.radius)
-    us[1] = 0
-    us[2] = 0
-    us[3] = 0
-    this.device.queue.writeBuffer(this.bloomUpsampleUniformBuffer, 0, us)
+    const u = this.bloomUniformData
+    // Threshold, its soft knee (half of it, as the game derives it), the clamp,
+    // and scatter. Tint and intensity live in the composite.
+    u[0] = Math.max(0, b.threshold)
+    u[1] = Math.max(0, b.threshold) * 0.5
+    u[2] = Engine.BLOOM_CLAMP
+    // URP's mapping: never all the way to the widest level, which alone is a
+    // few pixels smeared over the screen — the glow would vanish.
+    u[3] = 0.05 + 0.9 * Math.min(1, Math.max(0, b.scatter))
+    this.device.queue.writeBuffer(this.bloomUniformBuffer, 0, u)
+  }
+
+  /** The game's chain, pass for pass (AGSimPostFX.Bloom). */
+  private renderBloom(encoder: GPUCommandEncoder): void {
+    const levels = this.bloomLevels
+    const att = (this.bloomPassDescriptor.colorAttachments as GPURenderPassColorAttachment[])[0]
+    const total = 1 + 3 * (levels - 1)
+    let n = 0
+    const draw = (target: GPUTextureView, pipeline: GPURenderPipeline, group: GPUBindGroup) => {
+      att.view = target
+      // One timing span for the whole chain, as for the pyramid.
+      const open = n === 0 ? this.stampOpen("bloom") : undefined
+      const close = n === total - 1 ? this.stampClose("bloom") : undefined
+      this.bloomPassDescriptor.timestampWrites = open && close ? { ...open, ...close } : (open ?? close)
+      n++
+      const p = encoder.beginRenderPass(this.bloomPassDescriptor)
+      p.setPipeline(pipeline)
+      p.setBindGroup(0, group)
+      p.draw(3)
+      p.end()
+    }
+    draw(this.bloomDownViews[0], this.bloomPrefilterPipeline!, this.bloomPrefilterBindGroup!)
+    for (let i = 1; i < levels; i++) {
+      draw(this.bloomUpViews[i], this.bloomBlurHPipeline!, this.bloomBlurHBindGroups[i - 1])
+      draw(this.bloomDownViews[i], this.bloomBlurVPipeline!, this.bloomBlurVBindGroups[i - 1])
+    }
+    for (let k = 0; k < levels - 1; k++) {
+      draw(this.bloomUpViews[levels - 2 - k], this.bloomUpsamplePipeline!, this.bloomUpsampleBindGroups[k])
+    }
+    this.bloomPassDescriptor.timestampWrites = undefined
   }
 
   // Step 1: Get WebGPU device and context
@@ -7282,7 +7550,16 @@ export class Engine {
     this.setupCamera()
     this.setupLighting()
     const tPipelines = performance.now()
+    // Built async and side by side (see initRenderPipeline): a synchronous
+    // build holds the GPU process for the whole compile, one after another,
+    // which was a 2–3 s frozen frame on a cold open.
+    this.initPipelineJobs = []
     this.createPipelines()
+    try {
+      await Promise.all(this.initPipelineJobs)
+    } finally {
+      this.initPipelineJobs = null
+    }
     this.setupResize()
     const ms = (a: number, b: number) => Math.round(b - a)
     console.info(
@@ -7338,211 +7615,24 @@ export class Engine {
     this.device.queue.submit([encoder.finish()])
   }
 
-  private bakeBrdfLut() {
-    if (BRDF_LUT_SIZE !== LTC_MAG_LUT_SIZE) {
-      throw new Error("BRDF LUT bake requires DFG size == LTC size (both 64).")
-    }
-
-    // Temp rg16float LTC source — loaded 1:1 by the bake fragment shader, then dropped.
-    const ltcTemp = this.device.createTexture({
-      label: "LTC mag LUT (bake input)",
-      size: [LTC_MAG_LUT_SIZE, LTC_MAG_LUT_SIZE],
-      format: "rg16float",
-      usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
-    })
-    const n = LTC_MAG_LUT_DATA.length
-    const half = new Uint16Array(n)
-    const f32 = new Float32Array(1)
-    const u32 = new Uint32Array(f32.buffer)
-    for (let i = 0; i < n; i++) {
-      f32[0] = LTC_MAG_LUT_DATA[i]
-      const x = u32[0]
-      const sign = (x >>> 16) & 0x8000
-      let exp = ((x >>> 23) & 0xff) - 127 + 15
-      const mant = x & 0x7fffff
-      if (exp <= 0) {
-        half[i] = sign
-      } else if (exp >= 31) {
-        half[i] = sign | 0x7c00
-      } else {
-        half[i] = sign | (exp << 10) | (mant >>> 13)
-      }
-    }
-    this.device.queue.writeTexture(
-      { texture: ltcTemp },
-      half,
-      { bytesPerRow: LTC_MAG_LUT_SIZE * 4, rowsPerImage: LTC_MAG_LUT_SIZE },
-      { width: LTC_MAG_LUT_SIZE, height: LTC_MAG_LUT_SIZE, depthOrArrayLayers: 1 },
-    )
-
-    this.brdfLutTexture = this.device.createTexture({
-      label: "BRDF LUT (DFG + LTC packed)",
-      size: [BRDF_LUT_SIZE, BRDF_LUT_SIZE],
-      format: "rgba8unorm",
-      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-    })
-    this.brdfLutView = this.brdfLutTexture.createView()
-
-    const module = this.device.createShaderModule({ label: "BRDF LUT bake", code: BRDF_LUT_BAKE_WGSL })
-    const pipeline = this.device.createRenderPipeline({
-      label: "BRDF LUT bake pipeline",
-      layout: "auto",
-      vertex: { module, entryPoint: "vs" },
-      fragment: { module, entryPoint: "fs", targets: [{ format: "rgba8unorm" }] },
-      primitive: { topology: "triangle-list" },
-    })
-
-    const bakeBindGroup = this.device.createBindGroup({
-      label: "BRDF LUT bake bind group",
-      layout: pipeline.getBindGroupLayout(0),
-      entries: [{ binding: 0, resource: ltcTemp.createView() }],
-    })
-
-    const enc = this.device.createCommandEncoder({ label: "BRDF LUT bake encoder" })
-    const pass = enc.beginRenderPass({
-      colorAttachments: [
-        { view: this.brdfLutView, clearValue: { r: 0, g: 0, b: 0, a: 1 }, loadOp: "clear", storeOp: "store" },
-      ],
-    })
-    pass.setPipeline(pipeline)
-    pass.setBindGroup(0, bakeBindGroup)
-    pass.draw(3, 1, 0, 0)
-    pass.end()
-    this.device.queue.submit([enc.finish()])
-
-    ltcTemp.destroy()
-  }
-
-  // Bake the Blender 3.6 Filmic MHC tone curve into a WIDTH×1 r16float LUT sampled by the
-  // composite pass. The 14 anchors are the same as the old inline array; we fit a monotone
-  // cubic (Fritsch–Carlson) through them so the curve is C1-continuous (no Mach banding in
-  // smooth gradients) while still passing through every anchor (look preserved) and staying
-  // monotone (no tonemap overshoot/ringing). Domain is uniform in log2 space: anchor k sits
-  // at t=k, k=0..13 (t = log2(linear)+10). See composite.ts::filmic for the sampling map.
-  /**
-   * Decompress and upload Blender's AgX cube.
-   *
-   * Deliberately off the critical path: it is 723 KB once inflated, and a frame
-   * rendered before it lands should show the scene under whatever transform is
-   * already there rather than wait. Until then binding 10 holds a 1×1×1 stand-in,
-   * which is only ever sampled if someone selects AgX in that window.
-   */
-  private async loadAgxLut(): Promise<void> {
-    try {
-      const packed = Uint8Array.from(atob(AGX_LUT_GZ), (ch) => ch.charCodeAt(0))
-      const stream = new Blob([packed]).stream().pipeThrough(new DecompressionStream("gzip"))
-      const bytes = new Uint8Array(await new Response(stream).arrayBuffer())
-      const n = AGX_LUT_SIZE
-      if (bytes.byteLength !== n * n * n * 4) throw new Error(`AgX LUT is ${bytes.byteLength} bytes, expected ${n ** 3 * 4}`)
-      const tex = this.device.createTexture({
-        label: "AgX 57³ LUT",
-        size: [n, n, n],
-        dimension: "3d",
-        format: "rgb10a2unorm",
-        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-      })
-      // .cube order is red fastest, which is exactly a 3D texture's own layout.
-      this.device.queue.writeTexture({ texture: tex }, bytes, { bytesPerRow: n * 4, rowsPerImage: n }, [n, n, n])
-      this.agxLutTexture = tex
-      this.rebuildCompositeBindGroup()
-    } catch {
-      // A missing LUT costs AgX, not the renderer — the other transforms stand.
-    }
-  }
-
-  private bakeFilmicLut() {
-    const anchors = [
-      0.0028, 0.0068, 0.0151, 0.0313, 0.061, 0.112, 0.192, 0.306, 0.459, 0.631, 0.82, 0.907, 0.962, 0.989,
-    ]
-    const n = anchors.length
-    // Secant slopes (unit spacing, so d_k = y_{k+1} - y_k).
-    const d = new Array<number>(n - 1)
-    for (let k = 0; k < n - 1; k++) d[k] = anchors[k + 1] - anchors[k]
-    // Endpoint + interior tangents.
-    const m = new Array<number>(n)
-    m[0] = d[0]
-    m[n - 1] = d[n - 2]
-    for (let k = 1; k < n - 1; k++) m[k] = (d[k - 1] + d[k]) * 0.5
-    // Fritsch–Carlson monotonicity clamp.
-    for (let k = 0; k < n - 1; k++) {
-      if (d[k] === 0) {
-        m[k] = 0
-        m[k + 1] = 0
-        continue
-      }
-      const a = m[k] / d[k]
-      const b = m[k + 1] / d[k]
-      const s = a * a + b * b
-      if (s > 9) {
-        const tau = 3 / Math.sqrt(s)
-        m[k] = tau * a * d[k]
-        m[k + 1] = tau * b * d[k]
-      }
-    }
-    const W = Engine.FILMIC_LUT_WIDTH
-    const values = new Float32Array(W)
-    for (let j = 0; j < W; j++) {
-      const t = ((n - 1) * j) / (W - 1) // t ∈ [0, n-1]
-      const k = Math.min(Math.floor(t), n - 2)
-      const s = t - k // local param in [0,1], unit-spaced segment
-      const s2 = s * s
-      const s3 = s2 * s
-      // Hermite basis (h=1).
-      const h00 = 2 * s3 - 3 * s2 + 1
-      const h10 = s3 - 2 * s2 + s
-      const h01 = -2 * s3 + 3 * s2
-      const h11 = s3 - s2
-      values[j] = h00 * anchors[k] + h10 * m[k] + h01 * anchors[k + 1] + h11 * m[k + 1]
-    }
-
-    // f32 → f16 bits (same conversion as bakeBrdfLut).
-    const half = new Uint16Array(W)
-    const f32 = new Float32Array(1)
-    const u32 = new Uint32Array(f32.buffer)
-    for (let j = 0; j < W; j++) {
-      f32[0] = values[j]
-      const x = u32[0]
-      const sign = (x >>> 16) & 0x8000
-      const exp = ((x >>> 23) & 0xff) - 127 + 15
-      const mant = x & 0x7fffff
-      if (exp <= 0) {
-        half[j] = sign
-      } else if (exp >= 31) {
-        half[j] = sign | 0x7c00
-      } else {
-        half[j] = sign | (exp << 10) | (mant >>> 13)
-      }
-    }
-
-    this.filmicLutTexture = this.device.createTexture({
-      label: "Filmic tone LUT",
-      size: [W, 1],
-      format: "r16float",
-      usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
-    })
-    this.filmicLutView = this.filmicLutTexture.createView()
-    this.device.queue.writeTexture(
-      { texture: this.filmicLutTexture },
-      half,
-      { bytesPerRow: W * 2, rowsPerImage: 1 },
-      { width: W, height: 1, depthOrArrayLayers: 1 },
-    )
+  private createRenderPipeline(config: Parameters<Engine["renderPipelineDesc"]>[0]): GPURenderPipeline {
+    return this.createModelPipeline(this.renderPipelineDesc(config))
   }
 
-  private createRenderPipeline(config: {
+  private renderPipelineDesc(config: {
     label: string
     layout: GPUPipelineLayout
     shaderModule: GPUShaderModule
-    vertexBuffers: GPUVertexBufferLayout[]
+    vertexBuffers: (GPUVertexBufferLayout | null)[]
     fragmentTarget?: GPUColorTargetState
     fragmentTargets?: GPUColorTargetState[]
     fragmentEntryPoint?: string
     cullMode?: GPUCullMode
     depthStencil?: GPUDepthStencilState
     multisample?: GPUMultisampleState
-  }): GPURenderPipeline {
+  }): GPURenderPipelineDescriptor {
     const targets = config.fragmentTargets ?? (config.fragmentTarget ? [config.fragmentTarget] : undefined)
-    return this.createModelPipeline({
+    return {
       label: config.label,
       layout: config.layout,
       vertex: {
@@ -7559,7 +7649,7 @@ export class Engine {
       primitive: { cullMode: config.cullMode ?? "none" },
       depthStencil: config.depthStencil,
       multisample: config.multisample ?? { count: Engine.MULTISAMPLE_COUNT },
-    })
+    }
   }
 
   private createPipelines() {
@@ -7685,8 +7775,6 @@ export class Engine {
         // creation with "binding doesn't exist", naming a binding no effect
         // author ever wrote. Sharing the code meant sharing these.
         { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
-        { binding: 5, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
-        { binding: 10, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "3d" } },
         { binding: 12, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "3d" } },
         // And the scene's COVERAGE and bloom, without which the tap cannot
         // reconstruct a pixel: the HDR target is premultiplied, so colour alone
@@ -7708,31 +7796,40 @@ export class Engine {
       const seedModule = this.device.createShaderModule({ label: "cast distance seed", code: buildCastSeedShader(Engine.MULTISAMPLE_COUNT) })
       const stepModule = this.device.createShaderModule({ label: "cast distance step", code: buildCastStepShader() })
       const resolveModule = this.device.createShaderModule({ label: "cast distance resolve", code: buildCastResolveShader() })
-      this.castSeedPipeline = this.device.createRenderPipeline({
-        label: "cast distance seed",
-        layout: "auto",
-        vertex: { module: seedModule, entryPoint: "vs" },
-        fragment: {
-          module: seedModule,
-          entryPoint: "fs",
-          targets: [{ format: CAST_SEED_FORMAT }, { format: CAST_COVERAGE_FORMAT }],
+      this.initRenderPipeline(
+        {
+          label: "cast distance seed",
+          layout: "auto",
+          vertex: { module: seedModule, entryPoint: "vs" },
+          fragment: {
+            module: seedModule,
+            entryPoint: "fs",
+            targets: [{ format: CAST_SEED_FORMAT }, { format: CAST_COVERAGE_FORMAT }],
+          },
+          primitive: { topology: "triangle-list" },
         },
-        primitive: { topology: "triangle-list" },
-      })
-      this.castStepPipeline = this.device.createRenderPipeline({
-        label: "cast distance step",
-        layout: "auto",
-        vertex: { module: stepModule, entryPoint: "vs" },
-        fragment: { module: stepModule, entryPoint: "fs", targets: [{ format: CAST_SEED_FORMAT }] },
-        primitive: { topology: "triangle-list" },
-      })
-      this.castResolvePipeline = this.device.createRenderPipeline({
-        label: "cast distance resolve",
-        layout: "auto",
-        vertex: { module: resolveModule, entryPoint: "vs" },
-        fragment: { module: resolveModule, entryPoint: "fs", targets: [{ format: CAST_DIST_FORMAT }] },
-        primitive: { topology: "triangle-list" },
-      })
+        (p) => (this.castSeedPipeline = p),
+      )
+      this.initRenderPipeline(
+        {
+          label: "cast distance step",
+          layout: "auto",
+          vertex: { module: stepModule, entryPoint: "vs" },
+          fragment: { module: stepModule, entryPoint: "fs", targets: [{ format: CAST_SEED_FORMAT }] },
+          primitive: { topology: "triangle-list" },
+        },
+        (p) => (this.castStepPipeline = p),
+      )
+      this.initRenderPipeline(
+        {
+          label: "cast distance resolve",
+          layout: "auto",
+          vertex: { module: resolveModule, entryPoint: "vs" },
+          fragment: { module: resolveModule, entryPoint: "fs", targets: [{ format: CAST_DIST_FORMAT }] },
+          primitive: { topology: "triangle-list" },
+        },
+        (p) => (this.castResolvePipeline = p),
+      )
       // 65504 is the largest half float. Bound wherever the field is not
       // running, so rzCastDistance answers "unreachably far" and an effect keyed
       // on it draws nothing at all.
@@ -7843,7 +7940,22 @@ export class Engine {
     // The same attachments blended as light — for a group that declared
     // blend: "additive". See scene-contract's material-additive.
     this.sceneTargetsAdditive = sceneTargetsFor("material-additive", this.sceneFormats)
+    this.sceneTargetsPremultiplied = sceneTargetsFor("material-premultiplied", this.sceneFormats)
     this.fullVertexBufferLayouts = fullVertexBuffers
+    // Slot 3 stays empty: the outline hull binds its own stream there between
+    // two material draws, and a material reading slot 3 would pick it up.
+    const materialVertexBuffers: (GPUVertexBufferLayout | null)[] = [
+      ...fullVertexBuffers,
+      null,
+      {
+        arrayStride: Engine.ATTRIBUTE_FLOATS * 4,
+        attributes: [
+          { shaderLocation: 5, offset: 0, format: "float32x4" as GPUVertexFormat },
+          { shaderLocation: 6, offset: 4 * 4, format: "float32x2" as GPUVertexFormat },
+        ],
+      },
+    ]
+    this.materialVertexBufferLayouts = materialVertexBuffers
 
     // group 0: per-frame (camera + light + sampler + shadow) — bound once per pass
     this.mainPerFrameBindGroupLayout = this.device.createBindGroupLayout({
@@ -7859,14 +7971,19 @@ export class Engine {
         // The positional lights. Always bound, empty or not, so every material
         // pipeline shares one layout whether or not the scene has any.
         { binding: 6, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
-        // The world's sky (8) and the BRDF LUT (9). The sky is always bound —
-        // the 1x1 fallback when the scene has none — so every material
-        // pipeline keeps sharing one layout. (7 was the far cascade's map,
-        // which the atlas at 3 replaces.)
+        // The world's sky (8). Always bound — the 1x1 fallback when the scene
+        // has none — so every material pipeline keeps sharing one layout. (7
+        // was the far cascade's map, which the atlas at 3 replaces.)
         { binding: 8, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
-        { binding: 9, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+        // The spot lamps' cookies (loadLightCookie), a 1x1 white until one loads.
+        { binding: 9, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "2d-array" } },
         // The cast's shadow on a stage — setStageCastShadow.
         { binding: 10, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+        // The stage's reflection probe and where it projects — see
+        // captureReflectionProbe. Always bound: a 1x1 cube and the off flag
+        // when there is no stage.
+        { binding: 11, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "cube" } },
+        { binding: 12, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
       ],
     })
     // group 1: per-instance (skinMats) — bound once per model
@@ -7933,34 +8050,42 @@ export class Engine {
     // hand shaders are retired in favor of graphs.
     const neutral = compileGraph(DEFAULT_GRAPH, { renderClass: "auto", alphaMode: "opaque" })
     if (!neutral.ok) throw new Error("failed to compile the neutral default graph")
-    const neutralModule = this.device.createShaderModule({ label: "neutral base (default graph)", code: neutral.wgsl })
-    this.neutralPipeline = this.createRenderPipeline({
-      label: "neutral base pipeline",
-      layout: mainPipelineLayout,
-      shaderModule: neutralModule,
-      vertexBuffers: fullVertexBuffers,
-      fragmentTargets: sceneTargets,
-      cullMode: "none",
-      depthStencil: {
-        format: this.depthFormat,
-        depthWriteEnabled: true,
-        depthCompare: this.depthAhead,
-      },
-    })
+    const neutralModule = this.cachedShaderModule(neutral.wgsl, "neutral base (default graph)")
+    this.initRenderPipeline(
+      this.renderPipelineDesc({
+        label: "neutral base pipeline",
+        layout: mainPipelineLayout,
+        shaderModule: neutralModule,
+        vertexBuffers: materialVertexBuffers,
+        fragmentTargets: sceneTargets,
+        cullMode: "none",
+        depthStencil: {
+          format: this.depthFormat,
+          depthWriteEnabled: true,
+          depthCompare: this.depthAhead,
+        },
+      }),
+      (p) => (this.neutralPipeline = p),
+      true,
+    )
     // Depth-write-off twin for transparent-bucket draws (see pipelineForDrawCall).
-    this.neutralPipelineNoDepthWrite = this.createRenderPipeline({
-      label: "neutral base pipeline (no depth write)",
-      layout: mainPipelineLayout,
-      shaderModule: neutralModule,
-      vertexBuffers: fullVertexBuffers,
-      fragmentTargets: sceneTargets,
-      cullMode: "none",
-      depthStencil: {
-        format: this.depthFormat,
-        depthWriteEnabled: false,
-        depthCompare: this.depthAhead,
-      },
-    })
+    this.initRenderPipeline(
+      this.renderPipelineDesc({
+        label: "neutral base pipeline (no depth write)",
+        layout: mainPipelineLayout,
+        shaderModule: neutralModule,
+        vertexBuffers: materialVertexBuffers,
+        fragmentTargets: sceneTargets,
+        cullMode: "none",
+        depthStencil: {
+          format: this.depthFormat,
+          depthWriteEnabled: false,
+          depthCompare: this.depthAhead,
+        },
+      }),
+      (p) => (this.neutralPipelineNoDepthWrite = p),
+      true,
+    )
     // Depth-only prepass for transparent draws (see depth-prepass.ts): writes the
     // fabric's depth AFTER its color blended, so outlines drawn later are
     // occluded behind it. Color targets kept for pass compatibility, writeMask 0.
@@ -7979,51 +8104,63 @@ export class Engine {
         depthCompare: this.depthAhead,
       },
     }
-    this.depthPrepassPipeline = this.createModelPipeline({
-      label: "opaque depth prepass",
-      ...prepassDesc,
-      fragment: {
-        module: prepassModule,
-        entryPoint: "fs",
-        targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+    this.initRenderPipeline(
+      {
+        label: "opaque depth prepass",
+        ...prepassDesc,
+        fragment: {
+          module: prepassModule,
+          entryPoint: "fs",
+          targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+        },
       },
-    })
+      (p) => (this.depthPrepassPipeline = p),
+      true,
+    )
     // The SOLID prime: same module, cutoff forced to exactly 1.0. Only texels
     // whose blend ignores the destination may pre-claim depth in the
     // transparent phase — see the override's note in depth-prepass.ts.
-    this.solidPrepassPipeline = this.createModelPipeline({
-      label: "transparent solid prepass",
-      ...prepassDesc,
-      fragment: {
-        module: prepassModule,
-        entryPoint: "fs",
-        constants: { CUTOFF: 1.0 },
-        targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+    this.initRenderPipeline(
+      {
+        label: "transparent solid prepass",
+        ...prepassDesc,
+        fragment: {
+          module: prepassModule,
+          entryPoint: "fs",
+          constants: { CUTOFF: 1.0 },
+          targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+        },
       },
-    })
+      (p) => (this.solidPrepassPipeline = p),
+      true,
+    )
     // The HAIR prime: solid texels only, and stencil-fenced off the eye
     // silhouette. It records after the non-hair opaque draws, so the eye has
     // already written its stencil — not-equal here is what keeps the primed
     // hair depth from ever claiming the pixels the see-through-hair pass needs
     // the eye to survive on. (Bundle draws use the PASS's stencil reference;
     // only pipeline/bind/vertex state resets across executeBundles.)
-    this.hairPrimePipeline = this.createModelPipeline({
-      label: "hair depth prime",
-      ...prepassDesc,
-      depthStencil: {
-        ...prepassDesc.depthStencil,
-        stencilFront: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
-        stencilBack: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
-        stencilReadMask: 0xff,
-        stencilWriteMask: 0,
-      },
-      fragment: {
-        module: prepassModule,
-        entryPoint: "fs",
-        constants: { CUTOFF: 1.0 },
-        targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+    this.initRenderPipeline(
+      {
+        label: "hair depth prime",
+        ...prepassDesc,
+        depthStencil: {
+          ...prepassDesc.depthStencil,
+          stencilFront: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+          stencilBack: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+          stencilReadMask: 0xff,
+          stencilWriteMask: 0,
+        },
+        fragment: {
+          module: prepassModule,
+          entryPoint: "fs",
+          constants: { CUTOFF: 1.0 },
+          targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+        },
       },
-    })
+      (p) => (this.hairPrimePipeline = p),
+      true,
+    )
 
     // The matrices, then one vec4: the caster sphere, which effects' rzShadow
     // tests before any tap. The materials and the ground bind the matrices only.
@@ -8050,28 +8187,31 @@ export class Engine {
       label: "shadow depth",
       code: SHADOW_DEPTH_SHADER_WGSL,
     })
-    this.shadowDepthPipeline = this.device.createRenderPipeline({
-      label: "shadow depth pipeline",
-      // Group 1 is the main pass's per-material layout so each shadow draw can
-      // rebind the draw call's existing material bind group for the alpha test.
-      layout: this.device.createPipelineLayout({
-        bindGroupLayouts: [shadowBindGroupLayout, this.mainPerMaterialBindGroupLayout],
-      }),
-      vertex: { module: shadowShader, entryPoint: "vs", buffers: fullVertexBuffers as GPUVertexBufferLayout[] },
-      fragment: { module: shadowShader, entryPoint: "fs", targets: [] },
-      primitive: { cullMode: "none" },
-      depthStencil: {
-        format: Engine.SHADOW_DEPTH_FORMAT,
-        depthWriteEnabled: true,
-        depthCompare: "less-equal",
-        // The shadow map keeps the NON-reversed convention (orthographicLh maps
-        // [0,1] with far = 1, and this pass never flipped) — so this bias must
-        // NOT follow reversedZ. It is the camera-pass biases that flip.
-        depthBias: 2,
-        depthBiasSlopeScale: 1.5,
-        depthBiasClamp: 0,
+    this.initRenderPipeline(
+      {
+        label: "shadow depth pipeline",
+        // Group 1 is the main pass's per-material layout so each shadow draw can
+        // rebind the draw call's existing material bind group for the alpha test.
+        layout: this.device.createPipelineLayout({
+          bindGroupLayouts: [shadowBindGroupLayout, this.mainPerMaterialBindGroupLayout],
+        }),
+        vertex: { module: shadowShader, entryPoint: "vs", buffers: fullVertexBuffers as GPUVertexBufferLayout[] },
+        fragment: { module: shadowShader, entryPoint: "fs", targets: [] },
+        primitive: { cullMode: "none" },
+        depthStencil: {
+          format: Engine.SHADOW_DEPTH_FORMAT,
+          depthWriteEnabled: true,
+          depthCompare: "less-equal",
+          // The shadow map keeps the NON-reversed convention (orthographicLh maps
+          // [0,1] with far = 1, and this pass never flipped) — so this bias must
+          // NOT follow reversedZ. It is the camera-pass biases that flip.
+          depthBias: 2,
+          depthBiasSlopeScale: 1.5,
+          depthBiasClamp: 0,
+        },
       },
-    })
+      (p) => (this.shadowDepthPipeline = p),
+    )
     this.shadowComparisonSampler = this.device.createSampler({
       compare: "less",
       magFilter: "linear",
@@ -8104,16 +8244,24 @@ export class Engine {
     })
 
     // One-shot bake of Blender EEVEE's combined BRDF LUT (DFG + LTC packed rgba8unorm).
-    this.bakeBrdfLut()
     this.bakeGroundNoise()
-    this.agxFallbackTexture = this.device.createTexture({
-      label: "AgX LUT fallback",
-      size: [1, 1, 1],
-      dimension: "3d",
-      format: "rgb10a2unorm",
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-    })
-    void this.loadAgxLut()
+    // The mipmap blit for the formats model textures arrive in, built here so
+    // the first texture of the first model does not compile it synchronously
+    // in the middle of a load (generateMipmaps builds any other on demand).
+    {
+      const mipModule = this.device.createShaderModule({ label: "mipmap blit", code: MIPMAP_BLIT_SHADER_WGSL })
+      for (const format of ["rgba8unorm", "rgba8unorm-srgb"] as const)
+        this.initRenderPipeline(
+          {
+            label: `mipmap blit pipeline (${format})`,
+            layout: "auto",
+            vertex: { module: mipModule, entryPoint: "vs" },
+            fragment: { module: mipModule, entryPoint: "fs", targets: [{ format }] },
+            primitive: { topology: "triangle-list" },
+          },
+          (p) => this.mipBlitPipelines.set(format, p),
+        )
+    }
     this.stageGradeFallback = this.device.createTexture({
       label: "stage grade fallback",
       size: [1, 1, 1],
@@ -8122,7 +8270,6 @@ export class Engine {
       usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
     })
     this.uploadStageGrade()
-    this.bakeFilmicLut()
 
     // BEFORE the bind group below, which binds it. Full size from the start:
     // every material pipeline binds this, so sizing it to the light count would
@@ -8153,6 +8300,48 @@ export class Engine {
       usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
     })
     this.fallbackEquirectView = this.fallbackEquirectTexture.createView()
+    // The reflection probe's resources, bound from the first frame: the cube
+    // (empty and switched off until a stage is captured), its stand-in and the
+    // uniforms. Before the per-frame groups, which bind all of them.
+    this.probeTexture = this.device.createTexture({
+      label: "reflection probe",
+      size: [PROBE_SIZE, PROBE_SIZE, 6],
+      format: "rgba16float",
+      mipLevelCount: PROBE_LEVELS,
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+    })
+    this.probeView = this.probeTexture.createView({ dimension: "cube" })
+    this.probeFallbackView = this.device
+      .createTexture({
+        label: "reflection probe stand-in",
+        size: [1, 1, 6],
+        format: "rgba16float",
+        usage: GPUTextureUsage.TEXTURE_BINDING,
+      })
+      .createView({ dimension: "cube" })
+    this.cookieTexture = this.device.createTexture({
+      label: "light cookies (none yet)",
+      size: [1, 1, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+    })
+    this.device.queue.writeTexture({ texture: this.cookieTexture }, new Uint8Array([255, 255, 255, 255]), { bytesPerRow: 4 }, [1, 1, 1])
+    this.cookieView = this.cookieTexture.createView({ dimension: "2d-array" })
+    this.probeUniformBuffer = this.device.createBuffer({
+      label: "reflection probe uniforms",
+      size: 48,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+    this.probeOffBuffer = this.device.createBuffer({
+      label: "reflection probe uniforms (off)",
+      size: 48,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+    this.probeCameraBuffer = this.device.createBuffer({
+      label: "reflection probe capture camera",
+      size: 40 * 4,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
 
     // Zero-filled = zero lines, which every accessor answers gracefully.
     this.lyricsBuffer = this.device.createBuffer({
@@ -8200,6 +8389,8 @@ export class Engine {
         { binding: 13, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
         // The mirror's plane, and whether this draw is inside the mirror pass.
         { binding: 14, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+        // The spot lamps' cookies — the floor takes their patterns too.
+        { binding: 15, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "2d-array" } },
       ],
     })
     this.groundShadowPipelineDesc = {
@@ -8213,7 +8404,10 @@ export class Engine {
       cullMode: "back",
       depthStencil: { format: this.depthFormat, depthWriteEnabled: true, depthCompare: this.depthAhead },
     }
-    this.groundShadowPipeline = this.buildGroundPipeline(false)
+    this.initRenderPipeline(
+      this.renderPipelineDesc(this.groundPipelineConfig(false)),
+      (p) => (this.groundShadowPipeline = p),
+    )
 
     // Outline: group 0 = per-frame (camera), group 1 = per-instance (skinMats), group 2 = per-material (edge uniforms)
     this.outlinePerFrameBindGroupLayout = this.device.createBindGroupLayout({
@@ -8282,7 +8476,12 @@ export class Engine {
       label: "outline pipeline",
       layout: outlinePipelineLayout,
       shaderModule: outlineShaderModule,
-      vertexBuffers: outlineVertexBuffers,
+      // The selection mask's streams plus the hull's own: smoothed normal and
+      // PMX edge scale (ModelInstance.outlineVertexBuffer).
+      vertexBuffers: [
+        ...outlineVertexBuffers,
+        { arrayStride: 4 * 4, attributes: [{ shaderLocation: 5, offset: 0, format: "float32x4" }] },
+      ],
       fragmentTargets: sceneTargetsFor("outline", this.sceneFormats),
       cullMode: "back",
       depthStencil: {
@@ -8316,12 +8515,16 @@ export class Engine {
         stencilWriteMask: 0,
       },
     }
-    this.outlinePipeline = this.createRenderPipeline(outlineDesc)
-    this.outlineMirrorPipeline = this.createRenderPipeline({
-      ...outlineDesc,
-      label: "outline pipeline (mirror)",
-      cullMode: "front",
-    })
+    this.initRenderPipeline(this.renderPipelineDesc(outlineDesc), (p) => (this.outlinePipeline = p), true)
+    this.initRenderPipeline(
+      this.renderPipelineDesc({
+        ...outlineDesc,
+        label: "outline pipeline (mirror)",
+        cullMode: "front",
+      }),
+      (p) => (this.outlineMirrorPipeline = p),
+      true,
+    )
 
     // ─── Selection overlay (screen-space edge-detect on a per-material mask) ───
     // Reuses outline camera + main skinMats bind group layouts. No group 2 (no per-mat uniform).
@@ -8333,19 +8536,22 @@ export class Engine {
       label: "selection mask shader",
       code: SELECTION_MASK_SHADER_WGSL,
     })
-    this.selectionMaskPipeline = this.device.createRenderPipeline({
-      label: "selection mask pipeline",
-      layout: selectionMaskPipelineLayout,
-      vertex: { module: selectionMaskShaderModule, entryPoint: "vs", buffers: outlineVertexBuffers },
-      fragment: {
-        module: selectionMaskShaderModule,
-        entryPoint: "fs",
-        targets: [{ format: "r8unorm" }],
+    this.initRenderPipeline(
+      {
+        label: "selection mask pipeline",
+        layout: selectionMaskPipelineLayout,
+        vertex: { module: selectionMaskShaderModule, entryPoint: "vs", buffers: outlineVertexBuffers },
+        fragment: {
+          module: selectionMaskShaderModule,
+          entryPoint: "fs",
+          targets: [{ format: "r8unorm" }],
+        },
+        primitive: { cullMode: "none" },
+        // Single-sample, no depth (depth-always via not attaching a depth buffer at all).
+        multisample: { count: 1 },
       },
-      primitive: { cullMode: "none" },
-      // Single-sample, no depth (depth-always via not attaching a depth buffer at all).
-      multisample: { count: 1 },
-    })
+      (p) => (this.selectionMaskPipeline = p),
+    )
 
     this.selectionEdgeBindGroupLayout = this.device.createBindGroupLayout({
       label: "selection edge bind group layout",
@@ -8363,26 +8569,29 @@ export class Engine {
       label: "selection edge shader",
       code: SELECTION_EDGE_SHADER_WGSL,
     })
-    this.selectionEdgePipeline = this.device.createRenderPipeline({
-      label: "selection edge pipeline",
-      layout: selectionEdgePipelineLayout,
-      vertex: { module: selectionEdgeShaderModule, entryPoint: "vs" },
-      fragment: {
-        module: selectionEdgeShaderModule,
-        entryPoint: "fs",
-        targets: [
-          {
-            format: this.presentationFormat,
-            blend: {
-              color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
-              alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+    this.initRenderPipeline(
+      {
+        label: "selection edge pipeline",
+        layout: selectionEdgePipelineLayout,
+        vertex: { module: selectionEdgeShaderModule, entryPoint: "vs" },
+        fragment: {
+          module: selectionEdgeShaderModule,
+          entryPoint: "fs",
+          targets: [
+            {
+              format: this.presentationFormat,
+              blend: {
+                color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
+                alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+              },
             },
-          },
-        ],
+          ],
+        },
+        primitive: { topology: "triangle-list" },
+        multisample: { count: 1 },
       },
-      primitive: { topology: "triangle-list" },
-      multisample: { count: 1 },
-    })
+      (p) => (this.selectionEdgePipeline = p),
+    )
     this.selectionSampler = this.device.createSampler({
       label: "selection sampler",
       magFilter: "linear",
@@ -8402,10 +8611,7 @@ export class Engine {
     // ─── Editor overlays (instanced wireframe primitives) ────────────
     this.setupOverlay()
 
-    // ─── Bloom (EEVEE 3.6 pyramid): blit(Karis prefilter) → 13-tap downsamples → 9-tap tent upsamples ───
-    // Mirrors source/blender/draw/engines/eevee/shaders/effect_bloom_frag.glsl.
-    // Firefly suppression lives in the blit (Karis luminance-weighted 4-tap average). A single-pass
-    // Gaussian cannot reproduce this — hot pixels dominate and produce the sparkle halo.
+    // ─── Bloom: Aether Gazer's chain (prefilter → Gaussian down chain → scatter up chain) ───
     this.bloomSampler = this.device.createSampler({
       label: "bloom sampler",
       magFilter: "linear",
@@ -8413,88 +8619,26 @@ export class Engine {
       addressModeU: "clamp-to-edge",
       addressModeV: "clamp-to-edge",
     })
-    this.bloomBlitUniformBuffer = this.device.createBuffer({
-      label: "bloom blit uniforms",
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    })
-    this.bloomUpsampleUniformBuffer = this.device.createBuffer({
-      label: "bloom upsample uniforms",
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    })
-
-    this.bloomBlitBindGroupLayout = this.device.createBindGroupLayout({
-      label: "bloom blit layout",
+    this.bloomPrefilterBindGroupLayout = this.device.createBindGroupLayout({
+      label: "bloom prefilter layout",
       entries: [
         { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "unfilterable-float" } },
         { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
         { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "unfilterable-float" } },
       ],
     })
-    this.bloomDownsampleBindGroupLayout = this.device.createBindGroupLayout({
-      label: "bloom downsample layout",
+    this.bloomBlurBindGroupLayout = this.device.createBindGroupLayout({
+      label: "bloom blur layout",
       entries: [
         { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
         { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
       ],
     })
-    this.bloomUpsampleBindGroupLayout = this.device.createBindGroupLayout({
-      label: "bloom upsample layout",
-      entries: [
-        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // coarser-mip accumulator
-        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // matching downsample mip (base add)
-        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
-        { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
-      ],
-    })
-
-    const bloomBlitShader = this.device.createShaderModule({
-      label: "bloom blit (Karis prefilter)",
-      code: BLOOM_BLIT_SHADER_WGSL,
-    })
+    this.ensureBloomPipelines()
 
-    const bloomDownsampleShader = this.device.createShaderModule({
-      label: "bloom downsample 13-tap",
-      code: BLOOM_DOWNSAMPLE_SHADER_WGSL,
-    })
-
-    const bloomUpsampleShader = this.device.createShaderModule({
-      label: "bloom upsample 9-tap tent",
-      code: BLOOM_UPSAMPLE_SHADER_WGSL,
-    })
-
-    const bloomBlitLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bloomBlitBindGroupLayout] })
-    const bloomDownLayout = this.device.createPipelineLayout({
-      bindGroupLayouts: [this.bloomDownsampleBindGroupLayout],
-    })
-    const bloomUpLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bloomUpsampleBindGroupLayout] })
-
-    this.bloomBlitPipeline = this.device.createRenderPipeline({
-      label: "bloom blit pipeline",
-      layout: bloomBlitLayout,
-      vertex: { module: bloomBlitShader, entryPoint: "vs" },
-      fragment: { module: bloomBlitShader, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
-      primitive: { topology: "triangle-list" },
-    })
-    this.bloomDownsamplePipeline = this.device.createRenderPipeline({
-      label: "bloom downsample pipeline",
-      layout: bloomDownLayout,
-      vertex: { module: bloomDownsampleShader, entryPoint: "vs" },
-      fragment: { module: bloomDownsampleShader, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
-      primitive: { topology: "triangle-list" },
-    })
-    this.bloomUpsamplePipeline = this.device.createRenderPipeline({
-      label: "bloom upsample pipeline",
-      layout: bloomUpLayout,
-      vertex: { module: bloomUpsampleShader, entryPoint: "vs" },
-      fragment: { module: bloomUpsampleShader, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
-      primitive: { topology: "triangle-list" },
-    })
-
-    // ─── Composite: HDR + bloom → Filmic → swapchain (premultiplied) ───
-    // Bloom color/intensity applied HERE (pyramid is pure energy; tint belongs to the combine step,
-    // mirroring EEVEE where bloom color/intensity are combine-stage params, not prefilter).
+    // ─── Composite: HDR + bloom → view transform → swapchain (premultiplied) ───
+    // Bloom color/intensity applied HERE: the chain is pure energy, tint and
+    // strength belong to the combine step.
     this.compositeUniformBuffer = this.device.createBuffer({
       label: "composite view uniforms",
       // 15 × vec4f: (exposure, invGamma, _, _) · (bloom tint, intensity) ·
@@ -8536,8 +8680,6 @@ export class Engine {
         // Aux mask/alpha texture — composite reads .g to reconstruct the alpha that
         // used to live in the HDR target before the rg11b10ufloat switch.
         { binding: 4, visibility: GPUShaderStage.FRAGMENT, texture: {} },
-        // Filmic tone LUT (r16float, filterable) — sampled with the binding-2 sampler.
-        { binding: 5, visibility: GPUShaderStage.FRAGMENT, texture: {} },
         // 360 backdrop equirect (PhotoDome-style skybox) — 1×1 fallback when unset.
         { binding: 6, visibility: GPUShaderStage.FRAGMENT, texture: {} },
         // User background-effect params — dummy buffer when no effect is set. The
@@ -8552,9 +8694,6 @@ export class Engine {
           texture: { sampleType: "depth", viewDimension: "2d", multisampled: true },
         },
         { binding: 9, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
-        // AgX's 57³ cube. Decompressed and uploaded off the critical path, so a
-        // 1×1×1 stand-in keeps the bind group valid until it arrives.
-        { binding: 10, visibility: GPUShaderStage.FRAGMENT, texture: { viewDimension: "3d" } },
         // The scene's own grade cube (setStageGrade) — 1×1×1 stand-in while it
         // has none, which the flag bit keeps from ever being sampled.
         { binding: 12, visibility: GPUShaderStage.FRAGMENT, texture: { viewDimension: "3d" } },
@@ -8580,12 +8719,14 @@ export class Engine {
     this.compositePipelineLayout = this.device.createPipelineLayout({
       bindGroupLayouts: [this.compositeBindGroupLayout],
     })
-    const compositeShader = this.device.createShaderModule({
-      label: "composite shader",
-      code: buildCompositeShader(null),
-    })
-    this.compositePipelineIdentity = this.makeCompositePipeline(compositeShader, false, "composite pipeline (gamma=1)")
-    this.compositePipelineGamma = this.makeCompositePipeline(compositeShader, true, "composite pipeline (gamma!=1)")
+    // The same pair setEffects asks for with no field mounts, so an install
+    // that adds none finds it built.
+    this.initPipelineJobs?.push(
+      this.compositePipelines(false, false).then(([identity, gamma]) => {
+        this.compositePipelineIdentity = identity
+        this.compositePipelineGamma = gamma
+      }),
+    )
 
     // GPU vertex-morph compute pipeline (shared by all models; per-model bind groups).
     // Bindings: 0-4 read-only storage (base pos, CSR rowStart/colMorph/colOffset, weights),
@@ -8603,14 +8744,17 @@ export class Engine {
         { binding: 6, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
       ],
     })
-    this.morphComputePipeline = this.device.createComputePipeline({
-      label: "morph compute pipeline",
-      layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.morphComputeBindGroupLayout] }),
-      compute: {
-        module: this.device.createShaderModule({ label: "morph compute shader", code: MORPH_COMPUTE_WGSL }),
-        entryPoint: "cs",
+    this.initComputePipeline(
+      {
+        label: "morph compute pipeline",
+        layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.morphComputeBindGroupLayout] }),
+        compute: {
+          module: this.device.createShaderModule({ label: "morph compute shader", code: MORPH_COMPUTE_WGSL }),
+          entryPoint: "cs",
+        },
       },
-    })
+      (p) => (this.morphComputePipeline = p),
+    )
 
     // GPU frustum cull. One pipeline for the whole scene; the bind group is rebuilt
     // with the buffers whenever the draw list changes. See shaders/passes/cull.ts.
@@ -8631,20 +8775,26 @@ export class Engine {
     // encoder it is set on, so a WGSL slip here would take the whole frame down —
     // every pass, every model, an unrelated-looking cascade of style-group and
     // effect failures. Catching it turns that into "culling is off".
-    this.device.pushErrorScope("validation")
-    this.cullPipeline = this.device.createComputePipeline({
-      label: "cull pipeline",
-      layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.cullBindGroupLayout] }),
-      compute: {
-        module: this.device.createShaderModule({ label: "cull compute shader", code: CULL_COMPUTE_WGSL }),
-        entryPoint: "cs",
-      },
-    })
-    void this.device.popErrorScope().then((err) => {
-      if (!err) return
-      console.error(`[cull] pipeline failed to compile — frustum culling disabled:\n${err.message}`)
-      this.cullPipeline = null
-    })
+    // Async, so a failure arrives as the rejection rather than a scoped error.
+    const cullBuild = this.device
+      .createComputePipelineAsync({
+        label: "cull pipeline",
+        layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.cullBindGroupLayout] }),
+        compute: {
+          module: this.device.createShaderModule({ label: "cull compute shader", code: CULL_COMPUTE_WGSL }),
+          entryPoint: "cs",
+        },
+      })
+      .then(
+        (p) => {
+          this.cullPipeline = p
+        },
+        (err) => {
+          console.error(`[cull] pipeline failed to compile — frustum culling disabled:\n${(err as Error).message}`)
+          this.cullPipeline = null
+        },
+      )
+    this.initPipelineJobs?.push(cullBuild)
 
     this.bloomPassDescriptor = {
       label: "bloom pass",
@@ -8691,21 +8841,24 @@ export class Engine {
       entries: [{ binding: 0, resource: { buffer: this.cameraUniformBuffer } }],
     })
 
-    this.pickPipeline = this.device.createRenderPipeline({
-      label: "pick pipeline",
-      layout: pickPipelineLayout,
-      vertex: { module: pickShaderModule, buffers: fullVertexBuffers },
-      fragment: {
-        module: pickShaderModule,
-        targets: [{ format: "rgba8unorm" }],
-      },
-      primitive: { cullMode: "none" },
-      depthStencil: {
-        format: "depth24plus",
-        depthWriteEnabled: true,
-        depthCompare: this.depthAhead,
+    this.initRenderPipeline(
+      {
+        label: "pick pipeline",
+        layout: pickPipelineLayout,
+        vertex: { module: pickShaderModule, buffers: fullVertexBuffers },
+        fragment: {
+          module: pickShaderModule,
+          targets: [{ format: "rgba8unorm" }],
+        },
+        primitive: { cullMode: "none" },
+        depthStencil: {
+          format: "depth24plus",
+          depthWriteEnabled: true,
+          depthCompare: this.depthAhead,
+        },
       },
-    })
+      (p) => (this.pickPipeline = p),
+    )
 
     this.pickReadbackBuffer = this.device.createBuffer({
       label: "pick readback",
@@ -8782,6 +8935,9 @@ export class Engine {
     // handleResize — so the size asked for before the device existed is applied
     // in full the moment there is something to apply it to.
     if (!this.device) return
+    // Nor while init's pipelines are still compiling: init ends with its own
+    // handleResize, which applies whatever was asked for meanwhile.
+    if (this.initPipelineJobs) return
     // Fixed override (offline/video rendering) wins; otherwise track CSS size × dpr.
     const dpr = window.devicePixelRatio || 1
     const width = this.fixedRenderSize ? this.fixedRenderSize.width : Math.floor(this.canvas.clientWidth * dpr)
@@ -9006,38 +9162,6 @@ export class Engine {
       this.buildGroundBindGroup()
       this.buildMirrorSurfaceBindGroup()
 
-      // Bloom pyramid: mip 0 is half-res, each subsequent mip halves again.
-      // Mip count chosen so the coarsest mip is ≥4 px on the short side, capped at BLOOM_MAX_LEVELS.
-      const bw = Math.max(1, Math.floor(width / 2))
-      const bh = Math.max(1, Math.floor(height / 2))
-      const shortSide = Math.max(1, Math.min(bw, bh))
-      this.bloomMipCount = Math.max(1, Math.min(Engine.BLOOM_MAX_LEVELS, Math.floor(Math.log2(shortSide)) - 1))
-      this.bloomDownTexture?.destroy()
-      this.bloomDownTexture = this.device.createTexture({
-        label: "bloom down pyramid",
-        size: [bw, bh],
-        mipLevelCount: this.bloomMipCount,
-        format: this.hdrFormat,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      })
-      this.bloomUpTexture?.destroy()
-      this.bloomUpTexture = this.device.createTexture({
-        label: "bloom up pyramid",
-        size: [bw, bh],
-        mipLevelCount: Math.max(1, this.bloomMipCount - 1),
-        format: this.hdrFormat,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      })
-      this.bloomDownMipViews = []
-      for (let i = 0; i < this.bloomMipCount; i++) {
-        this.bloomDownMipViews.push(this.bloomDownTexture.createView({ baseMipLevel: i, mipLevelCount: 1 }))
-      }
-      this.bloomUpMipViews = []
-      const upLevels = Math.max(1, this.bloomMipCount - 1)
-      for (let i = 0; i < upLevels; i++) {
-        this.bloomUpMipViews.push(this.bloomUpTexture.createView({ baseMipLevel: i, mipLevelCount: 1 }))
-      }
-
       this.depthTexture?.destroy()
       this.depthTexture = this.device.createTexture({
         label: "depth texture",
@@ -9157,54 +9281,10 @@ export class Engine {
         ],
       }
 
-      this.writeBloomUniforms()
-
-      if (this.compositeBindGroupLayout && this.bloomBlitBindGroupLayout) {
-        // Blit: reads HDR resolve texture (full-res), writes bloomDown mip 0.
-        this.bloomBlitBindGroup = this.device.createBindGroup({
-          label: "bloom blit bind group",
-          layout: this.bloomBlitBindGroupLayout,
-          entries: [
-            { binding: 0, resource: this.hdrResolveTexture.createView() },
-            { binding: 1, resource: { buffer: this.bloomBlitUniformBuffer } },
-            { binding: 2, resource: this.maskResolveView },
-          ],
-        })
-        // Downsample[i] reads bloomDown mip (i-1), writes bloomDown mip i. i ∈ [1..N-1].
-        this.bloomDownsampleBindGroups = []
-        for (let i = 1; i < this.bloomMipCount; i++) {
-          this.bloomDownsampleBindGroups.push(
-            this.device.createBindGroup({
-              label: `bloom downsample ${i}`,
-              layout: this.bloomDownsampleBindGroupLayout,
-              entries: [
-                { binding: 0, resource: this.bloomDownMipViews[i - 1] },
-                { binding: 1, resource: this.bloomSampler },
-              ],
-            }),
-          )
-        }
-        // Upsample[i] writes bloomUp mip i. Coarsest step reads bloomDown[N-1] (no prior up yet);
-        // subsequent steps read bloomUp[i+1]. Both read bloomDown[i] as the base (additive combine).
-        this.bloomUpsampleBindGroups = []
-        const topIdx = this.bloomMipCount - 2
-        for (let i = topIdx; i >= 0; i--) {
-          const srcView = i === topIdx ? this.bloomDownMipViews[this.bloomMipCount - 1] : this.bloomUpMipViews[i + 1]
-          this.bloomUpsampleBindGroups.push(
-            this.device.createBindGroup({
-              label: `bloom upsample ${i}`,
-              layout: this.bloomUpsampleBindGroupLayout,
-              entries: [
-                { binding: 0, resource: srcView },
-                { binding: 1, resource: this.bloomDownMipViews[i] },
-                { binding: 2, resource: this.bloomSampler },
-                { binding: 3, resource: { buffer: this.bloomUpsampleUniformBuffer } },
-              ],
-            }),
-          )
-        }
-        // Composite reads bloomUp mip 0 (full pyramid collapsed); fallback to bloomDown mip 0 if no upsample level.
-        this.compositeBloomView = this.bloomMipCount > 1 ? this.bloomUpMipViews[0] : this.bloomDownMipViews[0]
+      if (this.compositeBindGroupLayout && this.bloomPrefilterBindGroupLayout) {
+        this.buildBloomTargets()
+        // The composite reads the finished chain: up[0], or down[0] when there is one level.
+        this.compositeBloomView = this.bloomLevels > 1 ? this.bloomUpViews[0] : this.bloomDownViews[0]
         this.rebuildCompositeBindGroup()
       }
 
@@ -9479,17 +9559,20 @@ export class Engine {
       },
       multisample: { count: Engine.OVERLAY_SAMPLE_COUNT },
     } satisfies GPURenderPipelineDescriptor
-    this.overlayPipeline = this.device.createRenderPipeline(overlayPipelineDescriptor)
+    this.initRenderPipeline(overlayPipelineDescriptor, (p) => (this.overlayPipeline = p))
 
     // The solid volumes: the same shader and layout, with no depth write and no
     // culling. A translucent body must not hide the rig behind it, and you have
     // to see its far wall for it to read as a volume rather than a silhouette.
-    this.overlaySolidPipeline = this.device.createRenderPipeline({
-      ...overlayPipelineDescriptor,
-      label: "overlay solid pipeline",
-      primitive: { topology: "triangle-list", cullMode: "none" },
-      depthStencil: { format: "depth24plus", depthWriteEnabled: false, depthCompare: "always" },
-    })
+    this.initRenderPipeline(
+      {
+        ...overlayPipelineDescriptor,
+        label: "overlay solid pipeline",
+        primitive: { topology: "triangle-list", cullMode: "none" },
+        depthStencil: { format: "depth24plus", depthWriteEnabled: false, depthCompare: "always" },
+      },
+      (p) => (this.overlaySolidPipeline = p),
+    )
 
     const compositeShader = this.device.createShaderModule({
       label: "overlay composite shader",
@@ -9580,34 +9663,37 @@ export class Engine {
       ],
     })
     const wireShader = this.device.createShaderModule({ label: "wireframe shader", code: WIREFRAME_SHADER_WGSL })
-    this.wireframePipeline = this.device.createRenderPipeline({
-      label: "wireframe pipeline",
-      layout: this.device.createPipelineLayout({
-        label: "wireframe pipeline layout",
-        bindGroupLayouts: [wireBg0, this.wireframeSkinLayout],
-      }),
-      // No vertex stream: an edge quad's corners come from two different model
-      // vertices, so the mesh is read through storage instead.
-      vertex: { module: wireShader, entryPoint: "vs" },
-      fragment: {
-        module: wireShader,
-        entryPoint: "fs",
-        targets: [
-          {
-            format: this.presentationFormat,
-            blend: {
-              color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
-              alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+    this.initRenderPipeline(
+      {
+        label: "wireframe pipeline",
+        layout: this.device.createPipelineLayout({
+          label: "wireframe pipeline layout",
+          bindGroupLayouts: [wireBg0, this.wireframeSkinLayout],
+        }),
+        // No vertex stream: an edge quad's corners come from two different model
+        // vertices, so the mesh is read through storage instead.
+        vertex: { module: wireShader, entryPoint: "vs" },
+        fragment: {
+          module: wireShader,
+          entryPoint: "fs",
+          targets: [
+            {
+              format: this.presentationFormat,
+              blend: {
+                color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+              },
             },
-          },
-        ],
+          ],
+        },
+        primitive: { topology: "triangle-list", cullMode: "none" },
+        // Depth-TESTED but not written: the mesh is a haze the rig reads against,
+        // so a bone behind a triangle must not be punched out by it.
+        depthStencil: { format: "depth24plus", depthWriteEnabled: false, depthCompare: this.depthAhead },
+        multisample: { count: Engine.OVERLAY_SAMPLE_COUNT },
       },
-      primitive: { topology: "triangle-list", cullMode: "none" },
-      // Depth-TESTED but not written: the mesh is a haze the rig reads against,
-      // so a bone behind a triangle must not be punched out by it.
-      depthStencil: { format: "depth24plus", depthWriteEnabled: false, depthCompare: this.depthAhead },
-      multisample: { count: Engine.OVERLAY_SAMPLE_COUNT },
-    })
+      (p) => (this.wireframePipeline = p),
+    )
     // The mesh's own depth, so the wireframe can be occluded by the body it
     // belongs to. Occluded is the default everywhere — Blender's edit mode, Maya,
     // three's and Babylon's wireframe materials all depth-test, and X-ray is a
@@ -10348,37 +10434,446 @@ export class Engine {
   }
 
   /**
-   * The per-frame bind groups, the camera's and the mirror's.
-   *
-   * A METHOD rather than two literals at init, because one of their resources
-   * changes after it: the world's sky texture is swapped whenever an HDRI is
-   * installed or cleared, and a bind group holds the view it was built with.
-   * The mirror's is identical but for the camera — a reflection is the same
-   * scene lit the same way, seen from a reflected eye.
-   */
-  /**
-   * Skies this engine has replaced, kept alive rather than destroyed.
-   *
-   * NOT DESTROYED AT ALL, after three attempts that each deferred it further:
-   * one frame, then three, then "once both bind groups have rebuilt". Every one
-   * still produced "destroyed texture used in a submit" somewhere — a command
-   * buffer encoded before the swap, a rebuild that bailed on half-built
-   * resources, an engine torn down by a hot reload whose last frame is still in
-   * flight. The engine cannot see all of those, and each attempt to enumerate
-   * them found another.
-   *
-   * So the trade is taken explicitly: a replaced sky is a megabyte or two held
-   * until the page goes away, against a validation error every frame. A scene
-   * swaps its world a handful of times in a session, and the GPU frees all of
-   * it when the device does.
+   * The per-frame bind groups, the camera's and the mirror's.
+   *
+   * A METHOD rather than two literals at init, because one of their resources
+   * changes after it: the world's sky texture is swapped whenever an HDRI is
+   * installed or cleared, and a bind group holds the view it was built with.
+   * The mirror's is identical but for the camera — a reflection is the same
+   * scene lit the same way, seen from a reflected eye.
+   */
+  /**
+   * Skies this engine has replaced, kept alive rather than destroyed.
+   *
+   * NOT DESTROYED AT ALL, after three attempts that each deferred it further:
+   * one frame, then three, then "once both bind groups have rebuilt". Every one
+   * still produced "destroyed texture used in a submit" somewhere — a command
+   * buffer encoded before the swap, a rebuild that bailed on half-built
+   * resources, an engine torn down by a hot reload whose last frame is still in
+   * flight. The engine cannot see all of those, and each attempt to enumerate
+   * them found another.
+   *
+   * So the trade is taken explicitly: a replaced sky is a megabyte or two held
+   * until the page goes away, against a validation error every frame. A scene
+   * swaps its world a handful of times in a session, and the GPU frees all of
+   * it when the device does.
+   */
+  private retiredSkies: GPUTexture[] = []
+
+  /** A world was installed or cleared and the bind groups that name its texture
+   *  may not have been rebuilt yet — both rebuilds bail when their own
+   *  resources are half-built, which is exactly the moment a host swaps a sky.
+   *  Retried at the top of a frame until one of them takes. */
+  private worldBindingsDirty = false
+
+  // ─── The stage's reflection probe ───────────────────────────────────
+  //
+  // What a game bakes for every room: a cube of the stage itself, seen from
+  // its middle, prefiltered down its mips by the specular lobe, and read by
+  // every surface box-projected onto the stage's bounds — so a lacquered
+  // counter reflects the bottles behind it and a wet floor the lamps above,
+  // not a sky the room has no window onto. Captured here automatically once a
+  // stage has loaded and its looks have settled; nothing to set.
+
+  /** Drop the capture's resources, so the next capture rebinds the sky. */
+  private dropProbeCapture(): void {
+    const cap = this.probeCapture
+    if (!cap) return
+    this.probeCapture = null
+    void this.device.queue.onSubmittedWorkDone().then(() => {
+      for (const t of cap.msTargets) t.destroy()
+      cap.depth.destroy()
+      cap.color.destroy()
+      cap.aux.destroy()
+      cap.cube.destroy()
+      cap.steps.destroy()
+    })
+  }
+
+  /** Ask for a fresh capture of the stage's reflection probe. It runs at the
+   *  start of a frame once the scene has held still for a moment — asked for
+   *  by the engine itself whenever the stage or its looks change; a host may
+   *  call it after changing something the engine cannot see. */
+  captureReflectionProbe(): void {
+    if (!this.probeDirty) this.probeDirtyFrame = this.probeFrame
+    this.probeDirty = true
+  }
+
+  /** The stage's world-space bounds: every stage model's material boxes
+   *  through its placement. Null without a stage. */
+  private stageBounds(): { min: [number, number, number]; max: [number, number, number] } | null {
+    const min: [number, number, number] = [Infinity, Infinity, Infinity]
+    const max: [number, number, number] = [-Infinity, -Infinity, -Infinity]
+    const p = new Vec3(0, 0, 0)
+    let any = false
+    for (const inst of this.modelInstances.values()) {
+      if (!inst.isStage || !inst.model.visible) continue
+      const m = inst.model
+      for (const draw of inst.drawCalls) {
+        const b = draw.bounds
+        if (!b || b.length < 6 || !(b[0] <= b[3])) continue
+        // The eight corners of the material's model-space box, placed.
+        for (let k = 0; k < 8; k++) {
+          p.setXYZ((k & 1 ? b[3] : b[0]) * m.scale, (k & 2 ? b[4] : b[1]) * m.scale, (k & 4 ? b[5] : b[2]) * m.scale)
+          Quat.rotateVecInto(m.rotation, p, p)
+          const w = [p.x + m.position.x, p.y + m.position.y, p.z + m.position.z]
+          for (let a = 0; a < 3; a++) {
+            if (w[a] < min[a]) min[a] = w[a]
+            if (w[a] > max[a]) max[a] = w[a]
+          }
+          any = true
+        }
+      }
+    }
+    return any ? { min, max } : null
+  }
+
+  /** Run a pending capture once the scene has settled — see captureReflectionProbe. */
+  private maybeCaptureProbe(): void {
+    this.probeFrame++
+    if (!this.probeDirty || !this.probeCaptureBindGroup) return
+    if (this.probeFrame - this.probeDirtyFrame < Engine.PROBE_SETTLE_FRAMES) return
+    this.probeDirty = false
+    const bounds = this.stageBounds()
+    if (!bounds) {
+      // No stage: the probe goes dark and every reader falls back to the sky.
+      this.probeData.fill(0)
+      this.device.queue.writeBuffer(this.probeUniformBuffer, 0, this.probeData)
+      return
+    }
+    try {
+      this.renderProbe(bounds)
+    } catch (e) {
+      console.warn("[reze-engine] reflection probe capture failed:", e)
+    }
+  }
+
+  private ensureProbeCapture(): NonNullable<Engine["probeCapture"]> {
+    if (this.probeCapture) return this.probeCapture
+    const size = PROBE_CAPTURE_SIZE
+    const formats = sceneColorFormats(this.sceneFormats)
+    const msTargets = formats.map((format, i) =>
+      this.device.createTexture({
+        label: `reflection probe capture target ${i}`,
+        size: [size, size],
+        sampleCount: Engine.MULTISAMPLE_COUNT,
+        format,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+      }),
+    )
+    const depth = this.device.createTexture({
+      label: "reflection probe capture depth",
+      size: [size, size],
+      sampleCount: Engine.MULTISAMPLE_COUNT,
+      format: this.depthFormat,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT,
+    })
+    const layered = (label: string, format: GPUTextureFormat) =>
+      this.device.createTexture({
+        label,
+        size: [size, size, 6],
+        format,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+      })
+    // The resolves take the scene pass's own formats: colour and coverage.
+    const color = layered("reflection probe capture colour", formats[0])
+    const aux = layered("reflection probe capture coverage", formats[1])
+    const cube = this.device.createTexture({
+      label: "reflection probe capture cube",
+      size: [size, size, 6],
+      format: "rgba16float",
+      mipLevelCount: PROBE_CAPTURE_LEVELS,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    })
+    // One 256-byte slot per step: 6 composes, then the capture's mips, then
+    // the probe's levels, six faces each.
+    const slots = 6 + PROBE_CAPTURE_LEVELS * 6 + PROBE_LEVELS * 6
+    const steps = this.device.createBuffer({
+      label: "reflection probe steps",
+      size: slots * 256,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+    const composeModule = this.device.createShaderModule({ label: "reflection probe compose", code: PROBE_COMPOSE_WGSL })
+    const composePipeline = this.device.createRenderPipeline({
+      label: "reflection probe compose",
+      layout: "auto",
+      vertex: { module: composeModule, entryPoint: "vs_full" },
+      fragment: { module: composeModule, entryPoint: "fs_compose", targets: [{ format: "rgba16float" }] },
+      primitive: { topology: "triangle-list" },
+    })
+    const filterModule = this.device.createShaderModule({ label: "reflection probe filter", code: PROBE_FILTER_WGSL })
+    const filterPipeline = this.device.createRenderPipeline({
+      label: "reflection probe filter",
+      layout: "auto",
+      vertex: { module: filterModule, entryPoint: "vs_full" },
+      fragment: { module: filterModule, entryPoint: "fs_filter", targets: [{ format: "rgba16float" }] },
+      primitive: { topology: "triangle-list" },
+    })
+    const colorArray = color.createView({ dimension: "2d-array" })
+    const auxArray = aux.createView({ dimension: "2d-array" })
+    const composeLayout = composePipeline.getBindGroupLayout(0)
+    const composeGroups: GPUBindGroup[] = []
+    for (let f = 0; f < 6; f++) {
+      composeGroups.push(
+        this.device.createBindGroup({
+          label: `reflection probe compose ${f}`,
+          layout: composeLayout,
+          entries: [
+            { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+            { binding: 2, resource: this.materialSampler },
+            { binding: 8, resource: this.worldEquirectView ?? this.fallbackEquirectView },
+            { binding: 20, resource: colorArray },
+            { binding: 21, resource: auxArray },
+            { binding: 22, resource: { buffer: steps, offset: f * 256, size: 32 } },
+          ],
+        }),
+      )
+    }
+    const filterLayout = filterPipeline.getBindGroupLayout(0)
+    const cubeView = cube.createView({ dimension: "cube" })
+    const filterGroups: GPUBindGroup[] = []
+    for (let i = 0; i < PROBE_LEVELS * 6; i++) {
+      filterGroups.push(
+        this.device.createBindGroup({
+          label: `reflection probe level ${i}`,
+          layout: filterLayout,
+          entries: [
+            { binding: 0, resource: cubeView },
+            { binding: 1, resource: this.materialSampler },
+            { binding: 2, resource: { buffer: steps, offset: (6 + PROBE_CAPTURE_LEVELS * 6 + i) * 256, size: 32 } },
+          ],
+        }),
+      )
+    }
+    this.probeCapture = {
+      msTargets,
+      depth,
+      color,
+      aux,
+      cube,
+      steps,
+      composePipeline,
+      filterPipeline,
+      composeGroups,
+      filterGroups,
+    }
+    return this.probeCapture
+  }
+
+  /**
+   * Capture the probe: the stage drawn six times from one point into a 128²
+   * cube, the sky laid in behind it, a mip chain, and the GGX convolution
+   * into the 64² cube the materials read.
+   *
+   * WHERE: the middle of the stage's bounds across the floor, at about a
+   * character's chest height above the floor (y = 0 where the bounds span it,
+   * the MMD convention, else their bottom) — where a game puts the probe of a
+   * room the player stands in. The box it projects onto is the bounds.
+   *
+   * WHAT: the stage alone, in its own looks, lit by the scene's sun, lamps
+   * and sky as they stand. The cast is not in it (a baked probe never holds
+   * the characters), nor are effects.
+   */
+  private renderProbe(bounds: { min: [number, number, number]; max: [number, number, number] }): void {
+    const cap = this.ensureProbeCapture()
+    const { min, max } = bounds
+    const floor = min[1] <= 0 && max[1] >= 0 ? 0 : min[1]
+    const eye: [number, number, number] = [
+      (min[0] + max[0]) * 0.5,
+      Math.min(floor + 12, (min[1] + max[1]) * 0.5),
+      (min[2] + max[2]) * 0.5,
+    ]
+    const span = Math.hypot(max[0] - min[0], max[1] - min[1], max[2] - min[2])
+    const near = 0.25
+    const far = Math.max(span * 2, 100)
+    // Each face's forward and up, in the convention the GPU samples a cube
+    // with (see rz_face_dir in passes/probe.ts): +X, -X, +Y, -Y, +Z, -Z.
+    const faces: [number, number, number, number, number, number][] = [
+      [1, 0, 0, 0, 1, 0],
+      [-1, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, -1],
+      [0, -1, 0, 0, 0, 1],
+      [0, 0, 1, 0, 1, 0],
+      [0, 0, -1, 0, 1, 0],
+    ]
+    const cam = this.probeCameraData
+    const view = { perFrame: this.probeCaptureBindGroup!, args: "probe" as const, outlines: false }
+    const formats = sceneColorFormats(this.sceneFormats)
+    for (let f = 0; f < 6; f++) {
+      const [fx, fy, fz, ux, uy, uz] = faces[f]
+      Mat4.lookAtInto(cam.subarray(0, 16), eye[0], eye[1], eye[2], eye[0] + fx, eye[1] + fy, eye[2] + fz, ux, uy, uz)
+      if (this.reversedZ) Mat4.perspectiveInto(cam.subarray(16, 32), Math.PI / 2, 1, far, near)
+      else Mat4.perspectiveInto(cam.subarray(16, 32), Math.PI / 2, 1, near, far)
+      cam[32] = eye[0]
+      cam[33] = eye[1]
+      cam[34] = eye[2]
+      cam[35] = PROBE_CAPTURE_SIZE
+      cam[36] = this.sceneClock
+      this.device.queue.writeBuffer(this.probeCameraBuffer, 0, cam)
+      const encoder = this.device.createCommandEncoder({ label: `reflection probe face ${f}` })
+      const colorAttachments: GPURenderPassColorAttachment[] = formats.map((_, i) => ({
+        view: cap.msTargets[i].createView(),
+        resolveTarget:
+          i === 0
+            ? cap.color.createView({ dimension: "2d", baseArrayLayer: f, arrayLayerCount: 1 })
+            : i === 1
+              ? cap.aux.createView({ dimension: "2d", baseArrayLayer: f, arrayLayerCount: 1 })
+              : undefined,
+        clearValue: { r: 0, g: 0, b: 0, a: 0 },
+        loadOp: "clear",
+        storeOp: "discard",
+      }))
+      const pass = encoder.beginRenderPass({
+        label: `reflection probe face ${f}`,
+        colorAttachments,
+        depthStencilAttachment: {
+          view: cap.depth.createView(),
+          depthClearValue: this.depthClear,
+          depthLoadOp: "clear",
+          depthStoreOp: "discard",
+          stencilClearValue: 0,
+          stencilLoadOp: "clear",
+          stencilStoreOp: "discard",
+        },
+      })
+      pass.setStencilReference(Engine.STENCIL_EYE_VALUE)
+      for (const inst of this.modelInstances.values()) {
+        if (!inst.isStage || !inst.model.visible) continue
+        this.setModelDrawState(pass, inst)
+        this.drawMaterials(pass, inst, "opaque", view)
+      }
+      for (const inst of this.modelInstances.values()) {
+        if (!inst.isStage || !inst.model.visible) continue
+        this.setModelDrawState(pass, inst)
+        this.drawMaterials(pass, inst, "transparent", view)
+      }
+      pass.end()
+      this.device.queue.submit([encoder.finish()])
+    }
+
+    // The steps: compose, capture mips, then the probe's levels.
+    const steps = new ArrayBuffer((6 + PROBE_CAPTURE_LEVELS * 6 + PROBE_LEVELS * 6) * 256)
+    const put = (slot: number, face: number, lod: number, roughness: number, srcSize: number, mode: number) => {
+      const u = new Uint32Array(steps, slot * 256, 8)
+      const fl = new Float32Array(steps, slot * 256, 8)
+      u[0] = face
+      fl[1] = lod
+      fl[2] = roughness
+      fl[3] = srcSize
+      u[4] = mode
+    }
+    for (let f = 0; f < 6; f++) put(f, f, 0, 0, PROBE_CAPTURE_SIZE, 0)
+    for (let m = 0; m < PROBE_CAPTURE_LEVELS; m++)
+      for (let f = 0; f < 6; f++) put(6 + m * 6 + f, f, Math.max(m - 1, 0), 0, PROBE_CAPTURE_SIZE, 0)
+    for (let m = 0; m < PROBE_LEVELS; m++)
+      for (let f = 0; f < 6; f++)
+        // Level 0 is the capture at the probe's size: one tap of the 128²
+        // level-0 cube at a 64² texel's centre is its 2×2 average.
+        put(6 + PROBE_CAPTURE_LEVELS * 6 + m * 6 + f, f, 0, probeLevelRoughness(m), PROBE_CAPTURE_SIZE, m === 0 ? 0 : 1)
+    this.device.queue.writeBuffer(cap.steps, 0, steps)
+
+    const encoder = this.device.createCommandEncoder({ label: "reflection probe filter" })
+    const run = (target: GPUTextureView, pipeline: GPURenderPipeline, group: GPUBindGroup) => {
+      const p = encoder.beginRenderPass({ colorAttachments: [{ view: target, loadOp: "clear", storeOp: "store" }] })
+      p.setPipeline(pipeline)
+      p.setBindGroup(0, group)
+      p.draw(3)
+      p.end()
+    }
+    const face = (tex: GPUTexture, level: number, f: number) =>
+      tex.createView({ dimension: "2d", baseMipLevel: level, mipLevelCount: 1, baseArrayLayer: f, arrayLayerCount: 1 })
+    for (let f = 0; f < 6; f++) run(face(cap.cube, 0, f), cap.composePipeline, cap.composeGroups[f])
+    // Each level from the one above. The source view spans the whole chain,
+    // which a pass writing one of its levels may not bind — so the reads go
+    // through a view of the levels ABOVE the one being written.
+    for (let m = 1; m < PROBE_CAPTURE_LEVELS; m++) {
+      const above = cap.cube.createView({ dimension: "cube", baseMipLevel: 0, mipLevelCount: m })
+      for (let f = 0; f < 6; f++) {
+        const group = this.device.createBindGroup({
+          label: `reflection probe capture mip ${m}/${f}`,
+          layout: cap.filterPipeline.getBindGroupLayout(0),
+          entries: [
+            { binding: 0, resource: above },
+            { binding: 1, resource: this.materialSampler },
+            { binding: 2, resource: { buffer: cap.steps, offset: (6 + m * 6 + f) * 256, size: 32 } },
+          ],
+        })
+        run(face(cap.cube, m, f), cap.filterPipeline, group)
+      }
+    }
+    for (let m = 0; m < PROBE_LEVELS; m++)
+      for (let f = 0; f < 6; f++) run(face(this.probeTexture, m, f), cap.filterPipeline, cap.filterGroups[m * 6 + f])
+    this.device.queue.submit([encoder.finish()])
+
+    this.probeData.set([eye[0], eye[1], eye[2], 1, min[0], min[1], min[2], 1, max[0], max[1], max[2], 0])
+    this.device.queue.writeBuffer(this.probeUniformBuffer, 0, this.probeData)
+  }
+
+  /**
+   * The sky's mips, convolved with the GGX lobe each stands for — the box
+   * average the upload built is only the source. Level 0 is copied as it is
+   * (it is also what the backdrop draws); every level below it becomes the
+   * sky as a surface of that roughness reflects it (skyLevelRoughness).
    */
-  private retiredSkies: GPUTexture[] = []
-
-  /** A world was installed or cleared and the bind groups that name its texture
-   *  may not have been rebuilt yet — both rebuilds bail when their own
-   *  resources are half-built, which is exactly the moment a host swaps a sky.
-   *  Retried at the top of a frame until one of them takes. */
-  private worldBindingsDirty = false
+  private prefilterSky(source: GPUTexture, width: number, height: number, levels: number): GPUTexture {
+    if (levels <= 1) return source
+    if (!this.skyPrefilterPipeline) {
+      const module = this.device.createShaderModule({ label: "sky prefilter", code: SKY_PREFILTER_WGSL })
+      this.skyPrefilterPipeline = this.device.createRenderPipeline({
+        label: "sky prefilter",
+        layout: "auto",
+        vertex: { module, entryPoint: "vs_full" },
+        fragment: { module, entryPoint: "fs_sky", targets: [{ format: "rgba16float" }] },
+        primitive: { topology: "triangle-list" },
+      })
+    }
+    const pipeline = this.skyPrefilterPipeline
+    const out = this.device.createTexture({
+      label: "world equirect (HDR, GGX-prefiltered)",
+      size: [width, height],
+      format: "rgba16float",
+      mipLevelCount: levels,
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+    })
+    const encoder = this.device.createCommandEncoder({ label: "sky prefilter" })
+    encoder.copyTextureToTexture({ texture: source, mipLevel: 0 }, { texture: out, mipLevel: 0 }, [width, height])
+    const params = this.device.createBuffer({
+      label: "sky prefilter steps",
+      size: levels * 256,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+    const data = new Float32Array(levels * 64)
+    for (let m = 1; m < levels; m++) data.set([skyLevelRoughness(m, levels), width, height, 0], m * 64)
+    this.device.queue.writeBuffer(params, 0, data)
+    const srcView = source.createView()
+    for (let m = 1; m < levels; m++) {
+      const group = this.device.createBindGroup({
+        label: `sky prefilter ${m}`,
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: srcView },
+          { binding: 1, resource: this.materialSampler },
+          { binding: 2, resource: { buffer: params, offset: m * 256, size: 16 } },
+        ],
+      })
+      const p = encoder.beginRenderPass({
+        label: `sky prefilter ${m}`,
+        colorAttachments: [
+          { view: out.createView({ baseMipLevel: m, mipLevelCount: 1 }), loadOp: "clear", storeOp: "store" },
+        ],
+      })
+      p.setPipeline(pipeline)
+      p.setBindGroup(0, group)
+      p.draw(3)
+      p.end()
+    }
+    this.device.queue.submit([encoder.finish()])
+    // The box chain and the steps are done with once that work is: the source
+    // retires with the skies (destroyed at the next frame's start).
+    this.retiredSkies.push(source)
+    void this.device.queue.onSubmittedWorkDone().then(() => params.destroy())
+    return out
+  }
 
   /** Returns whether it actually rebuilt — see rebuildCompositeBindGroup. */
   private rebuildPerFrameBindGroups(): boolean {
@@ -10398,7 +10893,7 @@ export class Engine {
       !this.shadowLightVPBuffer ||
       !this.materialSampler ||
       !this.shadowComparisonSampler ||
-      !this.brdfLutView ||
+      !this.probeUniformBuffer ||
       !(this.worldEquirectView ?? this.fallbackEquirectView)
     ) {
       return false
@@ -10421,8 +10916,31 @@ export class Engine {
         { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
         { binding: 6, resource: { buffer: this.lightsBuffer } },
         { binding: 8, resource: env },
-        { binding: 9, resource: this.brdfLutView },
+        { binding: 9, resource: this.cookieView },
+        { binding: 10, resource: this.castShadowView },
+        { binding: 11, resource: this.probeView },
+        { binding: 12, resource: { buffer: this.probeUniformBuffer } },
+      ],
+    })
+    // The probe's own view of the scene: one cube face at a time through its
+    // capture camera, and the probe itself switched off — a material inside
+    // the capture reflects the sky, never the cube being filled.
+    this.probeCaptureBindGroup = this.device.createBindGroup({
+      label: "reflection probe capture per-frame bind group",
+      layout: this.mainPerFrameBindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: this.probeCameraBuffer } },
+        { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+        { binding: 2, resource: this.materialSampler },
+        { binding: 3, resource: this.shadowAtlasView },
+        { binding: 4, resource: this.shadowComparisonSampler },
+        { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
+        { binding: 6, resource: { buffer: this.lightsBuffer } },
+        { binding: 8, resource: env },
+        { binding: 9, resource: this.cookieView },
         { binding: 10, resource: this.castShadowView },
+        { binding: 11, resource: this.probeFallbackView },
+        { binding: 12, resource: { buffer: this.probeOffBuffer } },
       ],
     })
     this.mirrorPerFrameBindGroup = this.device.createBindGroup({
@@ -10437,8 +10955,10 @@ export class Engine {
         { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
         { binding: 6, resource: { buffer: this.lightsBuffer } },
         { binding: 8, resource: env },
-        { binding: 9, resource: this.brdfLutView },
+        { binding: 9, resource: this.cookieView },
         { binding: 10, resource: this.castShadowView },
+        { binding: 11, resource: this.probeView },
+        { binding: 12, resource: { buffer: this.probeUniformBuffer } },
       ],
     })
     return true
@@ -10500,13 +11020,13 @@ export class Engine {
     this.lightData[base + 4] = this.sun.color.x
     this.lightData[base + 5] = this.sun.color.y
     this.lightData[base + 6] = this.sun.color.z
+    // Unity's light intensity: a white sun of 1 lights albedo 1:1 at N·L = 1.
     this.lightData[base + 7] = this.sun.strength
     this.lightDataWords[DIR_LAYERS_AT + index] = this.sunLayers
     if (index >= this.lightCount) this.lightCount = index + 1
     this.updateLightBuffer()
   }
 
-  /** Update the world environment (Blender: World Background). Ambient recomputes immediately. */
   /**
    * Distance fog on every lit surface, as a game on SimPipeline lays it: per
    * layer, t = saturate(f − (1 − f)·h) with f = saturate(depth·distance[0] +
@@ -10631,7 +11151,7 @@ export class Engine {
     this.writeWorld()
   }
 
-  /** Update the sun lamp (Blender: Light > Sun). Direction change marks shadow VP dirty. */
+  /** Update the main light (Unity's directional Sun). Direction change marks shadow VP dirty. */
   setSun(options: SunOptions): void {
     if (options.color) this.sun.color = options.color
     if (options.strength !== undefined) this.sun.strength = options.strength
@@ -10719,6 +11239,7 @@ export class Engine {
       ...options,
     }
     this.groundY = opts.y
+    this.groundHalf = [opts.width / 2, opts.height / 2]
     this.createGroundGeometry(opts.width, opts.height, opts.y)
     this.createShadowGroundResources(opts)
     this.hasGround = true
@@ -10771,6 +11292,7 @@ export class Engine {
      *  literal typed into a console. Vec3 satisfies it either way. */
     lights: SceneLight[] | null,
   ): void {
+    this.sceneLights = lights
     // The directional ones go to the light uniform's slots beside the sun's —
     // three of them, in order; the rest are records the grid indexes.
     const directional = (lights ?? []).filter((l) => l.kind === "directional")
@@ -10830,8 +11352,12 @@ export class Engine {
       this.lightsData[b + 12] = Math.max(inner, outer)
       // The layers it does NOT reach, as bits — inverted so a zero reaches all.
       this.lightsWords[b + 13] = ~(l.layers ?? ALL_LAYERS) >>> 0
-      this.lightsData[b + 14] = 0
-      this.lightsData[b + 15] = 0
+      // The bulb's radius (rzLightNear): 0 keeps the engine's default
+      this.lightsData[b + 14] = l.near !== undefined && Number.isFinite(l.near) && l.near > 0 ? l.near : 0
+      // Its cookie's layer + 1, 0 for none or one not loaded yet (a load
+      // rewrites the lamps when it lands).
+      const cookie = l.cookie !== undefined ? this.cookieLayers.get(l.cookie) : undefined
+      this.lightsData[b + 15] = cookie !== undefined ? cookie + 1 : 0
     }
     // The grid, from the records as STORED — normalised aim, clamped reach, the
     // cosines in f32 — so it indexes exactly what the shader will evaluate.
@@ -10870,6 +11396,58 @@ export class Engine {
     this.allocateLightSlots()
   }
 
+  /**
+   * A cookie, under `key`, for every spot lamp that names it (SceneLight.cookie):
+   * the picture a stage light throws through its gobo, projected along the
+   * cone — its RGB is the light let through, so black blocks, white passes and
+   * a colour tints. Square, stretched to 512². Up to 16 at once; loading a key
+   * again replaces its picture. False when every layer is taken.
+   */
+  async loadLightCookie(key: string, source: Blob | ImageBitmap): Promise<boolean> {
+    if (!this.device) return false
+    let layer = this.cookieLayers.get(key)
+    if (layer === undefined) {
+      const used = new Set(this.cookieLayers.values())
+      for (let k = 0; k < Engine.COOKIE_LAYERS && layer === undefined; k++) if (!used.has(k)) layer = k
+      if (layer === undefined) {
+        console.warn(`[reze] light cookie "${key}": all ${Engine.COOKIE_LAYERS} cookie layers are in use`)
+        return false
+      }
+    }
+    const size = Engine.COOKIE_SIZE
+    const bmp = await createImageBitmap(source, {
+      resizeWidth: size,
+      resizeHeight: size,
+      resizeQuality: "high",
+      colorSpaceConversion: "none",
+      premultiplyAlpha: "none",
+    })
+    // The real array on the first cookie, and every group that binds the
+    // stand-in rebuilt against it (the stand-in itself is a 1x1 and stays).
+    if (this.cookieTexture.width === 1) {
+      this.cookieTexture = this.device.createTexture({
+        label: "light cookies",
+        size: [size, size, Engine.COOKIE_LAYERS],
+        format: "rgba8unorm",
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      })
+      this.cookieView = this.cookieTexture.createView({ dimension: "2d-array" })
+      this.worldBindingsDirty = true
+      this.buildGroundBindGroup()
+    }
+    this.device.queue.copyExternalImageToTexture({ source: bmp }, { texture: this.cookieTexture, origin: [0, 0, layer] }, [size, size, 1])
+    bmp.close()
+    this.cookieLayers.set(key, layer)
+    if (this.sceneLights) this.setLights(this.sceneLights)
+    return true
+  }
+
+  /** Forget a cookie: lamps naming it light plainly again. */
+  removeLightCookie(key: string): void {
+    if (!this.cookieLayers.delete(key)) return
+    if (this.sceneLights) this.setLights(this.sceneLights)
+  }
+
   /** How many positional lights the scene is carrying. */
   getLightCount(): number {
     return this.lightHeader[0]
@@ -11383,6 +11961,29 @@ export class Engine {
     return true
   }
 
+  /**
+   * Light one model with more than the world gives it: a FILL, linear RGB times
+   * its surface colour, added after its material graph. Null takes it away again.
+   *
+   * After the graph, not in its ambient: an NPR ramp reads an ambient fill as
+   * light, so sliding it moved her shadows and flipped whole regions across a
+   * hard step. Added after, it brightens her evenly and every shadow stays put.
+   *
+   * A game lights its stage and its characters apart. Aether Gazer's rooms are
+   * lit by their lamps and a near-black ambient, while its characters take a
+   * flat base light of their own — so a stage whose World is right for the room
+   * leaves a face turned from the lamps in the dark. This is that second light,
+   * for the models the host counts as cast. A model drawn by the game's own
+   * shaders (src/unity) lights itself and takes none of it.
+   */
+  setModelFill(name: string, fill: { x: number; y: number; z: number } | null): boolean {
+    const inst = this.modelInstances.get(name)
+    if (!inst || !this.device) return false
+    inst.objectLight.set(fill ? [fill.x, fill.y, fill.z, 0] : [0, 0, 0, 0], 44)
+    this.device.queue.writeBuffer(inst.lightBuffer, 0, inst.objectLight)
+    return true
+  }
+
   /** The per-model group: its skinning matrices and its ObjectLight. */
   private perInstanceBindGroup(name: string, skinMatrixBuffer: GPUBuffer, light: GPUBuffer): GPUBindGroup {
     return this.device.createBindGroup({
@@ -11401,6 +12002,9 @@ export class Engine {
     // Before the texture cache below frees it: a stale entry here would hand a
     // destroyed texture to the next setPlaneFrame.
     this.planeTextures.delete(name)
+    // Its native look too: it skins from this model's buffers, which are
+    // destroyed below, and would otherwise go on drawing from them.
+    this.nativeLooks?.remove(name)
     inst.model.stop()
     for (const path of inst.textureCacheKeys) {
       const tex = this.textureCache.get(path)
@@ -13134,8 +13738,12 @@ export class Engine {
       const d = positions[i] * positions[i] + positions[i + 1] * positions[i + 1] + positions[i + 2] * positions[i + 2]
       if (d > most) most = d
     }
-    const extent = Math.sqrt(most)
-    if (extent <= this.sceneExtent) return
+    this.raiseSceneExtent(Math.sqrt(most))
+  }
+
+  /** Raise the scene's reach (never lower it) and hand it to the camera. */
+  private raiseSceneExtent(extent: number): void {
+    if (!(extent > this.sceneExtent)) return
     this.sceneExtent = extent
     this.camera?.setSceneExtent(extent)
   }
@@ -13216,6 +13824,16 @@ export class Engine {
         minZ = Math.min(minZ, data[o + 18] - r); maxZ = Math.max(maxZ, data[o + 18] + r)
       }
     }
+    // The built-in floor, while it is drawn. It is no draw of the cull table,
+    // so without this the box ended at the cast: the cascades stopped just
+    // past her, and a low sun's long shadow ran off the last of them — the
+    // floor beyond read as lit and her head and shoulders went missing.
+    if (this.hasGround && !this.groundIsSuppressed()) {
+      const [hx, hz] = this.groundHalf
+      minX = Math.min(minX, -hx); maxX = Math.max(maxX, hx)
+      minY = Math.min(minY, this.groundY); maxY = Math.max(maxY, this.groundY)
+      minZ = Math.min(minZ, -hz); maxZ = Math.max(maxZ, hz)
+    }
     if (this.nativeStage) {
       const nb = this.nativeStage.bounds
       minX = Math.min(minX, nb.min[0]); maxX = Math.max(maxX, nb.max[0])
@@ -13520,6 +14138,10 @@ export class Engine {
    */
   private recordBundles(): void {
     this.bundlesDirty = false
+    // What the bundles record is what the probe would see: a stage arriving or
+    // leaving, a look installed on it, a pipeline landing. Re-captured once it
+    // settles (and switched off when the stage is gone).
+    this.captureReflectionProbe()
     const scene = {
       colorFormats: sceneColorFormats(this.sceneFormats),
       depthStencilFormat: this.depthFormat,
@@ -13783,10 +14405,17 @@ export class Engine {
   private issueDraw(
     pass: GPURenderPassEncoder | GPURenderBundleEncoder,
     draw: DrawCall,
-    kind: "camera" | "shadow" | "mirror",
+    kind: "camera" | "shadow" | "mirror" | "probe",
   ): void {
+    // The probe's cube faces have no cull of their own: drawn whole.
     const args =
-      kind === "shadow" ? this.cullShadowArgs : kind === "mirror" ? this.cullMirrorArgs : this.cullCameraArgs
+      kind === "probe"
+        ? null
+        : kind === "shadow"
+          ? this.cullShadowArgs
+          : kind === "mirror"
+            ? this.cullMirrorArgs
+            : this.cullCameraArgs
     if (args && draw.cullIndex >= 0) {
       pass.drawIndexedIndirect(args, draw.cullIndex * Engine.CULL_ARG_WORDS * 4)
     } else {
@@ -14071,8 +14700,9 @@ export class Engine {
 
     // Its ObjectLight: the world's ambient, and the layers its kind draws on —
     // the cast on the character layer as well as the default one. Words:
-    // layers [0..3], ambient flag [4..7], SH [8..43] — see materials/common.ts.
-    const objectLight = new Float32Array(44)
+    // layers [0..3], ambient flag [4..7], SH [8..43], fill [44..47] — see
+    // materials/common.ts.
+    const objectLight = new Float32Array(48)
     new Uint32Array(objectLight.buffer)[0] =
       isStage || isPlane || isProp ? RENDERING_LAYER_DEFAULT : (RENDERING_LAYER_DEFAULT | RENDERING_LAYER_CHARACTER) >>> 0
     const lightBuffer = this.device.createBuffer({
@@ -14089,7 +14719,8 @@ export class Engine {
       entries: [{ binding: 0, resource: { buffer: skinMatrixBuffer } }],
     })
 
-    const gpuBuffers: GPUBuffer[] = [vertexBuffer, indexBuffer, jointsBuffer, weightsBuffer, skinMatrixBuffer]
+    const attributeBuffer = this.createAttributeBuffer(name, model)
+    const gpuBuffers: GPUBuffer[] = [vertexBuffer, indexBuffer, jointsBuffer, weightsBuffer, skinMatrixBuffer, attributeBuffer]
 
     const gpuMorph = this.createGpuMorph(name, model, vertexBuffer, gpuBuffers)
 
@@ -14114,6 +14745,7 @@ export class Engine {
       indexBuffer,
       jointsBuffer,
       weightsBuffer,
+      attributeBuffer,
       skinMatrixBuffer,
       wireEdges: new Map(),
       drawCalls: [],
@@ -14160,6 +14792,46 @@ export class Engine {
     this.updateOrderDirty = true
   }
 
+  /**
+   * A model's attribute stream: vertex colour (RGBA) and a second UV set, six
+   * floats a vertex, read by the material pipelines at slot 4.
+   *
+   * PMX has no vertex colour and one UV, but it has four ADDITIONAL UV
+   * channels of four floats each, and that is where a model that needs more
+   * keeps it: the first additional UV is the vertex colour, the second's xy
+   * the second UV — the convention a converted game stage is written in (a
+   * plant's occlusion rides in its vertex alpha, a light card's mask in its
+   * second UV). A model without them reads white and its own UV, which is
+   * what every graph that reads neither already assumed.
+   */
+  private createAttributeBuffer(name: string, model: Model): GPUBuffer {
+    const vertices = model.getVertices()
+    const count = Math.floor(vertices.length / 8)
+    const data = new Float32Array(count * Engine.ATTRIBUTE_FLOATS)
+    const color = model.getAdditionalUv(1)
+    const uv2 = model.getAdditionalUv(2)
+    for (let i = 0; i < count; i++) {
+      const o = i * Engine.ATTRIBUTE_FLOATS
+      if (color) {
+        data[o] = color[i * 4]
+        data[o + 1] = color[i * 4 + 1]
+        data[o + 2] = color[i * 4 + 2]
+        data[o + 3] = color[i * 4 + 3]
+      } else {
+        data[o] = data[o + 1] = data[o + 2] = data[o + 3] = 1
+      }
+      data[o + 4] = uv2 ? uv2[i * 4] : vertices[i * 8 + 6]
+      data[o + 5] = uv2 ? uv2[i * 4 + 1] : vertices[i * 8 + 7]
+    }
+    const buffer = this.device.createBuffer({
+      label: `${name}: attribute buffer`,
+      size: Math.max(data.byteLength, 4 * Engine.ATTRIBUTE_FLOATS),
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    })
+    if (data.byteLength > 0) this.device.queue.writeBuffer(buffer, 0, data)
+    return buffer
+  }
+
   // Build the per-model GPU vertex-morph state. Returns null (and leaves the model on the
   // CPU morph path) when the model has no vertex morphs. Created buffers are pushed into
   // gpuBuffers so they're released with the instance.
@@ -14309,7 +14981,11 @@ export class Engine {
   private groundShadowPipelineDesc!: Omit<Parameters<Engine["createRenderPipeline"]>[0], "shaderModule">
 
   private buildGroundPipeline(soft: boolean, mirrored = false): GPURenderPipeline {
-    return this.createRenderPipeline({
+    return this.createRenderPipeline(this.groundPipelineConfig(soft, mirrored))
+  }
+
+  private groundPipelineConfig(soft: boolean, mirrored = false): Parameters<Engine["renderPipelineDesc"]>[0] {
+    return {
       ...this.groundShadowPipelineDesc,
       // A REFLECTION FLIPS WINDING — determinant -1, see reflection.ts. The
       // ground culls back faces, so drawn into the mirror pass with the ordinary
@@ -14319,11 +14995,8 @@ export class Engine {
       // the mirror, and the same answer the scene-pass pipelines already use.
       cullMode: mirrored ? "none" : this.groundShadowPipelineDesc.cullMode,
       label: `ground shadow pipeline${soft ? " (soft)" : ""}${mirrored ? " (mirror)" : ""}`,
-      shaderModule: this.device.createShaderModule({
-        label: soft ? "ground shadow (soft)" : "ground shadow",
-        code: groundShaderWgsl(soft),
-      }),
-    })
+      shaderModule: this.cachedShaderModule(groundShaderWgsl(soft), soft ? "ground shadow (soft)" : "ground shadow"),
+    }
   }
 
   private groundMirrorPipeline: GPURenderPipeline | null = null
@@ -14491,6 +15164,7 @@ export class Engine {
         { binding: 12, resource: this.groundNoiseView },
         { binding: 13, resource: this.mirrorMaskView! },
         { binding: 14, resource: { buffer: this.groundClipOffBuffer } },
+        { binding: 15, resource: this.cookieView },
       ],
     })
     this.groundMirrorViewBindGroup = this.device.createBindGroup({
@@ -14513,6 +15187,7 @@ export class Engine {
         { binding: 12, resource: this.groundNoiseView },
         { binding: 13, resource: this.mirrorDummyColorView! },
         { binding: 14, resource: { buffer: this.groundClipMirrorBuffer } },
+        { binding: 15, resource: this.cookieView },
       ],
     })
     if (this.groundDrawCall) this.groundDrawCall.bindGroup = this.groundShadowBindGroup
@@ -14773,6 +15448,17 @@ export class Engine {
           ],
         })
         outline = { bindGroup: outlineBindGroup }
+        if (!inst.outlineVertexBuffer) {
+          const data = inst.model.getOutlineVertices()
+          const buf = this.device.createBuffer({
+            label: `${prefix}outline normals`,
+            size: data.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+          })
+          this.device.queue.writeBuffer(buf, 0, data)
+          inst.gpuBuffers.push(buf)
+          inst.outlineVertexBuffer = buf
+        }
       }
 
       // Model-space AABB for the cull compute, grown by the three things that can
@@ -15804,38 +16490,6 @@ export class Engine {
   }
 
   // World-space ray from camera through a canvas pixel. Uses WebGPU's NDC z ∈ [0,1].
-  /**
-   * Where a point on the canvas lands on a horizontal plane.
-   *
-   * `px,py` are canvas-relative pixels, top-left origin — what a pointer event
-   * gives you after subtracting the element's rect. Returns null when the ray
-   * cannot reach the plane: parallel to it, or pointing the other way, which is
-   * what a click on the sky above the horizon is.
-   *
-   * The one primitive a placement UI needs. Dragging a thing across the floor is
-   * otherwise three sliders in world units, which asks someone to guess numbers
-   * that have no visible relation to the picture they are looking at — and it
-   * throws away the property that makes pointing work at all: under perspective,
-   * moving something further away makes it smaller by exactly the right amount,
-   * so position and size stop being two controls to tune against each other.
-   */
-  groundPointAt(px: number, py: number, planeY = 0): Vec3 | null {
-    const ray = this.buildMouseRay(px, py)
-    if (!ray) return null
-    // Parallel to the plane: no intersection, and a huge one is not an answer.
-    if (Math.abs(ray.dir.y) < 1e-6) return null
-    const t = (planeY - ray.origin.y) / ray.dir.y
-    // Behind the camera — the plane is there, but not in this shot.
-    if (!(t > 0) || !isFinite(t)) return null
-    return new Vec3(ray.origin.x + ray.dir.x * t, planeY, ray.origin.z + ray.dir.z * t)
-  }
-
-  /** Hand the pointer to something else — a placement drag, a gizmo, a host's own
-   *  overlay — so the orbit does not also act on it. */
-  setCameraInputLocked(locked: boolean): void {
-    this.camera?.setInputLocked(locked)
-  }
-
   private buildMouseRay(px: number, py: number): { origin: Vec3; dir: Vec3 } | null {
     if (!this.camera) return null
     const width = this.canvas.clientWidth
@@ -16428,6 +17082,10 @@ export class Engine {
       idAtt.storeOp = idsRead ? "store" : "discard"
     }
 
+    // The stage's reflection probe, when one is due: its own submits, ahead of
+    // this frame's, so every material below reads the fresh cube.
+    if (hasModels) this.maybeCaptureProbe()
+
     const encoder = this.device.createCommandEncoder()
 
     // GPU vertex morphs: write morphed positions into vertex buffers before any pass reads
@@ -16625,58 +17283,17 @@ export class Engine {
     // depth, before the composite that samples both layers.
     this.renderFieldPass(encoder)
 
-    // Bloom pyramid (EEVEE 3.6):
-    //   1. Blit: HDR → bloomDown[0] (Karis prefilter, half-res)
-    //   2. Downsample: bloomDown[0] → bloomDown[1] → … → bloomDown[N-1] (13-tap)
-    //   3. Upsample (top-down): bloomUp[N-2] = tent(bloomDown[N-1]) + bloomDown[N-2],
-    //      then bloomUp[i] = tent(bloomUp[i+1]) + bloomDown[i] until i=0 (9-tap tent)
-    //   Composite reads bloomUp[0] and adds tint * intensity * bloom before Filmic.
-    // bloomContributes() gates the whole pyramid, not just its intensity. The
-    // composite still SAMPLES bloomUp[0] unconditionally, which is safe and
-    // deliberate: it scales what it reads by the same effective intensity, so a
-    // stale or never-written pyramid is multiplied by zero. Skipping the build
-    // is therefore invisible in the frame and nine render passes cheaper.
-    if (this.bloomContributes() && this.bloomBlitBindGroup && this.compositeBindGroup && this.bloomMipCount > 0) {
-      const bloomAtt = this.bloomPassDescriptor.colorAttachments as GPURenderPassColorAttachment[]
-
-      // 1. Blit — opens the pyramid's timing span. See stampOpen: the nine
-      // passes below read as ONE component, which is the only useful grain.
-      bloomAtt[0].view = this.bloomDownMipViews[0]
-      this.bloomPassDescriptor.timestampWrites = this.stampOpen("bloom")
-      const pBlit = encoder.beginRenderPass(this.bloomPassDescriptor)
-      pBlit.setPipeline(this.bloomBlitPipeline)
-      pBlit.setBindGroup(0, this.bloomBlitBindGroup)
-      pBlit.draw(3)
-      pBlit.end()
-
-      // 2. Downsample chain
-      this.bloomPassDescriptor.timestampWrites = undefined
-      for (let i = 1; i < this.bloomMipCount; i++) {
-        bloomAtt[0].view = this.bloomDownMipViews[i]
-        const p = encoder.beginRenderPass(this.bloomPassDescriptor)
-        p.setPipeline(this.bloomDownsamplePipeline)
-        p.setBindGroup(0, this.bloomDownsampleBindGroups[i - 1])
-        p.draw(3)
-        p.end()
-      }
-
-      // 3. Upsample chain (coarsest to finest; bindGroups[0] is the coarsest step)
-      const upSteps = this.bloomUpsampleBindGroups.length
-      const topIdx = this.bloomMipCount - 2
-      for (let k = 0; k < upSteps; k++) {
-        const levelIdx = topIdx - k // writes bloomUp[levelIdx]
-        bloomAtt[0].view = this.bloomUpMipViews[levelIdx]
-        // The LAST upsample closes the span opened on the blit.
-        this.bloomPassDescriptor.timestampWrites = k === upSteps - 1 ? this.stampClose("bloom") : undefined
-        const p = encoder.beginRenderPass(this.bloomPassDescriptor)
-        p.setPipeline(this.bloomUpsamplePipeline)
-        p.setBindGroup(0, this.bloomUpsampleBindGroups[k])
-        p.draw(3)
-        p.end()
-      }
-    }
-
-    // Composite: HDR + bloom → Filmic tonemap → swapchain.
+    // Bloom (renderBloom): prefilter, the Gaussian chain down, the scatter
+    // blend back up; the composite adds up[0] × tint × intensity before the view
+    // transform. bloomContributes() gates the whole chain, not just its
+    // intensity. The composite still SAMPLES up[0] unconditionally, which is safe
+    // and deliberate: it scales what it reads by the same effective intensity, so
+    // a stale or never-written chain is multiplied by zero. Skipping the build is
+    // therefore invisible in the frame and a couple of dozen render passes cheaper.
+    if (this.bloomContributes() && this.bloomPrefilterBindGroup && this.compositeBindGroup && this.bloomLevels > 0)
+      this.renderBloom(encoder)
+
+    // Composite: HDR + bloom → view transform → swapchain.
     const swapchainView = this.context.getCurrentTexture().createView()
     const compositeAttachment = (this.compositePassDescriptor.colorAttachments as GPURenderPassColorAttachment[])[0]
     compositeAttachment.view = swapchainView
@@ -16827,11 +17444,14 @@ export class Engine {
       }
     }
 
-    const groupResults: GroupDiagnostic[] = []
-    for (const g of groups) {
-      const r = await this.compileAndInstallGroup(inst, g)
-      groupResults.push({ groupId: g.id, diagnostics: r.diagnostics, ok: r.ok })
-    }
+    // ALL GROUPS AT ONCE. Each install touches only its own id — its entry in
+    // styleGroups, its uniform buffer, the draw calls already bound to it — so
+    // the order they land in changes nothing, and each keeps its own staleness
+    // guard (styleGroupGen). Awaiting them in turn made a model's styling the
+    // sum of its compiles; the GPU process runs them side by side.
+    const groupResults: GroupDiagnostic[] = (
+      await Promise.all(groups.map((g) => this.compileAndInstallGroup(inst, g)))
+    ).map((r, i) => ({ groupId: groups[i].id, diagnostics: r.diagnostics, ok: r.ok }))
 
     // Repoints every draw call away from the outgoing installs (among
     // everything else) — only past this line is destroying them safe.
@@ -16848,6 +17468,38 @@ export class Engine {
     }
   }
 
+  /**
+   * Compile style groups' pipelines before any model needs them — a scene's
+   * groups while its bundle is still downloading. Installs nothing: the
+   * pipelines land in the shader cache, and applyStyleGroups later finds them
+   * there (or still in flight). A group that does not compile is skipped
+   * silently; its real install reports it.
+   */
+  async prewarmStyleGroups(groups: readonly StyleGroup[]): Promise<void> {
+    if (!this.device) return
+    await Promise.all(
+      groups.map(async (g) => {
+        const renderClass = g.renderClass ?? "auto"
+        const alphaMode = g.alphaMode ?? "opaque"
+        const blend = g.blend ?? "over"
+        let result: ReturnType<typeof compileGraph>
+        try {
+          result = compileGraph(g.graph, { renderClass, alphaMode, blend })
+        } catch {
+          return
+        }
+        if (!result.ok) return
+        const module = this.cachedShaderModule(result.wgsl, `style group: ${g.id} (${renderClass})`)
+        await Promise.all([
+          this.createRenderClassPipeline(renderClass, module, false, true, false, blend),
+          this.createRenderClassPipeline(renderClass, module, false, false, false, blend),
+          renderClass === "hair" ? this.createRenderClassPipeline(renderClass, module, true, true, false, blend) : null,
+          renderClass === "eye" ? this.createRenderClassPipeline(renderClass, module, false, true, true, blend) : null,
+        ]).catch(() => {})
+      }),
+    )
+  }
+
   /** Add or replace a single style group by id. `opts` may carry a `previewNode` for the
    *  editor's node-output preview workflow. */
   async upsertStyleGroup(modelName: string, group: StyleGroup, opts?: CompileOptions): Promise<ApplyStyleGroupResult> {
@@ -17209,9 +17861,35 @@ export class Engine {
     inst.styleGroupGen.set(group.id, generation)
 
     this.device.pushErrorScope("validation")
-    const module = this.device.createShaderModule({ label: `style group: ${group.id} (${renderClass})`, code: result.wgsl })
-    const info = await module.getCompilationInfo()
-    const scopeError = await this.device.popErrorScope()
+    const module = this.cachedShaderModule(result.wgsl, `style group: ${group.id} (${renderClass})`)
+    const scopePromise = this.device.popErrorScope()
+    // EVERY VARIANT AT ONCE, and the module's diagnostics read beside them
+    // rather than first: the compiles run in parallel in the GPU process, and
+    // awaiting each in turn (and the diagnostics before any) made a group cost
+    // the sum of its pipelines instead of the longest.
+    const blend = group.blend ?? "over"
+    // The single-sided twins a draw of this group will ask for (sidedPipeline),
+    // built with their pipelines rather than synchronously at the first draw.
+    const singleSided = inst.drawCalls.some((dc) => !dc.doubleSided && group.materials.includes(dc.materialName))
+    const variant = (overEyes: boolean, depthWrite: boolean, mirrored: boolean) =>
+      this.createRenderClassPipeline(renderClass, module, overEyes, depthWrite, mirrored, blend).then(async (p) => {
+        if (singleSided && !mirrored) await this.buildSidedTwin(p, false)
+        return p
+      })
+    const variants = Promise.all([
+      variant(false, true, false),
+      // The depth-write-off twin: stage transparency draws with it (see
+      // pipelineForDrawCall), and a future OIT path would too.
+      variant(false, false, false),
+      renderClass === "hair" ? variant(true, true, false) : undefined,
+      // Only the eye needs one: every other class culls "none", which a flipped
+      // winding leaves alone.
+      renderClass === "eye" ? variant(false, true, true) : undefined,
+    ])
+    // Handled below either way; this keeps a rejection off the console while
+    // the diagnostics are read.
+    variants.catch(() => {})
+    const [info, scopeError] = await Promise.all([module.getCompilationInfo(), scopePromise])
     const diagnostics = [...result.diagnostics]
     for (const msg of info.messages) {
       if (msg.type !== "error") continue
@@ -17220,6 +17898,7 @@ export class Engine {
     if (diagnostics.some((d) => d.severity === "error") || scopeError) {
       if (scopeError && !diagnostics.some((d) => d.severity === "error"))
         diagnostics.push({ severity: "error", message: `WGSL: ${scopeError.message}` })
+      this.forgetShaderModule(result.wgsl)
       return { ok: false, diagnostics, slotMap: result.slotMap }
     }
 
@@ -17228,16 +17907,7 @@ export class Engine {
     let overEyesPipeline: GPURenderPipeline | undefined
     let mirrorPipeline: GPURenderPipeline | undefined
     try {
-      const blend = group.blend ?? "over"
-      pipeline = await this.createRenderClassPipeline(renderClass, module, false, true, false, blend)
-      // The depth-write-off twin: stage transparency draws with it (see
-      // pipelineForDrawCall), and a future OIT path would too.
-      pipelineNoDepthWrite = await this.createRenderClassPipeline(renderClass, module, false, false, false, blend)
-      if (renderClass === "hair") overEyesPipeline = await this.createRenderClassPipeline(renderClass, module, true, true, false, blend)
-      // Only the eye needs one: every other class culls "none", which a flipped
-      // winding leaves alone.
-      if (renderClass === "eye")
-        mirrorPipeline = await this.createRenderClassPipeline(renderClass, module, false, true, true, blend)
+      ;[pipeline, pipelineNoDepthWrite, overEyesPipeline, mirrorPipeline] = await variants
     } catch (e) {
       diagnostics.push({ severity: "error", message: `pipeline creation failed: ${(e as Error).message}` })
       return { ok: false, diagnostics, slotMap: result.slotMap }
@@ -17419,7 +18089,7 @@ export class Engine {
     const base = {
       label: `style ${renderClass}${overEyes ? " (over eyes)" : ""}`,
       layout: this.mainPipelineLayout,
-      vertex: { module, buffers: this.fullVertexBufferLayouts },
+      vertex: { module, buffers: this.materialVertexBufferLayouts },
       // The eye front-culls — the see-through-hair look is draw order plus that
       // cull plus the stencil stamp, and it is the deployed appearance of every
       // published scene. In the MIRROR the winding is flipped (determinant -1,
@@ -17476,11 +18146,20 @@ export class Engine {
     }
     const desc: GPURenderPipelineDescriptor = {
       ...base,
-      fragment: { module, constants, targets: blend === "additive" ? this.sceneTargetsAdditive : this.sceneTargets },
+      fragment: {
+        module,
+        constants,
+        targets:
+          blend === "additive"
+            ? this.sceneTargetsAdditive
+            : blend === "premultiplied"
+              ? this.sceneTargetsPremultiplied
+              : this.sceneTargets,
+      },
       depthStencil,
     }
-    return this.device.createRenderPipelineAsync(desc).then((pipeline) => {
-      this.pipelineDescs.set(pipeline, desc)
+    return this.cachedRenderPipeline(desc).then((pipeline) => {
+      if (!this.pipelineDescs.has(pipeline)) this.pipelineDescs.set(pipeline, desc)
       return pipeline
     })
   }
@@ -17493,6 +18172,181 @@ export class Engine {
     return pipeline
   }
 
+  // ─── The shader cache ─────────────────────────────────────────────
+  //
+  // A compile is most of a second per distinct fragment shader on a cold
+  // browser cache, and the same source used to be compiled once per CALLER: a
+  // graph per model that carried it, the composite per effect install. These
+  // key a module by its WGSL and a pipeline by its module and every descriptor
+  // field but the label, so a second request for the same thing — in flight or
+  // done — is the first one's promise. Bounded, oldest first, because an editor
+  // session compiles a new source per keystroke.
+
+  private static readonly SHADER_CACHE_MAX = 256
+  private static readonly PIPELINE_CACHE_MAX = 512
+
+  private static trimCache<K, V>(cache: Map<K, V>, max: number): void {
+    while (cache.size > max) cache.delete(cache.keys().next().value as K)
+  }
+
+  /** A small stable id per GPU object, for cache keys. */
+  private gpuObjectId(o: object): number {
+    let id = this.gpuObjectIds.get(o)
+    if (id === undefined) {
+      id = this.gpuObjectNext++
+      this.gpuObjectIds.set(o, id)
+    }
+    return id
+  }
+
+  /** One module per WGSL source. */
+  private cachedShaderModule(code: string, label: string): GPUShaderModule {
+    let module = this.shaderModuleCache.get(code)
+    if (module) {
+      this.shaderModuleCache.delete(code)
+    } else {
+      module = this.device.createShaderModule({ label, code })
+    }
+    this.shaderModuleCache.set(code, module)
+    Engine.trimCache(this.shaderModuleCache, Engine.SHADER_CACHE_MAX)
+    return module
+  }
+
+  /** Drop a source whose module did not validate, so a retry reports afresh. */
+  private forgetShaderModule(code: string): void {
+    this.shaderModuleCache.delete(code)
+  }
+
+  /** One bind group layout per entry list. */
+  private cachedBindGroupLayout(desc: GPUBindGroupLayoutDescriptor): GPUBindGroupLayout {
+    const key = JSON.stringify(desc.entries)
+    let layout = this.bindGroupLayoutCache.get(key)
+    if (!layout) {
+      layout = this.device.createBindGroupLayout(desc)
+      this.bindGroupLayoutCache.set(key, layout)
+    }
+    return layout
+  }
+
+  /** One pipeline layout per bind group layout list. */
+  private cachedPipelineLayout(bindGroupLayouts: GPUBindGroupLayout[]): GPUPipelineLayout {
+    const key = bindGroupLayouts.map((l) => this.gpuObjectId(l)).join(",")
+    let layout = this.pipelineLayoutCache.get(key)
+    if (!layout) {
+      layout = this.device.createPipelineLayout({ bindGroupLayouts })
+      this.pipelineLayoutCache.set(key, layout)
+    }
+    return layout
+  }
+
+  private pipelineKey(kind: string, desc: GPURenderPipelineDescriptor | GPUComputePipelineDescriptor): string {
+    return (
+      kind +
+      JSON.stringify(desc, (k, v) =>
+        k === "label" ? undefined : (k === "module" || k === "layout") && v && typeof v === "object" ? `#${this.gpuObjectId(v)}` : v,
+      )
+    )
+  }
+
+  private cachedPipeline<T extends GPURenderPipeline | GPUComputePipeline>(key: string, build: () => Promise<T>): Promise<T> {
+    let p = this.pipelineCache.get(key) as Promise<T> | undefined
+    if (p) {
+      this.pipelineCache.delete(key)
+    } else {
+      p = build().catch((e) => {
+        this.pipelineCache.delete(key)
+        throw e
+      })
+    }
+    this.pipelineCache.set(key, p)
+    Engine.trimCache(this.pipelineCache, Engine.PIPELINE_CACHE_MAX)
+    return p
+  }
+
+  /** createRenderPipelineAsync, once per module + state. */
+  private cachedRenderPipeline(desc: GPURenderPipelineDescriptor): Promise<GPURenderPipeline> {
+    return this.cachedPipeline(this.pipelineKey("render", desc), () => this.device.createRenderPipelineAsync(desc))
+  }
+
+  /** createComputePipelineAsync, once per module + state. */
+  private cachedComputePipeline(desc: GPUComputePipelineDescriptor): Promise<GPUComputePipeline> {
+    return this.cachedPipeline(this.pipelineKey("compute", desc), () => this.device.createComputePipelineAsync(desc))
+  }
+
+  /**
+   * A pipeline init builds: async, in parallel with the rest, and in place by
+   * the time init returns (it awaits every job). Outside init — a pass built
+   * on first use — it is the synchronous build it always was.
+   */
+  private initRenderPipeline(desc: GPURenderPipelineDescriptor, assign: (p: GPURenderPipeline) => void, twins = false): void {
+    if (!this.initPipelineJobs) {
+      const pipeline = this.device.createRenderPipeline(desc)
+      if (twins) this.pipelineDescs.set(pipeline, desc)
+      assign(pipeline)
+      return
+    }
+    this.initPipelineJobs.push(
+      this.cachedRenderPipeline(desc)
+        // A rejected build is rebuilt the old way, which hands back the invalid
+        // pipeline and reports through uncapturederror — a bad init pipeline
+        // was never fatal to init, and is not now.
+        .catch(() => this.device.createRenderPipeline(desc))
+        .then((pipeline) => {
+        assign(pipeline)
+        if (!twins) return
+        this.pipelineDescs.set(pipeline, desc)
+        // The mirror's twin too, but not waited for: only a scene with a
+        // mirror draws it, and it is a cache hit on the module just built.
+        void this.buildSidedTwin(pipeline, true)
+        return this.buildSidedTwin(pipeline, false)
+      }),
+    )
+  }
+
+  /** The compute twin of initRenderPipeline. */
+  private initComputePipeline(desc: GPUComputePipelineDescriptor, assign: (p: GPUComputePipeline) => void): void {
+    if (!this.initPipelineJobs) {
+      assign(this.device.createComputePipeline(desc))
+      return
+    }
+    this.initPipelineJobs.push(
+      this.cachedComputePipeline(desc)
+        .catch(() => this.device.createComputePipeline(desc))
+        .then(assign),
+    )
+  }
+
+  /**
+   * Build a model pipeline's single-sided twin off the draw path (see
+   * sidedPipeline). Resolves once it is in place; never rejects — a twin that
+   * fails leaves the draw on its double-sided pipeline, as before it existed.
+   */
+  private buildSidedTwin(pipeline: GPURenderPipeline, mirrored: boolean): Promise<void> {
+    const desc = this.pipelineDescs.get(pipeline)
+    if (!desc || (desc.primitive?.cullMode ?? "none") !== "none") return Promise.resolve()
+    const cache = mirrored ? this.singleSidedMirror : this.singleSided
+    const pending = mirrored ? this.sidedPendingMirror : this.sidedPending
+    if (cache.has(pipeline) || pending.has(pipeline)) return Promise.resolve()
+    pending.add(pipeline)
+    return this.cachedRenderPipeline({
+      ...desc,
+      label: `${desc.label ?? "pipeline"} (single-sided${mirrored ? ", mirror" : ""})`,
+      primitive: { ...desc.primitive, cullMode: mirrored ? "back" : "front" },
+    }).then(
+      (twin) => {
+        cache.set(pipeline, twin)
+        pending.delete(pipeline)
+        // A bundle recorded meanwhile holds the double-sided stand-in.
+        this.bundlesDirty = true
+      },
+      () => {
+        // Remembered as itself, so the draw stops asking.
+        cache.set(pipeline, pipeline)
+        pending.delete(pipeline)
+      },
+    )
+  }
+
   /**
    * The pipeline a draw should use once its double-sided flag is honoured.
    *
@@ -17510,17 +18364,14 @@ export class Engine {
     if (draw.doubleSided) return pipeline
     const desc = this.pipelineDescs.get(pipeline)
     if (!desc || (desc.primitive?.cullMode ?? "none") !== "none") return pipeline
-    const cache = mirrored ? this.singleSidedMirror : this.singleSided
-    let twin = cache.get(pipeline)
-    if (!twin) {
-      twin = this.device.createRenderPipeline({
-        ...desc,
-        label: `${desc.label ?? "pipeline"} (single-sided${mirrored ? ", mirror" : ""})`,
-        primitive: { ...desc.primitive, cullMode: mirrored ? "back" : "front" },
-      })
-      cache.set(pipeline, twin)
-    }
-    return twin
+    const twin = (mirrored ? this.singleSidedMirror : this.singleSided).get(pipeline)
+    if (twin) return twin
+    // NEVER BUILT HERE SYNCHRONOUSLY: a sync build stalls the GPU process for
+    // the whole compile, mid-frame. The camera's twins are built beside their
+    // pipelines; one asked for first here (a mirror's) is started now and the
+    // draw keeps its double-sided pipeline until it lands.
+    void this.buildSidedTwin(pipeline, mirrored)
+    return pipeline
   }
 
   // Pipeline for a material draw call: its group's compiled pipeline when grouped, else
@@ -17552,6 +18403,46 @@ export class Engine {
    * makes outlines compose like MMD: every material drawn later in the author's
    * order covers earlier hulls, and each hull sits over everything drawn before it.
    */
+  /**
+   * A stage's draws, far to near from the eye: its transparent queue, in the
+   * order a game sorts one. Each draw's distance is its material box's centre,
+   * placed, against the camera — a pane or a water surface is one material,
+   * which is the unit a game sorts too. The array is kept per instance and
+   * re-sorted in place, so an unchanged order costs a comparison per draw.
+   */
+  private backToFront(inst: ModelInstance): DrawCall[] {
+    let list = this.sortedDraws.get(inst)
+    if (!list || list.length !== inst.drawCalls.length || list.some((d) => !inst.drawCalls.includes(d))) {
+      list = [...inst.drawCalls]
+      this.sortedDraws.set(inst, list)
+    }
+    const m = inst.model
+    const ex = this.cameraMatrixData[32]
+    const ey = this.cameraMatrixData[33]
+    const ez = this.cameraMatrixData[34]
+    const p = this.sortScratch
+    const dist = this.sortDistance
+    dist.clear()
+    for (const d of list) {
+      const b = d.bounds
+      if (!b || b.length < 6 || !(b[0] <= b[3])) {
+        dist.set(d, 0)
+        continue
+      }
+      p.setXYZ(((b[0] + b[3]) * 0.5) * m.scale, ((b[1] + b[4]) * 0.5) * m.scale, ((b[2] + b[5]) * 0.5) * m.scale)
+      Quat.rotateVecInto(m.rotation, p, p)
+      const dx = p.x + m.position.x - ex
+      const dy = p.y + m.position.y - ey
+      const dz = p.z + m.position.z - ez
+      dist.set(d, dx * dx + dy * dy + dz * dz)
+    }
+    list.sort((a, b) => dist.get(b)! - dist.get(a)!)
+    return list
+  }
+  private sortedDraws = new WeakMap<ModelInstance, DrawCall[]>()
+  private sortScratch = new Vec3(0, 0, 0)
+  private sortDistance = new Map<DrawCall, number>()
+
   /** Is this draw's compiled class "hair"? Ungrouped draws never are — the
    *  neutral pipeline is the auto class. */
   private isHairDraw(inst: ModelInstance, dc: DrawCall): boolean {
@@ -17564,7 +18455,7 @@ export class Engine {
     pass: GPURenderPassEncoder | GPURenderBundleEncoder,
     inst: ModelInstance,
     type: "opaque" | "transparent",
-    view: { perFrame: GPUBindGroup; args: "camera" | "mirror"; outlines: boolean },
+    view: { perFrame: GPUBindGroup; args: "camera" | "mirror" | "probe"; outlines: boolean },
     // The opaque phase walks its author order twice — non-hair, then hair — so
     // the hair depth prime can sit between the eye's stencil write and the hair
     // colour that must respect it. See renderModelOpaquePhase.
@@ -17572,9 +18463,17 @@ export class Engine {
   ): void {
     let currentPipeline: GPURenderPipeline | null = null
     let bound = false
-    for (const draw of inst.drawCalls) {
+    const outlined: DrawCall[] = []
+    // A stage's glass and water in the camera pass go far to near, as a
+    // game's transparent queue does: author order put a far pane over a near
+    // one wherever the author listed it last. Characters keep MMD's author
+    // order — their layers are fabric, built around it.
+    const draws = type === "transparent" && inst.isStage && view.args === "camera" ? this.backToFront(inst) : inst.drawCalls
+    for (const draw of draws) {
       if (draw.type !== type) continue
       if (only && (only === "hair") !== this.isHairDraw(inst, draw)) continue
+      // The probe draws directly, past the cull: honour the switches it holds.
+      if (view.args === "probe" && !this.shouldRenderDrawCall(inst, draw)) continue
       if (!bound) {
         pass.setBindGroup(0, view.perFrame)
         pass.setBindGroup(1, inst.mainPerInstanceBindGroup)
@@ -17588,32 +18487,42 @@ export class Engine {
       }
       pass.setBindGroup(2, draw.bindGroup)
       this.issueDraw(pass, draw, view.args)
-      if (draw.outline && this.outlineEnabled && view.outlines) {
-        // Same index range; own pipeline + groups 0/2. Group 1 (skinMats) is
-        // layout-identical between the main and outline pipelines and stays
-        // bound. Restore group 0 afterwards and force a pipeline re-set.
-        const mirrored = view.args === "mirror"
-        pass.setPipeline(mirrored ? this.outlineMirrorPipeline : this.outlinePipeline)
-        pass.setBindGroup(0, mirrored ? this.outlineMirrorPerFrameBindGroup : this.outlinePerFrameBindGroup)
-        pass.setBindGroup(2, draw.outline.bindGroup)
+      if (draw.outline && this.outlineEnabled && view.outlines) outlined.push(draw)
+    }
+    // THE HULLS AFTER THE SURFACES, as MMD draws a model's edges. A hull held
+    // at the minimum width is faded, and it still writes depth: drawn between
+    // two materials it hid the second wherever it stood in front of it — a
+    // shoe's sole's hull cut the upper behind it, and the floor showed through
+    // as pale lines along the seam. After every surface of this phase it only
+    // ever blends over finished ones. Same index ranges; own pipeline and
+    // groups 0/2 — group 1 (skinMats) is layout-identical and stays bound.
+    if (outlined.length) {
+      const mirrored = view.args === "mirror"
+      pass.setPipeline(mirrored ? this.outlineMirrorPipeline : this.outlinePipeline)
+      pass.setBindGroup(0, mirrored ? this.outlineMirrorPerFrameBindGroup : this.outlinePerFrameBindGroup)
+      // Slot 3: the hull's smoothed normals + edge scale. Only the outline
+      // pipeline reads it; the others leave the slot alone.
+      if (inst.outlineVertexBuffer) pass.setVertexBuffer(3, inst.outlineVertexBuffer)
+      for (const draw of outlined) {
+        pass.setBindGroup(2, draw.outline!.bindGroup)
         this.issueDraw(pass, draw, view.args)
-        pass.setBindGroup(0, view.perFrame)
-        currentPipeline = null
       }
+      pass.setBindGroup(0, view.perFrame)
     }
   }
 
   /**
    * Main-pass render sequence for one model instance — babylon-mmd parity:
    * opaque bucket, the hair-over-eyes stencil pass, then alpha-blend materials
-   * in PMX author order with depth write ON (forceDepthWrite). Outlines are not
-   * a separate phase: drawMaterials draws each edge-flagged material's hull
-   * right after the material itself, like MMD's per-mesh outline stage.
+   * in PMX author order with depth write ON (forceDepthWrite). Outlines close
+   * each drawMaterials call: the edge-flagged materials' hulls after all of its
+   * surfaces, as MMD draws a model's edges.
    */
   private setModelDrawState(pass: GPURenderPassEncoder | GPURenderBundleEncoder, inst: ModelInstance): void {
     pass.setVertexBuffer(0, inst.vertexBuffer)
     pass.setVertexBuffer(1, inst.jointsBuffer)
     pass.setVertexBuffer(2, inst.weightsBuffer)
+    pass.setVertexBuffer(4, inst.attributeBuffer)
     pass.setIndexBuffer(inst.indexBuffer, "uint32")
     // The stencil reference used to be set here. It is pass state, not bundle
     // state — GPURenderBundleEncoder has no setStencilReference at all — so it
@@ -17980,7 +18889,7 @@ export class Engine {
       // still pattern welded to the picture. On the SCENE clock like everything
       // else here, so an export reproduces the editor exactly rather than
       // scattering differently at whatever rate the encoder ran.
-      u[3] = this.grain.animated ? Math.floor((this.sceneClock * 24) % 1024) : 0
+      u[3] = Math.floor((this.sceneClock * 24) % 1024)
       u[26] = this.canvas.width
       u[27] = this.canvas.height
       // Camera world position (viewU[10]) — the other half of bgWorldPos. It
@@ -18214,7 +19123,10 @@ export class Engine {
     }
     for (let s = 0; s < anchors.length; s++) {
       const a = CAST_SUBJECT_VEC4S * 4 + (s * MAX_EFFECT_SUBJECTS + n) * 12
-      const pos = m.getBoneWorldPosition(anchors[s].bone)
+      // `along`: the point that far down the bone's own axis, still model space
+      // here, so the placement below turns and scales it like the joint.
+      const along = anchors[s].along
+      const pos = along ? m.getBonePointAlong(anchors[s].bone, along) : m.getBoneWorldPosition(anchors[s].bone)
       if (!pos) {
         cd[a + 3] = 0
         continue
@@ -18236,7 +19148,7 @@ export class Engine {
       cd[a + 4] = vx
       cd[a + 5] = vy
       cd[a + 6] = vz
-      if (anchors[s].trail) this.writeTrail(inst.name, s, n, pos, cd, a)
+      if (anchors[s].trail) this.writeTrail(inst.name, s, n, pos, cd, a, anchors[s].step)
       const fwd = m.getBoneWorldForward(anchors[s].bone)
       if (fwd) {
         Quat.rotateVecInto(m.rotation, fwd, fwd)
@@ -18278,7 +19190,7 @@ export class Engine {
     this.castData.fill(0, CAST_SUBJECT_VEC4S * 4)
   }
 
-  private writeTrail(model: string, slot: number, n: number, pos: Vec3, cd: Float32Array, anchorBase: number): void {
+  private writeTrail(model: string, slot: number, n: number, pos: Vec3, cd: Float32Array, anchorBase: number, step?: number): void {
     const key = `${model}\u0000${slot}`
     let ring = this.anchorTrail.get(key)
     if (!ring) {
@@ -18299,9 +19211,44 @@ export class Engine {
       if (Math.hypot(dx, dy, dz) / dt > 50) {
         ring.pos.length = 0
         ring.t.length = 0
+        ring.live = false
       }
     }
-    if (this.trailDue > 0 || ring.pos.length === 0) {
+    if (step && ring.pos.length > 0) {
+      // `trail step d` — the path a game's trail keeps (Unity's
+      // minVertexDistance). Point 0 is the LIVE head: it follows the bone every
+      // frame. It is left behind as a kept point only on a tick, and only once
+      // the bone is `step` from the last point kept, so no segment is shorter
+      // than that and a slowing hand cannot leave a knot of jittery stubs for a
+      // wide ribbon to fan across. Still at most one point per tick, so a stepped
+      // ring never covers LESS time than a sampled one.
+      const live = ring.live === true
+      const k = live ? 3 : 0
+      const far = Math.hypot(pos.x - ring.pos[k], pos.y - ring.pos[k + 1], pos.z - ring.pos[k + 2]) >= step
+      if (live && !(far && this.trailDue > 0)) {
+        ring.pos[0] = pos.x
+        ring.pos[1] = pos.y
+        ring.pos[2] = pos.z
+        ring.t[0] = this.sceneClock
+      } else {
+        // keep the head where it is as a point (live) or start a new head
+        if (live) {
+          ring.pos[0] = pos.x
+          ring.pos[1] = pos.y
+          ring.pos[2] = pos.z
+          ring.t[0] = this.sceneClock
+          ring.live = false
+        } else {
+          ring.pos.unshift(pos.x, pos.y, pos.z)
+          ring.t.unshift(this.sceneClock)
+          ring.live = !(far && this.trailDue > 0)
+        }
+        if (ring.t.length > TRAIL_SAMPLES) {
+          ring.t.length = TRAIL_SAMPLES
+          ring.pos.length = TRAIL_SAMPLES * 3
+        }
+      }
+    } else if (this.trailDue > 0 || ring.pos.length === 0) {
       // ONE sample per frame, never one per due tick. A frame that spanned
       // several 60Hz ticks only knows where the bone is NOW, and unshifting that
       // position once per tick fabricated duplicate samples — same point, same
@@ -18385,6 +19332,9 @@ export class Engine {
         headSkin: () => (head >= 0 ? inst.model.getSkinMatrices().subarray(head * 16, head * 16 + 16) : null),
         headRest,
         layers: new Uint32Array(inst.objectLight.buffer)[0],
+        additionalUv: (channel) => inst.model.getAdditionalUv(channel),
+        morphs: inst.model.getMorphing().morphs,
+        morphWeights: () => inst.model.getEffectiveMorphWeights(),
       },
       look,
     )
@@ -18392,6 +19342,27 @@ export class Engine {
     return true
   }
 
+  /** Resolves once a model's native look can draw: every pass's pipeline is
+   *  compiled (async, at setModelNativeLook). Until then its dressed materials
+   *  sit out — a host reveals the model after this to avoid that gap. */
+  nativeLookReady(name: string): Promise<void> {
+    return this.nativeLooks?.ready(name) ?? Promise.resolve()
+  }
+
+  /**
+   * Set some of the values of one material a model's native look dresses —
+   * its Unity material properties by name, colours linear, as the look's
+   * `values` hold them — over the look's own, until set again. What a game
+   * animates on a material over a take (its timeline's material curves)
+   * reaches the shaders this way, one frame at a time: the caller samples its
+   * keys on its own clock and sets what it got. Only the names the material's
+   * look carries are taken, and a value equal to the one in place writes
+   * nothing. False when the model wears no look dressing that material.
+   */
+  setModelNativeUniforms(name: string, material: string, values: Record<string, number | ArrayLike<number>>): boolean {
+    return this.nativeLooks?.setUniforms(name, material, values) ?? false
+  }
+
   /** The hosts for the game's shaders: the scene pass's and the shadow atlas's,
    *  with the stand-ins an empty slot reads. Built on first use. */
   private ensureNativeHosts(): NativeHost {
@@ -18438,6 +19409,18 @@ export class Engine {
       white,
       black,
       blackCube: solid("native: black cube", [0, 0, 0, 255], true),
+      // an empty volume (a froxel buffer no pass filled): no in-scatter, no extinction
+      emptyVolume: (() => {
+        const t = d.createTexture({
+          label: "native: empty volume",
+          size: [1, 1, 1],
+          dimension: "3d",
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+        })
+        d.queue.writeTexture({ texture: t }, new Uint8Array([0, 0, 0, 0]), { bytesPerRow: 4, rowsPerImage: 1 }, [1, 1, 1])
+        return t.createView({ dimension: "3d" })
+      })(),
       depth: this.nativeNoShadowView,
       comparison: this.shadowComparisonSampler,
     }
@@ -18476,7 +19459,8 @@ export class Engine {
       { mipmaps: (t, levels) => this.generateMipmaps(t, levels), fallback: this.nativeFallback },
       onProgress,
     )
-
+    // The stage's sky is in it: the far plane reaches as far as the stage does.
+    this.raiseSceneExtent(this.nativeStage.extent)
   }
 
   /** What went wrong in the game's shaders, and the names nothing supplied. */
@@ -18526,11 +19510,17 @@ export class Engine {
     let sunDirection: [number, number, number] = [dir.x, dir.y, dir.z]
     let sunColor: [number, number, number] = [sun.color.x * k, sun.color.y * k, sun.color.z * k]
     let sunShadow = this.sunShadow
+    let sunUnity: NativeStageLights["main"]["unity"] | null = null
     if (stage) {
       // Its lamps are the stage's own; its key is the scene's sun, which the
-      // host sets from the stage (and a person may then move).
+      // host sets from the stage (and a person may then move) - along the
+      // scene sun's direction, in the stage's own main-light colour. The scene
+      // sun's colour is the cast's key, which the game keeps apart (a
+      // character's light is _ProbeLightingBase, not the stage's main light).
       const L = stage.pkg.lights
       const sc = stage.pkg.scale
+      sunColor = [L.main.color[0], L.main.color[1], L.main.color[2]]
+      sunUnity = L.main.unity ?? null
       lights.length = 0
       for (const l of L.additional) {
         lights.push({
@@ -18560,6 +19550,7 @@ export class Engine {
         dt: 1 / 60,
         sunDirection,
         sunColor,
+        sunUnity,
         sunShadow,
         lights,
         ambientSH: sh ? Array.from(sh, (v) => v * s) : null,
@@ -18673,17 +19664,3 @@ function stableGlobals(prev: Record<string, NativeValue>, next: Record<string, N
   }
   return next
 }
-
-function sameValue(a: NativeValue, b: NativeValue): boolean {
-  if (typeof a === "number" || typeof b === "number") return a === b
-  if (a.length !== b.length) return false
-  if (a instanceof Uint32Array !== b instanceof Uint32Array) return false
-  for (let i = 0; i < a.length; i++) {
-    const x = a[i] as number | ArrayLike<number>
-    const y = b[i] as number | ArrayLike<number>
-    if (typeof x === "number" || typeof y === "number") {
-      if (x !== y) return false
-    } else if (!sameValue(x, y)) return false
-  }
-  return true
-}