reze-engine 0.11.2 → 0.12.0

package/dist/engine.js

@@ -3,18 +3,33 @@ import { Mat4, Vec3 } from "./math";
 import { PmxLoader } from "./pmx-loader";
 import { Physics } from "./physics";
 import { createFetchAssetReader, createFileMapAssetReader, deriveBasePathFromPmxPath, fileListToMap, findFirstPmxFileInList, joinAssetPath, normalizeAssetPath, } from "./asset-reader";
-import { DEFAULT_SHADER_WGSL } from "./shaders/default";
+import { DEFAULT_SHADER_WGSL } from "./shaders/materials/default";
+import { FACE_SHADER_WGSL } from "./shaders/materials/face";
+import { HAIR_SHADER_WGSL } from "./shaders/materials/hair";
+import { CLOTH_SMOOTH_SHADER_WGSL } from "./shaders/materials/cloth_smooth";
+import { CLOTH_ROUGH_SHADER_WGSL } from "./shaders/materials/cloth_rough";
+import { METAL_SHADER_WGSL } from "./shaders/materials/metal";
+import { BODY_SHADER_WGSL } from "./shaders/materials/body";
+import { EYE_SHADER_WGSL } from "./shaders/materials/eye";
+import { STOCKINGS_SHADER_WGSL } from "./shaders/materials/stockings";
 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";
