reze-engine 0.63.0 → 0.65.0

package/dist/engine.js

@@ -22,9 +22,14 @@ import { ID_DEBUG_SHADER_WGSL } from "./shaders/passes/id-debug";
 import { paramChanged, sampleParamTrack } from "./param-track";
 import { advanceSim, DISSOLVE_PARAMS, dissolveConstants, dissolveCycleOf, effectState, sampleDissolveCycle, scheduledDissolve, } from "./effect-schedule";
 import { parentKeySpan } from "./parent-keys";
-import { SHADOW_CASCADES, buildShadowCascades } from "./shadow-cascades";
+import { NativeHost } from "./unity/host";
+import { NativeLooks } from "./unity/looks";
+import { NativeStage } from "./unity/stage";
+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";
@@ -39,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";
@@ -223,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,
@@ -240,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 = {
@@ -706,6 +706,18 @@ const FIELD_LAYER_BLEND_ADDITIVE = {
     // construction rather than by hoping an author stayed inside it.
     alpha: { srcFactor: "one", dstFactor: "one", operation: "add" },
 };
+/**
+ * Rendering layers, as the game's pipeline (URP's rendering layers) uses them:
+ * every drawing carries layer bits and a light reaches it only where its mask
+ * shares one. A stage, prop or plane draws on DEFAULT; the cast on DEFAULT and
+ * CHARACTER, the bits Aether Gazer's characters carry (0x40000001).
+ */
+export const RENDERING_LAYER_DEFAULT = 1;
+export const RENDERING_LAYER_CHARACTER = 1 << 30;
+/** Every layer — what a light without a mask reaches. */
+const ALL_LAYERS = 0xffffffff;
+/** Where the directional slots' layer bits sit in the light uniform, in words. */
+const DIR_LAYERS_AT = 108;
 export class Engine {
     static getInstance() {
         if (!Engine.instance) {
@@ -741,7 +753,11 @@ export class Engine {
         // padded to 80. sh[0].w is the IBL flag: 0 = flat world colour, 1 = the sky.
         // …then the scene fog at [72..87] — see setSceneFog — and the cast's
         // shadow on a stage at [88..107] (colour, amount; its view-projection).
+        // …and the directional slots' rendering layers at [108..111], as u32 bits
+        // through lightDataWords — never through a float.
         this.lightData = new Float32Array(112);
+        this.lightDataWords = new Uint32Array(this.lightData.buffer);
+        this.sunLayers = ALL_LAYERS;
         this.castShadow = null;
         this.castShadowBundle = null;
         this.castShadowCleared = false;
@@ -988,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;
@@ -1134,11 +1151,24 @@ export class Engine {
         /** Scene seconds, advanced by the frame delta — NOT wall time, so an offline
          *  export samples the same path the editor showed. */
         this.sceneClock = 0;
+        /** Models dressed in the game's own materials (unity/looks.ts); built on the
+         *  first look installed. */
+        this.nativeLooks = null;
+        /** The scene pass's host for the game's shaders, and the shadow atlas's. */
+        this.nativeHost = null;
+        this.nativeShadowHost = null;
+        /** A game stage drawn by its own shaders (unity/stage.ts). */
+        this.nativeStage = null;
+        /** The frame's Unity globals, computed once for every native draw. */
+        this.nativeGlobals = {};
+        this.nativeFallback = {};
+        /** A 1x1 depth map at the far plane: a game shader's shadow lookup into a
+         *  map the scene does not have reads lit. */
+        this.nativeNoShadowView = null;
         this.trailAccum = 0;
         /** 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;
@@ -1163,25 +1193,47 @@ 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
          *  hasGround, which records whether a ground was ever built. */
         this.groundHidden = false;
-        this.shadowMapTextures = [];
-        this.shadowMapDepthViews = [];
         // The shadow PASS reads one cascade's matrix per pass, and a uniform binding
         // into the aggregate would need 256-byte alignment padding — two tiny buffers
         // are simpler than teaching every reader about a stride.
@@ -1312,10 +1364,6 @@ export class Engine {
          *  resources are half-built, which is exactly the moment a host swaps a sky.
          *  Retried at the top of a frame until one of them takes. */
         this.worldBindingsDirty = false;
-        /** Per cascade: does its map currently hold nothing but the cleared far plane?
-         *  Set by the cascade loop, which skips a cascade that is unwanted and already
-         *  cleared rather than re-clearing it every frame. */
-        this.shadowCascadeCleared = [];
         this.tweenFrom = { position: new Vec3(0, 0, 0), rotation: Quat.identity() };
         this.tweenTo = { position: new Vec3(0, 0, 0), rotation: Quat.identity() };
         this.tweenPosition = new Vec3(0, 0, 0);
@@ -1604,6 +1652,10 @@ export class Engine {
         /** Models this wrote a dissolve onto last frame, so one nothing asks for any
          *  more comes back whole instead of holding wherever it was left. */
         this.dissolveTouched = new Set();
+        // Compile a group's graph → WGSL → pipeline(s), install keyed by group id. Reuses the
+        // install (pipeline + uniform buffer) when the graph/integration is byte-unchanged.
+        /** A graph's own images (ShaderGraph.images), fetched and decoded once per URL. */
+        this.graphImageCache = new Map();
         this.canvas = canvas;
         const d = DEFAULT_ENGINE_OPTIONS;
         this.world = {
@@ -1635,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) {
@@ -1657,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() {
@@ -1855,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 === "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,
@@ -2500,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.
      */
@@ -2511,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({
@@ -2530,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();
@@ -2683,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.
@@ -2691,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 } },
@@ -3115,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 },
@@ -3367,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" },
@@ -3380,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
@@ -3608,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
@@ -3624,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
@@ -3917,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();
@@ -3929,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 [];
@@ -3977,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) {
@@ -4027,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
@@ -4130,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();
@@ -4187,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" } },
@@ -4217,8 +4270,7 @@ export class Engine {
                         { binding: PARTICLE_LIGHT_BINDING, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
                         { binding: PARTICLE_LIGHT_BINDING + 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
                         { binding: PARTICLE_LIGHT_BINDING + 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
-                        { binding: PARTICLE_LIGHT_BINDING + 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
-                        { binding: PARTICLE_LIGHT_BINDING + 4, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "comparison" } },
+                        { binding: PARTICLE_LIGHT_BINDING + 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "comparison" } },
                     ]
                     : []),
                 // The live count's arguments, for the COUNT kernel's layout alone. The
@@ -4265,9 +4317,8 @@ export class Engine {
                     ? [
                         { binding: PARTICLE_LIGHT_BINDING, resource: { buffer: this.lightUniformBuffer } },
                         { binding: PARTICLE_LIGHT_BINDING + 1, resource: { buffer: this.shadowLightVPBuffer } },
-                        { binding: PARTICLE_LIGHT_BINDING + 2, resource: this.shadowMapDepthViews[0] },
-                        { binding: PARTICLE_LIGHT_BINDING + 3, resource: this.shadowMapDepthViews[SHADOW_CASCADES.length - 1] },
-                        { binding: PARTICLE_LIGHT_BINDING + 4, resource: this.shadowComparisonSampler },
+                        { binding: PARTICLE_LIGHT_BINDING + 2, resource: this.shadowAtlasView },
+                        { binding: PARTICLE_LIGHT_BINDING + 3, resource: this.shadowComparisonSampler },
                     ]
                     : []),
                 ...(withIndirect && indirect ? [{ binding: PARTICLE_INDIRECT_BINDING, resource: { buffer: indirect } }] : []),
@@ -4295,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" },
@@ -4328,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" },
@@ -4350,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();
@@ -4392,7 +4452,7 @@ export class Engine {
             };
         }
         catch (e) {
-            await this.device.popErrorScope();
+            await scope;
             buffer.destroy();
             uniform.destroy();
             points?.buffer.destroy();
@@ -5629,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;
@@ -5640,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() {
@@ -5791,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 · ` +
@@ -5898,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: {
@@ -6030,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({
@@ -6148,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
@@ -6170,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" },
@@ -6180,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.
@@ -6214,11 +6291,6 @@ export class Engine {
             usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
         });
         this.device.queue.writeTexture({ texture: this.fallbackMaterialTexture }, new Uint8Array([255, 255, 255, 255]), { bytesPerRow: 4 }, [1, 1]);
-        this.noFillBuffer = this.device.createBuffer({
-            label: "model light (none)",
-            size: 48,
-            usage: GPUBufferUsage.UNIFORM,
-        });
         // Generic shared-toon ramp: lit white down to a soft cool shadow tone with
         // a tight terminator around the midpoint, approximating MMD's toon ramps.
         const TOON_H = 64;
@@ -6310,10 +6382,10 @@ export class Engine {
                 // The positional lights. Always bound, empty or not, so every material
                 // pipeline shares one layout whether or not the scene has any.
                 { binding: 6, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
-                // The far cascade's shadow map, then the world's sky (8) and the BRDF
-                // LUT (9). The sky is always bound — the 1x1 fallback when the scene
-                // has none — so every material pipeline keeps sharing one layout.
-                { binding: 7, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+                // The world's sky (8) and the BRDF LUT (9). The sky is always bound —
+                // the 1x1 fallback when the scene has none — so every material
+                // pipeline keeps sharing one layout. (7 was the far cascade's map,
+                // which the atlas at 3 replaces.)
                 { binding: 8, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
                 { binding: 9, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
                 // The cast's shadow on a stage — setStageCastShadow.
@@ -6381,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,
@@ -6394,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,
@@ -6408,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.
@@ -6427,7 +6499,7 @@ export class Engine {
                 depthCompare: this.depthAhead,
             },
         };
-        this.depthPrepassPipeline = this.createModelPipeline({
+        this.initRenderPipeline({
             label: "opaque depth prepass",
             ...prepassDesc,
             fragment: {
@@ -6435,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: {
@@ -6448,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: {
@@ -6471,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({
@@ -6495,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.
@@ -6516,21 +6588,21 @@ export class Engine {
                 depthBiasSlopeScale: 1.5,
                 depthBiasClamp: 0,
             },
-        });
+        }, (p) => (this.shadowDepthPipeline = p));
         this.shadowComparisonSampler = this.device.createSampler({
             compare: "less",
             magFilter: "linear",
             minFilter: "linear",
         });
-        // One map per cascade, each at its own resolution — the near one crisp,
-        // the far one wide. Same format so one pipeline records into both.
-        this.shadowMapTextures = SHADOW_CASCADES.map((c, i) => this.device.createTexture({
-            label: `shadow map cascade ${i}`,
-            size: [c.mapSize, c.mapSize],
+        // One atlas, a tile per cascade — the layout the game's pipeline uses, and
+        // one binding for every reader.
+        this.shadowAtlasTexture = this.device.createTexture({
+            label: "sun shadow atlas",
+            size: [SHADOW_ATLAS_SIZE, SHADOW_ATLAS_SIZE],
             format: Engine.SHADOW_DEPTH_FORMAT,
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-        }));
-        this.shadowMapDepthViews = this.shadowMapTextures.map((t) => t.createView());
+        });
+        this.shadowAtlasView = this.shadowAtlasTexture.createView();
         // The cast's shadow on a stage (setStageCastShadow): one map, only the cast
         // in it, from the stage's own direction. Always allocated so every material
         // bind group and every instance's shadow bind group stays one shape; drawn
@@ -6550,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],
@@ -6566,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
@@ -6625,7 +6702,6 @@ export class Engine {
                 // Same lights the materials read. A lamp that lit the cast and not the
                 // floor under her would read as a sticker.
                 { binding: 6, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
-                { binding: 7, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
                 // The floor mirror: the mirror camera's view-projection, the reflection
                 // resolve, an ordinary sampler beside the comparison one, and the
                 // mirror pass's own depth for the depth-proportional blur.
@@ -6654,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",
@@ -6717,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: {
@@ -6751,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({
@@ -6767,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 },
@@ -6779,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: [
@@ -6796,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" },
@@ -6815,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",
@@ -6832,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",
@@ -6843,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) ·
@@ -6959,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
@@ -6975,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" } },
@@ -7003,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).
@@ -7025,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({
@@ -7052,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: [
@@ -7107,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 },
@@ -7121,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,
@@ -7178,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);
@@ -7395,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",
@@ -7537,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();
@@ -7842,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,
@@ -7939,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",
@@ -7966,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
@@ -8671,7 +8624,7 @@ export class Engine {
         // picture later.
         if (!this.device ||
             !this.mainPerFrameBindGroupLayout ||
-            !this.shadowMapDepthViews?.length ||
+            !this.shadowAtlasView ||
             !this.cameraUniformBuffer ||
             !this.mirrorCameraBuffer ||
             !this.lightUniformBuffer ||
@@ -8696,11 +8649,10 @@ export class Engine {
                 { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
                 { binding: 1, resource: { buffer: this.lightUniformBuffer } },
                 { binding: 2, resource: this.materialSampler },
-                { binding: 3, resource: this.shadowMapDepthViews[0] },
+                { binding: 3, resource: this.shadowAtlasView },
                 { binding: 4, resource: this.shadowComparisonSampler },
                 { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
                 { binding: 6, resource: { buffer: this.lightsBuffer } },
-                { binding: 7, resource: this.shadowMapDepthViews[SHADOW_CASCADES.length - 1] },
                 { binding: 8, resource: env },
                 { binding: 9, resource: this.brdfLutView },
                 { binding: 10, resource: this.castShadowView },
@@ -8713,11 +8665,10 @@ export class Engine {
                 { binding: 0, resource: { buffer: this.mirrorCameraBuffer } },
                 { binding: 1, resource: { buffer: this.lightUniformBuffer } },
                 { binding: 2, resource: this.materialSampler },
-                { binding: 3, resource: this.shadowMapDepthViews[0] },
+                { binding: 3, resource: this.shadowAtlasView },
                 { binding: 4, resource: this.shadowComparisonSampler },
                 { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
                 { binding: 6, resource: { buffer: this.lightsBuffer } },
-                { binding: 7, resource: this.shadowMapDepthViews[SHADOW_CASCADES.length - 1] },
                 { binding: 8, resource: env },
                 { binding: 9, resource: this.brdfLutView },
                 { binding: 10, resource: this.castShadowView },
@@ -8783,6 +8734,7 @@ export class Engine {
         this.lightData[base + 5] = this.sun.color.y;
         this.lightData[base + 6] = this.sun.color.z;
         this.lightData[base + 7] = this.sun.strength;
+        this.lightDataWords[DIR_LAYERS_AT + index] = this.sunLayers;
         if (index >= this.lightCount)
             this.lightCount = index + 1;
         this.updateLightBuffer();
@@ -8923,6 +8875,8 @@ export class Engine {
             this.sun.strength = options.strength;
         if (options.shadow !== undefined)
             this.sunShadow = Math.min(Math.max(options.shadow, 0), 1);
+        if (options.layers !== undefined)
+            this.sunLayers = options.layers >>> 0;
         if (options.direction) {
             this.sun.direction = options.direction;
             this.shadowLightVPDirty = true;
@@ -9014,7 +8968,20 @@ export class Engine {
      *  params make: a scene document's JSON passes straight in, and so does a
      *  literal typed into a console. Vec3 satisfies it either way. */
     lights) {
-        const list = (lights ?? []).slice(0, MAX_LIGHTS);
+        // The directional ones go to the light uniform's slots beside the sun's —
+        // three of them, in order; the rest are records the grid indexes.
+        const directional = (lights ?? []).filter((l) => l.kind === "directional");
+        for (let k = 1; k < 4; k++) {
+            const l = directional[k - 1];
+            const base = 4 + k * 8;
+            const a = l?.aim;
+            const len = a ? Math.hypot(a.x, a.y, a.z) : 0;
+            const i = l ? Math.max(l.intensity ?? 1, 0) : 0;
+            this.lightData.set(l && len > 0 ? [a.x / len, a.y / len, a.z / len, 0, l.color.x * i, l.color.y * i, l.color.z * i, 1] : [0, 0, -1, 0, 0, 0, 0, 0], base);
+            this.lightDataWords[DIR_LAYERS_AT + k] = l && len > 0 ? (l.layers ?? ALL_LAYERS) >>> 0 : 0;
+        }
+        this.updateLightBuffer();
+        const list = (lights ?? []).filter((l) => l.kind !== "directional").slice(0, MAX_LIGHTS);
         this.docLightCount = list.length;
         // RECORDS only — the header belongs to allocateLightSlots, the one writer.
         // This used to zero-and-upload the header region too, which left two CPU
@@ -9043,7 +9010,7 @@ export class Engine {
             // vector cannot be normalised, and a cone around nothing would light
             // nothing at all — a light that vanishes because its aim was left at the
             // default is worse than one that shines everywhere.
-            const len = l.aim ? Math.hypot(l.aim.x, l.aim.y, l.aim.z) : 0;
+            const len = l.aim && l.kind !== "point" ? Math.hypot(l.aim.x, l.aim.y, l.aim.z) : 0;
             this.lightsData[b + 7] = len > 0 ? 1 : 0;
             this.lightsData[b + 8] = len > 0 ? l.aim.x / len : 0;
             this.lightsData[b + 9] = len > 0 ? l.aim.y / len : 0;
@@ -9055,7 +9022,8 @@ export class Engine {
             const inner = len > 0 ? Math.cos((Math.min(Math.max(l.innerAngle ?? (l.angle ?? 45) * 0.8, 0), 179) / 2) * (Math.PI / 180)) : -1;
             this.lightsData[b + 11] = outer;
             this.lightsData[b + 12] = Math.max(inner, outer);
-            this.lightsData[b + 13] = 0;
+            // The layers it does NOT reach, as bits — inverted so a zero reaches all.
+            this.lightsWords[b + 13] = ~(l.layers ?? ALL_LAYERS) >>> 0;
             this.lightsData[b + 14] = 0;
             this.lightsData[b + 15] = 0;
         }
@@ -9444,6 +9412,8 @@ export class Engine {
      *  ground plane must not draw, and the far shadow cascade has nothing to
      *  cover without one (see the cascade loop). */
     hasStage() {
+        if (this.nativeStage)
+            return true;
         for (const inst of this.modelInstances.values())
             if (inst.isStage)
                 return true;
@@ -9492,11 +9462,32 @@ export class Engine {
         inst.model.setName(newName);
         this.modelInstances.set(newName, inst);
     }
+    /**
+     * One model's own ambient: the irradiance arriving at it, as the 27 floats of
+     * folded SH setWorldAmbient takes (ibl.ts), in place of the world's. Null
+     * gives it the world's again.
+     *
+     * The game's pipeline lights every renderer by its own probe sample, and a
+     * character by an ambient of its own; a loader that carries those hands them
+     * in here. Linear radiance, strength included.
+     */
+    setModelAmbient(name, sh) {
+        const inst = this.modelInstances.get(name);
+        if (!inst || !this.device)
+            return false;
+        const o = inst.objectLight;
+        o[4] = sh && sh.length >= 27 ? 1 : 0;
+        for (let i = 0; i < 9; i++) {
+            o.set(sh && sh.length >= 27 ? [sh[i * 3], sh[i * 3 + 1], sh[i * 3 + 2], 0] : [0, 0, 0, 0], 8 + i * 4);
+        }
+        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 read an ambient fill as
+     * 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.
      *
@@ -9504,83 +9495,25 @@ export class Engine {
      * 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.
+     * 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) {
-        return this.writeModelLight(name, 0, fill);
-    }
-    /**
-     * A model's own sun: the colour and strength the scene's sun has FOR THIS
-     * MODEL, in place of the scene's. Null gives it the scene's sun back.
-     *
-     * The other half of lighting a stage and its cast apart. A game's stage is
-     * lit by its own daylight — Aether Gazer's kitchen at twenty times white —
-     * while its characters take a key light of their own that the stage never
-     * states. So a stage carries the sun it was lit by, and the scene's sun
-     * stays the cast's. Direction and shadow are still the scene's: one sun
-     * casts, and it casts the same way on both.
-     */
-    setModelSun(name, sun) {
-        return this.writeModelLight(name, 4, sun);
-    }
-    /**
-     * Light one model by the sky's AVERAGE rather than its shape: the world's
-     * colour and brightness from every direction alike. False gives it the
-     * directional sky back.
-     *
-     * For a cast under an anime look. An HDRI's sky is brighter and warmer one
-     * way than another, and taken at each normal it shades a face with soft
-     * realistic gradients that no toon ramp drew — PBR on an anime face. Aether
-     * Gazer gives its characters one flat base light instead. World strength and
-     * colour still reach her; only the shape is gone. A flat World is its own
-     * average, so without an HDRI this changes nothing.
-     */
-    setModelFlatSky(name, flat) {
-        return this.writeModelLight(name, 8, flat ? new Vec3(1, 0, 0) : null);
-    }
-    /** One part of a model's light, at `at` (0 the fill, 4 the sun, 8 its
-     *  options) in its ModelLight; w says whether that part is set. All unset
-     *  releases the buffer and the model takes the shared zero stand-in again. */
-    writeModelLight(name, at, value) {
         const inst = this.modelInstances.get(name);
         if (!inst || !this.device)
             return false;
-        const light = inst.modelLight ?? new Float32Array(12);
-        light.set(value ? [value.x, value.y, value.z, 1] : [0, 0, 0, 0], at);
-        const any = light[3] > 0 || light[7] > 0 || light[11] > 0;
-        if (!any) {
-            if (!inst.lightBuffer)
-                return true;
-            const retired = inst.lightBuffer;
-            inst.lightBuffer = null;
-            inst.modelLight = null;
-            inst.mainPerInstanceBindGroup = this.perInstanceBindGroup(name, inst.skinMatrixBuffer, null);
-            this.bundlesDirty = true;
-            // Retired once the GPU is done with it: an encoded frame may still name it.
-            void this.device.queue.onSubmittedWorkDone().then(() => retired.destroy());
-            return true;
-        }
-        inst.modelLight = light;
-        if (!inst.lightBuffer) {
-            inst.lightBuffer = this.device.createBuffer({
-                label: `${name}: light`,
-                size: 48,
-                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-            });
-            inst.mainPerInstanceBindGroup = this.perInstanceBindGroup(name, inst.skinMatrixBuffer, inst.lightBuffer);
-            this.bundlesDirty = true;
-        }
-        this.device.queue.writeBuffer(inst.lightBuffer, 0, light.buffer);
+        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 light, or the zero stand-in. */
+    /** The per-model group: its skinning matrices and its ObjectLight. */
     perInstanceBindGroup(name, skinMatrixBuffer, light) {
         return this.device.createBindGroup({
             label: `${name}: main per-instance bind group`,
             layout: this.mainPerInstanceBindGroupLayout,
             entries: [
                 { binding: 0, resource: { buffer: skinMatrixBuffer } },
-                { binding: 1, resource: { buffer: light ?? this.noFillBuffer } },
+                { binding: 1, resource: { buffer: light } },
             ],
         });
     }
@@ -9591,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);
@@ -11162,7 +11098,9 @@ export class Engine {
         let changed = force;
         for (let i = 0; i < this.cullDraws.length; i++) {
             const { inst, draw } = this.cullDraws[i];
-            const v = inst.hiddenMaterials.has(draw.materialName) || inst.morphHiddenMaterials.has(draw.materialName) ? 1 : 0;
+            // bit 0: switched off; bit 1: drawn by its native look, not its graph
+            const v = (inst.hiddenMaterials.has(draw.materialName) || inst.morphHiddenMaterials.has(draw.materialName) ? 1 : 0) |
+                (this.nativeLooks?.dresses(inst.name, draw.materialName) ? 2 : 0);
             if (out[i] !== v) {
                 out[i] = v;
                 changed = true;
@@ -11307,6 +11245,15 @@ export class Engine {
                 maxZ = Math.max(maxZ, data[o + 18] + r);
             }
         }
+        if (this.nativeStage) {
+            const nb = this.nativeStage.bounds;
+            minX = Math.min(minX, nb.min[0]);
+            maxX = Math.max(maxX, nb.max[0]);
+            minY = Math.min(minY, nb.min[1]);
+            maxY = Math.max(maxY, nb.max[1]);
+            minZ = Math.min(minZ, nb.min[2]);
+            maxZ = Math.max(maxZ, nb.max[2]);
+        }
         if (!Number.isFinite(minX)) {
             this.shadowSceneBounds = null;
             return;
@@ -12100,7 +12047,20 @@ export class Engine {
                 { binding: 2, resource: this.materialSampler },
             ],
         }));
-        const mainPerInstanceBindGroup = this.perInstanceBindGroup(name, skinMatrixBuffer, null);
+        // 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], 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({
+            label: `${name}: object light`,
+            size: objectLight.byteLength,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(lightBuffer, 0, objectLight);
+        const mainPerInstanceBindGroup = this.perInstanceBindGroup(name, skinMatrixBuffer, lightBuffer);
         const pickPerInstanceBindGroup = this.device.createBindGroup({
             label: `${name}: pick per-instance bind group`,
             layout: this.pickPerInstanceBindGroupLayout,
@@ -12133,8 +12093,8 @@ export class Engine {
             shadowDrawCalls: [],
             shadowBindGroups,
             mainPerInstanceBindGroup,
-            lightBuffer: null,
-            modelLight: null,
+            lightBuffer,
+            objectLight,
             pickPerInstanceBindGroup,
             pickDrawCalls: [],
             isStage,
@@ -12298,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
@@ -12308,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. */
@@ -12348,7 +12308,6 @@ export class Engine {
         gb[3] = fadeStart;
         gb[4] = fadeEnd;
         gb[5] = shadowStrength;
-        gb[6] = 1 / SHADOW_CASCADES[0].mapSize;
         gb[7] = gridSpacing;
         gb[8] = gridLineWidth;
         gb[9] = gridLineOpacity;
@@ -12370,19 +12329,6 @@ export class Engine {
         // Which variant the draw picks. Zero is the sharp shader, which is the one
         // that existed before softness did.
         this.groundSoft = gb[18] > 0;
-        // gb[17] — does the FAR cascade hold anything?
-        //
-        // It holds something only when a stage is loaded; that is what it exists for
-        // and the cascade loop already skips drawing into it otherwise, leaving it
-        // cleared. A cleared depth map compares as "no occluder", so the ground's far
-        // branch is nine comparison taps whose answer is known in advance.
-        //
-        // That branch runs wherever the NEAR cascade does not reach, and the near one
-        // is a 64-unit box around the camera target — so on a floor receding to the
-        // horizon it is most of the visible pixels, on the most expensive
-        // full-coverage draw in the frame. Skipping it is free in the exact sense:
-        // the shader takes vis = 1.0, which is what the taps would have returned.
-        gb[17] = this.hasStage() ? 1 : 0;
         // gb[20..23] — the caster sphere, refreshed every frame by
         // writeGroundCasterSphere. Zero here so a frame that renders before the
         // first cull (there is one) reads "nothing casts" and skips the taps, which
@@ -12447,12 +12393,11 @@ export class Engine {
             entries: [
                 { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
                 { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                { binding: 2, resource: this.shadowMapDepthViews[0] },
+                { binding: 2, resource: this.shadowAtlasView },
                 { binding: 3, resource: this.shadowComparisonSampler },
                 { binding: 4, resource: { buffer: this.groundShadowMaterialBuffer } },
                 { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
                 { binding: 6, resource: { buffer: this.lightsBuffer } },
-                { binding: 7, resource: this.shadowMapDepthViews[SHADOW_CASCADES.length - 1] },
                 { binding: 8, resource: { buffer: this.mirrorVPBuffer } },
                 // Created in handleResize, which runs during init — before any ground
                 // can exist to bind it.
@@ -12470,12 +12415,11 @@ export class Engine {
             entries: [
                 { binding: 0, resource: { buffer: this.mirrorCameraBuffer } },
                 { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                { binding: 2, resource: this.shadowMapDepthViews[0] },
+                { binding: 2, resource: this.shadowAtlasView },
                 { binding: 3, resource: this.shadowComparisonSampler },
                 { binding: 4, resource: { buffer: this.groundShadowMaterialBuffer } },
                 { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
                 { binding: 6, resource: { buffer: this.lightsBuffer } },
-                { binding: 7, resource: this.shadowMapDepthViews[SHADOW_CASCADES.length - 1] },
                 { binding: 8, resource: { buffer: this.mirrorVPBuffer } },
                 // Stand-ins, not the live mirror textures: this group draws INTO the
                 // mirror pass, where those are the attachments.
@@ -12698,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,
@@ -14089,54 +14044,54 @@ export class Engine {
         // the final frame's depth — and the ground, which draws on `hasGround` alone,
         // keeps PCF-sampling a character that is no longer in the scene. One clearing
         // pass on the transition to empty, then it stops.
-        if (hasModels || this.shadowMapPopulated) {
-            // The far cascade is the STAGE cascade, and it costs a full pass over the
-            // whole cast every frame to say so. Its own spec explains what it is for —
-            // "a set piece 100 units out still throws" — and a scene with no stage has
-            // no set piece: every caster sits inside the near cascade's 64-unit box,
-            // which follows the camera target, and the far map's only readers are
-            // ground pixels beyond that box, where nothing is casting.
-            //
-            // So when no stage is loaded it is drawn ONCE, cleared, and then skipped —
-            // the same shape as shadowMapPopulated above, and for the same reason. A
-            // cleared depth map reads as "no occluder", which is the correct answer
-            // here rather than a missing one. Load a stage and it comes straight back.
-            //
-            // 0.43 had ONE shadow map. This is half of what the second one costs.
+        // The game's globals before anything native draws: the stage's casters
+        // into the atlas are the first.
+        if (this.nativeStage || this.nativeLooks?.size)
+            this.prepareNativeLooks(encoder);
+        if (hasModels || this.nativeStage || this.shadowMapPopulated) {
+            // The outer cascades are the STAGE's, and each costs a pass over the whole
+            // cast. A scene with no stage has no set piece out there: every caster
+            // sits inside the inner cascade, which follows the camera target, and
+            // the outer tiles' only readers are ground pixels beyond it, where
+            // nothing is casting. So without a stage only the inner tile is drawn;
+            // the others keep the far plane cascade 0's pass cleared the whole atlas
+            // to, which compares as "no occluder" — the correct answer there.
             const stage = this.hasStage();
             for (let ci = 0; ci < SHADOW_CASCADES.length; ci++) {
-                const wanted = ci === 0 || stage;
-                // Already cleared and still unwanted — nothing to do, and the map still
-                // holds the far plane from the pass that cleared it.
-                if (!wanted && this.shadowCascadeCleared[ci])
+                if (ci > 0 && !stage)
                     continue;
+                const c = SHADOW_CASCADES[ci];
                 const sp = encoder.beginRenderPass({
-                    // One timestamp pair exists for "shadow"; the near cascade wears it.
+                    // One timestamp pair exists for "shadow"; the inner cascade wears it.
                     timestampWrites: ci === 0 ? this.stamps("shadow") : undefined,
                     colorAttachments: [],
                     depthStencilAttachment: {
-                        view: this.shadowMapDepthViews[ci],
+                        view: this.shadowAtlasView,
                         depthClearValue: 1.0,
-                        depthLoadOp: "clear",
+                        depthLoadOp: ci === 0 ? "clear" : "load",
                         depthStoreOp: "store",
                     },
                 });
+                // The tile: a bundle draws through the pass's viewport, which it
+                // cannot set itself, so one recording serves whichever tile is live.
+                sp.setViewport(c.origin[0], c.origin[1], c.mapSize, c.mapSize, 0, 1);
                 // The per-model `visible` test that used to guard this is gone: it is a
                 // per-frame boolean, and baking it into a bundle would make toggling a
                 // model re-record. It lives in the cull compute now, which zeroes the
                 // instance count of an invisible model's draws.
-                if (wanted && this.shadowBundles[ci])
+                if (this.shadowBundles[ci])
                     sp.executeBundles([this.shadowBundles[ci]]);
                 // The mirror throws shade like anything else standing on the floor.
                 // Direct rather than in the bundle: the bundles are recorded on scene
                 // STRUCTURE, and a mirror comes and goes with an effect's weight.
-                if (wanted && this.mirrorSurface && this.mirrorShadowPipeline) {
+                if (this.mirrorSurface && this.mirrorShadowPipeline) {
                     sp.setPipeline(this.mirrorShadowPipeline);
                     sp.setBindGroup(0, this.mirrorShadowBindGroups[ci]);
                     sp.draw(6);
                 }
+                if (this.nativeStage && this.nativeShadowHost)
+                    this.nativeStage.drawShadow(sp, this.nativeShadowHost, this.nativeGlobals, ci, this.shadowLightVPMatrix.subarray(ci * 16, ci * 16 + 16), 8);
                 sp.end();
-                this.shadowCascadeCleared[ci] = !wanted;
             }
             // The cast's shadow on a stage: drawn while a stage asks for it and has a
             // cast to shade it with; cleared once when it stops, then left alone.
@@ -14151,7 +14106,7 @@ export class Engine {
                 cp.end();
                 this.castShadowCleared = !castOn;
             }
-            this.shadowMapPopulated = hasModels;
+            this.shadowMapPopulated = hasModels || !!this.nativeStage;
         }
         // Before the particles and before the field pass: both may read the grid,
         // and a grid stepped after them is one frame stale in everything that used it.
@@ -14196,6 +14151,17 @@ export class Engine {
         // is FALSE for the cleared buffer — every such fragment silently rejected.
         // One redundant word against a whole class of invisible failure.
         pass.setStencilReference(Engine.STENCIL_EYE_VALUE);
+        // The models dressed in the game's materials, and the game's character
+        // passes after them (unity/looks.ts). They set their own stencil
+        // references, so the engine's is put back after.
+        if (this.nativeLooks?.size) {
+            this.nativeLooks.drawOpaque(pass);
+            pass.setStencilReference(Engine.STENCIL_EYE_VALUE);
+        }
+        if (this.nativeStage && this.nativeHost) {
+            this.nativeStage.drawOpaque(pass, this.nativeHost, this.nativeGlobals, this.nativeFrameTextures(), this.eyeArray());
+            pass.setStencilReference(Engine.STENCIL_EYE_VALUE);
+        }
         if (this.hasGround)
             this.renderGround(pass);
         // After the ground for the same early-z reason, and before the transparent
@@ -14228,6 +14194,14 @@ export class Engine {
         // which was never this renderer's bottleneck.
         const camView = this.sceneView("camera");
         this.forEachInstance((inst) => this.renderModelTransparentPhase(pass, inst, camView));
+        if (this.nativeStage && this.nativeHost) {
+            this.nativeStage.drawTransparent(pass, this.nativeHost, this.nativeGlobals, this.nativeFrameTextures(), this.eyeArray());
+            pass.setStencilReference(Engine.STENCIL_EYE_VALUE);
+        }
+        if (this.nativeLooks?.size) {
+            this.nativeLooks.drawTransparent(pass);
+            pass.setStencilReference(Engine.STENCIL_EYE_VALUE);
+        }
         // Last in the pass: depth-tested against everything drawn above, so a
         // particle behind the character is simply hidden, and still inside the HDR
         // target so an `#bloom` effect reaches the pyramid below.
@@ -14244,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;
@@ -14436,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);
@@ -14455,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) {
@@ -14750,9 +14719,35 @@ export class Engine {
                 claimed.set(m, install.group.id);
         return claimed;
     }
-    // Compile a group's graph → WGSL → pipeline(s), install keyed by group id. Reuses the
-    // install (pipeline + uniform buffer) when the graph/integration is byte-unchanged.
-    async compileAndInstallGroup(inst, group, opts) {
+    graphImage(url) {
+        let p = this.graphImageCache.get(url);
+        if (!p) {
+            p = fetch(url)
+                .then((r) => (r.ok ? r.blob() : Promise.reject(new Error(`${r.status} ${url}`))))
+                .then((b) => createImageBitmap(b, { colorSpaceConversion: "none", premultiplyAlpha: "none" }))
+                .catch((e) => {
+                console.warn(`[style] graph image: ${e.message}`);
+                return null;
+            });
+            this.graphImageCache.set(url, p);
+        }
+        return p;
+    }
+    /** The group with its graph's images, where the group brings none of its own. */
+    async withGraphImages(group) {
+        const wanted = group.graph.images;
+        if (!wanted?.length || group.images?.length)
+            return group;
+        const images = await Promise.all(wanted.slice(0, 4).map(async (w) => {
+            if (!w)
+                return null;
+            const source = await this.graphImage(w.url);
+            return source ? { source, srgb: w.srgb ?? false } : null;
+        }));
+        return { ...group, images };
+    }
+    async compileAndInstallGroup(inst, groupIn, opts) {
+        const group = await this.withGraphImages(groupIn);
         const renderClass = group.renderClass ?? "auto";
         const alphaMode = group.alphaMode ?? "opaque";
         // THE MAPS ARE PART OF THE SIGNATURE, because a matching one skips the
@@ -14780,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")
@@ -14792,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;
@@ -14799,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}` });
@@ -15030,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;
         });
     }
@@ -15042,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.
      *
@@ -15061,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
@@ -15143,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;
@@ -15851,6 +16012,249 @@ export class Engine {
         // The count rides in the anchor's spare lane, so rzTrailCount is one read.
         cd[anchorBase + 11] = count;
     }
+    /**
+     * Dress a model in the game's own materials — a look exported with ag-rip
+     * (translated shaders, their images, per-material passes and values, and a
+     * character rig) — or take it off with null. The materials it names are
+     * drawn by the game's shaders from then on; the rest keep their graphs, and
+     * every one still casts its shadow through the engine's pass.
+     */
+    setModelNativeLook(name, look) {
+        const inst = this.modelInstances.get(name);
+        if (!inst || !this.device)
+            return false;
+        if (!look) {
+            this.nativeLooks?.remove(name);
+            this.writeCullHidden(true);
+            return true;
+        }
+        if (!this.nativeLooks)
+            this.nativeLooks = new NativeLooks(this.device, this.ensureNativeHosts());
+        const skeleton = inst.model.getSkeleton();
+        const head = skeleton.bones.findIndex((b) => b.name === "頭");
+        // The head's rest position: a rigid inverse bind [R t] is the bind pose
+        // inverted, so the bind position is −Rᵀt.
+        let headRest = [0, 0, 0];
+        if (head >= 0) {
+            const m = skeleton.inverseBindMatrices.subarray(head * 16, head * 16 + 16);
+            headRest = [
+                -(m[0] * m[12] + m[1] * m[13] + m[2] * m[14]),
+                -(m[4] * m[12] + m[5] * m[13] + m[6] * m[14]),
+                -(m[8] * m[12] + m[9] * m[13] + m[10] * m[14]),
+            ];
+        }
+        const draws = inst.drawCalls
+            .filter((dc) => dc.baseBindGroupEntries)
+            .map((dc) => ({
+            materialName: dc.materialName,
+            firstIndex: dc.firstIndex,
+            count: dc.count,
+            diffuse: dc.baseBindGroupEntries.find((e) => e.binding === 0).resource,
+        }));
+        this.nativeLooks.install({
+            name,
+            vertices: inst.model.getVertices(),
+            indices: inst.model.getIndices(),
+            vertexBuffer: inst.vertexBuffer,
+            jointsBuffer: inst.jointsBuffer,
+            weightsBuffer: inst.weightsBuffer,
+            skinMatrixBuffer: inst.skinMatrixBuffer,
+            indexBuffer: inst.indexBuffer,
+            draws,
+            hidden: (m) => inst.hiddenMaterials.has(m) || inst.morphHiddenMaterials.has(m),
+            headSkin: () => (head >= 0 ? inst.model.getSkinMatrices().subarray(head * 16, head * 16 + 16) : null),
+            headRest,
+            layers: new Uint32Array(inst.objectLight.buffer)[0],
+        }, look);
+        this.writeCullHidden(true);
+        return true;
+    }
+    /** Resolves once a model's native look can draw: every pass's pipeline is
+     *  compiled (async, at setModelNativeLook). Until then its dressed materials
+     *  sit out — a host reveals the model after this to avoid that gap. */
+    nativeLookReady(name) {
+        return this.nativeLooks?.ready(name) ?? Promise.resolve();
+    }
+    /** 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() {
+        if (this.nativeHost)
+            return this.nativeHost;
+        const d = this.device;
+        const noShadow = d.createTexture({
+            label: "native: no shadow",
+            size: [1, 1],
+            format: "depth32float",
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        const enc = d.createCommandEncoder();
+        enc
+            .beginRenderPass({
+            colorAttachments: [],
+            depthStencilAttachment: { view: noShadow.createView(), depthClearValue: 1, depthLoadOp: "clear", depthStoreOp: "store" },
+        })
+            .end();
+        d.queue.submit([enc.finish()]);
+        this.nativeNoShadowView = noShadow.createView();
+        const solid = (label, rgba, cube = false) => {
+            const t = d.createTexture({
+                label,
+                size: [1, 1, cube ? 6 : 1],
+                format: "rgba8unorm",
+                usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+            });
+            for (let l = 0; l < (cube ? 6 : 1); l++)
+                d.queue.writeTexture({ texture: t, origin: [0, 0, l] }, new Uint8Array(rgba), { bytesPerRow: 4 }, [1, 1]);
+            return t.createView(cube ? { dimension: "cube" } : undefined);
+        };
+        const white = solid("native: white", [255, 255, 255, 255]);
+        const black = solid("native: black", [0, 0, 0, 255]);
+        // Unity's stand-ins for an empty slot, by the name a shader declares.
+        this.nativeFallback = {
+            white,
+            black,
+            "": white,
+            grey: solid("native: grey", [128, 128, 128, 255]),
+            gray: solid("native: gray", [128, 128, 128, 255]),
+            bump: solid("native: bump", [128, 128, 255, 255]),
+            red: solid("native: red", [255, 0, 0, 255]),
+        };
+        const fallback = {
+            white,
+            black,
+            blackCube: solid("native: black cube", [0, 0, 0, 255], true),
+            depth: this.nativeNoShadowView,
+            comparison: this.shadowComparisonSampler,
+        };
+        this.nativeHost = new NativeHost(d, {
+            colorFormats: sceneColorFormats(this.sceneFormats),
+            depthFormat: this.depthFormat,
+            sampleCount: Engine.MULTISAMPLE_COUNT,
+            reversedZ: this.reversedZ,
+        }, fallback);
+        this.nativeShadowHost = new NativeHost(d, { colorFormats: [], depthFormat: Engine.SHADOW_DEPTH_FORMAT, sampleCount: 1, reversedZ: false }, fallback);
+        return this.nativeHost;
+    }
+    /**
+     * Load a game stage as the game draws it - a package ag-rip's
+     * stage_native.py exported (stage.json and the files beside it, read through
+     * `read` by their paths in it) - or remove the one loaded with null. Its
+     * scene settings (fog, tint, ambient, environment) become the game shaders'
+     * for the whole scene; its lights are the caller's to set, as lights.
+     */
+    async setNativeStage(pkg, read, onProgress) {
+        const old = this.nativeStage;
+        this.nativeStage = null;
+        if (old)
+            old.destroy([this.nativeHost, this.nativeShadowHost]);
+        if (!pkg || !read || !this.device)
+            return;
+        const scene = this.ensureNativeHosts();
+        this.nativeStage = await NativeStage.load(this.device, pkg, read, { scene, shadow: this.nativeShadowHost }, { mipmaps: (t, levels) => this.generateMipmaps(t, levels), fallback: this.nativeFallback }, onProgress);
+    }
+    /** What went wrong in the game's shaders, and the names nothing supplied. */
+    nativeReport() {
+        const errors = [...(this.nativeHost?.errors ?? []), ...(this.nativeShadowHost?.errors ?? [])];
+        const missing = {};
+        for (const h of [this.nativeHost, this.nativeShadowHost])
+            for (const [k, v] of h?.missing ?? [])
+                missing[k] = (missing[k] ?? 0) + v;
+        return { errors, missing };
+    }
+    nativeFrameTextures() {
+        return { _MainLightShadowmapTexture: this.shadowAtlasView, sim_CharacterShadowmap: this.nativeNoShadowView ?? undefined };
+    }
+    eyeArray() {
+        const e = this.camera.getEyePosition();
+        return [e.x, e.y, e.z];
+    }
+    /** Before the scene pass: the dressed models' skinning and the game's globals. */
+    prepareNativeLooks(encoder) {
+        const looks = this.nativeLooks;
+        const view = this.camera.getViewMatrix().values;
+        const proj = this.camera.getProjectionMatrix().values;
+        const eye = this.camera.getEyePosition();
+        const sun = this.sun;
+        const dir = sun.direction.normalize();
+        const k = sun.strength;
+        // The document's lamps as their records store them.
+        const lights = [];
+        for (let i = 0; i < this.docLightCount; i++) {
+            const b = LIGHT_HEADER + i * LIGHT_STRIDE;
+            const d = this.lightsData;
+            lights.push({
+                position: [d[b], d[b + 1], d[b + 2]],
+                radius: d[b + 3],
+                color: [d[b + 4], d[b + 5], d[b + 6]],
+                aim: [d[b + 8], d[b + 9], d[b + 10]],
+                cosOuter: d[b + 11],
+                cosInner: d[b + 12],
+                layers: ~this.lightsWords[b + 13] >>> 0,
+            });
+        }
+        // A game stage brings its own lights: the game's shaders get exactly those
+        // (its sun, its lamps, all layers), whatever the scene's lamps are.
+        const stage = this.nativeStage;
+        let sunDirection = [dir.x, dir.y, dir.z];
+        let sunColor = [sun.color.x * k, sun.color.y * k, sun.color.z * k];
+        let sunShadow = this.sunShadow;
+        if (stage) {
+            // Its lamps are the stage's own; its key is the scene's sun, which the
+            // host sets from the stage (and a person may then move).
+            const L = stage.pkg.lights;
+            const sc = stage.pkg.scale;
+            lights.length = 0;
+            for (const l of L.additional) {
+                lights.push({
+                    position: [-l.position[0] * sc, l.position[1] * sc, -l.position[2] * sc],
+                    radius: l.range * sc,
+                    color: [l.color[0] * sc * sc, l.color[1] * sc * sc, l.color[2] * sc * sc],
+                    aim: (l.aim ? gameDir(l.aim) : [0, 0, 0]),
+                    cosOuter: l.cosOuter ?? -1,
+                    cosInner: l.cosInner ?? -1,
+                    layers: 0xffffffff,
+                    unity: l.unity,
+                });
+            }
+        }
+        const s = this.world.strength;
+        const sh = this.worldAmbientSH ?? this.worldSH ?? this.worldGradientSH;
+        const g = unityFrameGlobals({
+            scale: 8,
+            view,
+            proj,
+            eye: [eye.x, eye.y, eye.z],
+            near: this.camera.near,
+            far: this.camera.far,
+            width: this.canvas.width,
+            height: this.canvas.height,
+            time: this.sceneClock,
+            dt: 1 / 60,
+            sunDirection,
+            sunColor,
+            sunShadow,
+            lights,
+            ambientSH: sh ? Array.from(sh, (v) => v * s) : null,
+            ambientFlat: [this.world.color.x * s, this.world.color.y * s, this.world.color.z * s],
+            shadow: {
+                viewProj: SHADOW_CASCADES.map((_, i) => this.shadowLightVPMatrix.subarray(i * 16, i * 16 + 16)),
+                tiles: SHADOW_CASCADES.map((c) => [c.origin[0], c.origin[1]]),
+                tileSize: SHADOW_CASCADES[0].mapSize,
+                atlasSize: SHADOW_ATLAS_SIZE,
+                spheres: cascadeSpheres(this.shadowView, this.shadowSceneBounds).map((p) => ({
+                    center: [p.center.x, p.center.y, p.center.z],
+                    radius: p.radius,
+                })),
+            },
+            settings: this.nativeStage?.pkg.settings ?? null,
+        });
+        g.sim_TowardMatrix = towardMatrix(gameDir([view[2], view[6], view[10]]));
+        g._OutlineMaxOffsetMultiplier = outlineMaxOffsetMultiplier(this.canvas.width);
+        this.nativeGlobals = stableGlobals(this.nativeGlobals, g);
+        this.nativeHost?.beginFrame();
+        this.nativeShadowHost?.beginFrame();
+        looks?.prepare(encoder, this.nativeGlobals, 8, this.nativeFrameTextures());
+    }
     updateSkinMatrices() {
         this.forEachInstance((inst) => {
             // Only a pose pass can change these, and an idle stage did not run one —
@@ -16105,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.
@@ -16175,3 +16587,46 @@ 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
+ * object is new, so a light table or an SH that holds still costs nothing.
+ */
+function stableGlobals(prev, next) {
+    for (const k in next) {
+        const a = prev[k];
+        if (a !== undefined && sameValue(a, next[k]))
+            next[k] = a;
+    }
+    return next;
+}
+function sameValue(a, b) {
+    if (typeof a === "number" || typeof b === "number")
+        return a === b;
+    if (a.length !== b.length)
+        return false;
+    if (a instanceof Uint32Array !== b instanceof Uint32Array)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        const x = a[i];
+        const y = b[i];
+        if (typeof x === "number" || typeof y === "number") {
+            if (x !== y)
+                return false;
+        }
+        else if (!sameValue(x, y))
+            return false;
+    }
+    return true;
+}