reze-engine 0.11.0 → 0.11.2

package/src/engine.ts

@@ -14,7 +14,7 @@ import {
   type AssetReader,
 } from "./asset-reader"
 import { DEFAULT_SHADER_WGSL } from "./shaders/default"
-import { DFG_LUT_SIZE, DFG_LUT_WGSL } from "./shaders/dfg_lut"
+import { BRDF_LUT_SIZE, BRDF_LUT_BAKE_WGSL } from "./shaders/dfg_lut"
 import { LTC_MAG_LUT_SIZE, LTC_MAG_LUT_DATA } from "./shaders/ltc_mag_lut"
 import { FACE_SHADER_WGSL } from "./shaders/face"
 import { HAIR_SHADER_WGSL } from "./shaders/hair"
@@ -78,21 +78,23 @@ export const DEFAULT_BLOOM_OPTIONS: BloomOptions = {
   knee: 0.5,
   radius: 4.0,
   color: new Vec3(1.0, 0.7247558832168579, 0.6487361788749695),
-  intensity: 0.03,
+  intensity: 0.05,
   clamp: 0.0,
 }
 
 /** Blender Color Management / View (rendering.txt: Filmic, exposure, gamma). `look` is reserved for future curve tweaks. */
 export type ViewTransformOptions = {
-  /** Stops applied before Filmic: `linear *= 2^exposure` (Blender default often ~−0.3). */
+  /** Stops applied before Filmic: `linear *= 2^exposure`. */
   exposure: number
   /** After Filmic, display gamma (`pow(rgb, 1/gamma)`). */
   gamma: number
   look: "default" | "medium_high_contrast"
 }
 
+// Matches the reference Blender project: Filmic view, Medium High Contrast look,
+// exposure 0.3, gamma 1.0, sRGB display, no curves.
 export const DEFAULT_VIEW_TRANSFORM: ViewTransformOptions = {
-  exposure: -0.30000001192092896,
+  exposure: 0.6,
   gamma: 1.0,
   look: "medium_high_contrast",
 }