-import { CLOTH_SMOOTH_SHADER_WGSL } from "./shaders/cloth_smooth";
-import { CLOTH_ROUGH_SHADER_WGSL } from "./shaders/cloth_rough";
-import { METAL_SHADER_WGSL } from "./shaders/metal";
-import { BODY_SHADER_WGSL } from "./shaders/body";
-import { EYE_SHADER_WGSL } from "./shaders/eye";
-import { STOCKINGS_SHADER_WGSL } from "./shaders/stockings";
-import { resolvePreset } from "./shaders/classify";
+import { SHADOW_DEPTH_SHADER_WGSL } from "./shaders/passes/shadow";
+import { GROUND_SHADOW_SHADER_WGSL } from "./shaders/passes/ground";
+import { OUTLINE_SHADER_WGSL } from "./shaders/passes/outline";
+import { BLOOM_BLIT_SHADER_WGSL, BLOOM_DOWNSAMPLE_SHADER_WGSL, BLOOM_UPSAMPLE_SHADER_WGSL, } from "./shaders/passes/bloom";
+import { COMPOSITE_SHADER_WGSL } from "./shaders/passes/composite";
+import { PICK_SHADER_WGSL } from "./shaders/passes/pick";
+import { MIPMAP_BLIT_SHADER_WGSL } from "./shaders/passes/mipmap";
+function resolvePreset(materialName, map) {
+    if (!map)
+        return "default";
+    for (const [preset, names] of Object.entries(map)) {
+        if (names && names.includes(materialName))
+            return preset;
+    }
+    return "default";
+}
 export const DEFAULT_BLOOM_OPTIONS = {
     enabled: true,
     threshold: 0.5,
@@ -50,7 +65,7 @@ export class Engine {
         this.lightData = new Float32Array(64);
         this.lightCount = 0;
         this.resizeObserver = null;
-        // [exposure, gamma, _, _,  bloomTint.x, bloomTint.y, bloomTint.z, bloomIntensity]
+        // [exposure, invGamma, _, _,  bloomTint.x, bloomTint.y, bloomTint.z, bloomIntensity]
         this.compositeUniformData = new Float32Array(8);
         this.bloomBlitUniformData = new Float32Array(4);
         this.bloomUpsampleUniformData = new Float32Array(4);
@@ -200,7 +215,10 @@ export class Engine {
         const effIntensity = b.enabled ? b.intensity : 0.0;
         const u = this.compositeUniformData;
         u[0] = v.exposure;
-        u[1] = Math.max(v.gamma, 1e-4);
+        // Store 1/gamma so the shader avoids a per-pixel divide. Safari's Metal
+        // compiler doesn't fold `pow(x, 1/g)` into identity when g=1, so also emit
+        // a uniform branch that skips the pow entirely in the common case.
+        u[1] = 1.0 / Math.max(v.gamma, 1e-4);
         u[2] = 0.0;
         u[3] = 0.0;
         u[4] = b.color.x;
@@ -536,6 +554,9 @@ export class Engine {
                 depthCompare: "less-equal",
             },
         });
+        // Hair opaque: stencil != EYE_VALUE so fragments on top of eyes are skipped entirely —
+        // depth and color stay as the eye wrote them; the follow-up hairOverEyesPipeline then
+        // draws those skipped fragments alpha-blended so the eye reads through the hair.
         this.hairPipeline = this.createRenderPipeline({
             label: "hair NPR pipeline",
             layout: mainPipelineLayout,
@@ -547,8 +568,37 @@ export class Engine {
                 format: "depth24plus-stencil8",
                 depthWriteEnabled: true,
                 depthCompare: "less-equal",
+                stencilFront: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+                stencilBack: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+                stencilReadMask: 0xff,
+                stencilWriteMask: 0,
             },
         });
+        // Hair-over-eyes: same shader with IS_OVER_EYES=true so alpha is halved at compile time.
+        // Only fragments where eye stencil == EYE_VALUE pass; depth test still culls fragments
+        // that are further from camera than the eye, so hair behind the eye never shows through.
+        // depthWriteEnabled=false keeps the eye's depth authoritative for everything drawn after.
+        this.hairOverEyesPipeline = this.device.createRenderPipeline({
+            label: "hair over eyes pipeline",
+            layout: mainPipelineLayout,
+            vertex: { module: hairShaderModule, buffers: fullVertexBuffers },
+            fragment: {
+                module: hairShaderModule,
+                constants: { IS_OVER_EYES: 1 },
+                targets: sceneTargets,
+            },
+            primitive: { cullMode: "none" },
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: false,
+                depthCompare: "less-equal",
+                stencilFront: { compare: "equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+                stencilBack: { compare: "equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+                stencilReadMask: 0xff,
+                stencilWriteMask: 0,
+            },
+            multisample: { count: Engine.MULTISAMPLE_COUNT },
+        });
         this.clothSmoothPipeline = this.createRenderPipeline({
             label: "cloth smooth NPR pipeline",
             layout: mainPipelineLayout,
@@ -601,17 +651,30 @@ export class Engine {
                 depthCompare: "less-equal",
             },
         });
+        // Eye: stamps stencil = EYE_VALUE on every fragment it writes. Later hair passes read
+        // this stamp to split into "draw normally (not over eye)" vs "draw alpha-blended".
+        // cullMode="front" + small negative depthBias is the MMD post-alpha-eye trick: only the
+        // back half of the eye sphere renders, it passes depth against the face (via bias) when
+        // viewed from the front, and it gets culled when viewed from behind — so eye fragments
+        // can't leak through the back of the head without needing a per-model skull occluder.
         this.eyePipeline = this.createRenderPipeline({
             label: "eye pipeline",
             layout: mainPipelineLayout,
             shaderModule: eyeShaderModule,
             vertexBuffers: fullVertexBuffers,
             fragmentTargets: sceneTargets,
-            cullMode: "none",
+            cullMode: "front",
             depthStencil: {
                 format: "depth24plus-stencil8",
                 depthWriteEnabled: true,
                 depthCompare: "less-equal",
+                depthBias: -0.00005,
+                depthBiasSlopeScale: 0.0,
+                depthBiasClamp: 0.0,
+                stencilFront: { compare: "always", failOp: "keep", depthFailOp: "keep", passOp: "replace" },
+                stencilBack: { compare: "always", failOp: "keep", depthFailOp: "keep", passOp: "replace" },
+                stencilReadMask: 0xff,
+                stencilWriteMask: 0xff,
             },
         });
         this.stockingsPipeline = this.createRenderPipeline({
@@ -640,21 +703,7 @@ export class Engine {
         });
         const shadowShader = this.device.createShaderModule({
             label: "shadow depth",
-            code: /* wgsl */ `
-        struct LightVP { viewProj: mat4x4f, };
-        @group(0) @binding(0) var<uniform> lp: LightVP;
-        @group(0) @binding(1) var<storage, read> skinMats: array<mat4x4f>;
-        @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f,
-          @location(3) joints0: vec4<u32>, @location(4) weights0: vec4<f32>) -> @builtin(position) vec4f {
-          let pos4 = vec4f(position, 1.0);
-          let ws = weights0.x + weights0.y + weights0.z + weights0.w;
-          let inv = select(1.0, 1.0 / ws, ws > 0.0001);
-          let nw = select(vec4f(1.0,0.0,0.0,0.0), weights0 * inv, ws > 0.0001);
-          var sp = vec4f(0.0);
-          for (var i = 0u; i < 4u; i++) { sp += (skinMats[joints0[i]] * pos4) * nw[i]; }
-          return lp.viewProj * vec4f(sp.xyz, 1.0);
-        }
-      `,
+            code: SHADOW_DEPTH_SHADER_WGSL,
         });
         this.shadowDepthPipeline = this.device.createRenderPipeline({
             label: "shadow depth pipeline",
@@ -711,99 +760,7 @@ export class Engine {
         });
         const groundShadowShader = this.device.createShaderModule({
             label: "ground shadow",
-            code: /* wgsl */ `
-        struct CameraUniforms { view: mat4x4f, projection: mat4x4f, viewPos: vec3f, _p: f32, };
-        struct Light { direction: vec4f, color: vec4f, };
-        struct LightUniforms { ambientColor: vec4f, lights: array<Light, 4>, };
-        struct GroundShadowMat {
-          diffuseColor: vec3f, fadeStart: f32,
-          fadeEnd: f32, shadowStrength: f32, pcfTexel: f32, gridSpacing: f32,
-          gridLineWidth: f32, gridLineOpacity: f32, noiseStrength: f32, _pad: f32,
-          gridLineColor: vec3f, _pad2: f32,
-        };
-        struct LightVP { viewProj: mat4x4f, };
-        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-        @group(0) @binding(1) var<uniform> light: LightUniforms;
-        @group(0) @binding(2) var shadowMap: texture_depth_2d;
-        @group(0) @binding(3) var shadowSampler: sampler_comparison;
-        @group(0) @binding(4) var<uniform> material: GroundShadowMat;
-        @group(0) @binding(5) var<uniform> lightVP: LightVP;
-
-        // Hash-based noise for frosted/matte surface
-        fn hash2(p: vec2f) -> f32 {
-          var p3 = fract(vec3f(p.x, p.y, p.x) * 0.1031);
-          p3 += dot(p3, vec3f(p3.y + 33.33, p3.z + 33.33, p3.x + 33.33));
-          return fract((p3.x + p3.y) * p3.z);
-        }
-        fn valueNoise(p: vec2f) -> f32 {
-          let i = floor(p);
-          let f = fract(p);
-          let u = f * f * (3.0 - 2.0 * f);
-          return mix(mix(hash2(i), hash2(i + vec2f(1.0, 0.0)), u.x),
-                     mix(hash2(i + vec2f(0.0, 1.0)), hash2(i + vec2f(1.0, 1.0)), u.x), u.y);
-        }
-        fn fbmNoise(p: vec2f) -> f32 {
-          var v = 0.0;
-          var a = 0.5;
-          var pp = p;
-          for (var i = 0; i < 4; i++) {
-            v += a * valueNoise(pp);
-            pp *= 2.0;
-            a *= 0.5;
-          }
-          return v;
-        }
-
-        struct VO { @builtin(position) position: vec4f, @location(0) worldPos: vec3f, @location(1) normal: vec3f, };
-        @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f) -> VO {
-          var o: VO; o.worldPos = position; o.normal = normal;
-          o.position = camera.projection * camera.view * vec4f(position, 1.0); return o;
-        }
-        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));
-
-          // Shadow sampling
-          let lclip = lightVP.viewProj * vec4f(i.worldPos, 1.0);
-          let ndc = lclip.xyz / max(lclip.w, 1e-6);
-          let suv = vec2f(ndc.x * 0.5 + 0.5, 0.5 - ndc.y * 0.5);
-          let suv_c = clamp(suv, vec2f(0.02), vec2f(0.98));
-          let st = material.pcfTexel;
-          let compareZ = ndc.z - 0.0035;
-          var vis = 0.0;
-          for (var y = -2; y <= 2; y++) {
-            for (var x = -2; x <= 2; x++) {
-              vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(f32(x), f32(y)) * st, compareZ);
-            }
-          }
-          vis *= 0.04;
-
-          // Frosted/matte micro-texture (磨砂)
-          let noiseVal = fbmNoise(i.worldPos.xz * 3.0);
-          let noiseTint = 1.0 + (noiseVal - 0.5) * material.noiseStrength;
-
-          // Grid lines — anti-aliased via screen-space derivatives
-          let gp = i.worldPos.xz / material.gridSpacing;
-          let gridFrac = abs(fract(gp - 0.5) - 0.5);
-          let gridDeriv = fwidth(gp);
-          let halfLine = material.gridLineWidth * 0.5;
-          let gridLine = 1.0 - min(
-            smoothstep(halfLine - gridDeriv.x, halfLine + gridDeriv.x, gridFrac.x),
-            smoothstep(halfLine - gridDeriv.y, halfLine + gridDeriv.y, gridFrac.y)
-          );
-          let sun = light.ambientColor.xyz + light.lights[0].color.xyz * light.lights[0].color.w * max(dot(n, -light.lights[0].direction.xyz), 0.0);
-          let dark = (1.0 - vis) * material.shadowStrength;
-          var baseColor = material.diffuseColor * sun * (1.0 - dark * 0.65);
-          baseColor *= noiseTint;
-          let finalColor = mix(baseColor, material.gridLineColor, gridLine * material.gridLineOpacity * edgeFade);
-          var out: FSOut;
-          out.color = vec4f(finalColor * edgeFade, edgeFade);
-          out.mask = 0.0;
-          return out;
-        }
-      `,
+            code: GROUND_SHADOW_SHADER_WGSL,
         });
         this.groundShadowPipeline = this.createRenderPipeline({
             label: "ground shadow pipeline",
@@ -843,90 +800,7 @@ export class Engine {
         });
         const outlineShaderModule = this.device.createShaderModule({
             label: "outline shaders",
-            code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct MaterialUniforms {
-          edgeColor: vec4f,
-          edgeSize: f32,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-        };
-
-        // group 0: per-frame
-        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-        // group 1: per-instance
-        @group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;
-        // group 2: per-material
-        @group(2) @binding(0) var<uniform> material: MaterialUniforms;
-
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-        };
-
-        @vertex fn vs(
-          @location(0) position: vec3f,
-          @location(1) normal: vec3f,
-          @location(3) joints0: vec4<u32>,
-          @location(4) weights0: vec4<f32>
-        ) -> VertexOutput {
-          var output: VertexOutput;
-          let pos4 = vec4f(position, 1.0);
-          
-          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
-          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
-          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
-          
-          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
-          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
-          for (var i = 0u; i < 4u; i++) {
-            let j = joints0[i];
-            let w = normalizedWeights[i];
-            let m = skinMats[j];
-            skinnedPos += (m * pos4) * w;
-            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
-            skinnedNrm += (r3 * normal) * w;
-          }
-          let worldPos = skinnedPos.xyz;
-          let worldNormal = normalize(skinnedNrm);
-
-          // Screen-space outline extrusion — MMD-style pixel-stable edge line.
-          // 1. Project position and normal-as-direction to clip space.
-          // 2. Normalize the 2D clip-space normal, aspect-compensated so "one pixel horizontally"
-          //    matches "one pixel vertically" (otherwise wide viewports squash the outline in X).
-          // 3. Offset clip-space xy by (normal * edgeSize * edgeScale), then multiply by w
-          //    so the perspective divide cancels out → offset stays constant in NDC regardless
-          //    of depth, matching how MMD / babylon-mmd style outlines look identical when zooming.
-          // 4. edgeScale is in NDC-y units per PMX edgeSize. ≈ 0.006 gives ~3px at 1080p; it's
-          //    tied to viewport HEIGHT so resizing the window keeps pixel thickness stable.
-          let viewProj = camera.projection * camera.view;
-          let clipPos = viewProj * vec4f(worldPos, 1.0);
-          let clipNormal = (viewProj * vec4f(worldNormal, 0.0)).xy;
-          // projection is column-major: proj[0][0] = 1/(aspect·tan(fov/2)), proj[1][1] = 1/tan(fov/2).
-          // Ratio proj[1][1]/proj[0][0] recovers the viewport aspect (width/height).
-          let aspect = camera.projection[1][1] / camera.projection[0][0];
-          let pixelDir = normalize(vec2f(clipNormal.x * aspect, clipNormal.y));
-          let ndcDir = vec2f(pixelDir.x / aspect, pixelDir.y);
-          let edgeScale = 0.0016;
-          let offset = ndcDir * material.edgeSize * edgeScale * clipPos.w;
-          output.position = vec4f(clipPos.xy + offset, clipPos.z, clipPos.w);
-          return output;
-        }
-
-        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;
-        }
-      `,
+            code: OUTLINE_SHADER_WGSL,
         });
         this.outlinePipeline = this.createRenderPipeline({
             label: "outline pipeline",
@@ -940,6 +814,13 @@ export class Engine {
                 // Don’t write outline into depth buffer — stops z-fighting / black cracks vs body (MMD-style; body depth stays authoritative)
                 depthWriteEnabled: false,
                 depthCompare: "less-equal",
+                // Skip fragments where the eye stamped stencil=EYE_VALUE. Those pixels are owned by
+                // the see-through-hair blend (hair-over-eyes), so letting the outline's near-black
+                // edge color overwrite them would re-introduce the dark almond we just killed.
+                stencilFront: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+                stencilBack: { compare: "not-equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
+                stencilReadMask: 0xff,
+                stencilWriteMask: 0,
             },
         });
         // ─── Bloom (EEVEE 3.6 pyramid): blit(Karis prefilter) → 13-tap downsamples → 9-tap tent upsamples ───
@@ -987,127 +868,17 @@ export class Engine {
                 { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
             ],
         });
-        const bloomFullscreenVs = /* wgsl */ `
-      @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);
-      }
-    `;
-        // Blit: full-res HDR → half-res. Karis 4-tap firefly average + EEVEE quadratic knee threshold + clamp.
         const bloomBlitShader = this.device.createShaderModule({
             label: "bloom blit (Karis prefilter)",
-            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));
-        }
-        fn fetch(c: vec2<i32>, clampV: f32) -> vec3f {
-          let d = vec2<i32>(textureDimensions(hdrTex));
-          let cc = clamp(c, vec2<i32>(0), d - vec2<i32>(1));
-          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(masked, min(masked, vec3f(clampV)), clampV > 0.0);
-        }
-
-        @fragment fn fs(@builtin(position) p: vec4f) -> @location(0) vec4f {
-          let dst = vec2<i32>(p.xy - vec2f(0.5));
-          let base = dst * 2;
-          let clampV = prefilter.z;
-          let a = fetch(base + vec2<i32>(0, 0), clampV);
-          let b = fetch(base + vec2<i32>(1, 0), clampV);
-          let c = fetch(base + vec2<i32>(0, 1), clampV);
-          let d = fetch(base + vec2<i32>(1, 1), clampV);
-          // Karis partial average: weight each tap by 1/(1+luma) — suppresses fireflies.
-          let wa = 1.0 / (1.0 + luminance(a));
-          let wb = 1.0 / (1.0 + luminance(b));
-          let wc = 1.0 / (1.0 + luminance(c));
-          let wd = 1.0 / (1.0 + luminance(d));
-          let avg = (a * wa + b * wb + c * wc + d * wd) / max(wa + wb + wc + wd, 1e-6);
-          // EEVEE quadratic threshold (brightness = max-channel, then soft-knee curve).
-          let bright = max(avg.r, max(avg.g, avg.b));
-          let soft = clamp(bright - prefilter.x + prefilter.y, 0.0, 2.0 * prefilter.y);
-          let q = (soft * soft) / (4.0 * max(prefilter.y, 1e-4) + 1e-6);
-          let contrib = max(q, bright - prefilter.x) / max(bright, 1e-4);
-          return vec4f(max(avg * contrib, vec3f(0.0)), 1.0);
-        }
-      `,
+            code: BLOOM_BLIT_SHADER_WGSL,
         });
