reze-engine 0.64.0 → 0.66.0

package/dist/engine.js

@@ -15,8 +15,6 @@ import { CameraAnimation } from "./camera-animation";
 import { PmxLoader } from "./pmx-loader";
 import { RezePhysics } from "./physics";
 import { createFetchAssetReader, createFileMapAssetReader, deriveBasePathFromPmxPath, fileListToMap, findFirstPmxFileInList, joinAssetPath, normalizeAssetPath, } 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 } from "./param-track";
@@ -27,9 +25,10 @@ import { NativeLooks } from "./unity/looks";
 import { NativeStage } from "./unity/stage";
 import { gameDir, unityFrameGlobals } from "./unity/globals";
 import { outlineMaxOffsetMultiplier, towardMatrix } from "./unity/character";
+import { sameValue } from "./unity/host";
 import { SHADOW_ATLAS_SIZE, SHADOW_CASCADES, buildShadowCascades, cascadeSpheres } 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 } from "./hdr";
 import { evalIrradianceSH, projectIrradianceSH, gradientIrradianceSH } from "./ibl";
 import { LYRIC_ATLAS_MAX_H, LYRIC_ATLAS_MAX_W, LYRICS_FLOATS, packLyrics } from "./shaders/lyrics-api";
@@ -44,8 +43,7 @@ import { GIZMO_SHADER_WGSL } from "./shaders/passes/gizmo";
 import { OVERLAY_SHADER_WGSL, OVERLAY_COMPOSITE_SHADER_WGSL } from "./shaders/passes/overlay";
 import { WIREFRAME_SHADER_WGSL } from "./shaders/passes/wireframe";
 import { boneOverlay, boneMarkerPositions, buildOverlayShapes, jointOverlay, lineBetween, rigidbodyOverlay, writeOverlayInstance, OVERLAY_INSTANCE_FLOATS, OVERLAY_VERTEX_FLOATS, OVERLAY_SHAPES, OVERLAY_SOLID_SHAPES, DEFAULT_VERTEX_COLOR, OVERLAY_STYLE, } from "./overlay";
-import { BLOOM_BLIT_SHADER_WGSL, BLOOM_DOWNSAMPLE_SHADER_WGSL, BLOOM_UPSAMPLE_SHADER_WGSL, } from "./shaders/passes/bloom";
-import { AGX_LUT_GZ, AGX_LUT_SIZE } from "./shaders/agx-lut";
+import { BLOOM_BLUR_H_SHADER_WGSL, BLOOM_BLUR_V_SHADER_WGSL, BLOOM_PREFILTER_SHADER_WGSL, BLOOM_UPSAMPLE_SHADER_WGSL, } from "./shaders/passes/bloom";
 import { buildCompositeShader, EFFECT_SCENE_API, buildFieldShader, EFFECT_ANCHORS, EFFECT_SUBJECTS, EFFECT_TRAIL_BASE, EFFECT_TRAIL_SAMPLES, } from "./shaders/passes/composite";
 import { SUBSURFACE_WGSL, SSS_SPIKE } from "./shaders/passes/subsurface";
 import { buildParticleComputeShader, buildParticleRenderShader, PARTICLE_LIGHT_BINDING, PARTICLE_POINTS_BINDING, PARTICLE_TEXTURE_BINDING, PARTICLE_TEXTURE_SAMPLER_BINDING, particleEntryPoints, PARTICLE_INDIRECT_BINDING, PARTICLE_INDIRECT_BYTES, PARTICLE_INDIRECT_DRAW_OFFSET, PARTICLE_STRIDE, } from "./shaders/passes/particles";
@@ -56,6 +54,7 @@ import { buildCastResolveShader, buildCastSeedShader, buildCastStepShader, castD
 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 } from "./graph/compile";
 import { DEFAULT_GRAPH } from "./graph/presets/default";
 import { parseDirectives, stripDirectives } from "./shaders/directives";
