reze-engine 0.64.0 → 0.65.0

package/dist/engine.js

@@ -29,7 +29,7 @@ import { gameDir, unityFrameGlobals } from "./unity/globals";
 import { outlineMaxOffsetMultiplier, towardMatrix } from "./unity/character";
 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 +44,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";
@@ -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.77,
+    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 = {
@@ -1009,6 +1004,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;
@@ -1173,7 +1169,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 +1193,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
@@ -1668,18 +1687,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 +1707,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() {
@@ -1888,7 +1903,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 +2548,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 +2559,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 +2589,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 +2742,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 +2749,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 +3172,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 },
@@ -3400,8 +3422,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 +3447,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 +3676,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 +3691,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 +3967,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 +3982,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 +4029,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 +4083,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 +4176,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 +4240,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 +4346,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 +4377,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" },
@@ -4381,8 +4399,19 @@ export class Engine {
                     ? { format: this.depthFormat, depthWriteEnabled: false, depthCompare: "equal" }
                     : { 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 +4452,7 @@ export class Engine {
             };
         }
         catch (e) {
-            await this.device.popErrorScope();
+            await scope;
             buffer.destroy();
             uniform.destroy();
             points?.buffer.destroy();
@@ -5660,10 +5689,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 +5698,154 @@ 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;
+        u[3] = 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 +5970,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 · ` +
@@ -5929,122 +6087,12 @@ export class Engine {
         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 +6109,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 +6227,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 +6247,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 +6257,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.
@@ -6407,8 +6453,8 @@ 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,
@@ -6420,9 +6466,9 @@ 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,
@@ -6434,7 +6480,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 +6499,7 @@ export class Engine {
                 depthCompare: this.depthAhead,
             },
         };
-        this.depthPrepassPipeline = this.createModelPipeline({
+        this.initRenderPipeline({
             label: "opaque depth prepass",
             ...prepassDesc,
             fragment: {
@@ -6461,11 +6507,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 +6520,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 +6543,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 +6567,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 +6588,7 @@ export class Engine {
                 depthBiasSlopeScale: 1.5,
                 depthBiasClamp: 0,
             },
-        });
+        }, (p) => (this.shadowDepthPipeline = p));
         this.shadowComparisonSampler = this.device.createSampler({
             compare: "less",
             magFilter: "linear",
@@ -6576,14 +6622,20 @@ export class Engine {
         // One-shot bake of Blender EEVEE's combined BRDF LUT (DFG + LTC packed rgba8unorm).
         this.bakeBrdfLut();
         this.bakeGroundNoise();
-        this.agxFallbackTexture = this.device.createTexture({
-            label: "AgX LUT fallback",
-            size: [1, 1, 1],
-            dimension: "3d",
-            format: "rgb10a2unorm",
-            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-        });
-        void this.loadAgxLut();
+        // The mipmap blit for the formats model textures arrive in, built here so
+        // the first texture of the first model does not compile it synchronously
+        // in the middle of a load (generateMipmaps builds any other on demand).
+        {
+            const mipModule = this.device.createShaderModule({ label: "mipmap blit", code: MIPMAP_BLIT_SHADER_WGSL });
+            for (const format of ["rgba8unorm", "rgba8unorm-srgb"])
+                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 +6644,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
@@ -6679,7 +6730,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 +6793,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 +6832,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 +6848,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 +6860,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 +6877,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 +6896,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 +6913,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 +6921,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 +6981,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 +6995,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 +7020,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 +7042,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 +7069,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 +7126,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 +7140,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 +7197,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 +7418,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 +7529,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 +7795,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 +7892,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 +7919,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
@@ -9555,6 +9483,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 +9524,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);
@@ -12095,8 +12049,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({
@@ -12303,7 +12258,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 +12271,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. */
@@ -12687,6 +12642,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,
@@ -14252,54 +14218,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 +14372,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 +14392,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 +14775,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 +14813,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 +14821,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}` });
@@ -15064,8 +15043,9 @@ export class Engine {
             fragment: { module, constants, targets: blend === "additive" ? this.sceneTargetsAdditive : 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 +15056,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 +15220,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
@@ -15177,6 +15300,10 @@ export class Engine {
                 pass.setPipeline(mirrored ? this.outlineMirrorPipeline : this.outlinePipeline);
                 pass.setBindGroup(0, mirrored ? this.outlineMirrorPerFrameBindGroup : this.outlinePerFrameBindGroup);
                 pass.setBindGroup(2, draw.outline.bindGroup);
+                // 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);
                 this.issueDraw(pass, draw, view.args);
                 pass.setBindGroup(0, view.perFrame);
                 currentPipeline = null;
@@ -15942,6 +16069,12 @@ export class Engine {
         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();
+    }
     /** 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() {
@@ -16376,13 +16509,21 @@ 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;
+/** 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 +16587,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