-        // Downsample: Jimenez/COD 13-tap dual-box — 5 weighted 2×2 averages, rejects nyquist ringing.
         const bloomDownsampleShader = this.device.createShaderModule({
             label: "bloom downsample 13-tap",
-            code: `${bloomFullscreenVs}
-        @group(0) @binding(0) var srcTex: texture_2d<f32>;
-        @group(0) @binding(1) var srcSamp: sampler;
-
-        fn samp(uv: vec2f, off: vec2f) -> vec3f {
-          return textureSampleLevel(srcTex, srcSamp, uv + off, 0.0).rgb;
-        }
-
-        @fragment fn fs(@builtin(position) p: vec4f) -> @location(0) vec4f {
-          let srcDims = vec2f(textureDimensions(srcTex));
-          let t = 1.0 / srcDims;
-          // fragCoord.xy reports pixel centers (e.g. 0.5,0.5 for first pixel) — divide by dst dims directly.
-          let dstDims = srcDims * 0.5;
-          let uv = p.xy / max(dstDims, vec2f(1.0));
-          let A = samp(uv, t * vec2f(-2.0, -2.0));
-          let B = samp(uv, t * vec2f( 0.0, -2.0));
-          let C = samp(uv, t * vec2f( 2.0, -2.0));
-          let D = samp(uv, t * vec2f(-1.0, -1.0));
-          let E = samp(uv, t * vec2f( 1.0, -1.0));
-          let F = samp(uv, t * vec2f(-2.0,  0.0));
-          let G = samp(uv, t * vec2f( 0.0,  0.0));
-          let H = samp(uv, t * vec2f( 2.0,  0.0));
-          let I = samp(uv, t * vec2f(-1.0,  1.0));
-          let J = samp(uv, t * vec2f( 1.0,  1.0));
-          let K = samp(uv, t * vec2f(-2.0,  2.0));
-          let L = samp(uv, t * vec2f( 0.0,  2.0));
-          let M = samp(uv, t * vec2f( 2.0,  2.0));
-          var o = (D + E + I + J) * (0.5 / 4.0);
-          o = o + (A + B + G + F) * (0.125 / 4.0);
-          o = o + (B + C + H + G) * (0.125 / 4.0);
-          o = o + (F + G + L + K) * (0.125 / 4.0);
-          o = o + (G + H + M + L) * (0.125 / 4.0);
-          return vec4f(o, 1.0);
-        }
-      `,
+            code: BLOOM_DOWNSAMPLE_SHADER_WGSL,
         });
