reze-engine 0.63.0 → 0.65.0

package/src/engine.ts

@@ -44,9 +44,21 @@ import {
   type SimClock,
 } from "./effect-schedule"
 import { parentKeySpan, type ModelParentKey } from "./parent-keys"
-import { SHADOW_CASCADES, buildShadowCascades, type ShadowBounds, type ShadowView } from "./shadow-cascades"
+import { NativeHost } from "./unity/host"
+import { NativeLooks, type NativeLook } from "./unity/looks"
+import { NativeStage, type NativeStagePackage, type NativeStageReader } from "./unity/stage"
+import { gameDir, unityFrameGlobals } from "./unity/globals"
+import { outlineMaxOffsetMultiplier, towardMatrix } from "./unity/character"
+import type { NativeValue } from "./unity/host"
+import { SHADOW_ATLAS_SIZE, SHADOW_CASCADES, buildShadowCascades, cascadeSpheres, type ShadowBounds, type ShadowView } from "./shadow-cascades"
 import { REFLECTION_DEBUG_WGSL, buildMirrorCamera, planeFromPointNormal } from "./reflection"
-import { MIRROR_MASK_DOWNSAMPLE_WGSL, MIRROR_MAT_BYTES, mirrorShaderWgsl, mirrorShadowWgsl } from "./shaders/passes/mirror"
+import {
+  MIRROR_DOWNSAMPLE_WGSL,
+  MIRROR_MASK_DOWNSAMPLE_WGSL,
+  MIRROR_MAT_BYTES,
+  mirrorShaderWgsl,
+  mirrorShadowWgsl,
+} from "./shaders/passes/mirror"
 import { packHalf, type HdrImage } from "./hdr"
 import { evalIrradianceSH, projectIrradianceSH, gradientIrradianceSH } from "./ibl"
 import { LYRIC_ATLAS_MAX_H, LYRIC_ATLAS_MAX_W, LYRICS_FLOATS, lyricsApi, packLyrics, type LyricLine, type LyricRect } from "./shaders/lyrics-api"
@@ -98,11 +110,11 @@ import {
   type RigidbodyOverlayOptions,
 } from "./overlay"
 import {
-  BLOOM_BLIT_SHADER_WGSL,
-  BLOOM_DOWNSAMPLE_SHADER_WGSL,
+  BLOOM_BLUR_H_SHADER_WGSL,
+  BLOOM_BLUR_V_SHADER_WGSL,
+  BLOOM_PREFILTER_SHADER_WGSL,
   BLOOM_UPSAMPLE_SHADER_WGSL,
 } from "./shaders/passes/bloom"