@@ -228,12 +227,10 @@ const CAST_TRAIL_BASE = EFFECT_TRAIL_BASE;
 const CAST_VEC4S = CAST_TRAIL_BASE + MAX_EFFECT_ANCHORS * MAX_EFFECT_SUBJECTS * TRAIL_SAMPLES;
 export const DEFAULT_BLOOM_OPTIONS = {
     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,
 };
 export const DEFAULT_DEPTH_OF_FIELD_OPTIONS = {
     enabled: false,
@@ -245,12 +242,10 @@ export const DEFAULT_DEPTH_OF_FIELD_OPTIONS = {
     bladeCount: 6,
     quality: "balanced",
 };
-// Matches the reference Blender project: Filmic view, Medium High Contrast look,
-// exposure 0.3, gamma 1.0, sRGB display, no curves.
 export const DEFAULT_VIEW_TRANSFORM = {
-    exposure: 0.6,
+    exposure: 0,
     gamma: 1.0,
-    transform: "filmic",
+    transform: "soft",
 };
 const NEUTRAL_GRADE_CHANNEL = 0.5;
 export const DEFAULT_COLOR_GRADING = {
@@ -262,7 +257,7 @@ export const DEFAULT_COLOR_GRADING = {
 };
 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,
 };
@@ -984,6 +979,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. */
         this.groundY = 0;
+        /** The built-in floor's half size on x and z — what it covers, for the
+         *  shadow's reach (updateShadowSceneBounds). */
+        this.groundHalf = [0, 0];
         this.mirrorPlane = new Float32Array([0, 1, 0, 0]);
         this.mirrorCameraData = new Float32Array(40);
         // proj x mirrorView for the ground's projective sample and the cull planes,
@@ -1009,6 +1007,7 @@ export class Engine {
          *  premultiplied quantity and a blur has to move them together. */
         this.mirrorMaskMipViews = [];
         this.mirrorMaskBlurBindGroups = null;
+        this.mirrorDownsamplePipeline = null;
         this.mirrorMaskDownsamplePipeline = null;
         this.groundClipData = new Float32Array(8);
         this.mirrorIdMsTexture = null;
@@ -1100,6 +1099,19 @@ export class Engine {
         /** A diffuse ambient stated outright (setWorldAmbient), outranking the one
          *  fitted to the picture; the picture still answers reflections. */
         this.worldAmbientSH = null;
+        this.cookieLayers = new Map();
+        /** What setLights was last given, rewritten when a cookie it names arrives. */
+        this.sceneLights = null;
+        this.probeData = new Float32Array(12);
+        this.probeCameraData = new Float32Array(40);
+        this.probeCaptureBindGroup = 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). */
+        this.probeDirty = false;
+        this.probeDirtyFrame = 0;
+        this.probeFrame = 0;
+        this.probeCapture = null;
+        this.skyPrefilterPipeline = 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;
@@ -1173,7 +1185,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. */
         this.trailDue = 0;
-        this.agxLutTexture = null;
         /** The scene's own grade (setStageGrade): the cube as handed over, kept so a
          *  call before init() still lands, and its texture once uploaded. */
         this.stageGradeCube = null;
@@ -1198,18 +1209,42 @@ export class Engine {
         this.pipelineDescs = new WeakMap();
         this.singleSided = new WeakMap();
         this.singleSidedMirror = new WeakMap();
+        /** Twins whose async build is in flight, so a draw asks for each once. */
+        this.sidedPending = new WeakSet();
+        this.sidedPendingMirror = new WeakSet();
+        // 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.
+        this.shaderModuleCache = new Map();
+        this.pipelineCache = new Map();
+        this.bindGroupLayoutCache = new Map();
+        this.pipelineLayoutCache = new Map();
+        this.gpuObjectIds = new WeakMap();
+        this.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. */
+        this.initPipelineJobs = 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.
         this.steppedHeld = new Set();
         this.steppedTick = new Map();
         this.steppedLastClock = -1;
-        this.bloomBlitUniformData = new Float32Array(4);
-        this.bloomUpsampleUniformData = new Float32Array(4);
-        this.bloomMipCount = 0;
-        this.bloomDownMipViews = [];
-        this.bloomUpMipViews = [];
-        this.bloomDownsampleBindGroups = [];
+        this.bloomPrefilterPipeline = null;
+        this.bloomBlurHPipeline = null;
+        this.bloomBlurVPipeline = null;
+        this.bloomUpsamplePipeline = null;
+        this.bloomUpsampleBindGroupLayout = null;
+        this.bloomUniformBuffer = null;
+        this.bloomUniformData = new Float32Array(4);
+        this.bloomDownTexture = null;
+        this.bloomUpTexture = null;
+        this.bloomLevels = 0;
+        this.bloomDownViews = [];
+        this.bloomUpViews = [];
+        this.bloomPrefilterBindGroup = null;
+        this.bloomBlurHBindGroups = [];
+        this.bloomBlurVBindGroups = [];
         this.bloomUpsampleBindGroups = [];
         this.hasGround = false;
         /** The user's own "no ground" switch — see setGroundVisible. Distinct from
@@ -1289,8 +1324,8 @@ export class Engine {
             contrast: DEFAULT_COLOR_GRADING.contrast,
             saturation: DEFAULT_COLOR_GRADING.saturation,
         };
-        /** Sensor grain: how much, and whether it moves. */
-        this.grain = { amount: 0, animated: true };
+        /** Sensor grain: how much. */
+        this.grain = { amount: 0 };
         /** Debug/diagnostic: skip every inverted-hull outline draw. */
         // OFF by default — the product aesthetic. Modern high-detail models read
         // better without hulls (babylon-mmd's own demos disable its outline renderer
@@ -1637,6 +1672,9 @@ export class Engine {
         // install (pipeline + uniform buffer) when the graph/integration is byte-unchanged.
         /** A graph's own images (ShaderGraph.images), fetched and decoded once per URL. */
         this.graphImageCache = new Map();
+        this.sortedDraws = new WeakMap();
+        this.sortScratch = new Vec3(0, 0, 0);
+        this.sortDistance = new Map();
         this.canvas = canvas;
         const d = DEFAULT_ENGINE_OPTIONS;
         this.world = {
@@ -1668,18 +1706,16 @@ export class Engine {
         const bg = options?.background;
         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) {
         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,
         };
     }
     static mergeViewTransformDefaults(partial) {
@@ -1690,17 +1726,15 @@ export class Engine {
             transform: partial?.transform ?? d.transform,
         };
     }
-    /** Current bloom settings (Blender names; tint is a copied `Vec3`). */
+    /** Current bloom settings (tint is a copied `Vec3`). */
     getBloomOptions() {
         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,
         };
     }
     getViewTransformOptions() {
@@ -1798,16 +1832,11 @@ 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, animated = true) {
+    setFilmGrain(amount) {
         this.grain.amount = Math.min(Math.max(amount, 0), 1);
-        this.grain.animated = animated;
         if (this.device && this.compositeUniformBuffer)
             this.writeCompositeViewUniforms();
     }
@@ -1857,10 +1886,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;
@@ -1872,7 +1899,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;
@@ -1888,7 +1915,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,
@@ -2533,7 +2560,7 @@ export class Engine {
         this.renderMirrorBlurChain(encoder);
     }
     /**
-     * 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.
      */
@@ -2544,8 +2571,19 @@ export class Engine {
         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(this.device.createBindGroup({
@@ -2563,7 +2601,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();
@@ -2716,7 +2754,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.
@@ -2724,7 +2761,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 } },
@@ -3148,8 +3184,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 },
@@ -3263,7 +3297,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) {
@@ -3326,8 +3360,11 @@ export class Engine {
                 }
                 this.device.queue.writeTexture({ texture: tex, mipLevel: level }, packHalf(data), { bytesPerRow: w * 8, rowsPerImage: h }, [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.
@@ -3348,6 +3385,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();
     }
@@ -3400,8 +3440,20 @@ export class Engine {
         if (this.device && this.compositeUniformBuffer)
             this.writeCompositeViewUniforms();
     }
-    makeCompositePipeline(module, applyGamma, label) {
-        return this.device.createRenderPipeline({
+    /**
+     * 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.
+     */
+    compositePipelines(hasBackground, hasForeground) {
+        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, label) => this.cachedRenderPipeline({
             label,
             layout: this.compositePipelineLayout,
             vertex: { module, entryPoint: "vs" },
@@ -3413,6 +3465,7 @@ export class Engine {
             },
             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
@@ -3641,12 +3694,11 @@ export class Engine {
         const fieldEffect = 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.
         const layerBlend = d.additiveLayer
@@ -3657,73 +3709,56 @@ 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 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" },
+                fragment: {
+                    module: fieldModule,
+                    entryPoint: "fieldFs",
+                    // OVER, accumulating PREMULTIPLIED colour: several effects draw into
+                    // these two targets in document order, and each must layer onto what
+                    // the earlier ones left rather than replace it. src-alpha on colour
+                    // premultiplies as it writes; alpha accumulates as one-over. An
+                    // author still returns STRAIGHT colour+alpha, exactly as before —
+                    // the premultiplication happens here, and the composite reads it
+                    // back knowing that. With one effect over a cleared target the
+                    // result is identical to the replace it used to do.
+                    // A filter composes over the layers in its own shader and writes
+                    // the result outright: blending would layer it onto a page that
+                    // holds nothing.
+                    targets: filter
+                        ? [{ format: "rgba16float" }, { format: "rgba16float" }]
+                        : [
+                            { format: "rgba16float", blend: layerBlend },
+                            { format: "rgba16float", blend: layerBlend },
+                        ],
+                },
+                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)
+            if (diagnostics.length > 0) {
+                this.forgetShaderModule(fieldSource);
                 return { ok: false, diagnostics, mounts, params: d.params, duration: d.duration, readsCast: false };
+            }
             try {
-                fieldPipeline = await this.device.createRenderPipelineAsync({
-                    label: "field layer pipeline",
-                    layout: this.fieldPipelineLayout,
-                    vertex: { module: fieldModule, entryPoint: "fieldVs" },
-                    fragment: {
-                        module: fieldModule,
-                        entryPoint: "fieldFs",
-                        // OVER, accumulating PREMULTIPLIED colour: several effects draw into
-                        // these two targets in document order, and each must layer onto what
-                        // the earlier ones left rather than replace it. src-alpha on colour
-                        // premultiplies as it writes; alpha accumulates as one-over. An
-                        // author still returns STRAIGHT colour+alpha, exactly as before —
-                        // the premultiplication happens here, and the composite reads it
-                        // back knowing that. With one effect over a cleared target the
-                        // result is identical to the replace it used to do.
-                        // A filter composes over the layers in its own shader and writes
-                        // the result outright: blending would layer it onto a page that
-                        // holds nothing.
-                        targets: filter
-                            ? [{ format: "rgba16float" }, { format: "rgba16float" }]
-                            : [
-                                { format: "rgba16float", blend: layerBlend },
-                                { format: "rgba16float", blend: layerBlend },
-                            ],
-                    },
-                    primitive: { topology: "triangle-list" },
-                    multisample: { count: 1 },
-                });
+                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;
-        let gamma;
-        try {
-            const make = (applyGamma, label) => 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.
         // A stage that fails after an earlier one succeeded would otherwise strand
@@ -3950,6 +3985,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();
@@ -3962,9 +4000,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 [];
@@ -4010,6 +4047,10 @@ 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) {
@@ -4060,18 +4101,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
         // the life of the surface. What used to be a scene-wide decision made here
@@ -4163,26 +4194,33 @@ export class Engine {
             trailCount: anchors.filter((x) => x.trail).length,
             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, label) => {
             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();
@@ -4220,7 +4258,7 @@ export class Engine {
         // Declaring one set of flags for both layouts is what made the pipeline
         // layout invalid, and the error surfaces later and unhelpfully as "invalid
         // due to a previous error".
-        const layoutFor = (storage, visibility, shadow, withIndirect) => this.device.createBindGroupLayout({
+        const layoutFor = (storage, visibility, shadow, withIndirect) => this.cachedBindGroupLayout({
             entries: [
                 { binding: 0, visibility, buffer: { type: storage } },
                 { binding: 1, visibility, buffer: { type: "uniform" } },
@@ -4326,31 +4364,29 @@ export class Engine {
         // blends would be a copy.
         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" },
@@ -4359,8 +4395,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" },
@@ -4379,10 +4415,25 @@ 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();
@@ -4423,7 +4474,7 @@ export class Engine {
             };
         }
         catch (e) {
-            await this.device.popErrorScope();
+            await scope;
             buffer.destroy();
             uniform.destroy();
             points?.buffer.destroy();
@@ -4795,8 +4846,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({
@@ -5660,10 +5713,8 @@ export class Engine {
             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;
@@ -5671,33 +5722,156 @@ export class Engine {
         }
         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.
+    ensureBloomPipelines() {
+        // 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, code, layout, assign) => {
+            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. */
+    buildBloomTargets() {
+        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) => 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) => 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, src) => 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 },
+                ],
+            }));
+        }
+    }
     writeBloomUniforms() {
+        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). */
+    renderBloom(encoder) {
+        const levels = this.bloomLevels;
+        const att = this.bloomPassDescriptor.colorAttachments[0];
+        const total = 1 + 3 * (levels - 1);
+        let n = 0;
+        const draw = (target, pipeline, group) => {
+            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
     async init() {
@@ -5822,7 +5996,17 @@ 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, b) => Math.round(b - a);
         console.info(`[reze] init ${ms(t0, performance.now())}ms — adapter ${ms(t0, tAdapter)}ms · ` +
@@ -5864,187 +6048,12 @@ export class Engine {
         pass.end();
         this.device.queue.submit([encoder.finish()]);
     }
-    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.
-     */
-    async loadAgxLut() {
-        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.
-        }
-    }
-    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(n - 1);
-        for (let k = 0; k < n - 1; k++)
-            d[k] = anchors[k + 1] - anchors[k];
-        // Endpoint + interior tangents.
-        const m = new Array(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 });
-    }
     createRenderPipeline(config) {
+        return this.createModelPipeline(this.renderPipelineDesc(config));
+    }
+    renderPipelineDesc(config) {
         const targets = config.fragmentTargets ?? (config.fragmentTarget ? [config.fragmentTarget] : undefined);
-        return this.createModelPipeline({
+        return {
             label: config.label,
             layout: config.layout,
             vertex: {
@@ -6061,7 +6070,7 @@ export class Engine {
             primitive: { cullMode: config.cullMode ?? "none" },
             depthStencil: config.depthStencil,
             multisample: config.multisample ?? { count: Engine.MULTISAMPLE_COUNT },
-        });
+        };
     }
     createPipelines() {
         this.materialSampler = this.device.createSampler({
@@ -6179,8 +6188,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
@@ -6201,7 +6208,7 @@ 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({
+            this.initRenderPipeline({
                 label: "cast distance seed",
                 layout: "auto",
                 vertex: { module: seedModule, entryPoint: "vs" },
@@ -6211,21 +6218,21 @@ export class Engine {
                     targets: [{ format: CAST_SEED_FORMAT }, { format: CAST_COVERAGE_FORMAT }],
                 },
                 primitive: { topology: "triangle-list" },
-            });
-            this.castStepPipeline = this.device.createRenderPipeline({
+            }, (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" },
-            });
-            this.castResolvePipeline = this.device.createRenderPipeline({
+            }, (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.
@@ -6321,7 +6328,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 = [
+            ...fullVertexBuffers,
+            null,
+            {
+                arrayStride: Engine.ATTRIBUTE_FLOATS * 4,
+                attributes: [
+                    { shaderLocation: 5, offset: 0, format: "float32x4" },
+                    { shaderLocation: 6, offset: 4 * 4, format: "float32x2" },
+                ],
+            },
+        ];
+        this.materialVertexBufferLayouts = materialVertexBuffers;
         // group 0: per-frame (camera + light + sampler + shadow) — bound once per pass
         this.mainPerFrameBindGroupLayout = this.device.createBindGroupLayout({
             label: "main per-frame bind group layout",
@@ -6336,14 +6358,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
@@ -6407,12 +6434,12 @@ export class Engine {
         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({
+        const neutralModule = this.cachedShaderModule(neutral.wgsl, "neutral base (default graph)");
+        this.initRenderPipeline(this.renderPipelineDesc({
             label: "neutral base pipeline",
             layout: mainPipelineLayout,
             shaderModule: neutralModule,
-            vertexBuffers: fullVertexBuffers,
+            vertexBuffers: materialVertexBuffers,
             fragmentTargets: sceneTargets,
             cullMode: "none",
             depthStencil: {
@@ -6420,13 +6447,13 @@ export class Engine {
                 depthWriteEnabled: true,
                 depthCompare: this.depthAhead,
             },
-        });
+        }), (p) => (this.neutralPipeline = p), true);
         // Depth-write-off twin for transparent-bucket draws (see pipelineForDrawCall).
-        this.neutralPipelineNoDepthWrite = this.createRenderPipeline({
+        this.initRenderPipeline(this.renderPipelineDesc({
             label: "neutral base pipeline (no depth write)",
             layout: mainPipelineLayout,
             shaderModule: neutralModule,
-            vertexBuffers: fullVertexBuffers,
+            vertexBuffers: materialVertexBuffers,
             fragmentTargets: sceneTargets,
             cullMode: "none",
             depthStencil: {
@@ -6434,7 +6461,7 @@ export class Engine {
                 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.
@@ -6453,7 +6480,7 @@ export class Engine {
                 depthCompare: this.depthAhead,
             },
         };
-        this.depthPrepassPipeline = this.createModelPipeline({
+        this.initRenderPipeline({
             label: "opaque depth prepass",
             ...prepassDesc,
             fragment: {
@@ -6461,11 +6488,11 @@ export class Engine {
                 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({
+        this.initRenderPipeline({
             label: "transparent solid prepass",
             ...prepassDesc,
             fragment: {
@@ -6474,14 +6501,14 @@ export class Engine {
                 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({
+        this.initRenderPipeline({
             label: "hair depth prime",
             ...prepassDesc,
             depthStencil: {
@@ -6497,7 +6524,7 @@ export class Engine {
                 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.
         this.shadowLightVPBuffer = this.device.createBuffer({
@@ -6521,7 +6548,7 @@ export class Engine {
             label: "shadow depth",
             code: SHADOW_DEPTH_SHADER_WGSL,
         });
-        this.shadowDepthPipeline = this.device.createRenderPipeline({
+        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.
@@ -6542,7 +6569,7 @@ export class Engine {
                 depthBiasSlopeScale: 1.5,
                 depthBiasClamp: 0,
             },
-        });
+        }, (p) => (this.shadowDepthPipeline = p));
         this.shadowComparisonSampler = this.device.createSampler({
             compare: "less",
             magFilter: "linear",
@@ -6574,16 +6601,21 @@ export class Engine {
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
         });
         // 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"])
+                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],
@@ -6592,7 +6624,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
         // mean rebuilding bind groups whenever a scene gained a lamp. Uploaded from
@@ -6622,6 +6653,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({
             label: "lyrics",
@@ -6666,6 +6739,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 = {
@@ -6679,7 +6754,7 @@ 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({
             label: "outline per-frame bind group layout",
@@ -6742,7 +6817,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: {
@@ -6776,12 +6856,12 @@ export class Engine {
                 stencilWriteMask: 0,
             },
         };
-        this.outlinePipeline = this.createRenderPipeline(outlineDesc);
-        this.outlineMirrorPipeline = this.createRenderPipeline({
+        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).
         const selectionMaskPipelineLayout = this.device.createPipelineLayout({
@@ -6792,7 +6872,7 @@ export class Engine {
             label: "selection mask shader",
             code: SELECTION_MASK_SHADER_WGSL,
         });
-        this.selectionMaskPipeline = this.device.createRenderPipeline({
+        this.initRenderPipeline({
             label: "selection mask pipeline",
             layout: selectionMaskPipelineLayout,
             vertex: { module: selectionMaskShaderModule, entryPoint: "vs", buffers: outlineVertexBuffers },
@@ -6804,7 +6884,7 @@ export class Engine {
             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",
             entries: [
@@ -6821,7 +6901,7 @@ export class Engine {
             label: "selection edge shader",
             code: SELECTION_EDGE_SHADER_WGSL,
         });
-        this.selectionEdgePipeline = this.device.createRenderPipeline({
+        this.initRenderPipeline({
             label: "selection edge pipeline",
             layout: selectionEdgePipelineLayout,
             vertex: { module: selectionEdgeShaderModule, entryPoint: "vs" },
@@ -6840,7 +6920,7 @@ export class Engine {
             },
             primitive: { topology: "triangle-list" },
             multisample: { count: 1 },
-        });
+        }, (p) => (this.selectionEdgePipeline = p));
         this.selectionSampler = this.device.createSampler({
             label: "selection sampler",
             magFilter: "linear",
@@ -6857,10 +6937,7 @@ export class Engine {
         this.setupGizmo();
         // ─── 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",
@@ -6868,81 +6945,25 @@ 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,
-        });
-        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).
+        this.ensureBloomPipelines();
+        // ─── 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) ·
@@ -6984,8 +7005,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
@@ -7000,9 +7019,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" } },
@@ -7028,12 +7044,12 @@ 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),
         // 5 read-write storage (vertex buffer), 6 uniform (params).
@@ -7050,14 +7066,14 @@ export class Engine {
                 { binding: 6, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
             ],
         });
-        this.morphComputePipeline = this.device.createComputePipeline({
+        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.
         this.cullBindGroupLayout = this.device.createBindGroupLayout({
@@ -7077,21 +7093,23 @@ 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({
+        // 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",
             },
-        });
-        void this.device.popErrorScope().then((err) => {
-            if (!err)
-                return;
+        })
+            .then((p) => {
+            this.cullPipeline = p;
+        }, (err) => {
             console.error(`[cull] pipeline failed to compile — frustum culling disabled:\n${err.message}`);
             this.cullPipeline = null;
         });
+        this.initPipelineJobs?.push(cullBuild);
         this.bloomPassDescriptor = {
             label: "bloom pass",
             colorAttachments: [
@@ -7132,7 +7150,7 @@ export class Engine {
             layout: this.pickPerFrameBindGroupLayout,
             entries: [{ binding: 0, resource: { buffer: this.cameraUniformBuffer } }],
         });
-        this.pickPipeline = this.device.createRenderPipeline({
+        this.initRenderPipeline({
             label: "pick pipeline",
             layout: pickPipelineLayout,
             vertex: { module: pickShaderModule, buffers: fullVertexBuffers },
@@ -7146,7 +7164,7 @@ export class Engine {
                 depthWriteEnabled: true,
                 depthCompare: this.depthAhead,
             },
-        });
+        }, (p) => (this.pickPipeline = p));
         this.pickReadbackBuffer = this.device.createBuffer({
             label: "pick readback",
             size: 256,
@@ -7203,6 +7221,10 @@ export class Engine {
         // 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);
@@ -7420,37 +7442,6 @@ export class Engine {
             // rebind both against the new one.
             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",
@@ -7562,49 +7553,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();
             }
             this.writeCompositeViewUniforms();
@@ -7867,16 +7819,16 @@ export class Engine {
             },
             multisample: { count: Engine.OVERLAY_SAMPLE_COUNT },
         };
-        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({
+        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",
             code: OVERLAY_COMPOSITE_SHADER_WGSL,
@@ -7964,7 +7916,7 @@ export class Engine {
             ],
         });
         const wireShader = this.device.createShaderModule({ label: "wireframe shader", code: WIREFRAME_SHADER_WGSL });
-        this.wireframePipeline = this.device.createRenderPipeline({
+        this.initRenderPipeline({
             label: "wireframe pipeline",
             layout: this.device.createPipelineLayout({
                 label: "wireframe pipeline layout",
@@ -7991,7 +7943,7 @@ export class Engine {
             // 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
@@ -8656,36 +8608,446 @@ export class Engine {
     getCameraRoll() {
         return this.camera.roll;
     }
-    /** Vertical field of view in radians (default π/4). While a camera VMD
-     *  drives the view it animates fov itself; the orbit value set here is
-     *  restored when the VMD releases the camera. */
+    /** Vertical field of view in radians (default π/4). While a camera VMD
+     *  drives the view it animates fov itself; the orbit value set here is
+     *  restored when the VMD releases the camera. */
+    /**
+     * The shot as MMD states it — target, euler rotation, distance, fov.
+     *
+     * For a host writing the camera out to something else: an AE composition, a
+     * .vmd, a log. The same five channels whichever mode is driving, so the
+     * caller never asks and never decomposes a view matrix to find out.
+     */
+    getCameraPose() {
+        return this.camera.getPose();
+    }
+    getCameraFov() {
+        return this.camera.fov;
+    }
+    setCameraFov(fov) {
+        this.camera.fov = fov;
+    }
+    // Step 5: Create lighting buffers
+    setupLighting() {
+        this.lightUniformBuffer = this.device.createBuffer({
+            label: "light uniforms",
+            size: 112 * 4, // ambient (4) + 4 lights x 2 vec4 (32) + irradiance SH 9 x vec4 (36) + fog 4 x vec4 (16) + cast shadow (4 + 16)
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.lightData.fill(0);
+        this.lightCount = 0;
+        this.writeWorld();
+        this.writeSun(0);
+    }
+    // ─── 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. */
+    dropProbeCapture() {
+        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() {
+        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. */
+    stageBounds() {
+        const min = [Infinity, Infinity, Infinity];
+        const max = [-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. */
+    maybeCaptureProbe() {
+        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);
+        }
+    }
+    ensureProbeCapture() {
+        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, format) => 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 = [];
+        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 = [];
+        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.
+     */
+    renderProbe(bounds) {
+        const cap = this.ensureProbeCapture();
+        const { min, max } = bounds;
+        const floor = min[1] <= 0 && max[1] >= 0 ? 0 : min[1];
+        const eye = [
+            (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 = [
+            [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", 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 = 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, face, lod, roughness, srcSize, mode) => {
+            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, pipeline, group) => {
+            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, level, f) => 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 shot as MMD states it — target, euler rotation, distance, fov.
-     *
-     * For a host writing the camera out to something else: an AE composition, a
-     * .vmd, a log. The same five channels whichever mode is driving, so the
-     * caller never asks and never decomposes a view matrix to find out.
+     * 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).
      */
-    getCameraPose() {
-        return this.camera.getPose();
-    }
-    getCameraFov() {
-        return this.camera.fov;
-    }
-    setCameraFov(fov) {
-        this.camera.fov = fov;
-    }
-    // Step 5: Create lighting buffers
-    setupLighting() {
-        this.lightUniformBuffer = this.device.createBuffer({
-            label: "light uniforms",
-            size: 112 * 4, // ambient (4) + 4 lights x 2 vec4 (32) + irradiance SH 9 x vec4 (36) + fog 4 x vec4 (16) + cast shadow (4 + 16)
+    prefilterSky(source, width, height, levels) {
+        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,
         });
-        this.lightData.fill(0);
-        this.lightCount = 0;
-        this.writeWorld();
-        this.writeSun(0);
+        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. */
     rebuildPerFrameBindGroups() {
@@ -8704,7 +9066,7 @@ export class Engine {
             !this.shadowLightVPBuffer ||
             !this.materialSampler ||
             !this.shadowComparisonSampler ||
-            !this.brdfLutView ||
+            !this.probeUniformBuffer ||
             !(this.worldEquirectView ?? this.fallbackEquirectView)) {
             return false;
         }
@@ -8726,8 +9088,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({
@@ -8742,8 +9127,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;
@@ -8805,13 +9192,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] +
@@ -8939,7 +9326,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) {
         if (options.color)
             this.sun.color = options.color;
@@ -8990,6 +9377,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;
@@ -9040,6 +9428,7 @@ export class Engine {
      *  params make: a scene document's JSON passes straight in, and so does a
      *  literal typed into a console. Vec3 satisfies it either way. */
     lights) {
+        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");
@@ -9096,8 +9485,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.
@@ -9121,6 +9514,62 @@ export class Engine {
         // count included — is written there.
         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, source) {
+        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) {
+        if (!this.cookieLayers.delete(key))
+            return;
+        if (this.sceneLights)
+            this.setLights(this.sceneLights);
+    }
     /** How many positional lights the scene is carrying. */
     getLightCount() {
         return this.lightHeader[0];
@@ -9555,6 +10004,29 @@ export class Engine {
         this.device.queue.writeBuffer(inst.lightBuffer, 0, o);
         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, fill) {
+        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. */
     perInstanceBindGroup(name, skinMatrixBuffer, light) {
         return this.device.createBindGroup({
@@ -9573,6 +10045,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);
@@ -11198,8 +11673,11 @@ export class Engine {
             if (d > most)
                 most = d;
         }
-        const extent = Math.sqrt(most);
-        if (extent <= this.sceneExtent)
+        this.raiseSceneExtent(Math.sqrt(most));
+    }
+    /** Raise the scene's reach (never lower it) and hand it to the camera. */
+    raiseSceneExtent(extent) {
+        if (!(extent > this.sceneExtent))
             return;
         this.sceneExtent = extent;
         this.camera?.setSceneExtent(extent);
@@ -11291,6 +11769,19 @@ export class Engine {
                 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]);
@@ -11590,6 +12081,10 @@ export class Engine {
      */
     recordBundles() {
         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,
@@ -11851,7 +12346,14 @@ export class Engine {
      * and any draw whose slot has not been assigned yet.
      */
     issueDraw(pass, draw, kind) {
-        const args = kind === "shadow" ? this.cullShadowArgs : kind === "mirror" ? this.cullMirrorArgs : this.cullCameraArgs;
+        // The probe's cube faces have no cull of their own: drawn whole.
+        const args = 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);
         }
@@ -12095,8 +12597,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({
@@ -12111,7 +12614,8 @@ export class Engine {
             layout: this.pickPerInstanceBindGroupLayout,
             entries: [{ binding: 0, resource: { buffer: skinMatrixBuffer } }],
         });
-        const gpuBuffers = [vertexBuffer, indexBuffer, jointsBuffer, weightsBuffer, skinMatrixBuffer];
+        const attributeBuffer = this.createAttributeBuffer(name, model);
+        const gpuBuffers = [vertexBuffer, indexBuffer, jointsBuffer, weightsBuffer, skinMatrixBuffer, attributeBuffer];
         const gpuMorph = this.createGpuMorph(name, model, vertexBuffer, gpuBuffers);
         // Cull bounds. The margin is the skinning reach plus the largest single
         // vertex-morph displacement — a face morph is millimetres against a reach of
@@ -12132,6 +12636,7 @@ export class Engine {
             indexBuffer,
             jointsBuffer,
             weightsBuffer,
+            attributeBuffer,
             skinMatrixBuffer,
             wireEdges: new Map(),
             drawCalls: [],
@@ -12177,6 +12682,47 @@ export class Engine {
         this.bundlesDirty = true;
         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.
+     */
+    createAttributeBuffer(name, model) {
+        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.
@@ -12303,7 +12849,10 @@ export class Engine {
         this.device.queue.writeBuffer(this.groundIndexBuffer, 0, indices);
     }
     buildGroundPipeline(soft, mirrored = false) {
-        return this.createRenderPipeline({
+        return this.createRenderPipeline(this.groundPipelineConfig(soft, mirrored));
+    }
+    groundPipelineConfig(soft, mirrored = false) {
+        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
@@ -12313,11 +12862,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"),
+        };
     }
     /** The ground's pipeline for the mirror pass, built on the first frame a
      *  mirror actually needs it. */
@@ -12452,6 +12998,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({
@@ -12474,6 +13021,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)
@@ -12687,6 +13235,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
             // put geometry outside the vertices it was measured from: a vertex morph,
@@ -13620,39 +14179,6 @@ export class Engine {
         return new Vec3(x / w, y / w, z / w);
     }
     // 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, py, planeY = 0) {
-        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) {
-        this.camera?.setInputLocked(locked);
-    }
     buildMouseRay(px, py) {
         if (!this.camera)
             return null;
@@ -14052,6 +14578,10 @@ export class Engine {
             const idsRead = this.idDebug || this.effects.some((e) => e.readsIds || e.readsCastDistance);
             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
         // them. WebGPU inserts the storage→vertex barrier between this pass and the render passes.
@@ -14252,54 +14782,16 @@ export class Engine {
         // The field mounts, likewise: after the scene so foregrounds can read its
         // 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;
-            // 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[0];
         compositeAttachment.view = swapchainView;
@@ -14444,11 +14936,12 @@ export class Engine {
                 outgoing.push([id, install]);
             }
         }
-        const groupResults = [];
-        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 = (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.
         this.assignDrawCallGroups(inst, claimed);
@@ -14463,6 +14956,38 @@ export class Engine {
             conflicts: [...conflicts],
         };
     }
+    /**
+     * 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) {
+        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;
+            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, group, opts) {
@@ -14814,9 +15339,35 @@ export class Engine {
         const generation = (inst.styleGroupGen.get(group.id) ?? 0) + 1;
         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, depthWrite, mirrored) => 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")
@@ -14826,6 +15377,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 };
         }
         let pipeline;
@@ -14833,17 +15385,8 @@ export class Engine {
         let overEyesPipeline;
         let mirrorPipeline;
         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.message}` });
@@ -15002,7 +15545,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,
@@ -15061,11 +15604,20 @@ export class Engine {
         }
         const desc = {
             ...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;
         });
     }
@@ -15076,6 +15628,151 @@ export class Engine {
         this.pipelineDescs.set(pipeline, desc);
         return pipeline;
     }
+    static trimCache(cache, max) {
+        while (cache.size > max)
+            cache.delete(cache.keys().next().value);
+    }
+    /** A small stable id per GPU object, for cache keys. */
+    gpuObjectId(o) {
+        let id = this.gpuObjectIds.get(o);
+        if (id === undefined) {
+            id = this.gpuObjectNext++;
+            this.gpuObjectIds.set(o, id);
+        }
+        return id;
+    }
+    /** One module per WGSL source. */
+    cachedShaderModule(code, label) {
+        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. */
+    forgetShaderModule(code) {
+        this.shaderModuleCache.delete(code);
+    }
+    /** One bind group layout per entry list. */
+    cachedBindGroupLayout(desc) {
+        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. */
+    cachedPipelineLayout(bindGroupLayouts) {
+        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;
+    }
+    pipelineKey(kind, desc) {
+        return (kind +
+            JSON.stringify(desc, (k, v) => k === "label" ? undefined : (k === "module" || k === "layout") && v && typeof v === "object" ? `#${this.gpuObjectId(v)}` : v));
+    }
+    cachedPipeline(key, build) {
+        let p = this.pipelineCache.get(key);
+        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. */
+    cachedRenderPipeline(desc) {
+        return this.cachedPipeline(this.pipelineKey("render", desc), () => this.device.createRenderPipelineAsync(desc));
+    }
+    /** createComputePipelineAsync, once per module + state. */
+    cachedComputePipeline(desc) {
+        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.
+     */
+    initRenderPipeline(desc, assign, twins = false) {
+        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. */
+    initComputePipeline(desc, assign) {
+        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.
+     */
+    buildSidedTwin(pipeline, mirrored) {
+        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.
      *
@@ -15095,17 +15792,15 @@ export class Engine {
         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
     // the neutral base (ungrouped materials render the default graph). Transparent-bucket
@@ -15136,6 +15831,42 @@ 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.
+     */
+    backToFront(inst) {
+        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;
+    }
     /** Is this draw's compiled class "hair"? Ungrouped draws never are — the
      *  neutral pipeline is the auto class. */
     isHairDraw(inst, dc) {
@@ -15151,11 +15882,20 @@ export class Engine {
     only) {
         let currentPipeline = null;
         let bound = false;
-        for (const draw of inst.drawCalls) {
+        const outlined = [];
+        // 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);
@@ -15169,31 +15909,43 @@ 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);
+            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.
      */
     setModelDrawState(pass, inst) {
         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
@@ -15527,7 +16279,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
@@ -15768,7 +16520,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;
@@ -15791,7 +16546,7 @@ export class Engine {
             cd[a + 5] = vy;
             cd[a + 6] = vz;
             if (anchors[s].trail)
-                this.writeTrail(inst.name, s, n, pos, cd, a);
+                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);
@@ -15831,7 +16586,7 @@ export class Engine {
         // effect's counts before the next upload replaces them.
         this.castData.fill(0, CAST_SUBJECT_VEC4S * 4);
     }
-    writeTrail(model, slot, n, pos, cd, anchorBase) {
+    writeTrail(model, slot, n, pos, cd, anchorBase, step) {
         const key = `${model}\u0000${slot}`;
         let ring = this.anchorTrail.get(key);
         if (!ring) {
@@ -15852,9 +16607,47 @@ export class Engine {
             if (Math.hypot(dx, dy, dz) / dt > 50) {
                 ring.pos.length = 0;
                 ring.t.length = 0;
+                ring.live = false;
+            }
+        }
+        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;
+                }
             }
         }
-        if (this.trailDue > 0 || ring.pos.length === 0) {
+        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
@@ -15938,10 +16731,32 @@ 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);
         this.writeCullHidden(true);
         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) {
+        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, material, values) {
+        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. */
     ensureNativeHosts() {
@@ -15990,6 +16805,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,
         };
@@ -16018,6 +16845,8 @@ export class Engine {
             return;
         const scene = this.ensureNativeHosts();
         this.nativeStage = await NativeStage.load(this.device, pkg, read, { scene, shadow: this.nativeShadowHost }, { 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. */
     nativeReport() {
@@ -16065,11 +16894,17 @@ export class Engine {
         let sunDirection = [dir.x, dir.y, dir.z];
         let sunColor = [sun.color.x * k, sun.color.y * k, sun.color.z * k];
         let sunShadow = this.sunShadow;
+        let sunUnity = 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({
@@ -16099,6 +16934,7 @@ export class Engine {
             dt: 1 / 60,
             sunDirection,
             sunColor,
+            sunUnity,
             sunShadow,
             lights,
             ambientSH: sh ? Array.from(sh, (v) => v * s) : null,
@@ -16209,6 +17045,8 @@ Engine.GIZMO_WORLD_SIZE = 1.5;
 Engine.GIZMO_THICKNESS_PX = 15.0;
 Engine.GIZMO_PICK_THRESHOLD_PX = 17.0;
 Engine.MULTISAMPLE_COUNT = 4;
+/** Floats per vertex in a model's attribute stream: colour RGBA, then UV2. */
+Engine.ATTRIBUTE_FLOATS = 6;
 /**
  * Shadow map depth format — 16-bit, deliberately.
  *
@@ -16376,13 +17214,24 @@ Engine.TIMED_PASSES = [
 // because two planes would need two of every attachment below. Which one is
 // in force is mirrorPlane, refreshed by updateMirrorCamera.
 Engine.GROUND_PLANE = [0, 1, 0, 0];
-Engine.BLOOM_MAX_LEVELS = 5;
-// Width of the baked Filmic tone LUT (composite.ts FILMIC_LUT_W must match).
-Engine.FILMIC_LUT_WIDTH = 256;
+Engine.COOKIE_SIZE = 512;
+Engine.COOKIE_LAYERS = 16;
+Engine.PROBE_SETTLE_FRAMES = 20;
+/** 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). */
+Engine.BLOOM_CLAMP = 6550.4;
+Engine.BLOOM_MAX_LEVELS = 16;
 // Smoothness metrics are computed over a ring buffer of true frame intervals
 // (vsync-to-vsync), recomputed at STATS_REFRESH_MS so the readout doesn't flicker.
 Engine.STATS_WINDOW = 120;
 Engine.STATS_REFRESH_MS = 500;
+/** viewU[6].y per transform — see viewTransform in composite.ts. */
+Engine.VIEW_TRANSFORM_ID = {
+    soft: 0,
+    none: 1,
+    neutral: 2,
+    aces: 3,
+};
 /**
  * The dials a `#mirror` effect is READ BY — the contract between an effect
  * file and the reflection.
@@ -16446,6 +17295,17 @@ Engine.CULL_MODEL_RIGID = 2;
 /** A cache key no material can collide with — a PMX name is never empty and
  *  never contains a NUL. */
 Engine.SEAM_KEY = "\u0000seams";
+// ─── 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.
+Engine.SHADER_CACHE_MAX = 256;
+Engine.PIPELINE_CACHE_MAX = 512;
 /**
  * This frame's Unity globals, keeping last frame's object for every value that
  * did not change: the native host refills a uniform member only when its value
@@ -16459,22 +17319,3 @@ function stableGlobals(prev, next) {
     }
     return next;
 }
-function sameValue(a, b) {
-    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];
-        const y = b[i];
-        if (typeof x === "number" || typeof y === "number") {
-            if (x !== y)
-                return false;
-        }
-        else if (!sameValue(x, y))
-            return false;
-    }
-    return true;
-}