-        // Upsample: 9-tap tent, progressively added to matching downsample mip. Blender radius = sample scale.
         const bloomUpsampleShader = this.device.createShaderModule({
             label: "bloom upsample 9-tap tent",
-            code: `${bloomFullscreenVs}
-        @group(0) @binding(0) var srcTex: texture_2d<f32>;   // coarser accumulator
-        @group(0) @binding(1) var baseTex: texture_2d<f32>;  // matching downsample mip
-        @group(0) @binding(2) var srcSamp: sampler;
-        @group(0) @binding(3) var<uniform> upU: vec4<f32>;   // sampleScale, _, _, _
-
-        @fragment fn fs(@builtin(position) p: vec4f) -> @location(0) vec4f {
-          let srcDims = vec2f(textureDimensions(srcTex));
-          let baseDims = vec2f(textureDimensions(baseTex));
-          let uv = p.xy / max(baseDims, vec2f(1.0));
-          let t = upU.x / srcDims;
-          var o = textureSampleLevel(srcTex, srcSamp, uv + t * vec2f(-1.0, -1.0), 0.0).rgb * 1.0;
-          o = o + textureSampleLevel(srcTex, srcSamp, uv + t * vec2f( 0.0, -1.0), 0.0).rgb * 2.0;
-          o = o + textureSampleLevel(srcTex, srcSamp, uv + t * vec2f( 1.0, -1.0), 0.0).rgb * 1.0;
-          o = o + textureSampleLevel(srcTex, srcSamp, uv + t * vec2f(-1.0,  0.0), 0.0).rgb * 2.0;
-          o = o + textureSampleLevel(srcTex, srcSamp, uv + t * vec2f( 0.0,  0.0), 0.0).rgb * 4.0;
-          o = o + textureSampleLevel(srcTex, srcSamp, uv + t * vec2f( 1.0,  0.0), 0.0).rgb * 2.0;
-          o = o + textureSampleLevel(srcTex, srcSamp, uv + t * vec2f(-1.0,  1.0), 0.0).rgb * 1.0;
-          o = o + textureSampleLevel(srcTex, srcSamp, uv + t * vec2f( 0.0,  1.0), 0.0).rgb * 2.0;
-          o = o + textureSampleLevel(srcTex, srcSamp, uv + t * vec2f( 1.0,  1.0), 0.0).rgb * 1.0;
-          o = o * (1.0 / 16.0);
-          let base = textureSampleLevel(baseTex, srcSamp, uv, 0.0).rgb;
-          return vec4f(o + base, 1.0);
-        }
-      `,
+            code: BLOOM_UPSAMPLE_SHADER_WGSL,
         });
         const bloomBlitLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bloomBlitBindGroupLayout] });
         const bloomDownLayout = this.device.createPipelineLayout({
@@ -1154,67 +925,25 @@ export class Engine {
         });
         const compositeShader = this.device.createShaderModule({
             label: "composite shader",
-            code: /* wgsl */ `
-        @group(0) @binding(0) var hdrTex: texture_2d<f32>;
-        @group(0) @binding(1) var bloomTex: texture_2d<f32>;   // bloomUpTexture mip 0 (full pyramid top)
-        @group(0) @binding(2) var bloomSamp: sampler;
-        @group(0) @binding(3) var<uniform> viewU: array<vec4<f32>, 2>;
-        // 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.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);
-          let j = min(i + 1u, 13u);
-          return mix(lut[i], lut[j], t - f32(i));
-        }
-
-        @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) fragCoord: vec4f) -> @location(0) vec4f {
-          let hdr = textureLoad(hdrTex, vec2<i32>(fragCoord.xy), 0);
-          let a = max(hdr.a, 1e-6);
-          let straight = hdr.rgb / a;
-          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.
-          // 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;
-          let combined = straight + bloom;
-          let exposed = combined * exp2(viewU[0].x);
-          let tm = vec3f(filmic(exposed.r), filmic(exposed.g), filmic(exposed.b));
-          let g = max(viewU[0].y, 1e-4);
-          let disp = pow(max(tm, vec3f(0.0)), vec3f(1.0 / g));
-          return vec4f(disp * hdr.a, hdr.a);
-        }
-      `,
+            code: COMPOSITE_SHADER_WGSL,
+        });
+        const compositePipelineLayout = this.device.createPipelineLayout({
+            bindGroupLayouts: [this.compositeBindGroupLayout],
         });
-        this.compositePipeline = this.device.createRenderPipeline({
-            label: "composite pipeline",
-            layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.compositeBindGroupLayout] }),
+        const makeCompositePipeline = (applyGamma, label) => this.device.createRenderPipeline({
+            label,
+            layout: compositePipelineLayout,
             vertex: { module: compositeShader, entryPoint: "vs" },
             fragment: {
                 module: compositeShader,
                 entryPoint: "fs",
+                constants: { APPLY_GAMMA: applyGamma ? 1 : 0 },
                 targets: [{ format: this.presentationFormat }],
             },
             primitive: { topology: "triangle-list" },
         });