-import { AGX_LUT_GZ, AGX_LUT_SIZE } from "./shaders/agx-lut"
 import {
   buildCompositeShader,
   EFFECT_SCENE_API,
@@ -464,6 +476,9 @@ type ParentTrack = { keys: HeldParentKey[]; applied: number; seat: [number, numb
 type SunOptions = {
   /** Linear color of the sun lamp (Blender: Light > Color). */
   color?: Vec3
+  /** The rendering layers it keys, as bits; every layer by default. A
+   *  directional light from setLights takes the layers the sun leaves. */
+  layers?: number
   /** Lamp power in Blender units (Blender: Light > Strength). */
   strength?: number
   /** Direction sunlight travels (points FROM sun TO scene, Blender: -light.rotation.Z). */
@@ -547,25 +562,29 @@ type CameraOptions = {
   fov?: number
 }
 
-/** EEVEE Bloom panel (3D Viewport > Render > Bloom). Fields map 1:1 to Blender's UI. */
+/** Bloom — Aether Gazer's own (shaders/passes/bloom.ts): a soft-knee prefilter,
+ *  a Gaussian chain down to a few pixels, and a scatter blend back up, added to
+ *  the scene before the view transform. The defaults ARE the game. */
 export type BloomOptions = {
   enabled: boolean
+  /** Brightest-channel level where the glow starts (the game's per-scene
+   *  threshold). The soft knee is always half of it. */
   threshold: number
-  knee: number
-  radius: number
+  /** 0..1: how far each level leans toward the wider one on the way up — low is
+   *  a tight halo, high a wide haze. The game: 0.77. */
+  scatter: number
+  /** Tint on the glow; white is the game. */
   color: Vec3
+  /** Multiplier on the glow added in the composite; 1 is the game. */
   intensity: number
-  clamp: number
 }
 
 export const DEFAULT_BLOOM_OPTIONS: BloomOptions = {
   enabled: true,
-  threshold: 0.5,
-  knee: 0.5,
-  radius: 4.0,
-  color: new Vec3(1.0, 0.7247558832168579, 0.6487361788749695),
-  intensity: 0.05,
-  clamp: 0.0,
+  threshold: 0.7,
+  scatter: 0.77,
+  color: new Vec3(1, 1, 1),
+  intensity: 1,
 }
 
 /** Camera depth of field — a bokeh gather in the composite pass. Costs nothing
@@ -604,31 +623,33 @@ export const DEFAULT_DEPTH_OF_FIELD_OPTIONS: DepthOfFieldOptions = {
   quality: "balanced",
 }
 
-/** Blender Color Management / View (rendering.txt: Filmic, exposure, gamma). `look` is reserved for future curve tweaks. */
+/** How the scene-linear frame becomes a display image: exposure, then a tone
+ *  transform, then display gamma. */
 export type ViewTransformOptions = {
-  /** Stops applied before Filmic: `linear *= 2^exposure`. */
+  /** Stops applied before the transform: `linear *= 2^exposure`. */
   exposure: number
-  /** After Filmic, display gamma (`pow(rgb, 1/gamma)`). */
+  /** After the transform, display gamma (`pow(rgb, 1/gamma)`). */
   gamma: number
   /**
-   * Which display transform the frame is formed with.
+   * Which display transform the frame is formed with (composite.ts, viewTransform).
    *
-   * "standard" is Blender's Standard: the sRGB encoding and nothing else, which
-   * is what NPR and anime work uses — the colours the graph computes are the
-   * colours that land, with no film curve reinterpreting them. Both of the
-   * reference Wuthering Waves projects render this way.
+   * "soft" — Aether Gazer's own final curve, (1 - e^(-2.5x))^1.4. The default.
+   * "neutral" — Unity URP's Neutral, the Khronos PBR Neutral operator: colour
+   *   passes through until the top fifth, which rolls off.
+   * "aces" — Unity URP's ACES (RRT + ODT approximation from the Core RP).
+   * "none" — the sRGB encoding and nothing else.
    *
-   * "filmic" is Blender 3.6's Filmic, Medium High Contrast, baked as a LUT.
+   * All four end in the sRGB encoding.
    */
-  transform: "agx" | "filmic" | "standard"
+  transform: ViewTransformName
 }
 
-// Matches the reference Blender project: Filmic view, Medium High Contrast look,
-// exposure 0.3, gamma 1.0, sRGB display, no curves.
+export type ViewTransformName = "soft" | "neutral" | "aces" | "none"
+
 export const DEFAULT_VIEW_TRANSFORM: ViewTransformOptions = {
-  exposure: 0.6,
+  exposure: 0,
   gamma: 1.0,
-  transform: "filmic",
+  transform: "soft",
 }
 
 /** Color grading applied to the tonemapped scene (ASC CDL — see grade() in
@@ -723,9 +744,9 @@ export type EngineOptions = {
   /** Canvas background (display-space sRGB 0–1), composited under the scene after
    *  tonemapping. Omit/null = transparent canvas (see setBackgroundColor). */
   background?: Vec3 | null
-  /** Initial EEVEE-style bloom; tune at runtime with `setBloomOptions`. */
+  /** Initial bloom; tune at runtime with `setBloomOptions`. */
   bloom?: Partial<BloomOptions>
-  /** View transform (exposure/gamma) applied in composite before/after Filmic. */
+  /** View transform (exposure, tone transform, gamma) applied in the composite. */
   view?: Partial<ViewTransformOptions>
   onRaycast?: RaycastCallback
   /** See {@link GizmoDragCallback}. */
@@ -918,16 +939,19 @@ interface ModelInstance {
   indexBuffer: GPUBuffer
   jointsBuffer: GPUBuffer
   weightsBuffer: GPUBuffer
+  /** The outline hull's own stream — smoothed normal + PMX edge scale per
+   *  vertex (outline-normals.ts). Made with the first edge-flagged material,
+   *  so a model with no outline never pays for it. */
+  outlineVertexBuffer?: GPUBuffer
   skinMatrixBuffer: GPUBuffer
   drawCalls: DrawCall[]
   shadowDrawCalls: DrawCall[]
   shadowBindGroups: GPUBindGroup[]
   mainPerInstanceBindGroup: GPUBindGroup
-  /** Its own light — fill, sun and options — when setModelFill, setModelSun or
-   *  setModelFlatSky gave it one: a 48-byte ModelLight, and the CPU copy it is
-   *  written from. */
-  lightBuffer: GPUBuffer | null
-  modelLight: Float32Array | null
+  /** Its ObjectLight — rendering layers, its own ambient, its fill — and the CPU copy it
+   *  is written from. Every model has one: its layers decide its lights. */
+  lightBuffer: GPUBuffer
+  objectLight: Float32Array<ArrayBuffer>
   pickPerInstanceBindGroup: GPUBindGroup
   pickDrawCalls: PickDrawCall[]
   /** Environment geometry added via addStage — no physics, no IK, and it
@@ -1827,8 +1851,33 @@ export type SceneLight = {
   aim?: XYZ
   angle?: number
   innerAngle?: number
+  /**
+   * "directional": light along `aim` from infinitely far, as the sun is —
+   * position and radius unused; up to three, beside the sun. Otherwise a spot
+   * where an aim is given and a point where none is.
+   */
+  kind?: "point" | "spot" | "directional"
+  /**
+   * The rendering layers it reaches, as bits (RENDERING_LAYER_*). Omitted
+   * reaches every layer. A stage's daylight on RENDERING_LAYER_DEFAULT and the
+   * cast's key on RENDERING_LAYER_CHARACTER is how a game lights the two apart.
+   */
+  layers?: number
 }
 
+/**
+ * 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 {
   private static instance: Engine | null = null
 
@@ -1857,7 +1906,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.
   private lightData = new Float32Array(112)
+  private lightDataWords = new Uint32Array(this.lightData.buffer)
+  private sunLayers = ALL_LAYERS
   private castShadow: StageCastShadow | null = null
   private castShadowTexture!: GPUTexture
   private castShadowView!: GPUTextureView
@@ -2036,7 +2089,6 @@ export class Engine {
   private mainPerFrameBindGroupLayout!: GPUBindGroupLayout
   private mainPerInstanceBindGroupLayout!: GPUBindGroupLayout
   /** What a model with no fill of its own binds: zero light. */
-  private noFillBuffer!: GPUBuffer
   private mainPerMaterialBindGroupLayout!: GPUBindGroupLayout
   private outlinePerFrameBindGroupLayout!: GPUBindGroupLayout
   private outlinePerMaterialBindGroupLayout!: GPUBindGroupLayout
@@ -2466,6 +2518,7 @@ export class Engine {
    *  premultiplied quantity and a blur has to move them together. */
   private mirrorMaskMipViews: GPUTextureView[] = []
   private mirrorMaskBlurBindGroups: GPUBindGroup[] | null = null
+  private mirrorDownsamplePipeline: GPURenderPipeline | null = null
   private mirrorMaskDownsamplePipeline: GPURenderPipeline | null = null
   /** Two blocks the ground reads its clip from: the camera's is inert, the
    *  mirror's carries the live plane. Which one a draw sees is decided by which
@@ -2642,12 +2695,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. */
   private sceneClock = 0
+  /** Models dressed in the game's own materials (unity/looks.ts); built on the
+   *  first look installed. */
+  private nativeLooks: NativeLooks | null = null
+  /** The scene pass's host for the game's shaders, and the shadow atlas's. */
+  private nativeHost: NativeHost | null = null
+  private nativeShadowHost: NativeHost | null = null
+  /** A game stage drawn by its own shaders (unity/stage.ts). */
+  private nativeStage: NativeStage | null = null
+  /** The frame's Unity globals, computed once for every native draw. */
+  private nativeGlobals: Record<string, NativeValue> = {}
+  private nativeFallback: Record<string, GPUTextureView> = {}
+  /** A 1x1 depth map at the far plane: a game shader's shadow lookup into a
+   *  map the scene does not have reads lit. */
+  private nativeNoShadowView: GPUTextureView | null = null
   private trailAccum = 0
   /** Trail samples owed this frame, computed once so every trail on every
    *  character samples in lockstep and their paths stay comparable. */
   private trailDue = 0
-  private agxLutTexture: GPUTexture | null = null
-  private agxFallbackTexture!: GPUTexture
   /** The scene's own grade (setStageGrade): the cube as handed over, kept so a
    *  call before init() still lands, and its texture once uploaded. */
   private stageGradeCube: StageGradeLut | null = null
@@ -2661,12 +2726,8 @@ export class Engine {
    *  `time` is measured from here — see where it is written. */
   private compositeBloomView: GPUTextureView | null = null
 
-  // EEVEE-style bloom pyramid (mirrors Blender 3.6 effect_bloom_frag.glsl):
-  //   blit (HDR → half-res, 4-tap Karis + soft threshold/knee)
-  //   N-1 downsamples (13-tap Jimenez/COD box filter, 5 group averages)
-  //   N-1 upsamples (9-tap tent, additively combined with corresponding downsample mip)
-  //   composite adds bloomUp mip 0 × (color × intensity) to HDR before Filmic.
-  // Matches EEVEE energy: tint/intensity applied at composite, not prefilter.
+  // Linear clamp sampler for the bloom chain (also the mirror blur and the
+  // composite's bloom read).
   private bloomSampler!: GPUSampler
   // Screen-space subsurface scattering (passes/subsurface.ts). The scratch target
   // is the X pass's output and lives with the canvas size; the bind groups name
@@ -2684,33 +2745,56 @@ export class Engine {
   private readonly pipelineDescs = new WeakMap<GPURenderPipeline, GPURenderPipelineDescriptor>()
   private readonly singleSided = new WeakMap<GPURenderPipeline, GPURenderPipeline>()
   private readonly singleSidedMirror = new WeakMap<GPURenderPipeline, GPURenderPipeline>()
+  /** Twins whose async build is in flight, so a draw asks for each once. */
+  private readonly sidedPending = new WeakSet<GPURenderPipeline>()
+  private readonly sidedPendingMirror = new WeakSet<GPURenderPipeline>()
+  // The engine-wide shader cache (see cachedRenderPipeline). Modules by WGSL
+  // source, pipelines by module + descriptor state: one compile per source,
+  // whoever asks — a graph on two models, an effect reinstalled, the composite.
+  private readonly shaderModuleCache = new Map<string, GPUShaderModule>()
+  private readonly pipelineCache = new Map<string, Promise<GPURenderPipeline | GPUComputePipeline>>()
+  private readonly bindGroupLayoutCache = new Map<string, GPUBindGroupLayout>()
+  private readonly pipelineLayoutCache = new Map<string, GPUPipelineLayout>()
+  private readonly gpuObjectIds = new WeakMap<object, number>()
+  private gpuObjectNext = 1
+  /** Init's pipelines, built async and in parallel; init awaits them. Null
+   *  outside init, where a pipeline job builds the way it always did. */
+  private initPipelineJobs: Promise<unknown>[] | null = null
   // Stepped motion (#stepped). The models whose pose is being HELD this frame —
   // their skinning and morph uploads wait for the stepped clock's next tick —
   // and the tick each was last shown at. Empty while no effect declares it.
   private readonly steppedHeld = new Set<string>()
   private readonly steppedTick = new Map<string, number>()
   private steppedLastClock = -1
-  private bloomBlitUniformBuffer!: GPUBuffer
-  private bloomUpsampleUniformBuffer!: GPUBuffer
-  private readonly bloomBlitUniformData = new Float32Array(4)
-  private readonly bloomUpsampleUniformData = new Float32Array(4)
-  private bloomBlitPipeline!: GPURenderPipeline
-  private bloomDownsamplePipeline!: GPURenderPipeline
-  private bloomUpsamplePipeline!: GPURenderPipeline
-  private bloomBlitBindGroupLayout!: GPUBindGroupLayout
-  private bloomDownsampleBindGroupLayout!: GPUBindGroupLayout
-  private bloomUpsampleBindGroupLayout!: GPUBindGroupLayout
-  private bloomDownTexture!: GPUTexture
-  private bloomUpTexture!: GPUTexture
-  private bloomMipCount = 0
-  private bloomDownMipViews: GPUTextureView[] = []
-  private bloomUpMipViews: GPUTextureView[] = []
-  private bloomBlitBindGroup!: GPUBindGroup
-  private bloomDownsampleBindGroups: GPUBindGroup[] = []
-  private bloomUpsampleBindGroups: GPUBindGroup[] = []
+
+  // Bloom (shaders/passes/bloom.ts), Aether Gazer's chain. One level per halving
+  // down to a few pixels (the game's count, up to 16), each a down/up pair;
+  // up[i] holds the horizontal blur on the way down and the scatter blend on the
+  // way up. The composite adds up[0] × (color × intensity) before the view transform.
+  private bloomPrefilterBindGroupLayout!: GPUBindGroupLayout
+  private bloomBlurBindGroupLayout!: GPUBindGroupLayout
   /** Single-attachment pass; colorAttachments[0].view set per bloom step. */
   private bloomPassDescriptor!: GPURenderPassDescriptor
-  private static readonly BLOOM_MAX_LEVELS = 5
+  private bloomPrefilterPipeline: GPURenderPipeline | null = null
+  private bloomBlurHPipeline: GPURenderPipeline | null = null
+  private bloomBlurVPipeline: GPURenderPipeline | null = null
+  private bloomUpsamplePipeline: GPURenderPipeline | null = null
+  private bloomUpsampleBindGroupLayout: GPUBindGroupLayout | null = null
+  private bloomUniformBuffer: GPUBuffer | null = null
+  private readonly bloomUniformData = new Float32Array(4)
+  private bloomDownTexture: GPUTexture | null = null
+  private bloomUpTexture: GPUTexture | null = null
+  private bloomLevels = 0
+  private bloomDownViews: GPUTextureView[] = []
+  private bloomUpViews: GPUTextureView[] = []
+  private bloomPrefilterBindGroup: GPUBindGroup | null = null
+  private bloomBlurHBindGroups: GPUBindGroup[] = []
+  private bloomBlurVBindGroups: GPUBindGroup[] = []
+  private bloomUpsampleBindGroups: GPUBindGroup[] = []
+  /** The game's prefilter clamps at 6550.4 — a tenth of the half-float ceiling
+   *  (its BloomPass _Params.y of 100 never reaches the shader). */
+  private static readonly BLOOM_CLAMP = 6550.4
+  private static readonly BLOOM_MAX_LEVELS = 16
 
   // Ground properties (shadow only)
   private groundVertexBuffer?: GPUBuffer
@@ -2719,14 +2803,11 @@ export class Engine {
   /** The user's own "no ground" switch — see setGroundVisible. Distinct from
    *  hasGround, which records whether a ground was ever built. */
   private groundHidden = false
-  private shadowMapTextures: GPUTexture[] = []
-  private shadowMapDepthViews: GPUTextureView[] = []
+  /** The sun's shadow atlas: every cascade in its own tile (shadow-cascades.ts). */
+  private shadowAtlasTexture!: GPUTexture
+  private shadowAtlasView!: GPUTextureView
   private brdfLutTexture!: GPUTexture
   private brdfLutView!: GPUTextureView
-  private filmicLutTexture!: GPUTexture
-  private filmicLutView!: GPUTextureView
-  // Width of the baked Filmic tone LUT (composite.ts FILMIC_LUT_W must match).
-  private static readonly FILMIC_LUT_WIDTH = 256
   private shadowDepthPipeline!: GPURenderPipeline
   private shadowLightVPBuffer!: GPUBuffer
   // The shadow PASS reads one cascade's matrix per pass, and a uniform binding
@@ -2868,18 +2949,16 @@ export class Engine {
     this.backgroundColor = bg ? new Vec3(bg.x, bg.y, bg.z) : null
   }
 
-  /** Merge partial bloom with EEVEE defaults (same as constructor). */
+  /** Merge partial bloom with the defaults (same as constructor). */
   static mergeBloomDefaults(partial?: Partial<BloomOptions>): BloomOptions {
     const d = DEFAULT_BLOOM_OPTIONS
     const c = partial?.color
     return {
       enabled: partial?.enabled ?? d.enabled,
       threshold: partial?.threshold ?? d.threshold,
-      knee: partial?.knee ?? d.knee,
-      radius: partial?.radius ?? d.radius,
+      scatter: partial?.scatter ?? d.scatter,
       color: c ? new Vec3(c.x, c.y, c.z) : new Vec3(d.color.x, d.color.y, d.color.z),
       intensity: partial?.intensity ?? d.intensity,
-      clamp: partial?.clamp ?? d.clamp,
     }
   }
 
@@ -2892,17 +2971,15 @@ export class Engine {
     }
   }
 
-  /** Current bloom settings (Blender names; tint is a copied `Vec3`). */
+  /** Current bloom settings (tint is a copied `Vec3`). */
   getBloomOptions(): BloomOptions {
     const b = this.bloomSettings
     return {
       enabled: b.enabled,
       threshold: b.threshold,
-      knee: b.knee,
-      radius: b.radius,
+      scatter: b.scatter,
       color: new Vec3(b.color.x, b.color.y, b.color.z),
       intensity: b.intensity,
-      clamp: b.clamp,
     }
   }
 
@@ -3056,6 +3133,14 @@ export class Engine {
     return b.enabled && b.intensity > 0
   }
 
+  /** viewU[6].y per transform — see viewTransform in composite.ts. */
+  private static readonly VIEW_TRANSFORM_ID: Record<string, number> = {
+    soft: 0,
+    none: 1,
+    neutral: 2,
+    aces: 3,
+  }
+
   private writeCompositeViewUniforms(): void {
     const v = this.viewTransform
     const b = this.bloomSettings
@@ -3098,7 +3183,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,
@@ -3828,7 +3913,7 @@ export class Engine {
   }
 
   /**
-   * Fill the mirror's mip levels — the bloom pyramid's own 13-tap downsample,
+   * Fill the mirror's mip levels — a 13-tap downsample (MIRROR_DOWNSAMPLE_WGSL),
    * one pass per level. Only when the blur dial is up: at zero the ground
    * samples level 0 exactly and the chain would be work nobody reads.
    */
@@ -3838,8 +3923,19 @@ export class Engine {
     // memory, which read as the model going black the moment the slider moved.
     const blur = Math.max(this.groundMirrorBlur, this.mirrorSurface?.blur ?? 0)
     if (blur <= 0 || this.mirrorMipCount < 2) return
+    if (!this.mirrorDownsamplePipeline) {
+      const module = this.device.createShaderModule({ label: "mirror downsample", code: MIRROR_DOWNSAMPLE_WGSL })
+      this.mirrorDownsamplePipeline = this.device.createRenderPipeline({
+        label: "mirror downsample pipeline",
+        layout: "auto",
+        vertex: { module, entryPoint: "vs" },
+        fragment: { module, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
+        primitive: { topology: "triangle-list" },
+      })
+    }
+    const downsample = this.mirrorDownsamplePipeline
     if (!this.mirrorBlurBindGroups) {
-      const layout = this.bloomDownsamplePipeline.getBindGroupLayout(0)
+      const layout = downsample.getBindGroupLayout(0)
       this.mirrorBlurBindGroups = []
       for (let i = 1; i < this.mirrorMipCount; i++) {
         this.mirrorBlurBindGroups.push(
@@ -3859,7 +3955,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()
@@ -4027,7 +4123,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.
@@ -4035,7 +4130,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 } },
@@ -4473,8 +4567,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 },
@@ -4736,21 +4828,38 @@ export class Engine {
     if (this.device && this.compositeUniformBuffer) this.writeCompositeViewUniforms()
   }
 
-  private makeCompositePipeline(module: GPUShaderModule, applyGamma: boolean, label: string): GPURenderPipeline {
-    return this.device.createRenderPipeline({
-      label,
-      layout: this.compositePipelineLayout,
-      vertex: { module, entryPoint: "vs" },
-      fragment: {
-        module,
-        entryPoint: "fs",
-        constants: { APPLY_GAMMA: applyGamma ? 1 : 0 },
-        targets: [{ format: this.presentationFormat }],
-      },
-      primitive: { topology: "triangle-list" },
-    })
+  /**
+   * The scene composite's pair (gamma = 1, gamma ≠ 1), async and from the
+   * shader cache. Its source depends only on which field mounts the scene
+   * samples, so there are four at most, and an effect install that keeps the
+   * mounts it had gets the pair already built.
+   */
+  private compositePipelines(hasBackground: boolean, hasForeground: boolean): Promise<[GPURenderPipeline, GPURenderPipeline]> {
+    const code = buildCompositeShader(
+      hasBackground || hasForeground
+        ? // No wgsl and so no trails: the composite hosts no effect source at
+          // all, it only decides whether to sample the layer the field pass drew.
+          { wgsl: "", paramsDecl: "", hasBackground, hasForeground, gridSize: 0, trailCount: 0 }
+        : null,
+    )
+    const module = this.cachedShaderModule(code, "composite shader")
+    const make = (applyGamma: boolean, label: string) =>
+      this.cachedRenderPipeline({
+        label,
+        layout: this.compositePipelineLayout,
+        vertex: { module, entryPoint: "vs" },
+        fragment: {
+          module,
+          entryPoint: "fs",
+          constants: { APPLY_GAMMA: applyGamma ? 1 : 0 },
+          targets: [{ format: this.presentationFormat }],
+        },
+        primitive: { topology: "triangle-list" },
+      })
+    return Promise.all([make(false, "composite pipeline (gamma=1)"), make(true, "composite pipeline (gamma!=1)")])
   }
 
+
   /**
    * Install the scene's WGSL effect (shadertoy-style), rendered per-pixel in the
    * composite pass. ONE effect per scene, and the code says where it mounts by
@@ -4988,11 +5097,11 @@ export class Engine {
       hasBackground || hasForeground
         ? { wgsl, paramsDecl, hasBackground, hasForeground, gridSize, alias, trailCount: anchors.filter((a) => a.trail).length, filter, additiveLayer: d.additiveLayer }
         : null
-    const source = buildCompositeShader(fieldEffect)
-    this.device.pushErrorScope("validation")
-    const module = this.device.createShaderModule({ label: "composite shader (effect)", code: source })
-    const scopeErr = await this.device.popErrorScope()
-    if (scopeErr) return { ok: false, diagnostics: [scopeErr.message], mounts, params: d.params, duration: d.duration, readsCast: false }
+    // No composite is built here. One used to be — a module and two pipelines
+    // per effect, then dropped: the composite is static (no user code reaches
+    // it) and setEffects builds the scene's one after the list is in. Those
+    // two compiles were most of a second each and validated nothing an author
+    // wrote.
 
     // Declared like every other mount property: by what the source says, not by
     // a setting somewhere else that an author cannot see from the file.
@@ -5004,16 +5113,11 @@ export class Engine {
       const fieldSource = buildFieldShader({ ...fieldEffect, ids: mrtIdsEnabled() })
       const userLineOffset = fieldSource.slice(0, fieldSource.indexOf(wgsl)).split("\n").length - 1
       this.device.pushErrorScope("validation")
-      const fieldModule = this.device.createShaderModule({ label: "field shader (effect)", code: fieldSource })
-      const info = await fieldModule.getCompilationInfo()
-      const fieldScopeErr = await this.device.popErrorScope()
-      const diagnostics = info.messages
-        .filter((m) => m.type === "error")
-        .map((m) => `${Math.max(0, m.lineNum - userLineOffset)}:${m.linePos} ${m.message}`)
-      if (diagnostics.length === 0 && fieldScopeErr) diagnostics.push(fieldScopeErr.message)
-      if (diagnostics.length > 0) return { ok: false, diagnostics, mounts, params: d.params, duration: d.duration, readsCast: false }
-      try {
-        fieldPipeline = await this.device.createRenderPipelineAsync({
+      const fieldModule = this.cachedShaderModule(fieldSource, "field shader (effect)")
+      const fieldScope = this.device.popErrorScope()
+      // Started before the diagnostics are read, which only decide whether it
+      // is kept: the compile and the check overlap.
+      const fieldBuild = this.cachedRenderPipeline({
           label: "field layer pipeline",
           layout: this.fieldPipelineLayout,
           vertex: { module: fieldModule, entryPoint: "fieldVs" },
@@ -5041,33 +5145,22 @@ export class Engine {
           primitive: { topology: "triangle-list" },
           multisample: { count: 1 },
         })
+      fieldBuild.catch(() => {})
+      const [info, fieldScopeErr] = await Promise.all([fieldModule.getCompilationInfo(), fieldScope])
+      const diagnostics = info.messages
+        .filter((m) => m.type === "error")
+        .map((m) => `${Math.max(0, m.lineNum - userLineOffset)}:${m.linePos} ${m.message}`)
+      if (diagnostics.length === 0 && fieldScopeErr) diagnostics.push(fieldScopeErr.message)
+      if (diagnostics.length > 0) {
+        this.forgetShaderModule(fieldSource)
+        return { ok: false, diagnostics, mounts, params: d.params, duration: d.duration, readsCast: false }
+      }
+      try {
+        fieldPipeline = await fieldBuild
       } catch (e) {
         return { ok: false, diagnostics: [e instanceof Error ? e.message : String(e)], mounts, params: d.params, duration: d.duration, readsCast: false }
       }
     }
-    let identity: GPURenderPipeline
-    let gamma: GPURenderPipeline
-    try {
-      const make = (applyGamma: boolean, label: string) =>
-        this.device.createRenderPipelineAsync({
-          label,
-          layout: this.compositePipelineLayout,
-          vertex: { module, entryPoint: "vs" },
-          fragment: {
-            module,
-            entryPoint: "fs",
-            constants: { APPLY_GAMMA: applyGamma ? 1 : 0 },
-            targets: [{ format: this.presentationFormat }],
-          },
-          primitive: { topology: "triangle-list" },
-        })
-      ;[identity, gamma] = await Promise.all([
-        make(false, "composite pipeline (effect, gamma=1)"),
-        make(true, "composite pipeline (effect, gamma!=1)"),
-      ])
-    } catch (e) {
-      return { ok: false, diagnostics: [e instanceof Error ? e.message : String(e)], mounts, params: d.params, duration: d.duration, readsCast: false }
-    }
 
     // Built BEFORE the swap: a particle stage that fails to compile has to leave
     // the previously installed effect running, exactly as a bad composite does.
@@ -5311,6 +5404,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()
@@ -5323,9 +5419,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 []
@@ -5381,6 +5476,14 @@ export class Engine {
       if (r) r.diagnostics.push(`anchor "${d.bone}" dropped: the scene is already using all ${MAX_EFFECT_ANCHORS} slots`)
     }
 
+    // The composite for the new list, built before the swap below so the swap
+    // stays one synchronous step. From the shader cache: it was rebuilt, and
+    // synchronously, on every install.
+    const [compositeIdentity, compositeGamma] = await this.compositePipelines(
+      instances.some((e) => e.hasBackground),
+      instances.some((e) => e.hasForeground),
+    )
+
     // ── Swap. Everything above either succeeded or was excluded, so the scene
     // that was running is only torn down now.
     for (const e of this.effects) {
@@ -5432,20 +5535,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
@@ -5542,26 +5633,32 @@ export class Engine {
       alias,
     }
 
+    // The scope is popped before the first await: compiles run side by side
+    // (both modules here, other effects, style groups), and a scope held open
+    // across an await would catch whichever of them errored first.
     const compile = async (code: string, label: string): Promise<GPUShaderModule | string[]> => {
       const offset = code.slice(0, code.indexOf(wgsl)).split("\n").length - 1
       this.device.pushErrorScope("validation")
-      const module = this.device.createShaderModule({ label, code })
-      const info = await module.getCompilationInfo()
-      const scopeErr = await this.device.popErrorScope()
+      const module = this.cachedShaderModule(code, label)
+      const scope = this.device.popErrorScope()
+      const [info, scopeErr] = await Promise.all([module.getCompilationInfo(), scope])
       const diagnostics = info.messages
         .filter((m) => m.type === "error")
         .map((m) => `${Math.max(0, m.lineNum - offset)}:${m.linePos} ${m.message}`)
       if (diagnostics.length === 0 && scopeErr) diagnostics.push(scopeErr.message)
+      if (diagnostics.length) this.forgetShaderModule(code)
       return diagnostics.length ? diagnostics : module
     }
 
-    const computeModule = await compile(buildParticleComputeShader(src, cast), "particle compute")
+    const [computeModule, renderModule] = await Promise.all([
+      compile(buildParticleComputeShader(src, cast), "particle compute"),
+      compile(buildParticleRenderShader(src, cast), "particle render"),
+    ])
     if (Array.isArray(computeModule)) {
       points?.buffer.destroy()
       dropTextures()
       return { ok: false, diagnostics: computeModule }
     }
-    const renderModule = await compile(buildParticleRenderShader(src, cast), "particle render")
     if (Array.isArray(renderModule)) {
       points?.buffer.destroy()
       dropTextures()
@@ -5602,7 +5699,7 @@ export class Engine {
     // layout invalid, and the error surfaces later and unhelpfully as "invalid
     // due to a previous error".
     const layoutFor = (storage: GPUBufferBindingType, visibility: number, shadow: boolean, withIndirect: boolean) =>
-      this.device.createBindGroupLayout({
+      this.cachedBindGroupLayout({
         entries: [
           { binding: 0, visibility, buffer: { type: storage } },
           { binding: 1, visibility, buffer: { type: "uniform" } },
@@ -5632,8 +5729,7 @@ export class Engine {
                 { binding: PARTICLE_LIGHT_BINDING, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" as const } },
                 { binding: PARTICLE_LIGHT_BINDING + 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" as const } },
                 { binding: PARTICLE_LIGHT_BINDING + 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" as const } },
-                { binding: PARTICLE_LIGHT_BINDING + 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" as const } },
-                { binding: PARTICLE_LIGHT_BINDING + 4, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "comparison" as const } },
+                { binding: PARTICLE_LIGHT_BINDING + 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "comparison" as const } },
               ]
             : []),
           // The live count's arguments, for the COUNT kernel's layout alone. The
@@ -5682,9 +5778,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 } }] : []),
@@ -5716,32 +5811,29 @@ export class Engine {
     const targets = sceneTargetsFor(src.blend === "additive" ? "particle-additive" : "particle", this.sceneFormats)
     const cutout = src.blend === "cutout"
 
+    // ALL STAGES AT ONCE: compute, count, prepass and shading compile side by
+    // side rather than in turn. The scope closes before the first await, for
+    // the reason compile() gives.
     this.device.pushErrorScope("validation")
-    try {
-      const computePipelineLayout = this.device.createPipelineLayout({ bindGroupLayouts: [computeLayout] })
-      const compute = await this.device.createComputePipelineAsync({
+    const renderLayoutObj = this.cachedPipelineLayout([renderLayout])
+    const builds = Promise.all([
+      this.cachedComputePipeline({
         label: "particle compute pipeline",
-        layout: computePipelineLayout,
+        layout: this.cachedPipelineLayout([computeLayout]),
         compute: { module: computeModule, entryPoint: "main" },
-      })
-      const live =
-        indirect && countLayout
-          ? {
-              pipeline: await this.device.createComputePipelineAsync({
-                label: "particle count pipeline",
-                layout: this.device.createPipelineLayout({ bindGroupLayouts: [countLayout] }),
-                compute: { module: computeModule, entryPoint: "rzCount" },
-              }),
-              indirect,
-              binds: bindFor(countLayout, this.cameraUniformBuffer, false, true),
-            }
-          : null
-      const renderLayoutObj = this.device.createPipelineLayout({ bindGroupLayouts: [renderLayout] })
+      }),
+      indirect && countLayout
+        ? this.cachedComputePipeline({
+            label: "particle count pipeline",
+            layout: this.cachedPipelineLayout([countLayout]),
+            compute: { module: computeModule, entryPoint: "rzCount" },
+          })
+        : null,
       // The prepass, when the effect gave the cutout a cheap shape: coverage to
       // depth, colour targets at writeMask 0 (the depth-prepass class), and
       // the shading pass below then tests EQUAL and writes no depth.
-      const depth = prepass
-        ? await this.device.createRenderPipelineAsync({
+      prepass
+        ? this.cachedRenderPipeline({
             label: "particle depth prepass pipeline",
             layout: renderLayoutObj,
             vertex: { module: renderModule, entryPoint: "vs" },
@@ -5750,8 +5842,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" },
@@ -5772,8 +5864,20 @@ 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()
@@ -5813,7 +5917,7 @@ export class Engine {
         },
       }
     } catch (e) {
-      await this.device.popErrorScope()
+      await scope
       buffer.destroy()
       uniform.destroy()
       points?.buffer.destroy()
@@ -7068,41 +7172,170 @@ export class Engine {
     const b = this.bloomSettings
     if (patch.enabled !== undefined) b.enabled = patch.enabled
     if (patch.threshold !== undefined) b.threshold = patch.threshold
-    if (patch.knee !== undefined) b.knee = patch.knee
-    if (patch.radius !== undefined) b.radius = patch.radius
+    if (patch.scatter !== undefined) b.scatter = patch.scatter
     if (patch.color !== undefined) {
       b.color.x = patch.color.x
       b.color.y = patch.color.y
       b.color.z = patch.color.z
     }
     if (patch.intensity !== undefined) b.intensity = patch.intensity
-    if (patch.clamp !== undefined) b.clamp = patch.clamp
-    if (this.device && this.bloomBlitUniformBuffer) {
+    if (this.device && this.compositeUniformBuffer) {
       this.writeBloomUniforms()
       this.writeCompositeViewUniforms()
     }
   }
 
-  // EEVEE prefilter uniforms (blit stage) + upsample sample scale. Intensity/tint live in composite.
+  private ensureBloomPipelines(): void {
+    // The buffer, not a pipeline, says "already built": at init the pipelines
+    // land async (initRenderPipeline) and are absent for a moment.
+    if (this.bloomUniformBuffer) return
+    const device = this.device
+    this.bloomUniformBuffer = device.createBuffer({
+      label: "bloomuniforms",
+      size: 16,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+    this.bloomUpsampleBindGroupLayout = device.createBindGroupLayout({
+      label: "bloomupsample layout",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+      ],
+    })
+    const pipeline = (label: string, code: string, layout: GPUBindGroupLayout, assign: (p: GPURenderPipeline) => void) => {
+      const module = device.createShaderModule({ label, code })
+      this.initRenderPipeline(
+        {
+          label,
+          layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+          vertex: { module, entryPoint: "vs" },
+          fragment: { module, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
+          primitive: { topology: "triangle-list" },
+        },
+        assign,
+      )
+    }
+    pipeline("bloomprefilter", BLOOM_PREFILTER_SHADER_WGSL, this.bloomPrefilterBindGroupLayout, (p) => (this.bloomPrefilterPipeline = p))
+    pipeline("bloomblur H", BLOOM_BLUR_H_SHADER_WGSL, this.bloomBlurBindGroupLayout, (p) => (this.bloomBlurHPipeline = p))
+    pipeline("bloomblur V", BLOOM_BLUR_V_SHADER_WGSL, this.bloomBlurBindGroupLayout, (p) => (this.bloomBlurVPipeline = p))
+    pipeline("bloomupsample", BLOOM_UPSAMPLE_SHADER_WGSL, this.bloomUpsampleBindGroupLayout, (p) => (this.bloomUpsamplePipeline = p))
+  }
+
+  /** The game's chain at the current canvas size (AGSimPostFX.Bloom): half
+   *  size, then floor(log2(longest side)) - 1 levels, each half the last. */
+  private buildBloomTargets(): void {
+    if (!this.device || !this.hdrResolveTexture || !this.maskResolveView || !this.bloomPrefilterBindGroupLayout) return
+    this.ensureBloomPipelines()
+    const w0 = Math.max(1, Math.floor(this.hdrResolveTexture.width / 2))
+    const h0 = Math.max(1, Math.floor(this.hdrResolveTexture.height / 2))
+    const levels = Math.min(Engine.BLOOM_MAX_LEVELS, Math.max(1, Math.floor(Math.log2(Math.max(w0, h0)) - 1)))
+    // Mip chains, whose sizes are floor-halved exactly as the game's targets are.
+    const make = (label: string) =>
+      this.device.createTexture({
+        label,
+        size: [w0, h0],
+        mipLevelCount: levels,
+        format: this.hdrFormat,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+      })
+    this.bloomDownTexture?.destroy()
+    this.bloomUpTexture?.destroy()
+    this.bloomDownTexture = make("bloomdown")
+    this.bloomUpTexture = make("bloomup")
+    this.bloomLevels = levels
+    const views = (t: GPUTexture) =>
+      Array.from({ length: levels }, (_, i) => t.createView({ baseMipLevel: i, mipLevelCount: 1 }))
+    this.bloomDownViews = views(this.bloomDownTexture)
+    this.bloomUpViews = views(this.bloomUpTexture)
+    this.writeBloomUniforms()
+    const uniform = { buffer: this.bloomUniformBuffer! }
+    this.bloomPrefilterBindGroup = this.device.createBindGroup({
+      label: "bloomprefilter",
+      layout: this.bloomPrefilterBindGroupLayout,
+      entries: [
+        { binding: 0, resource: this.hdrResolveTexture.createView() },
+        { binding: 1, resource: uniform },
+        { binding: 2, resource: this.maskResolveView },
+      ],
+    })
+    const blur = (label: string, src: GPUTextureView) =>
+      this.device.createBindGroup({
+        label,
+        layout: this.bloomBlurBindGroupLayout,
+        entries: [
+          { binding: 0, resource: src },
+          { binding: 1, resource: this.bloomSampler },
+        ],
+      })
+    // [i - 1] is level i: blurH reads down[i-1] into up[i], blurV up[i] into down[i].
+    this.bloomBlurHBindGroups = []
+    this.bloomBlurVBindGroups = []
+    for (let i = 1; i < levels; i++) {
+      this.bloomBlurHBindGroups.push(blur(`bloomblur H ${i}`, this.bloomDownViews[i - 1]))
+      this.bloomBlurVBindGroups.push(blur(`bloomblur V ${i}`, this.bloomUpViews[i]))
+    }
+    // [k] writes up[levels - 2 - k], coarsest first.
+    this.bloomUpsampleBindGroups = []
+    for (let i = levels - 2; i >= 0; i--) {
+      const low = i === levels - 2 ? this.bloomDownViews[i + 1] : this.bloomUpViews[i + 1]
+      this.bloomUpsampleBindGroups.push(
+        this.device.createBindGroup({
+          label: `bloomupsample ${i}`,
+          layout: this.bloomUpsampleBindGroupLayout!,
+          entries: [
+            { binding: 0, resource: this.bloomDownViews[i] },
+            { binding: 1, resource: low },
+            { binding: 2, resource: this.bloomSampler },
+            { binding: 3, resource: uniform },
+          ],
+        }),
+      )
+    }
+  }
+
   private writeBloomUniforms(): void {
+    if (!this.bloomUniformBuffer) return
     const b = this.bloomSettings
-    const bu = this.bloomBlitUniformData
-    // EEVEE prefilter: threshold, knee_half, clamp (0 → disabled), _unused
-    // Blender halves the knee before passing to the shader (eevee_bloom.c: knee * 0.5f).
-    // The blit shader's quadratic soft-knee curve uses knee_half as the offset from threshold,
-    // so the soft ramp spans [threshold - knee/2 .. threshold + knee/2] — NOT [threshold - knee .. threshold + knee].
-    bu[0] = b.threshold
-    bu[1] = b.knee * 0.5
-    bu[2] = b.clamp
-    bu[3] = 0.0
-    this.device.queue.writeBuffer(this.bloomBlitUniformBuffer, 0, bu)
-    const us = this.bloomUpsampleUniformData
-    // Blender: bloom.radius directly controls the tent-filter sample scale in texel units.
-    us[0] = Math.max(0.5, b.radius)
-    us[1] = 0
-    us[2] = 0
-    us[3] = 0
-    this.device.queue.writeBuffer(this.bloomUpsampleUniformBuffer, 0, us)
+    const u = this.bloomUniformData
+    // Threshold, its soft knee (half of it, as the game derives it), the clamp,
+    // and scatter. Tint and intensity live in the composite.
+    u[0] = Math.max(0, b.threshold)
+    u[1] = Math.max(0, b.threshold) * 0.5
+    u[2] = Engine.BLOOM_CLAMP
+    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). */
+  private renderBloom(encoder: GPUCommandEncoder): void {
+    const levels = this.bloomLevels
+    const att = (this.bloomPassDescriptor.colorAttachments as GPURenderPassColorAttachment[])[0]
+    const total = 1 + 3 * (levels - 1)
+    let n = 0
+    const draw = (target: GPUTextureView, pipeline: GPURenderPipeline, group: GPUBindGroup) => {
+      att.view = target
+      // One timing span for the whole chain, as for the pyramid.
+      const open = n === 0 ? this.stampOpen("bloom") : undefined
+      const close = n === total - 1 ? this.stampClose("bloom") : undefined
+      this.bloomPassDescriptor.timestampWrites = open && close ? { ...open, ...close } : (open ?? close)
+      n++
+      const p = encoder.beginRenderPass(this.bloomPassDescriptor)
+      p.setPipeline(pipeline)
+      p.setBindGroup(0, group)
+      p.draw(3)
+      p.end()
+    }
+    draw(this.bloomDownViews[0], this.bloomPrefilterPipeline!, this.bloomPrefilterBindGroup!)
+    for (let i = 1; i < levels; i++) {
+      draw(this.bloomUpViews[i], this.bloomBlurHPipeline!, this.bloomBlurHBindGroups[i - 1])
+      draw(this.bloomDownViews[i], this.bloomBlurVPipeline!, this.bloomBlurVBindGroups[i - 1])
+    }
+    for (let k = 0; k < levels - 1; k++) {
+      draw(this.bloomUpViews[levels - 2 - k], this.bloomUpsamplePipeline!, this.bloomUpsampleBindGroups[k])
+    }
+    this.bloomPassDescriptor.timestampWrites = undefined
   }
 
   // Step 1: Get WebGPU device and context
@@ -7230,7 +7463,16 @@ export class Engine {
     this.setupCamera()
     this.setupLighting()
     const tPipelines = performance.now()
+    // Built async and side by side (see initRenderPipeline): a synchronous
+    // build holds the GPU process for the whole compile, one after another,
+    // which was a 2–3 s frozen frame on a cold open.
+    this.initPipelineJobs = []
     this.createPipelines()
+    try {
+      await Promise.all(this.initPipelineJobs)
+    } finally {
+      this.initPipelineJobs = null
+    }
     this.setupResize()
     const ms = (a: number, b: number) => Math.round(b - a)
     console.info(
@@ -7361,123 +7603,11 @@ export class Engine {
     ltcTemp.destroy()
   }
 
-  // Bake the Blender 3.6 Filmic MHC tone curve into a WIDTH×1 r16float LUT sampled by the
-  // composite pass. The 14 anchors are the same as the old inline array; we fit a monotone
-  // cubic (Fritsch–Carlson) through them so the curve is C1-continuous (no Mach banding in
-  // smooth gradients) while still passing through every anchor (look preserved) and staying
-  // monotone (no tonemap overshoot/ringing). Domain is uniform in log2 space: anchor k sits
-  // at t=k, k=0..13 (t = log2(linear)+10). See composite.ts::filmic for the sampling map.
-  /**
-   * Decompress and upload Blender's AgX cube.
-   *
-   * Deliberately off the critical path: it is 723 KB once inflated, and a frame
-   * rendered before it lands should show the scene under whatever transform is
-   * already there rather than wait. Until then binding 10 holds a 1×1×1 stand-in,
-   * which is only ever sampled if someone selects AgX in that window.
-   */
-  private async loadAgxLut(): Promise<void> {
-    try {
-      const packed = Uint8Array.from(atob(AGX_LUT_GZ), (ch) => ch.charCodeAt(0))
-      const stream = new Blob([packed]).stream().pipeThrough(new DecompressionStream("gzip"))
-      const bytes = new Uint8Array(await new Response(stream).arrayBuffer())
-      const n = AGX_LUT_SIZE
-      if (bytes.byteLength !== n * n * n * 4) throw new Error(`AgX LUT is ${bytes.byteLength} bytes, expected ${n ** 3 * 4}`)
-      const tex = this.device.createTexture({
-        label: "AgX 57³ LUT",
-        size: [n, n, n],
-        dimension: "3d",
-        format: "rgb10a2unorm",
-        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-      })
-      // .cube order is red fastest, which is exactly a 3D texture's own layout.
-      this.device.queue.writeTexture({ texture: tex }, bytes, { bytesPerRow: n * 4, rowsPerImage: n }, [n, n, n])
-      this.agxLutTexture = tex
-      this.rebuildCompositeBindGroup()
-    } catch {
-      // A missing LUT costs AgX, not the renderer — the other transforms stand.
-    }
-  }
-
-  private bakeFilmicLut() {
-    const anchors = [
-      0.0028, 0.0068, 0.0151, 0.0313, 0.061, 0.112, 0.192, 0.306, 0.459, 0.631, 0.82, 0.907, 0.962, 0.989,
-    ]
-    const n = anchors.length
-    // Secant slopes (unit spacing, so d_k = y_{k+1} - y_k).
-    const d = new Array<number>(n - 1)
-    for (let k = 0; k < n - 1; k++) d[k] = anchors[k + 1] - anchors[k]
-    // Endpoint + interior tangents.
-    const m = new Array<number>(n)
-    m[0] = d[0]
-    m[n - 1] = d[n - 2]
-    for (let k = 1; k < n - 1; k++) m[k] = (d[k - 1] + d[k]) * 0.5
-    // Fritsch–Carlson monotonicity clamp.
-    for (let k = 0; k < n - 1; k++) {
-      if (d[k] === 0) {
-        m[k] = 0
-        m[k + 1] = 0
-        continue
-      }
-      const a = m[k] / d[k]
-      const b = m[k + 1] / d[k]
-      const s = a * a + b * b
-      if (s > 9) {
-        const tau = 3 / Math.sqrt(s)
-        m[k] = tau * a * d[k]
-        m[k + 1] = tau * b * d[k]
-      }
-    }
-    const W = Engine.FILMIC_LUT_WIDTH
-    const values = new Float32Array(W)
-    for (let j = 0; j < W; j++) {
-      const t = ((n - 1) * j) / (W - 1) // t ∈ [0, n-1]
-      const k = Math.min(Math.floor(t), n - 2)
-      const s = t - k // local param in [0,1], unit-spaced segment
-      const s2 = s * s
-      const s3 = s2 * s
-      // Hermite basis (h=1).
-      const h00 = 2 * s3 - 3 * s2 + 1
-      const h10 = s3 - 2 * s2 + s
-      const h01 = -2 * s3 + 3 * s2
-      const h11 = s3 - s2
-      values[j] = h00 * anchors[k] + h10 * m[k] + h01 * anchors[k + 1] + h11 * m[k + 1]
-    }
-
-    // f32 → f16 bits (same conversion as bakeBrdfLut).
-    const half = new Uint16Array(W)
-    const f32 = new Float32Array(1)
-    const u32 = new Uint32Array(f32.buffer)
-    for (let j = 0; j < W; j++) {
-      f32[0] = values[j]
-      const x = u32[0]
-      const sign = (x >>> 16) & 0x8000
-      const exp = ((x >>> 23) & 0xff) - 127 + 15
-      const mant = x & 0x7fffff
-      if (exp <= 0) {
-        half[j] = sign
-      } else if (exp >= 31) {
-        half[j] = sign | 0x7c00
-      } else {
-        half[j] = sign | (exp << 10) | (mant >>> 13)
-      }
-    }
-
-    this.filmicLutTexture = this.device.createTexture({
-      label: "Filmic tone LUT",
-      size: [W, 1],
-      format: "r16float",
-      usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
-    })
-    this.filmicLutView = this.filmicLutTexture.createView()
-    this.device.queue.writeTexture(
-      { texture: this.filmicLutTexture },
-      half,
-      { bytesPerRow: W * 2, rowsPerImage: 1 },
-      { width: W, height: 1, depthOrArrayLayers: 1 },
-    )
+  private createRenderPipeline(config: Parameters<Engine["renderPipelineDesc"]>[0]): GPURenderPipeline {
+    return this.createModelPipeline(this.renderPipelineDesc(config))
   }
 
-  private createRenderPipeline(config: {
+  private renderPipelineDesc(config: {
     label: string
     layout: GPUPipelineLayout
     shaderModule: GPUShaderModule
@@ -7488,9 +7618,9 @@ export class Engine {
     cullMode?: GPUCullMode
     depthStencil?: GPUDepthStencilState
     multisample?: GPUMultisampleState
-  }): GPURenderPipeline {
+  }): GPURenderPipelineDescriptor {
     const targets = config.fragmentTargets ?? (config.fragmentTarget ? [config.fragmentTarget] : undefined)
-    return this.createModelPipeline({
+    return {
       label: config.label,
       layout: config.layout,
       vertex: {
@@ -7507,7 +7637,7 @@ export class Engine {
       primitive: { cullMode: config.cullMode ?? "none" },
       depthStencil: config.depthStencil,
       multisample: config.multisample ?? { count: Engine.MULTISAMPLE_COUNT },
-    })
+    }
   }
 
   private createPipelines() {
@@ -7633,8 +7763,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
@@ -7656,31 +7784,40 @@ export class Engine {
       const seedModule = this.device.createShaderModule({ label: "cast distance seed", code: buildCastSeedShader(Engine.MULTISAMPLE_COUNT) })
       const stepModule = this.device.createShaderModule({ label: "cast distance step", code: buildCastStepShader() })
       const resolveModule = this.device.createShaderModule({ label: "cast distance resolve", code: buildCastResolveShader() })
-      this.castSeedPipeline = this.device.createRenderPipeline({
-        label: "cast distance seed",
-        layout: "auto",
-        vertex: { module: seedModule, entryPoint: "vs" },
-        fragment: {
-          module: seedModule,
-          entryPoint: "fs",
-          targets: [{ format: CAST_SEED_FORMAT }, { format: CAST_COVERAGE_FORMAT }],
+      this.initRenderPipeline(
+        {
+          label: "cast distance seed",
+          layout: "auto",
+          vertex: { module: seedModule, entryPoint: "vs" },
+          fragment: {
+            module: seedModule,
+            entryPoint: "fs",
+            targets: [{ format: CAST_SEED_FORMAT }, { format: CAST_COVERAGE_FORMAT }],
+          },
+          primitive: { topology: "triangle-list" },
         },
-        primitive: { topology: "triangle-list" },
-      })
-      this.castStepPipeline = this.device.createRenderPipeline({
-        label: "cast distance step",
-        layout: "auto",
-        vertex: { module: stepModule, entryPoint: "vs" },
-        fragment: { module: stepModule, entryPoint: "fs", targets: [{ format: CAST_SEED_FORMAT }] },
-        primitive: { topology: "triangle-list" },
-      })
-      this.castResolvePipeline = this.device.createRenderPipeline({
-        label: "cast distance resolve",
-        layout: "auto",
-        vertex: { module: resolveModule, entryPoint: "vs" },
-        fragment: { module: resolveModule, entryPoint: "fs", targets: [{ format: CAST_DIST_FORMAT }] },
-        primitive: { topology: "triangle-list" },
-      })
+        (p) => (this.castSeedPipeline = p),
+      )
+      this.initRenderPipeline(
+        {
+          label: "cast distance step",
+          layout: "auto",
+          vertex: { module: stepModule, entryPoint: "vs" },
+          fragment: { module: stepModule, entryPoint: "fs", targets: [{ format: CAST_SEED_FORMAT }] },
+          primitive: { topology: "triangle-list" },
+        },
+        (p) => (this.castStepPipeline = p),
+      )
+      this.initRenderPipeline(
+        {
+          label: "cast distance resolve",
+          layout: "auto",
+          vertex: { module: resolveModule, entryPoint: "vs" },
+          fragment: { module: resolveModule, entryPoint: "fs", targets: [{ format: CAST_DIST_FORMAT }] },
+          primitive: { topology: "triangle-list" },
+        },
+        (p) => (this.castResolvePipeline = p),
+      )
       // 65504 is the largest half float. Bound wherever the field is not
       // running, so rzCastDistance answers "unreachably far" and an effect keyed
       // on it draws nothing at all.
@@ -7712,12 +7849,6 @@ export class Engine {
       [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
@@ -7813,10 +7944,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.
@@ -7887,34 +8018,42 @@ export class Engine {
     // hand shaders are retired in favor of graphs.
     const neutral = compileGraph(DEFAULT_GRAPH, { renderClass: "auto", alphaMode: "opaque" })
     if (!neutral.ok) throw new Error("failed to compile the neutral default graph")
-    const neutralModule = this.device.createShaderModule({ label: "neutral base (default graph)", code: neutral.wgsl })
-    this.neutralPipeline = this.createRenderPipeline({
-      label: "neutral base pipeline",
-      layout: mainPipelineLayout,
-      shaderModule: neutralModule,
-      vertexBuffers: fullVertexBuffers,
-      fragmentTargets: sceneTargets,
-      cullMode: "none",
-      depthStencil: {
-        format: this.depthFormat,
-        depthWriteEnabled: true,
-        depthCompare: this.depthAhead,
-      },
-    })
+    const neutralModule = this.cachedShaderModule(neutral.wgsl, "neutral base (default graph)")
+    this.initRenderPipeline(
+      this.renderPipelineDesc({
+        label: "neutral base pipeline",
+        layout: mainPipelineLayout,
+        shaderModule: neutralModule,
+        vertexBuffers: fullVertexBuffers,
+        fragmentTargets: sceneTargets,
+        cullMode: "none",
+        depthStencil: {
+          format: this.depthFormat,
+          depthWriteEnabled: true,
+          depthCompare: this.depthAhead,
+        },
+      }),
+      (p) => (this.neutralPipeline = p),
+      true,
+    )
     // Depth-write-off twin for transparent-bucket draws (see pipelineForDrawCall).
-    this.neutralPipelineNoDepthWrite = this.createRenderPipeline({
-      label: "neutral base pipeline (no depth write)",
-      layout: mainPipelineLayout,
-      shaderModule: neutralModule,
-      vertexBuffers: fullVertexBuffers,
-      fragmentTargets: sceneTargets,
-      cullMode: "none",
-      depthStencil: {
-        format: this.depthFormat,
-        depthWriteEnabled: false,
-        depthCompare: this.depthAhead,
-      },
-    })
+    this.initRenderPipeline(
+      this.renderPipelineDesc({
+        label: "neutral base pipeline (no depth write)",
+        layout: mainPipelineLayout,
+        shaderModule: neutralModule,
+        vertexBuffers: fullVertexBuffers,
+        fragmentTargets: sceneTargets,
+        cullMode: "none",
+        depthStencil: {
+          format: this.depthFormat,
+          depthWriteEnabled: false,
+          depthCompare: this.depthAhead,
+        },
+      }),
+      (p) => (this.neutralPipelineNoDepthWrite = p),
+      true,
+    )
     // Depth-only prepass for transparent draws (see depth-prepass.ts): writes the
     // fabric's depth AFTER its color blended, so outlines drawn later are
     // occluded behind it. Color targets kept for pass compatibility, writeMask 0.
@@ -7933,51 +8072,63 @@ export class Engine {
         depthCompare: this.depthAhead,
       },
     }
-    this.depthPrepassPipeline = this.createModelPipeline({
-      label: "opaque depth prepass",
-      ...prepassDesc,
-      fragment: {
-        module: prepassModule,
-        entryPoint: "fs",
-        targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+    this.initRenderPipeline(
+      {
+        label: "opaque depth prepass",
+        ...prepassDesc,
+        fragment: {
+          module: prepassModule,
+          entryPoint: "fs",
+          targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+        },
       },
-    })
+      (p) => (this.depthPrepassPipeline = p),
+      true,
+    )
     // The SOLID prime: same module, cutoff forced to exactly 1.0. Only texels
     // whose blend ignores the destination may pre-claim depth in the
     // transparent phase — see the override's note in depth-prepass.ts.
-    this.solidPrepassPipeline = this.createModelPipeline({
-      label: "transparent solid prepass",
-      ...prepassDesc,
-      fragment: {
-        module: prepassModule,
-        entryPoint: "fs",
-        constants: { CUTOFF: 1.0 },
-        targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+    this.initRenderPipeline(
+      {
+        label: "transparent solid prepass",
+        ...prepassDesc,
+        fragment: {
+          module: prepassModule,
+          entryPoint: "fs",
+          constants: { CUTOFF: 1.0 },
+          targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+        },
       },
-    })
+      (p) => (this.solidPrepassPipeline = p),
+      true,
+    )
     // The HAIR prime: solid texels only, and stencil-fenced off the eye
     // silhouette. It records after the non-hair opaque draws, so the eye has
     // already written its stencil — not-equal here is what keeps the primed
     // hair depth from ever claiming the pixels the see-through-hair pass needs
     // the eye to survive on. (Bundle draws use the PASS's stencil reference;
     // only pipeline/bind/vertex state resets across executeBundles.)
-    this.hairPrimePipeline = this.createModelPipeline({
-      label: "hair depth prime",
-      ...prepassDesc,
-      depthStencil: {
-        ...prepassDesc.depthStencil,
-        stencilFront: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
-        stencilBack: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
-        stencilReadMask: 0xff,
-        stencilWriteMask: 0,
-      },
-      fragment: {
-        module: prepassModule,
-        entryPoint: "fs",
-        constants: { CUTOFF: 1.0 },
-        targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+    this.initRenderPipeline(
+      {
+        label: "hair depth prime",
+        ...prepassDesc,
+        depthStencil: {
+          ...prepassDesc.depthStencil,
+          stencilFront: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+          stencilBack: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+          stencilReadMask: 0xff,
+          stencilWriteMask: 0,
+        },
+        fragment: {
+          module: prepassModule,
+          entryPoint: "fs",
+          constants: { CUTOFF: 1.0 },
+          targets: sceneTargetsFor("depth-prepass", this.sceneFormats),
+        },
       },
-    })
+      (p) => (this.hairPrimePipeline = p),
+      true,
+    )
 
     // The matrices, then one vec4: the caster sphere, which effects' rzShadow
     // tests before any tap. The materials and the ground bind the matrices only.
@@ -8004,44 +8155,45 @@ export class Engine {
       label: "shadow depth",
       code: SHADOW_DEPTH_SHADER_WGSL,
     })
-    this.shadowDepthPipeline = this.device.createRenderPipeline({
-      label: "shadow depth pipeline",
-      // Group 1 is the main pass's per-material layout so each shadow draw can
-      // rebind the draw call's existing material bind group for the alpha test.
-      layout: this.device.createPipelineLayout({
-        bindGroupLayouts: [shadowBindGroupLayout, this.mainPerMaterialBindGroupLayout],
-      }),
-      vertex: { module: shadowShader, entryPoint: "vs", buffers: fullVertexBuffers as GPUVertexBufferLayout[] },
-      fragment: { module: shadowShader, entryPoint: "fs", targets: [] },
-      primitive: { cullMode: "none" },
-      depthStencil: {
-        format: Engine.SHADOW_DEPTH_FORMAT,
-        depthWriteEnabled: true,
-        depthCompare: "less-equal",
-        // The shadow map keeps the NON-reversed convention (orthographicLh maps
-        // [0,1] with far = 1, and this pass never flipped) — so this bias must
-        // NOT follow reversedZ. It is the camera-pass biases that flip.
-        depthBias: 2,
-        depthBiasSlopeScale: 1.5,
-        depthBiasClamp: 0,
+    this.initRenderPipeline(
+      {
+        label: "shadow depth pipeline",
+        // Group 1 is the main pass's per-material layout so each shadow draw can
+        // rebind the draw call's existing material bind group for the alpha test.
+        layout: this.device.createPipelineLayout({
+          bindGroupLayouts: [shadowBindGroupLayout, this.mainPerMaterialBindGroupLayout],
+        }),
+        vertex: { module: shadowShader, entryPoint: "vs", buffers: fullVertexBuffers as GPUVertexBufferLayout[] },
+        fragment: { module: shadowShader, entryPoint: "fs", targets: [] },
+        primitive: { cullMode: "none" },
+        depthStencil: {
+          format: Engine.SHADOW_DEPTH_FORMAT,
+          depthWriteEnabled: true,
+          depthCompare: "less-equal",
+          // The shadow map keeps the NON-reversed convention (orthographicLh maps
+          // [0,1] with far = 1, and this pass never flipped) — so this bias must
+          // NOT follow reversedZ. It is the camera-pass biases that flip.
+          depthBias: 2,
+          depthBiasSlopeScale: 1.5,
+          depthBiasClamp: 0,
+        },
       },
-    })
+      (p) => (this.shadowDepthPipeline = p),
+    )
     this.shadowComparisonSampler = this.device.createSampler({
       compare: "less",
       magFilter: "linear",
       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],
-        format: Engine.SHADOW_DEPTH_FORMAT,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      }),
-    )
-    this.shadowMapDepthViews = this.shadowMapTextures.map((t) => t.createView())
+    // 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.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
@@ -8062,14 +8214,23 @@ export class Engine {
     // One-shot bake of Blender EEVEE's combined BRDF LUT (DFG + LTC packed rgba8unorm).
     this.bakeBrdfLut()
     this.bakeGroundNoise()
-    this.agxFallbackTexture = this.device.createTexture({
-      label: "AgX LUT fallback",
-      size: [1, 1, 1],
-      dimension: "3d",
-      format: "rgb10a2unorm",
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-    })
-    void this.loadAgxLut()
+    // The mipmap blit for the formats model textures arrive in, built here so
+    // the first texture of the first model does not compile it synchronously
+    // in the middle of a load (generateMipmaps builds any other on demand).
+    {
+      const mipModule = this.device.createShaderModule({ label: "mipmap blit", code: MIPMAP_BLIT_SHADER_WGSL })
+      for (const format of ["rgba8unorm", "rgba8unorm-srgb"] as const)
+        this.initRenderPipeline(
+          {
+            label: `mipmap blit pipeline (${format})`,
+            layout: "auto",
+            vertex: { module: mipModule, entryPoint: "vs" },
+            fragment: { module: mipModule, entryPoint: "fs", targets: [{ format }] },
+            primitive: { topology: "triangle-list" },
+          },
+          (p) => this.mipBlitPipelines.set(format, p),
+        )
+    }
     this.stageGradeFallback = this.device.createTexture({
       label: "stage grade fallback",
       size: [1, 1, 1],
@@ -8078,7 +8239,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
@@ -8141,7 +8301,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.
@@ -8170,7 +8329,10 @@ export class Engine {
       cullMode: "back",
       depthStencil: { format: this.depthFormat, depthWriteEnabled: true, depthCompare: this.depthAhead },
     }
-    this.groundShadowPipeline = this.buildGroundPipeline(false)
+    this.initRenderPipeline(
+      this.renderPipelineDesc(this.groundPipelineConfig(false)),
+      (p) => (this.groundShadowPipeline = p),
+    )
 
     // Outline: group 0 = per-frame (camera), group 1 = per-instance (skinMats), group 2 = per-material (edge uniforms)
     this.outlinePerFrameBindGroupLayout = this.device.createBindGroupLayout({
@@ -8239,7 +8401,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: {
@@ -8273,12 +8440,16 @@ export class Engine {
         stencilWriteMask: 0,
       },
     }
-    this.outlinePipeline = this.createRenderPipeline(outlineDesc)
-    this.outlineMirrorPipeline = this.createRenderPipeline({
-      ...outlineDesc,
-      label: "outline pipeline (mirror)",
-      cullMode: "front",
-    })
+    this.initRenderPipeline(this.renderPipelineDesc(outlineDesc), (p) => (this.outlinePipeline = p), true)
+    this.initRenderPipeline(
+      this.renderPipelineDesc({
+        ...outlineDesc,
+        label: "outline pipeline (mirror)",
+        cullMode: "front",
+      }),
+      (p) => (this.outlineMirrorPipeline = p),
+      true,
+    )
 
     // ─── Selection overlay (screen-space edge-detect on a per-material mask) ───
     // Reuses outline camera + main skinMats bind group layouts. No group 2 (no per-mat uniform).
@@ -8290,19 +8461,22 @@ export class Engine {
       label: "selection mask shader",
       code: SELECTION_MASK_SHADER_WGSL,
     })
-    this.selectionMaskPipeline = this.device.createRenderPipeline({
-      label: "selection mask pipeline",
-      layout: selectionMaskPipelineLayout,
-      vertex: { module: selectionMaskShaderModule, entryPoint: "vs", buffers: outlineVertexBuffers },
-      fragment: {
-        module: selectionMaskShaderModule,
-        entryPoint: "fs",
-        targets: [{ format: "r8unorm" }],
+    this.initRenderPipeline(
+      {
+        label: "selection mask pipeline",
+        layout: selectionMaskPipelineLayout,
+        vertex: { module: selectionMaskShaderModule, entryPoint: "vs", buffers: outlineVertexBuffers },
+        fragment: {
+          module: selectionMaskShaderModule,
+          entryPoint: "fs",
+          targets: [{ format: "r8unorm" }],
+        },
+        primitive: { cullMode: "none" },
+        // Single-sample, no depth (depth-always via not attaching a depth buffer at all).
+        multisample: { count: 1 },
       },
-      primitive: { cullMode: "none" },
-      // Single-sample, no depth (depth-always via not attaching a depth buffer at all).
-      multisample: { count: 1 },
-    })
+      (p) => (this.selectionMaskPipeline = p),
+    )
 
     this.selectionEdgeBindGroupLayout = this.device.createBindGroupLayout({
       label: "selection edge bind group layout",
@@ -8320,26 +8494,29 @@ export class Engine {
       label: "selection edge shader",
       code: SELECTION_EDGE_SHADER_WGSL,
     })
-    this.selectionEdgePipeline = this.device.createRenderPipeline({
-      label: "selection edge pipeline",
-      layout: selectionEdgePipelineLayout,
-      vertex: { module: selectionEdgeShaderModule, entryPoint: "vs" },
-      fragment: {
-        module: selectionEdgeShaderModule,
-        entryPoint: "fs",
-        targets: [
-          {
-            format: this.presentationFormat,
-            blend: {
-              color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
-              alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+    this.initRenderPipeline(
+      {
+        label: "selection edge pipeline",
+        layout: selectionEdgePipelineLayout,
+        vertex: { module: selectionEdgeShaderModule, entryPoint: "vs" },
+        fragment: {
+          module: selectionEdgeShaderModule,
+          entryPoint: "fs",
+          targets: [
+            {
+              format: this.presentationFormat,
+              blend: {
+                color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
+                alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+              },
             },
-          },
-        ],
+          ],
+        },
+        primitive: { topology: "triangle-list" },
+        multisample: { count: 1 },
       },
-      primitive: { topology: "triangle-list" },
-      multisample: { count: 1 },
-    })
+      (p) => (this.selectionEdgePipeline = p),
+    )
     this.selectionSampler = this.device.createSampler({
       label: "selection sampler",
       magFilter: "linear",
@@ -8359,10 +8536,7 @@ export class Engine {
     // ─── Editor overlays (instanced wireframe primitives) ────────────
     this.setupOverlay()
 
-    // ─── Bloom (EEVEE 3.6 pyramid): blit(Karis prefilter) → 13-tap downsamples → 9-tap tent upsamples ───
-    // Mirrors source/blender/draw/engines/eevee/shaders/effect_bloom_frag.glsl.
-    // Firefly suppression lives in the blit (Karis luminance-weighted 4-tap average). A single-pass
-    // Gaussian cannot reproduce this — hot pixels dominate and produce the sparkle halo.
+    // ─── Bloom: Aether Gazer's chain (prefilter → Gaussian down chain → scatter up chain) ───
     this.bloomSampler = this.device.createSampler({
       label: "bloom sampler",
       magFilter: "linear",
@@ -8370,88 +8544,26 @@ export class Engine {
       addressModeU: "clamp-to-edge",
       addressModeV: "clamp-to-edge",
     })
-    this.bloomBlitUniformBuffer = this.device.createBuffer({
-      label: "bloom blit uniforms",
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    })
-    this.bloomUpsampleUniformBuffer = this.device.createBuffer({
-      label: "bloom upsample uniforms",
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    })
-
-    this.bloomBlitBindGroupLayout = this.device.createBindGroupLayout({
-      label: "bloom blit layout",
+    this.bloomPrefilterBindGroupLayout = this.device.createBindGroupLayout({
+      label: "bloom prefilter layout",
       entries: [
         { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "unfilterable-float" } },
         { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
         { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "unfilterable-float" } },
       ],
     })
-    this.bloomDownsampleBindGroupLayout = this.device.createBindGroupLayout({
-      label: "bloom downsample layout",
+    this.bloomBlurBindGroupLayout = this.device.createBindGroupLayout({
+      label: "bloom blur layout",
       entries: [
         { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
         { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
       ],
     })
-    this.bloomUpsampleBindGroupLayout = this.device.createBindGroupLayout({
-      label: "bloom upsample layout",
-      entries: [
-        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // coarser-mip accumulator
-        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // matching downsample mip (base add)
-        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
-        { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
-      ],
-    })
-
-    const bloomBlitShader = this.device.createShaderModule({
-      label: "bloom blit (Karis prefilter)",
-      code: BLOOM_BLIT_SHADER_WGSL,
-    })
-
-    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,
-    })
+    this.ensureBloomPipelines()
 
-    const bloomBlitLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bloomBlitBindGroupLayout] })
-    const bloomDownLayout = this.device.createPipelineLayout({
-      bindGroupLayouts: [this.bloomDownsampleBindGroupLayout],
-    })
-    const bloomUpLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bloomUpsampleBindGroupLayout] })
-
-    this.bloomBlitPipeline = this.device.createRenderPipeline({
-      label: "bloom blit pipeline",
-      layout: bloomBlitLayout,
-      vertex: { module: bloomBlitShader, entryPoint: "vs" },
-      fragment: { module: bloomBlitShader, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
-      primitive: { topology: "triangle-list" },
-    })
-    this.bloomDownsamplePipeline = this.device.createRenderPipeline({
-      label: "bloom downsample pipeline",
-      layout: bloomDownLayout,
-      vertex: { module: bloomDownsampleShader, entryPoint: "vs" },
-      fragment: { module: bloomDownsampleShader, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
-      primitive: { topology: "triangle-list" },
-    })
-    this.bloomUpsamplePipeline = this.device.createRenderPipeline({
-      label: "bloom upsample pipeline",
-      layout: bloomUpLayout,
-      vertex: { module: bloomUpsampleShader, entryPoint: "vs" },
-      fragment: { module: bloomUpsampleShader, entryPoint: "fs", targets: [{ format: this.hdrFormat }] },
-      primitive: { topology: "triangle-list" },
-    })
-
-    // ─── Composite: HDR + bloom → Filmic → swapchain (premultiplied) ───
-    // Bloom color/intensity applied HERE (pyramid is pure energy; tint belongs to the combine step,
-    // mirroring EEVEE where bloom color/intensity are combine-stage params, not prefilter).
+    // ─── Composite: HDR + bloom → view transform → swapchain (premultiplied) ───
+    // Bloom color/intensity applied HERE: the chain is pure energy, tint and
+    // strength belong to the combine step.
     this.compositeUniformBuffer = this.device.createBuffer({
       label: "composite view uniforms",
       // 15 × vec4f: (exposure, invGamma, _, _) · (bloom tint, intensity) ·
@@ -8493,8 +8605,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
@@ -8509,9 +8619,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" } },
@@ -8537,12 +8644,14 @@ export class Engine {
     this.compositePipelineLayout = this.device.createPipelineLayout({
       bindGroupLayouts: [this.compositeBindGroupLayout],
     })
-    const compositeShader = this.device.createShaderModule({
-      label: "composite shader",
-      code: buildCompositeShader(null),
-    })
-    this.compositePipelineIdentity = this.makeCompositePipeline(compositeShader, false, "composite pipeline (gamma=1)")
-    this.compositePipelineGamma = this.makeCompositePipeline(compositeShader, true, "composite pipeline (gamma!=1)")
+    // The same pair setEffects asks for with no field mounts, so an install
+    // that adds none finds it built.
+    this.initPipelineJobs?.push(
+      this.compositePipelines(false, false).then(([identity, gamma]) => {
+        this.compositePipelineIdentity = identity
+        this.compositePipelineGamma = gamma
+      }),
+    )
 
     // GPU vertex-morph compute pipeline (shared by all models; per-model bind groups).
     // Bindings: 0-4 read-only storage (base pos, CSR rowStart/colMorph/colOffset, weights),
@@ -8560,14 +8669,17 @@ export class Engine {
         { binding: 6, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
       ],
     })
-    this.morphComputePipeline = this.device.createComputePipeline({
-      label: "morph compute pipeline",
-      layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.morphComputeBindGroupLayout] }),
-      compute: {
-        module: this.device.createShaderModule({ label: "morph compute shader", code: MORPH_COMPUTE_WGSL }),
-        entryPoint: "cs",
+    this.initComputePipeline(
+      {
+        label: "morph compute pipeline",
+        layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.morphComputeBindGroupLayout] }),
+        compute: {
+          module: this.device.createShaderModule({ label: "morph compute shader", code: MORPH_COMPUTE_WGSL }),
+          entryPoint: "cs",
+        },
       },
-    })
+      (p) => (this.morphComputePipeline = p),
+    )
 
     // GPU frustum cull. One pipeline for the whole scene; the bind group is rebuilt
     // with the buffers whenever the draw list changes. See shaders/passes/cull.ts.
@@ -8588,20 +8700,26 @@ export class Engine {
     // encoder it is set on, so a WGSL slip here would take the whole frame down —
     // every pass, every model, an unrelated-looking cascade of style-group and
     // effect failures. Catching it turns that into "culling is off".
-    this.device.pushErrorScope("validation")
-    this.cullPipeline = this.device.createComputePipeline({
-      label: "cull pipeline",
-      layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.cullBindGroupLayout] }),
-      compute: {
-        module: this.device.createShaderModule({ label: "cull compute shader", code: CULL_COMPUTE_WGSL }),
-        entryPoint: "cs",
-      },
-    })
-    void this.device.popErrorScope().then((err) => {
-      if (!err) return
-      console.error(`[cull] pipeline failed to compile — frustum culling disabled:\n${err.message}`)
-      this.cullPipeline = null
-    })
+    // Async, so a failure arrives as the rejection rather than a scoped error.
+    const cullBuild = this.device
+      .createComputePipelineAsync({
+        label: "cull pipeline",
+        layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.cullBindGroupLayout] }),
+        compute: {
+          module: this.device.createShaderModule({ label: "cull compute shader", code: CULL_COMPUTE_WGSL }),
+          entryPoint: "cs",
+        },
+      })
+      .then(
+        (p) => {
+          this.cullPipeline = p
+        },
+        (err) => {
+          console.error(`[cull] pipeline failed to compile — frustum culling disabled:\n${(err as Error).message}`)
+          this.cullPipeline = null
+        },
+      )
+    this.initPipelineJobs?.push(cullBuild)
 
     this.bloomPassDescriptor = {
       label: "bloom pass",
@@ -8648,21 +8766,24 @@ export class Engine {
       entries: [{ binding: 0, resource: { buffer: this.cameraUniformBuffer } }],
     })
 
-    this.pickPipeline = this.device.createRenderPipeline({
-      label: "pick pipeline",
-      layout: pickPipelineLayout,
-      vertex: { module: pickShaderModule, buffers: fullVertexBuffers },
-      fragment: {
-        module: pickShaderModule,
-        targets: [{ format: "rgba8unorm" }],
-      },
-      primitive: { cullMode: "none" },
-      depthStencil: {
-        format: "depth24plus",
-        depthWriteEnabled: true,
-        depthCompare: this.depthAhead,
+    this.initRenderPipeline(
+      {
+        label: "pick pipeline",
+        layout: pickPipelineLayout,
+        vertex: { module: pickShaderModule, buffers: fullVertexBuffers },
+        fragment: {
+          module: pickShaderModule,
+          targets: [{ format: "rgba8unorm" }],
+        },
+        primitive: { cullMode: "none" },
+        depthStencil: {
+          format: "depth24plus",
+          depthWriteEnabled: true,
+          depthCompare: this.depthAhead,
+        },
       },
-    })
+      (p) => (this.pickPipeline = p),
+    )
 
     this.pickReadbackBuffer = this.device.createBuffer({
       label: "pick readback",
@@ -8739,6 +8860,9 @@ export class Engine {
     // handleResize — so the size asked for before the device existed is applied
     // in full the moment there is something to apply it to.
     if (!this.device) return
+    // Nor while init's pipelines are still compiling: init ends with its own
+    // handleResize, which applies whatever was asked for meanwhile.
+    if (this.initPipelineJobs) return
     // Fixed override (offline/video rendering) wins; otherwise track CSS size × dpr.
     const dpr = window.devicePixelRatio || 1
     const width = this.fixedRenderSize ? this.fixedRenderSize.width : Math.floor(this.canvas.clientWidth * dpr)
@@ -8963,38 +9087,6 @@ export class Engine {
       this.buildGroundBindGroup()
       this.buildMirrorSurfaceBindGroup()
 
-      // Bloom pyramid: mip 0 is half-res, each subsequent mip halves again.
-      // Mip count chosen so the coarsest mip is ≥4 px on the short side, capped at BLOOM_MAX_LEVELS.
-      const bw = Math.max(1, Math.floor(width / 2))
-      const bh = Math.max(1, Math.floor(height / 2))
-      const shortSide = Math.max(1, Math.min(bw, bh))
-      this.bloomMipCount = Math.max(1, Math.min(Engine.BLOOM_MAX_LEVELS, Math.floor(Math.log2(shortSide)) - 1))
-      this.bloomDownTexture?.destroy()
-      this.bloomDownTexture = this.device.createTexture({
-        label: "bloom down pyramid",
-        size: [bw, bh],
-        mipLevelCount: this.bloomMipCount,
-        format: this.hdrFormat,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      })
-      this.bloomUpTexture?.destroy()
-      this.bloomUpTexture = this.device.createTexture({
-        label: "bloom up pyramid",
-        size: [bw, bh],
-        mipLevelCount: Math.max(1, this.bloomMipCount - 1),
-        format: this.hdrFormat,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      })
-      this.bloomDownMipViews = []
-      for (let i = 0; i < this.bloomMipCount; i++) {
-        this.bloomDownMipViews.push(this.bloomDownTexture.createView({ baseMipLevel: i, mipLevelCount: 1 }))
-      }
-      this.bloomUpMipViews = []
-      const upLevels = Math.max(1, this.bloomMipCount - 1)
-      for (let i = 0; i < upLevels; i++) {
-        this.bloomUpMipViews.push(this.bloomUpTexture.createView({ baseMipLevel: i, mipLevelCount: 1 }))
-      }
-
       this.depthTexture?.destroy()
       this.depthTexture = this.device.createTexture({
         label: "depth texture",
@@ -9108,60 +9200,16 @@ export class Engine {
         colorAttachments: [
           {
             view: undefined as unknown as GPUTextureView,
-            loadOp: "load",
-            storeOp: "store",
-          },
-        ],
-      }
-
-      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]
+            loadOp: "load",
+            storeOp: "store",
+          },
+        ],
+      }
+
+      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()
       }
 
@@ -9436,17 +9484,20 @@ export class Engine {
       },
       multisample: { count: Engine.OVERLAY_SAMPLE_COUNT },
     } satisfies GPURenderPipelineDescriptor
-    this.overlayPipeline = this.device.createRenderPipeline(overlayPipelineDescriptor)
+    this.initRenderPipeline(overlayPipelineDescriptor, (p) => (this.overlayPipeline = p))
 
     // The solid volumes: the same shader and layout, with no depth write and no
     // culling. A translucent body must not hide the rig behind it, and you have
     // to see its far wall for it to read as a volume rather than a silhouette.
-    this.overlaySolidPipeline = this.device.createRenderPipeline({
-      ...overlayPipelineDescriptor,
-      label: "overlay solid pipeline",
-      primitive: { topology: "triangle-list", cullMode: "none" },
-      depthStencil: { format: "depth24plus", depthWriteEnabled: false, depthCompare: "always" },
-    })
+    this.initRenderPipeline(
+      {
+        ...overlayPipelineDescriptor,
+        label: "overlay solid pipeline",
+        primitive: { topology: "triangle-list", cullMode: "none" },
+        depthStencil: { format: "depth24plus", depthWriteEnabled: false, depthCompare: "always" },
+      },
+      (p) => (this.overlaySolidPipeline = p),
+    )
 
     const compositeShader = this.device.createShaderModule({
       label: "overlay composite shader",
@@ -9537,34 +9588,37 @@ export class Engine {
       ],
     })
     const wireShader = this.device.createShaderModule({ label: "wireframe shader", code: WIREFRAME_SHADER_WGSL })
-    this.wireframePipeline = this.device.createRenderPipeline({
-      label: "wireframe pipeline",
-      layout: this.device.createPipelineLayout({
-        label: "wireframe pipeline layout",
-        bindGroupLayouts: [wireBg0, this.wireframeSkinLayout],
-      }),
-      // No vertex stream: an edge quad's corners come from two different model
-      // vertices, so the mesh is read through storage instead.
-      vertex: { module: wireShader, entryPoint: "vs" },
-      fragment: {
-        module: wireShader,
-        entryPoint: "fs",
-        targets: [
-          {
-            format: this.presentationFormat,
-            blend: {
-              color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
-              alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+    this.initRenderPipeline(
+      {
+        label: "wireframe pipeline",
+        layout: this.device.createPipelineLayout({
+          label: "wireframe pipeline layout",
+          bindGroupLayouts: [wireBg0, this.wireframeSkinLayout],
+        }),
+        // No vertex stream: an edge quad's corners come from two different model
+        // vertices, so the mesh is read through storage instead.
+        vertex: { module: wireShader, entryPoint: "vs" },
+        fragment: {
+          module: wireShader,
+          entryPoint: "fs",
+          targets: [
+            {
+              format: this.presentationFormat,
+              blend: {
+                color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+              },
             },
-          },
-        ],
+          ],
+        },
+        primitive: { topology: "triangle-list", cullMode: "none" },
+        // Depth-TESTED but not written: the mesh is a haze the rig reads against,
+        // so a bone behind a triangle must not be punched out by it.
+        depthStencil: { format: "depth24plus", depthWriteEnabled: false, depthCompare: this.depthAhead },
+        multisample: { count: Engine.OVERLAY_SAMPLE_COUNT },
       },
-      primitive: { topology: "triangle-list", cullMode: "none" },
-      // Depth-TESTED but not written: the mesh is a haze the rig reads against,
-      // so a bone behind a triangle must not be punched out by it.
-      depthStencil: { format: "depth24plus", depthWriteEnabled: false, depthCompare: this.depthAhead },
-      multisample: { count: Engine.OVERLAY_SAMPLE_COUNT },
-    })
+      (p) => (this.wireframePipeline = p),
+    )
     // The mesh's own depth, so the wireframe can be occluded by the body it
     // belongs to. Occluded is the default everywhere — Blender's edit mode, Maya,
     // three's and Babylon's wireframe materials all depth-test, and X-ray is a
@@ -10347,7 +10401,7 @@ export class Engine {
     if (
       !this.device ||
       !this.mainPerFrameBindGroupLayout ||
-      !this.shadowMapDepthViews?.length ||
+      !this.shadowAtlasView ||
       !this.cameraUniformBuffer ||
       !this.mirrorCameraBuffer ||
       !this.lightUniformBuffer ||
@@ -10373,11 +10427,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 },
@@ -10390,11 +10443,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 },
@@ -10460,6 +10512,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()
   }
@@ -10594,6 +10647,7 @@ export class Engine {
     if (options.color) this.sun.color = options.color
     if (options.strength !== undefined) 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
@@ -10728,7 +10782,23 @@ export class Engine {
      *  literal typed into a console. Vec3 satisfies it either way. */
     lights: SceneLight[] | null,
   ): void {
-    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
@@ -10757,7 +10827,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
@@ -10769,7 +10839,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
     }
@@ -11252,6 +11323,7 @@ export class Engine {
    *  ground plane must not draw, and the far shadow cascade has nothing to
    *  cover without one (see the cascade loop). */
   hasStage(): boolean {
+    if (this.nativeStage) return true
     for (const inst of this.modelInstances.values()) if (inst.isStage) return true
     return false
   }
@@ -11281,11 +11353,6 @@ export class Engine {
     this.groundHidden = !on
   }
 
-  /** 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. */
-  private shadowCascadeCleared: boolean[] = []
-
   /**
    * Moves a model to a new key. Nothing about it is rebuilt — same GPU
    * buffers, same style groups, same physics — only which string the rest
@@ -11306,11 +11373,32 @@ export class Engine {
     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: string, sh: ArrayLike<number> | null): boolean {
+    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.
    *
@@ -11318,85 +11406,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.
-   */
-  setModelFill(name: string, fill: Vec3 | null): boolean {
-    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: string, sun: Vec3 | null): boolean {
-    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.
+   * 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.
    */
-  setModelFlatSky(name: string, flat: boolean): boolean {
-    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. */
-  private writeModelLight(name: string, at: 0 | 4 | 8, value: Vec3 | null): boolean {
+  setModelFill(name: string, fill: { x: number; y: number; z: number } | null): boolean {
     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 as ArrayBuffer)
+    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. */
-  private perInstanceBindGroup(name: string, skinMatrixBuffer: GPUBuffer, light: GPUBuffer | null): GPUBindGroup {
+  /** The per-model group: its skinning matrices and its ObjectLight. */
+  private perInstanceBindGroup(name: string, skinMatrixBuffer: GPUBuffer, light: GPUBuffer): GPUBindGroup {
     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 } },
       ],
     })
   }
@@ -11407,6 +11435,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)
@@ -13081,8 +13112,10 @@ export class Engine {
     let changed = force
     for (let i = 0; i < this.cullDraws.length; i++) {
       const { inst, draw } = this.cullDraws[i]
+      // 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
+        (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
@@ -13220,6 +13253,12 @@ export class Engine {
         minZ = Math.min(minZ, data[o + 18] - r); 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
@@ -14067,7 +14106,20 @@ export class Engine {
       }),
     )
 
-    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`,
@@ -14106,8 +14158,8 @@ export class Engine {
       shadowDrawCalls: [],
       shadowBindGroups,
       mainPerInstanceBindGroup,
-      lightBuffer: null,
-      modelLight: null,
+      lightBuffer,
+      objectLight,
       pickPerInstanceBindGroup,
       pickDrawCalls: [],
       isStage,
@@ -14295,7 +14347,11 @@ export class Engine {
   private groundShadowPipelineDesc!: Omit<Parameters<Engine["createRenderPipeline"]>[0], "shaderModule">
 
   private buildGroundPipeline(soft: boolean, mirrored = false): GPURenderPipeline {
-    return this.createRenderPipeline({
+    return this.createRenderPipeline(this.groundPipelineConfig(soft, mirrored))
+  }
+
+  private groundPipelineConfig(soft: boolean, mirrored = false): Parameters<Engine["renderPipelineDesc"]>[0] {
+    return {
       ...this.groundShadowPipelineDesc,
       // A REFLECTION FLIPS WINDING — determinant -1, see reflection.ts. The
       // ground culls back faces, so drawn into the mirror pass with the ordinary
@@ -14305,11 +14361,8 @@ export class Engine {
       // the mirror, and the same answer the scene-pass pipelines already use.
       cullMode: mirrored ? "none" : this.groundShadowPipelineDesc.cullMode,
       label: `ground shadow pipeline${soft ? " (soft)" : ""}${mirrored ? " (mirror)" : ""}`,
-      shaderModule: this.device.createShaderModule({
-        label: soft ? "ground shadow (soft)" : "ground shadow",
-        code: groundShaderWgsl(soft),
-      }),
-    })
+      shaderModule: this.cachedShaderModule(groundShaderWgsl(soft), soft ? "ground shadow (soft)" : "ground shadow"),
+    }
   }
 
   private groundMirrorPipeline: GPURenderPipeline | null = null
@@ -14378,7 +14431,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
@@ -14400,19 +14452,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
@@ -14477,12 +14516,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.
@@ -14500,12 +14538,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.
@@ -14775,6 +14812,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
@@ -16456,52 +16504,51 @@ 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]) continue
+        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]) sp.executeBundles([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.
@@ -16515,7 +16562,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,
@@ -16561,6 +16608,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
     // phase so sheer fabric blends over the glass rather than being depth
@@ -16592,6 +16650,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.
@@ -16609,58 +16675,17 @@ export class Engine {
     // depth, before the composite that samples both layers.
     this.renderFieldPass(encoder)
 
-    // Bloom pyramid (EEVEE 3.6):
-    //   1. Blit: HDR → bloomDown[0] (Karis prefilter, half-res)
-    //   2. Downsample: bloomDown[0] → bloomDown[1] → … → bloomDown[N-1] (13-tap)
-    //   3. Upsample (top-down): bloomUp[N-2] = tent(bloomDown[N-1]) + bloomDown[N-2],
-    //      then bloomUp[i] = tent(bloomUp[i+1]) + bloomDown[i] until i=0 (9-tap tent)
-    //   Composite reads bloomUp[0] and adds tint * intensity * bloom before Filmic.
-    // bloomContributes() gates the whole pyramid, not just its intensity. The
-    // composite still SAMPLES bloomUp[0] unconditionally, which is safe and
-    // deliberate: it scales what it reads by the same effective intensity, so a
-    // stale or never-written pyramid is multiplied by zero. Skipping the build
-    // is therefore invisible in the frame and nine render passes cheaper.
-    if (this.bloomContributes() && this.bloomBlitBindGroup && this.compositeBindGroup && this.bloomMipCount > 0) {
-      const bloomAtt = this.bloomPassDescriptor.colorAttachments as GPURenderPassColorAttachment[]
-
-      // 1. Blit — opens the pyramid's timing span. See stampOpen: the nine
-      // passes below read as ONE component, which is the only useful grain.
-      bloomAtt[0].view = this.bloomDownMipViews[0]
-      this.bloomPassDescriptor.timestampWrites = this.stampOpen("bloom")
-      const pBlit = encoder.beginRenderPass(this.bloomPassDescriptor)
-      pBlit.setPipeline(this.bloomBlitPipeline)
-      pBlit.setBindGroup(0, this.bloomBlitBindGroup)
-      pBlit.draw(3)
-      pBlit.end()
-
-      // 2. Downsample chain
-      this.bloomPassDescriptor.timestampWrites = undefined
-      for (let i = 1; i < this.bloomMipCount; i++) {
-        bloomAtt[0].view = this.bloomDownMipViews[i]
-        const p = encoder.beginRenderPass(this.bloomPassDescriptor)
-        p.setPipeline(this.bloomDownsamplePipeline)
-        p.setBindGroup(0, this.bloomDownsampleBindGroups[i - 1])
-        p.draw(3)
-        p.end()
-      }
-
-      // 3. Upsample chain (coarsest to finest; bindGroups[0] is the coarsest step)
-      const upSteps = this.bloomUpsampleBindGroups.length
-      const topIdx = this.bloomMipCount - 2
-      for (let k = 0; k < upSteps; k++) {
-        const levelIdx = topIdx - k // writes bloomUp[levelIdx]
-        bloomAtt[0].view = this.bloomUpMipViews[levelIdx]
-        // The LAST upsample closes the span opened on the blit.
-        this.bloomPassDescriptor.timestampWrites = k === upSteps - 1 ? this.stampClose("bloom") : undefined
-        const p = encoder.beginRenderPass(this.bloomPassDescriptor)
-        p.setPipeline(this.bloomUpsamplePipeline)
-        p.setBindGroup(0, this.bloomUpsampleBindGroups[k])
-        p.draw(3)
-        p.end()
-      }
-    }
-
-    // Composite: HDR + bloom → Filmic tonemap → swapchain.
+    // Bloom (renderBloom): prefilter, the Gaussian chain down, the scatter
+    // blend back up; the composite adds up[0] × tint × intensity before the view
+    // transform. bloomContributes() gates the whole chain, not just its
+    // intensity. The composite still SAMPLES up[0] unconditionally, which is safe
+    // and deliberate: it scales what it reads by the same effective intensity, so
+    // a stale or never-written chain is multiplied by zero. Skipping the build is
+    // therefore invisible in the frame and a couple of dozen render passes cheaper.
+    if (this.bloomContributes() && this.bloomPrefilterBindGroup && this.compositeBindGroup && this.bloomLevels > 0)
+      this.renderBloom(encoder)
+
+    // Composite: HDR + bloom → view transform → swapchain.
     const swapchainView = this.context.getCurrentTexture().createView()
     const compositeAttachment = (this.compositePassDescriptor.colorAttachments as GPURenderPassColorAttachment[])[0]
     compositeAttachment.view = swapchainView
@@ -16811,11 +16836,14 @@ export class Engine {
       }
     }
 
-    const groupResults: GroupDiagnostic[] = []
-    for (const g of groups) {
-      const r = await this.compileAndInstallGroup(inst, g)
-      groupResults.push({ groupId: g.id, diagnostics: r.diagnostics, ok: r.ok })
-    }
+    // ALL GROUPS AT ONCE. Each install touches only its own id — its entry in
+    // styleGroups, its uniform buffer, the draw calls already bound to it — so
+    // the order they land in changes nothing, and each keeps its own staleness
+    // guard (styleGroupGen). Awaiting them in turn made a model's styling the
+    // sum of its compiles; the GPU process runs them side by side.
+    const groupResults: GroupDiagnostic[] = (
+      await Promise.all(groups.map((g) => this.compileAndInstallGroup(inst, g)))
+    ).map((r, i) => ({ groupId: groups[i].id, diagnostics: r.diagnostics, ok: r.ok }))
 
     // Repoints every draw call away from the outgoing installs (among
     // everything else) — only past this line is destroying them safe.
@@ -16832,6 +16860,38 @@ export class Engine {
     }
   }
 
+  /**
+   * Compile style groups' pipelines before any model needs them — a scene's
+   * groups while its bundle is still downloading. Installs nothing: the
+   * pipelines land in the shader cache, and applyStyleGroups later finds them
+   * there (or still in flight). A group that does not compile is skipped
+   * silently; its real install reports it.
+   */
+  async prewarmStyleGroups(groups: readonly StyleGroup[]): Promise<void> {
+    if (!this.device) return
+    await Promise.all(
+      groups.map(async (g) => {
+        const renderClass = g.renderClass ?? "auto"
+        const alphaMode = g.alphaMode ?? "opaque"
+        const blend = g.blend ?? "over"
+        let result: ReturnType<typeof compileGraph>
+        try {
+          result = compileGraph(g.graph, { renderClass, alphaMode, blend })
+        } catch {
+          return
+        }
+        if (!result.ok) return
+        const module = this.cachedShaderModule(result.wgsl, `style group: ${g.id} (${renderClass})`)
+        await Promise.all([
+          this.createRenderClassPipeline(renderClass, module, false, true, false, blend),
+          this.createRenderClassPipeline(renderClass, module, false, false, false, blend),
+          renderClass === "hair" ? this.createRenderClassPipeline(renderClass, module, true, true, false, blend) : null,
+          renderClass === "eye" ? this.createRenderClassPipeline(renderClass, module, false, true, true, blend) : null,
+        ]).catch(() => {})
+      }),
+    )
+  }
+
   /** Add or replace a single style group by id. `opts` may carry a `previewNode` for the
    *  editor's node-output preview workflow. */
   async upsertStyleGroup(modelName: string, group: StyleGroup, opts?: CompileOptions): Promise<ApplyStyleGroupResult> {
@@ -17126,11 +17186,44 @@ export class Engine {
 
   // 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. */
+  private graphImageCache = new Map<string, Promise<ImageBitmap | null>>()
+
+  private graphImage(url: string): Promise<ImageBitmap | null> {
+    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 as Error).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. */
+  private async withGraphImages(group: StyleGroup): Promise<StyleGroup> {
+    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 }
+  }
+
   private async compileAndInstallGroup(
     inst: ModelInstance,
-    group: StyleGroup,
+    groupIn: StyleGroup,
     opts?: CompileOptions,
   ): Promise<ApplyStyleGroupResult> {
+    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
@@ -17160,9 +17253,35 @@ export class Engine {
     inst.styleGroupGen.set(group.id, generation)
 
     this.device.pushErrorScope("validation")
-    const module = this.device.createShaderModule({ label: `style group: ${group.id} (${renderClass})`, code: result.wgsl })
-    const info = await module.getCompilationInfo()
-    const scopeError = await this.device.popErrorScope()
+    const module = this.cachedShaderModule(result.wgsl, `style group: ${group.id} (${renderClass})`)
+    const scopePromise = this.device.popErrorScope()
+    // EVERY VARIANT AT ONCE, and the module's diagnostics read beside them
+    // rather than first: the compiles run in parallel in the GPU process, and
+    // awaiting each in turn (and the diagnostics before any) made a group cost
+    // the sum of its pipelines instead of the longest.
+    const blend = group.blend ?? "over"
+    // The single-sided twins a draw of this group will ask for (sidedPipeline),
+    // built with their pipelines rather than synchronously at the first draw.
+    const singleSided = inst.drawCalls.some((dc) => !dc.doubleSided && group.materials.includes(dc.materialName))
+    const variant = (overEyes: boolean, depthWrite: boolean, mirrored: boolean) =>
+      this.createRenderClassPipeline(renderClass, module, overEyes, depthWrite, mirrored, blend).then(async (p) => {
+        if (singleSided && !mirrored) await this.buildSidedTwin(p, false)
+        return p
+      })
+    const variants = Promise.all([
+      variant(false, true, false),
+      // The depth-write-off twin: stage transparency draws with it (see
+      // pipelineForDrawCall), and a future OIT path would too.
+      variant(false, false, false),
+      renderClass === "hair" ? variant(true, true, false) : undefined,
+      // Only the eye needs one: every other class culls "none", which a flipped
+      // winding leaves alone.
+      renderClass === "eye" ? variant(false, true, true) : undefined,
+    ])
+    // Handled below either way; this keeps a rejection off the console while
+    // the diagnostics are read.
+    variants.catch(() => {})
+    const [info, scopeError] = await Promise.all([module.getCompilationInfo(), scopePromise])
     const diagnostics = [...result.diagnostics]
     for (const msg of info.messages) {
       if (msg.type !== "error") continue
@@ -17171,6 +17290,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 }
     }
 
@@ -17179,16 +17299,7 @@ export class Engine {
     let overEyesPipeline: GPURenderPipeline | undefined
     let mirrorPipeline: GPURenderPipeline | undefined
     try {
-      const blend = group.blend ?? "over"
-      pipeline = await this.createRenderClassPipeline(renderClass, module, false, true, false, blend)
-      // The depth-write-off twin: stage transparency draws with it (see
-      // pipelineForDrawCall), and a future OIT path would too.
-      pipelineNoDepthWrite = await this.createRenderClassPipeline(renderClass, module, false, false, false, blend)
-      if (renderClass === "hair") overEyesPipeline = await this.createRenderClassPipeline(renderClass, module, true, true, false, blend)
-      // Only the eye needs one: every other class culls "none", which a flipped
-      // winding leaves alone.
-      if (renderClass === "eye")
-        mirrorPipeline = await this.createRenderClassPipeline(renderClass, module, false, true, true, blend)
+      ;[pipeline, pipelineNoDepthWrite, overEyesPipeline, mirrorPipeline] = await variants
     } catch (e) {
       diagnostics.push({ severity: "error", message: `pipeline creation failed: ${(e as Error).message}` })
       return { ok: false, diagnostics, slotMap: result.slotMap }
@@ -17430,8 +17541,8 @@ 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
     })
   }
@@ -17444,6 +17555,181 @@ export class Engine {
     return pipeline
   }
 
+  // ─── The shader cache ─────────────────────────────────────────────
+  //
+  // A compile is most of a second per distinct fragment shader on a cold
+  // browser cache, and the same source used to be compiled once per CALLER: a
+  // graph per model that carried it, the composite per effect install. These
+  // key a module by its WGSL and a pipeline by its module and every descriptor
+  // field but the label, so a second request for the same thing — in flight or
+  // done — is the first one's promise. Bounded, oldest first, because an editor
+  // session compiles a new source per keystroke.
+
+  private static readonly SHADER_CACHE_MAX = 256
+  private static readonly PIPELINE_CACHE_MAX = 512
+
+  private static trimCache<K, V>(cache: Map<K, V>, max: number): void {
+    while (cache.size > max) cache.delete(cache.keys().next().value as K)
+  }
+
+  /** A small stable id per GPU object, for cache keys. */
+  private gpuObjectId(o: object): number {
+    let id = this.gpuObjectIds.get(o)
+    if (id === undefined) {
+      id = this.gpuObjectNext++
+      this.gpuObjectIds.set(o, id)
+    }
+    return id
+  }
+
+  /** One module per WGSL source. */
+  private cachedShaderModule(code: string, label: string): GPUShaderModule {
+    let module = this.shaderModuleCache.get(code)
+    if (module) {
+      this.shaderModuleCache.delete(code)
+    } else {
+      module = this.device.createShaderModule({ label, code })
+    }
+    this.shaderModuleCache.set(code, module)
+    Engine.trimCache(this.shaderModuleCache, Engine.SHADER_CACHE_MAX)
+    return module
+  }
+
+  /** Drop a source whose module did not validate, so a retry reports afresh. */
+  private forgetShaderModule(code: string): void {
+    this.shaderModuleCache.delete(code)
+  }
+
+  /** One bind group layout per entry list. */
+  private cachedBindGroupLayout(desc: GPUBindGroupLayoutDescriptor): GPUBindGroupLayout {
+    const key = JSON.stringify(desc.entries)
+    let layout = this.bindGroupLayoutCache.get(key)
+    if (!layout) {
+      layout = this.device.createBindGroupLayout(desc)
+      this.bindGroupLayoutCache.set(key, layout)
+    }
+    return layout
+  }
+
+  /** One pipeline layout per bind group layout list. */
+  private cachedPipelineLayout(bindGroupLayouts: GPUBindGroupLayout[]): GPUPipelineLayout {
+    const key = bindGroupLayouts.map((l) => this.gpuObjectId(l)).join(",")
+    let layout = this.pipelineLayoutCache.get(key)
+    if (!layout) {
+      layout = this.device.createPipelineLayout({ bindGroupLayouts })
+      this.pipelineLayoutCache.set(key, layout)
+    }
+    return layout
+  }
+
+  private pipelineKey(kind: string, desc: GPURenderPipelineDescriptor | GPUComputePipelineDescriptor): string {
+    return (
+      kind +
+      JSON.stringify(desc, (k, v) =>
+        k === "label" ? undefined : (k === "module" || k === "layout") && v && typeof v === "object" ? `#${this.gpuObjectId(v)}` : v,
+      )
+    )
+  }
+
+  private cachedPipeline<T extends GPURenderPipeline | GPUComputePipeline>(key: string, build: () => Promise<T>): Promise<T> {
+    let p = this.pipelineCache.get(key) as Promise<T> | undefined
+    if (p) {
+      this.pipelineCache.delete(key)
+    } else {
+      p = build().catch((e) => {
+        this.pipelineCache.delete(key)
+        throw e
+      })
+    }
+    this.pipelineCache.set(key, p)
+    Engine.trimCache(this.pipelineCache, Engine.PIPELINE_CACHE_MAX)
+    return p
+  }
+
+  /** createRenderPipelineAsync, once per module + state. */
+  private cachedRenderPipeline(desc: GPURenderPipelineDescriptor): Promise<GPURenderPipeline> {
+    return this.cachedPipeline(this.pipelineKey("render", desc), () => this.device.createRenderPipelineAsync(desc))
+  }
+
+  /** createComputePipelineAsync, once per module + state. */
+  private cachedComputePipeline(desc: GPUComputePipelineDescriptor): Promise<GPUComputePipeline> {
+    return this.cachedPipeline(this.pipelineKey("compute", desc), () => this.device.createComputePipelineAsync(desc))
+  }
+
+  /**
+   * A pipeline init builds: async, in parallel with the rest, and in place by
+   * the time init returns (it awaits every job). Outside init — a pass built
+   * on first use — it is the synchronous build it always was.
+   */
+  private initRenderPipeline(desc: GPURenderPipelineDescriptor, assign: (p: GPURenderPipeline) => void, twins = false): void {
+    if (!this.initPipelineJobs) {
+      const pipeline = this.device.createRenderPipeline(desc)
+      if (twins) this.pipelineDescs.set(pipeline, desc)
+      assign(pipeline)
+      return
+    }
+    this.initPipelineJobs.push(
+      this.cachedRenderPipeline(desc)
+        // A rejected build is rebuilt the old way, which hands back the invalid
+        // pipeline and reports through uncapturederror — a bad init pipeline
+        // was never fatal to init, and is not now.
+        .catch(() => this.device.createRenderPipeline(desc))
+        .then((pipeline) => {
+        assign(pipeline)
+        if (!twins) return
+        this.pipelineDescs.set(pipeline, desc)
+        // The mirror's twin too, but not waited for: only a scene with a
+        // mirror draws it, and it is a cache hit on the module just built.
+        void this.buildSidedTwin(pipeline, true)
+        return this.buildSidedTwin(pipeline, false)
+      }),
+    )
+  }
+
+  /** The compute twin of initRenderPipeline. */
+  private initComputePipeline(desc: GPUComputePipelineDescriptor, assign: (p: GPUComputePipeline) => void): void {
+    if (!this.initPipelineJobs) {
+      assign(this.device.createComputePipeline(desc))
+      return
+    }
+    this.initPipelineJobs.push(
+      this.cachedComputePipeline(desc)
+        .catch(() => this.device.createComputePipeline(desc))
+        .then(assign),
+    )
+  }
+
+  /**
+   * Build a model pipeline's single-sided twin off the draw path (see
+   * sidedPipeline). Resolves once it is in place; never rejects — a twin that
+   * fails leaves the draw on its double-sided pipeline, as before it existed.
+   */
+  private buildSidedTwin(pipeline: GPURenderPipeline, mirrored: boolean): Promise<void> {
+    const desc = this.pipelineDescs.get(pipeline)
+    if (!desc || (desc.primitive?.cullMode ?? "none") !== "none") return Promise.resolve()
+    const cache = mirrored ? this.singleSidedMirror : this.singleSided
+    const pending = mirrored ? this.sidedPendingMirror : this.sidedPending
+    if (cache.has(pipeline) || pending.has(pipeline)) return Promise.resolve()
+    pending.add(pipeline)
+    return this.cachedRenderPipeline({
+      ...desc,
+      label: `${desc.label ?? "pipeline"} (single-sided${mirrored ? ", mirror" : ""})`,
+      primitive: { ...desc.primitive, cullMode: mirrored ? "back" : "front" },
+    }).then(
+      (twin) => {
+        cache.set(pipeline, twin)
+        pending.delete(pipeline)
+        // A bundle recorded meanwhile holds the double-sided stand-in.
+        this.bundlesDirty = true
+      },
+      () => {
+        // Remembered as itself, so the draw stops asking.
+        cache.set(pipeline, pipeline)
+        pending.delete(pipeline)
+      },
+    )
+  }
+
   /**
    * The pipeline a draw should use once its double-sided flag is honoured.
    *
@@ -17461,17 +17747,14 @@ export class Engine {
     if (draw.doubleSided) return pipeline
     const desc = this.pipelineDescs.get(pipeline)
     if (!desc || (desc.primitive?.cullMode ?? "none") !== "none") return pipeline
-    const cache = mirrored ? this.singleSidedMirror : this.singleSided
-    let twin = cache.get(pipeline)
-    if (!twin) {
-      twin = this.device.createRenderPipeline({
-        ...desc,
-        label: `${desc.label ?? "pipeline"} (single-sided${mirrored ? ", mirror" : ""})`,
-        primitive: { ...desc.primitive, cullMode: mirrored ? "back" : "front" },
-      })
-      cache.set(pipeline, twin)
-    }
-    return twin
+    const twin = (mirrored ? this.singleSidedMirror : this.singleSided).get(pipeline)
+    if (twin) return twin
+    // NEVER BUILT HERE SYNCHRONOUSLY: a sync build stalls the GPU process for
+    // the whole compile, mid-frame. The camera's twins are built beside their
+    // pipelines; one asked for first here (a mirror's) is started now and the
+    // draw keeps its double-sided pipeline until it lands.
+    void this.buildSidedTwin(pipeline, mirrored)
+    return pipeline
   }
 
   // Pipeline for a material draw call: its group's compiled pipeline when grouped, else
@@ -17547,6 +17830,9 @@ 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
@@ -18284,6 +18570,264 @@ export class Engine {
     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: string, look: NativeLook | null): boolean {
+    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: [number, number, number] = [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 as GPUTextureView,
+      }))
+    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: string): Promise<void> {
+    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. */
+  private ensureNativeHosts(): NativeHost {
+    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: string, rgba: number[], 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: NativeStagePackage | null, read?: NativeStageReader, onProgress?: (done: number, total: number) => void): Promise<void> {
+    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(): { errors: string[]; missing: Record<string, number> } {
+    const errors = [...(this.nativeHost?.errors ?? []), ...(this.nativeShadowHost?.errors ?? [])]
+    const missing: Record<string, number> = {}
+    for (const h of [this.nativeHost, this.nativeShadowHost]) for (const [k, v] of h?.missing ?? []) missing[k] = (missing[k] ?? 0) + v
+    return { errors, missing }
+  }
+
+  private nativeFrameTextures(): Record<string, GPUTextureView | undefined> {
+    return { _MainLightShadowmapTexture: this.shadowAtlasView, sim_CharacterShadowmap: this.nativeNoShadowView ?? undefined }
+  }
+
+  private eyeArray(): [number, number, number] {
+    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. */
+  private prepareNativeLooks(encoder: GPUCommandEncoder): void {
+    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]] as [number, number, number],
+        radius: d[b + 3],
+        color: [d[b + 4], d[b + 5], d[b + 6]] as [number, number, number],
+        aim: [d[b + 8], d[b + 9], d[b + 10]] as [number, number, number],
+        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: [number, number, number] = [dir.x, dir.y, dir.z]
+    let sunColor: [number, number, number] = [sun.color.x * k, sun.color.y * k, sun.color.z * k]
+    let sunShadow = this.sunShadow
+    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] as [number, number, number],
+          radius: l.range * sc,
+          color: [l.color[0] * sc * sc, l.color[1] * sc * sc, l.color[2] * sc * sc] as [number, number, number],
+          aim: (l.aim ? gameDir(l.aim) : [0, 0, 0]) as [number, number, number],
+          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]] as [number, number]),
+          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] as [number, number, number],
+            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())
+  }
+
   private updateSkinMatrices() {
     this.forEachInstance((inst) => {
       // Only a pose pass can change these, and an idle stage did not run one —
@@ -18360,3 +18904,30 @@ export class Engine {
     this.stats.cpuRenderMs = Math.round(this.cpuRenderMs * 100) / 100
   }
 }
+
+/**
+ * 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: Record<string, NativeValue>, next: Record<string, NativeValue>): Record<string, NativeValue> {
+  for (const k in next) {
+    const a = prev[k]
+    if (a !== undefined && sameValue(a, next[k])) next[k] = a
+  }
+  return next
+}
+
+function sameValue(a: NativeValue, b: NativeValue): boolean {
+  if (typeof a === "number" || typeof b === "number") return a === b
+  if (a.length !== b.length) return false
+  if (a instanceof Uint32Array !== b instanceof Uint32Array) return false
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i] as number | ArrayLike<number>
+    const y = b[i] as number | ArrayLike<number>
+    if (typeof x === "number" || typeof y === "number") {
+      if (x !== y) return false
+    } else if (!sameValue(x, y)) return false
+  }
+  return true
+}