@@ -212,6 +214,13 @@ export class Engine {
   private hdrResolveTexture!: GPUTexture
   private static readonly MULTISAMPLE_COUNT = 4
   private static readonly HDR_FORMAT: GPUTextureFormat = "rgba16float"
+  /** Single-channel mask written alongside HDR color — 1 = model geometry (contributes
+   *  to bloom), 0 = ground (never blooms). Sampled by the bloom blit pass to gate the
+   *  prefilter so ground brightness can't halo the scene. */
+  private static readonly BLOOM_MASK_FORMAT: GPUTextureFormat = "r8unorm"
+  private multisampleMaskTexture!: GPUTexture
+  private maskResolveTexture!: GPUTexture
+  private maskResolveView!: GPUTextureView
   private renderPassDescriptor!: GPURenderPassDescriptor
   private compositePassDescriptor!: GPURenderPassDescriptor
   private compositePipeline!: GPURenderPipeline
@@ -256,11 +265,9 @@ export class Engine {
   private hasGround = false
   private shadowMapTexture!: GPUTexture
   private shadowMapDepthView!: GPUTextureView
-  private dfgLutTexture!: GPUTexture
-  private dfgLutView!: GPUTextureView
-  private ltcMagLutTexture!: GPUTexture
-  private ltcMagLutView!: GPUTextureView
-  private static readonly SHADOW_MAP_SIZE = 4096
+  private brdfLutTexture!: GPUTexture
+  private brdfLutView!: GPUTextureView
+  private static readonly SHADOW_MAP_SIZE = 2048
   private shadowDepthPipeline!: GPURenderPipeline
   private shadowLightVPBuffer!: GPUBuffer
   private shadowLightVPMatrix = new Float32Array(16)
@@ -287,6 +294,8 @@ export class Engine {
   private modelInstances = new Map<string, ModelInstance>()
   private materialSampler!: GPUSampler
   private textureCache = new Map<string, GPUTexture>()
+  private mipBlitPipeline: GPURenderPipeline | null = null
+  private mipBlitSampler: GPUSampler | null = null
   private _nextDefaultModelId = 0
 
   // IK and physics enabled at engine level (same for all models)
@@ -428,9 +437,12 @@ export class Engine {
   private writeBloomUniforms(): void {
     const b = this.bloomSettings
     const bu = this.bloomBlitUniformData
-    // EEVEE prefilter: threshold, knee, clamp (0 → disabled), _unused
+    // 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
+    bu[1] = b.knee * 0.5
     bu[2] = b.clamp
     bu[3] = 0.0
     this.device.queue.writeBuffer(this.bloomBlitUniformBuffer, 0, bu)
@@ -473,51 +485,24 @@ export class Engine {
     Engine.instance = this
   }
 
-  // One-shot bake of EEVEE's BRDF split-sum DFG LUT — ported from
-  // bsdf_lut_frag.glsl. Runs once per engine init; resulting 64×64 rg16float
-  // texture is sampled by every material shader via group(0) binding(9).
-  private bakeDfgLut() {
-    this.dfgLutTexture = this.device.createTexture({
-      label: "DFG LUT",
-      size: [DFG_LUT_SIZE, DFG_LUT_SIZE],
-      format: "rg16float",
-      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-    })
-    this.dfgLutView = this.dfgLutTexture.createView()
-
-    const module = this.device.createShaderModule({ label: "DFG LUT bake", code: DFG_LUT_WGSL })
-    const pipeline = this.device.createRenderPipeline({
-      label: "DFG LUT bake pipeline",
-      layout: "auto",
-      vertex: { module, entryPoint: "vs" },
-      fragment: { module, entryPoint: "fs", targets: [{ format: "rg16float" }] },
-      primitive: { topology: "triangle-list" },
-    })
-
-    const enc = this.device.createCommandEncoder({ label: "DFG LUT bake encoder" })
-    const pass = enc.beginRenderPass({
-      colorAttachments: [
-        { view: this.dfgLutView, clearValue: { r: 0, g: 0, b: 0, a: 1 }, loadOp: "clear", storeOp: "store" },
-      ],
-    })
-    pass.setPipeline(pipeline)
-    pass.draw(3, 1, 0, 0)
-    pass.end()
-    this.device.queue.submit([enc.finish()])
-  }
+  // One-shot bake of EEVEE's combined BRDF LUT — DFG (bsdf_lut_frag.glsl) packed
+  // with ltc_mag_ggx (eevee_lut.c) into a single 64×64 rgba8unorm texture:
+  //   .rg = split-sum DFG   → F_brdf_*_scatter
+  //   .ba = LTC magnitude   → ltc_brdf_scale_from_lut
+  // One texture fetch per fragment replaces the previous 2–3 taps. rgba8unorm
+  // (vs rgba16float) halves sample bandwidth; DFG/LTC values fit [0,1] cleanly.
+  private bakeBrdfLut() {
+    if (BRDF_LUT_SIZE !== LTC_MAG_LUT_SIZE) {
+      throw new Error("BRDF LUT bake requires DFG size == LTC size (both 64).")
+    }
 
-  // Upload Blender's static LTC GGX magnitude LUT (eevee_lut.c ltc_mag_ggx[]).
-  // Pairs with the DFG LUT to form ltc_brdf_scale — closure_eval_glossy_lib.glsl:79-81.
-  private uploadLtcMagLut() {
-    this.ltcMagLutTexture = this.device.createTexture({
-      label: "LTC mag LUT",
+    // Temp rg16float LTC source — loaded 1:1 by the bake fragment shader, then dropped.
+    const ltcTemp = this.device.createTexture({
+      label: "LTC mag LUT (bake input)",
       size: [LTC_MAG_LUT_SIZE, LTC_MAG_LUT_SIZE],
       format: "rg16float",
       usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
     })
-    this.ltcMagLutView = this.ltcMagLutTexture.createView()
-
-    // Float32 → float16 bits. rg16float writeTexture expects packed half floats.
     const n = LTC_MAG_LUT_DATA.length
     const half = new Uint16Array(n)
     const f32 = new Float32Array(1)
@@ -527,22 +512,58 @@ export class Engine {
       const x = u32[0]
       const sign = (x >>> 16) & 0x8000
       let exp = ((x >>> 23) & 0xff) - 127 + 15
-      let mant = x & 0x7fffff
+      const mant = x & 0x7fffff
       if (exp <= 0) {
-        half[i] = sign // flush tiny values to signed zero (data here is in [0, ~1])
+        half[i] = sign
       } else if (exp >= 31) {
-        half[i] = sign | 0x7c00 // inf
+        half[i] = sign | 0x7c00
       } else {
         half[i] = sign | (exp << 10) | (mant >>> 13)
       }
     }
-
     this.device.queue.writeTexture(
-      { texture: this.ltcMagLutTexture },
+      { texture: ltcTemp },
       half,
       { bytesPerRow: LTC_MAG_LUT_SIZE * 4, rowsPerImage: LTC_MAG_LUT_SIZE },
-      { width: LTC_MAG_LUT_SIZE, height: LTC_MAG_LUT_SIZE, depthOrArrayLayers: 1 }
+      { width: LTC_MAG_LUT_SIZE, height: LTC_MAG_LUT_SIZE, depthOrArrayLayers: 1 },
     )
+
+    this.brdfLutTexture = this.device.createTexture({
+      label: "BRDF LUT (DFG + LTC packed)",
+      size: [BRDF_LUT_SIZE, BRDF_LUT_SIZE],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    })
+    this.brdfLutView = this.brdfLutTexture.createView()
+
+    const module = this.device.createShaderModule({ label: "BRDF LUT bake", code: BRDF_LUT_BAKE_WGSL })
+    const pipeline = this.device.createRenderPipeline({
+      label: "BRDF LUT bake pipeline",
+      layout: "auto",
+      vertex: { module, entryPoint: "vs" },
+      fragment: { module, entryPoint: "fs", targets: [{ format: "rgba8unorm" }] },
+      primitive: { topology: "triangle-list" },
+    })
+
+    const bakeBindGroup = this.device.createBindGroup({
+      label: "BRDF LUT bake bind group",
+      layout: pipeline.getBindGroupLayout(0),
+      entries: [{ binding: 0, resource: ltcTemp.createView() }],
+    })
+
+    const enc = this.device.createCommandEncoder({ label: "BRDF LUT bake encoder" })
+    const pass = enc.beginRenderPass({
+      colorAttachments: [
+        { view: this.brdfLutView, clearValue: { r: 0, g: 0, b: 0, a: 1 }, loadOp: "clear", storeOp: "store" },
+      ],
+    })
+    pass.setPipeline(pipeline)
+    pass.setBindGroup(0, bakeBindGroup)
+    pass.draw(3, 1, 0, 0)
+    pass.end()
+    this.device.queue.submit([enc.finish()])
+
+    ltcTemp.destroy()
   }
 
   private createRenderPipeline(config: {
@@ -551,11 +572,13 @@ export class Engine {
     shaderModule: GPUShaderModule
     vertexBuffers: GPUVertexBufferLayout[]
     fragmentTarget?: GPUColorTargetState
+    fragmentTargets?: GPUColorTargetState[]
     fragmentEntryPoint?: string
     cullMode?: GPUCullMode
     depthStencil?: GPUDepthStencilState
     multisample?: GPUMultisampleState
   }): GPURenderPipeline {
+    const targets = config.fragmentTargets ?? (config.fragmentTarget ? [config.fragmentTarget] : undefined)
     return this.device.createRenderPipeline({
       label: config.label,
       layout: config.layout,
@@ -563,11 +586,11 @@ export class Engine {
         module: config.shaderModule,
         buffers: config.vertexBuffers,
       },
-      fragment: config.fragmentTarget
+      fragment: targets
         ? {
             module: config.shaderModule,
             entryPoint: config.fragmentEntryPoint,
-            targets: [config.fragmentTarget],
+            targets,
           }
         : undefined,
       primitive: { cullMode: config.cullMode ?? "none" },
@@ -580,6 +603,7 @@ export class Engine {
     this.materialSampler = this.device.createSampler({
       magFilter: "linear",
       minFilter: "linear",
+      mipmapFilter: "linear",
       addressModeU: "repeat",
       addressModeV: "repeat",
     })
@@ -641,6 +665,12 @@ export class Engine {
       },
     }
 
+    // Bloom mask target — r8unorm has no alpha channel, so src-alpha blending is invalid.
+    // Use replace mode: depth test already rejects occluded fragments, so last-writer-wins
+    // on surviving pixels gives the right result (ground writes 0; models/outlines write 1).
+    const maskBlend: GPUColorTargetState = { format: Engine.BLOOM_MASK_FORMAT }
+    const sceneTargets: GPUColorTargetState[] = [standardBlend, maskBlend]
+
     const shaderModule = this.device.createShaderModule({
       label: "default model shader",
       code: DEFAULT_SHADER_WGSL,
@@ -697,7 +727,6 @@ export class Engine {
         { binding: 4, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "comparison" } },
         { binding: 5, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
         { binding: 9, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
-        { binding: 10, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
       ],
     })
     // group 1: per-instance (skinMats) — bound once per model
@@ -730,7 +759,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -744,7 +773,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule: faceShaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -758,7 +787,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule: hairShaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -772,7 +801,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule: clothSmoothShaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -786,7 +815,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule: clothRoughShaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -800,7 +829,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule: metalShaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -814,7 +843,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule: bodyShaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -828,7 +857,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule: eyeShaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -842,7 +871,7 @@ export class Engine {
       layout: mainPipelineLayout,
       shaderModule: stockingsShaderModule,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -907,10 +936,8 @@ export class Engine {
     })
     this.shadowMapDepthView = this.shadowMapTexture.createView()
 
-    // One-shot bake of Blender EEVEE's BRDF split-sum DFG LUT (bsdf_lut_frag.glsl).
-    this.bakeDfgLut()
-    // Upload static LTC GGX magnitude LUT for direct-specular energy compensation.
-    this.uploadLtcMagLut()
+    // One-shot bake of Blender EEVEE's combined BRDF LUT (DFG + LTC packed rgba8unorm).
+    this.bakeBrdfLut()
 
     // Now that shadow resources exist, create the main per-frame bind group
     this.perFrameBindGroup = this.device.createBindGroup({
@@ -923,8 +950,7 @@ export class Engine {
         { binding: 3, resource: this.shadowMapDepthView },
         { binding: 4, resource: this.shadowComparisonSampler },
         { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
-        { binding: 9, resource: this.dfgLutView },
-        { binding: 10, resource: this.ltcMagLutView },
+        { binding: 9, resource: this.brdfLutView },
       ],
     })
 
@@ -989,7 +1015,8 @@ export class Engine {
           var o: VO; o.worldPos = position; o.normal = normal;
           o.position = camera.projection * camera.view * vec4f(position, 1.0); return o;
         }
-        @fragment fn fs(i: VO) -> @location(0) vec4f {
+        struct FSOut { @location(0) color: vec4f, @location(1) mask: f32 };
+        @fragment fn fs(i: VO) -> FSOut {
           let n = normalize(i.normal);
           let centerDist = length(i.worldPos.xz);
           let edgeFade = 1.0 - smoothstep(0.0, 1.0, clamp((centerDist - material.fadeStart) / max(material.fadeEnd - material.fadeStart, 0.001), 0.0, 1.0));
@@ -1027,7 +1054,10 @@ export class Engine {
           var baseColor = material.diffuseColor * sun * (1.0 - dark * 0.65);
           baseColor *= noiseTint;
           let finalColor = mix(baseColor, material.gridLineColor, gridLine * material.gridLineOpacity * edgeFade);
-          return vec4f(finalColor * edgeFade, edgeFade);
+          var out: FSOut;
+          out.color = vec4f(finalColor * edgeFade, edgeFade);
+          out.mask = 0.0;
+          return out;
         }
       `,
     })
@@ -1036,7 +1066,7 @@ export class Engine {
       layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.groundShadowBindGroupLayout] }),
       shaderModule: groundShadowShader,
       vertexBuffers: fullVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "back",
       depthStencil: { format: "depth24plus-stencil8", depthWriteEnabled: true, depthCompare: "less-equal" },
     })
@@ -1149,8 +1179,12 @@ export class Engine {
           return output;
         }
 
-        @fragment fn fs() -> @location(0) vec4f {
-          return material.edgeColor;
+        struct FSOut { @location(0) color: vec4f, @location(1) mask: f32 };
+        @fragment fn fs() -> FSOut {
+          var out: FSOut;
+          out.color = material.edgeColor;
+          out.mask = 1.0;
+          return out;
         }
       `,
     })
@@ -1160,7 +1194,7 @@ export class Engine {
       layout: outlinePipelineLayout,
       shaderModule: outlineShaderModule,
       vertexBuffers: outlineVertexBuffers,
-      fragmentTarget: standardBlend,
+      fragmentTargets: sceneTargets,
       cullMode: "back",
       depthStencil: {
         format: "depth24plus-stencil8",
@@ -1197,6 +1231,7 @@ export class Engine {
       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({
@@ -1230,6 +1265,7 @@ export class Engine {
       code: `${bloomFullscreenVs}
         @group(0) @binding(0) var hdrTex: texture_2d<f32>;
         @group(0) @binding(1) var<uniform> prefilter: vec4<f32>; // threshold, knee, clamp, _unused
+        @group(0) @binding(2) var maskTex: texture_2d<f32>;
 
         fn luminance(c: vec3f) -> f32 {
           return dot(max(c, vec3f(0.0)), vec3f(0.2126, 0.7152, 0.0722));
@@ -1240,8 +1276,11 @@ export class Engine {
           let s = textureLoad(hdrTex, cc, 0);
           // Scene pass uses src-alpha blend with clear alpha 0 → premultiplied. Unpremultiply.
           let rgb = max(s.rgb / max(s.a, 1e-6), vec3f(0.0));
+          // Bloom mask: MRT r8unorm written by material shaders (1.0 = bloom, 0.0 = skip).
+          let mask = textureLoad(maskTex, cc, 0).r;
+          let masked = rgb * mask;
           // Blender: clamp each tap BEFORE Karis average (eevee_bloom: color = min(clampIntensity, color)).
-          return select(rgb, min(rgb, vec3f(clampV)), clampV > 0.0);
+          return select(masked, min(masked, vec3f(clampV)), clampV > 0.0);
         }
 
         @fragment fn fs(@builtin(position) p: vec4f) -> @location(0) vec4f {
@@ -1339,7 +1378,9 @@ export class Engine {
     })
 
     const bloomBlitLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bloomBlitBindGroupLayout] })
-    const bloomDownLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bloomDownsampleBindGroupLayout] })
+    const bloomDownLayout = this.device.createPipelineLayout({
+      bindGroupLayouts: [this.bloomDownsampleBindGroupLayout],
+    })
     const bloomUpLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bloomUpsampleBindGroupLayout] })
 
     this.bloomBlitPipeline = this.device.createRenderPipeline({
@@ -1392,9 +1433,14 @@ export class Engine {
         // viewU[0] = (exposure, gamma, _, _);  viewU[1] = (tint.rgb, intensity)
 
         fn filmic(x: f32) -> f32 {
+          // Re-fit against Blender 3.6 Filmic MHC anchors (sobotka/filmic-blender
+          // look_medium-high-contrast.spi1d). Previous curve was compressed:
+          // midtones too bright, highlights too dim — flattened contrast, read
+          // as "washed-out" on saturated surfaces (hair especially).
+          // Reference checkpoints: linear 0.18 → ~0.395, linear 1.0 → ~0.83.
           var lut = array<f32, 14>(
-            0.0067, 0.0141, 0.0272, 0.0499, 0.0885, 0.1512, 0.2462,
-            0.3753, 0.5273, 0.6776, 0.8031, 0.8929, 0.9495, 0.9814
+            0.0028, 0.0068, 0.0151, 0.0313, 0.0610, 0.1120, 0.1920,
+            0.3060, 0.4590, 0.6310, 0.8200, 0.9070, 0.9620, 0.9890
           );
           let t = clamp(log2(max(x, 1e-10)) + 10.0, 0.0, 13.0);
           let i = u32(t);
@@ -1415,7 +1461,8 @@ export class Engine {
           let fullSz = vec2f(textureDimensions(hdrTex));
           let bloomSz = vec2f(textureDimensions(bloomTex));
           // Bloom is at half-res (pyramid mip 0). Sampler interpolates back to full-res UVs.
-          let bloomUv = (fragCoord.xy + vec2f(0.5)) / max(fullSz, vec2f(1.0));
+          // fragCoord.xy is already at pixel center (e.g. 0.5, 0.5 for first pixel).
+          let bloomUv = fragCoord.xy / max(fullSz, vec2f(1.0));
           let tint = viewU[1].xyz;
           let intensity = viewU[1].w;
           let bloom = textureSampleLevel(bloomTex, bloomSamp, bloomUv, 0.0).rgb * tint * intensity;
@@ -1587,15 +1634,29 @@ export class Engine {
         usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
       })
 
+      // Bloom-mask MRT attachments — same dims + MSAA as HDR so they share the render pass.
+      // MS buffer gets resolved into maskResolveTexture, which the bloom blit pass samples.
+      this.multisampleMaskTexture = this.device.createTexture({
+        label: "multisample bloom mask",
+        size: [width, height],
+        sampleCount: Engine.MULTISAMPLE_COUNT,
+        format: Engine.BLOOM_MASK_FORMAT,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+      })
+      this.maskResolveTexture = this.device.createTexture({
+        label: "bloom mask resolve",
+        size: [width, height],
+        format: Engine.BLOOM_MASK_FORMAT,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+      })
+      this.maskResolveView = this.maskResolveTexture.createView()
+
       // 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.bloomMipCount = Math.max(1, Math.min(Engine.BLOOM_MAX_LEVELS, Math.floor(Math.log2(shortSide)) - 1))
       this.bloomDownTexture = this.device.createTexture({
         label: "bloom down pyramid",
         size: [bw, bh],
@@ -1612,16 +1673,12 @@ export class Engine {
       })
       this.bloomDownMipViews = []
       for (let i = 0; i < this.bloomMipCount; i++) {
-        this.bloomDownMipViews.push(
-          this.bloomDownTexture.createView({ baseMipLevel: i, mipLevelCount: 1 }),
-        )
+        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.bloomUpMipViews.push(this.bloomUpTexture.createView({ baseMipLevel: i, mipLevelCount: 1 }))
       }
 
       this.depthTexture = this.device.createTexture({
@@ -1642,9 +1699,17 @@ export class Engine {
         storeOp: "store",
       }
 
+      const maskAttachment: GPURenderPassColorAttachment = {
+        view: this.multisampleMaskTexture.createView(),
+        resolveTarget: this.maskResolveView,
+        clearValue: { r: 0, g: 0, b: 0, a: 0 },
+        loadOp: "clear",
+        storeOp: "store",
+      }
+
       this.renderPassDescriptor = {
         label: "renderPass",
-        colorAttachments: [colorAttachment],
+        colorAttachments: [colorAttachment, maskAttachment],
         depthStencilAttachment: {
           view: depthTextureView,
           depthClearValue: 1.0,
@@ -1679,6 +1744,7 @@ export class Engine {
           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].
@@ -2534,10 +2600,12 @@ export class Engine {
         colorSpaceConversion: "none",
       })
 
+      const mipLevelCount = Math.floor(Math.log2(Math.max(imageBitmap.width, imageBitmap.height))) + 1
       const texture = this.device.createTexture({
         label: `texture: ${cacheKey}`,
         size: [imageBitmap.width, imageBitmap.height],
         format: "rgba8unorm-srgb",
+        mipLevelCount,
         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
       })
       this.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [
@@ -2545,6 +2613,8 @@ export class Engine {
         imageBitmap.height,
       ])
 
+      if (mipLevelCount > 1) this.generateMipmaps(texture, mipLevelCount)
+
       this.textureCache.set(cacheKey, texture)
       inst.textureCacheKeys.push(cacheKey)
       return texture
@@ -2553,6 +2623,66 @@ export class Engine {
     }
   }
 
+  // Bilinear box-filter downsample per level. Reads srgb view (hardware linearizes on sample,
+  // re-encodes on write), so intensities are filtered in linear space — matching EEVEE/Blender.
+  private generateMipmaps(texture: GPUTexture, mipLevelCount: number) {
+    if (!this.mipBlitPipeline || !this.mipBlitSampler) {
+      this.mipBlitSampler = this.device.createSampler({
+        magFilter: "linear",
+        minFilter: "linear",
+        addressModeU: "clamp-to-edge",
+        addressModeV: "clamp-to-edge",
+      })
+      const module = this.device.createShaderModule({
+        label: "mipmap blit",
+        code: /* wgsl */ `
+          @group(0) @binding(0) var src: texture_2d<f32>;
+          @group(0) @binding(1) var samp: sampler;
+          @vertex fn vs(@builtin(vertex_index) vi: u32) -> @builtin(position) vec4f {
+            let x = f32((vi & 1u) << 2u) - 1.0;
+            let y = f32((vi & 2u) << 1u) - 1.0;
+            return vec4f(x, y, 0.0, 1.0);
+          }
+          @fragment fn fs(@builtin(position) p: vec4f) -> @location(0) vec4f {
+            let dstDims = vec2f(textureDimensions(src)) * 0.5;
+            let uv = p.xy / max(dstDims, vec2f(1.0));
+            return textureSampleLevel(src, samp, uv, 0.0);
+          }
+        `,
+      })
+      this.mipBlitPipeline = this.device.createRenderPipeline({
+        label: "mipmap blit pipeline",
+        layout: "auto",
+        vertex: { module, entryPoint: "vs" },
+        fragment: { module, entryPoint: "fs", targets: [{ format: "rgba8unorm-srgb" }] },
+        primitive: { topology: "triangle-list" },
+      })
+    }
+
+    const encoder = this.device.createCommandEncoder({ label: "mipgen" })
+    for (let level = 1; level < mipLevelCount; level++) {
+      const srcView = texture.createView({ baseMipLevel: level - 1, mipLevelCount: 1 })
+      const dstView = texture.createView({ baseMipLevel: level, mipLevelCount: 1 })
+      const bindGroup = this.device.createBindGroup({
+        layout: this.mipBlitPipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: srcView },
+          { binding: 1, resource: this.mipBlitSampler },
+        ],
+      })
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          { view: dstView, clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: "clear", storeOp: "store" },
+        ],
+      })
+      pass.setPipeline(this.mipBlitPipeline)
+      pass.setBindGroup(0, bindGroup)
+      pass.draw(3)
+      pass.end()
+    }
+    this.device.queue.submit([encoder.finish()])
+  }
+
   private renderGround(pass: GPURenderPassEncoder) {
     if (!this.hasGround || !this.groundVertexBuffer || !this.groundIndexBuffer || !this.groundDrawCall) return
     pass.setPipeline(this.groundShadowPipeline)