+        this.compositePipelineIdentity = makeCompositePipeline(false, "composite pipeline (gamma=1)");
+        this.compositePipelineGamma = makeCompositePipeline(true, "composite pipeline (gamma!=1)");
         this.bloomPassDescriptor = {
             label: "bloom pass",
             colorAttachments: [
@@ -1226,47 +955,9 @@ export class Engine {
                 },
             ],
         };
-        // GPU picking: encode (modelIndex, materialIndex) as color
         const pickShaderModule = this.device.createShaderModule({
             label: "pick shader",
-            code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-        struct PickId {
-          modelId: f32,
-          materialId: f32,
-          _p1: f32,
-          _p2: f32,
-        };
-
-        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-        @group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;
-        @group(2) @binding(0) var<uniform> pickId: PickId;
-
-        @vertex fn vs(
-          @location(0) position: vec3f,
-          @location(1) normal: vec3f,
-          @location(2) uv: vec2f,
-          @location(3) joints0: vec4<u32>,
-          @location(4) weights0: vec4<f32>
-        ) -> @builtin(position) vec4f {
-          let pos4 = vec4f(position, 1.0);
-          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
-          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
-          let nw = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
-          var sp = vec4f(0.0);
-          for (var i = 0u; i < 4u; i++) { sp += (skinMats[joints0[i]] * pos4) * nw[i]; }
-          return camera.projection * camera.view * vec4f(sp.xyz, 1.0);
-        }
-
-        @fragment fn fs() -> @location(0) vec4f {
-          return vec4f(pickId.modelId / 255.0, pickId.materialId / 255.0, 0.0, 1.0);
-        }
-      `,
+            code: PICK_SHADER_WGSL,
         });
         this.pickPerFrameBindGroupLayout = this.device.createBindGroupLayout({
             label: "pick per-frame layout",
@@ -1400,19 +1091,23 @@ export class Engine {
                 usage: GPUTextureUsage.RENDER_ATTACHMENT,
             });
             const depthTextureView = this.depthTexture.createView();
+            // storeOp="discard" on MSAA views keeps per-sample data in Apple TBDR tile memory —
+            // only the resolveTarget (hdrResolveTexture / maskResolveView) gets written to RAM.
+            // With storeOp="store" Safari's Metal backend spills the full MS buffer every frame
+            // (rgba16f × 4 samples on a 4K canvas ≈ 256 MB/frame of dead bandwidth).
             const colorAttachment = {
                 view: this.multisampleTexture.createView(),
                 resolveTarget: this.hdrResolveTexture.createView(),
                 clearValue: { r: 0, g: 0, b: 0, a: 0 },
                 loadOp: "clear",
-                storeOp: "store",
+                storeOp: "discard",
             };
             const maskAttachment = {
                 view: this.multisampleMaskTexture.createView(),
                 resolveTarget: this.maskResolveView,
                 clearValue: { r: 0, g: 0, b: 0, a: 0 },
                 loadOp: "clear",
-                storeOp: "store",
+                storeOp: "discard",
             };
             this.renderPassDescriptor = {
                 label: "renderPass",
@@ -1421,7 +1116,8 @@ export class Engine {
                     view: depthTextureView,
                     depthClearValue: 1.0,
                     depthLoadOp: "clear",
-                    depthStoreOp: "store",
+                    // Main-pass depth is not sampled later (shadow uses its own map, composite is depthless).
+                    depthStoreOp: "discard",
                     stencilClearValue: 0,
                     stencilLoadOp: "clear",
                     stencilStoreOp: "discard",
@@ -2141,6 +1837,26 @@ export class Engine {
             }
             currentIndexOffset += indexCount;
         }
+        // Sort so the opaque bucket is emitted in the order the stencil-based
+        // see-through-hair effect requires: {non-hair, non-eye} → {eye} → {hair}.
+        // Eye writes stencil=EYE_VALUE; hair's pipeline stencil-tests "not equal" so
+        // it skips eye pixels; a follow-up hairOverEyes pass (see renderOneModel)
+        // re-fills those skipped pixels alpha-blended. Array.sort is stable in
+        // ES2019+, so within a bucket the PMX material order is preserved.
+        const typeOrder = {
+            opaque: 0,
+            "opaque-outline": 1,
+            transparent: 2,
+            "transparent-outline": 3,
+            ground: 4,
+        };
+        const presetRank = (p) => (p === "hair" ? 2 : p === "eye" ? 1 : 0);
+        inst.drawCalls.sort((a, b) => {
+            const ta = typeOrder[a.type] - typeOrder[b.type];
+            if (ta !== 0)
+                return ta;
+            return presetRank(a.preset) - presetRank(b.preset);
+        });
         for (const d of inst.drawCalls) {
             if (d.type === "opaque")
                 inst.shadowDrawCalls.push(d);
@@ -2213,20 +1929,7 @@ export class Engine {
             });
             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);
-          }
-        `,
+                code: MIPMAP_BLIT_SHADER_WGSL,
             });
             this.mipBlitPipeline = this.device.createRenderPipeline({
                 label: "mipmap blit pipeline",
@@ -2441,7 +2144,8 @@ export class Engine {
         const compositeAttachment = this.compositePassDescriptor.colorAttachments[0];
         compositeAttachment.view = this.context.getCurrentTexture().createView();
         const cpass = encoder.beginRenderPass(this.compositePassDescriptor);
-        cpass.setPipeline(this.compositePipeline);
+        const compositePipeline = this.viewTransform.gamma === 1.0 ? this.compositePipelineIdentity : this.compositePipelineGamma;
+        cpass.setPipeline(compositePipeline);
         cpass.setBindGroup(0, this.compositeBindGroup);
         cpass.draw(3);
         cpass.end();
@@ -2544,11 +2248,36 @@ export class Engine {
         pass.setVertexBuffer(1, inst.jointsBuffer);
         pass.setVertexBuffer(2, inst.weightsBuffer);
         pass.setIndexBuffer(inst.indexBuffer, "uint32");
+        // Single stencil-reference set covers eye (write), hair (read not-equal),
+        // and hairOverEyes (read equal). Non-stencil pipelines ignore the value.
+        pass.setStencilReference(Engine.STENCIL_EYE_VALUE);
         this.drawMaterials(pass, inst, "opaque");
         this.drawOutlines(pass, inst, "opaque-outline");
+        this.drawHairOverEyes(pass, inst);
         this.drawMaterials(pass, inst, "transparent");
         this.drawOutlines(pass, inst, "transparent-outline");
     }
+    /**
+     * Second hair pass for the see-through-hair effect. Re-draws every hair opaque
+     * draw using `hairOverEyesPipeline` — which stencil-matches `EYE_VALUE` and runs
+     * the hair shader with `IS_OVER_EYES=true` so alpha is halved. depthWriteEnabled
+     * is off, so the eye's depth stays authoritative for anything drawn after.
+     */
+    drawHairOverEyes(pass, inst) {
+        let bound = false;
+        for (const draw of inst.drawCalls) {
+            if (draw.type !== "opaque" || draw.preset !== "hair" || !this.shouldRenderDrawCall(inst, draw))
+                continue;
+            if (!bound) {
+                pass.setPipeline(this.hairOverEyesPipeline);
+                pass.setBindGroup(0, this.perFrameBindGroup);
+                pass.setBindGroup(1, inst.mainPerInstanceBindGroup);
+                bound = true;
+            }
+            pass.setBindGroup(2, draw.bindGroup);
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+        }
+    }
     updateCameraUniforms() {
         const viewMatrix = this.camera.getViewMatrix();
         const projectionMatrix = this.camera.getProjectionMatrix();
@@ -2592,6 +2321,9 @@ export class Engine {
 Engine.instance = null;
 Engine.MULTISAMPLE_COUNT = 4;
 Engine.HDR_FORMAT = "rgba16float";
+/** Stencil value stamped by eye draws so hair can stencil-test against it and
+ *  alpha-blend a second pass over eye silhouette pixels (see-through-hair effect). */
+Engine.STENCIL_EYE_VALUE = 1;
 /** 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. */