reze-engine 0.1.14 → 0.1.16

package/dist/engine.js

@@ -81,124 +81,128 @@ export class Engine {
         });
         const shaderModule = this.device.createShaderModule({
             label: "model shaders",
-            code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct Light {
-          direction: vec3f,
-          _padding1: f32,
-          color: vec3f,
-          intensity: f32,
-        };
-
-        struct LightUniforms {
-          ambient: f32,
-          lightCount: f32,
-          _padding1: f32,
-          _padding2: f32,
-          lights: array<Light, 4>,
-        };
-
-        struct MaterialUniforms {
-          alpha: f32,
-          alphaMultiplier: f32,
-          rimIntensity: f32,
-          rimPower: f32,
-          rimColor: vec3f,
-          _padding1: f32,
-        };
-
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) normal: vec3f,
-          @location(1) uv: vec2f,
-          @location(2) worldPos: vec3f,
-        };
-
-        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-        @group(0) @binding(1) var<uniform> light: LightUniforms;
-        @group(0) @binding(2) var diffuseTexture: texture_2d<f32>;
-        @group(0) @binding(3) var diffuseSampler: sampler;
-        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
-        @group(0) @binding(5) var toonTexture: texture_2d<f32>;
-        @group(0) @binding(6) var toonSampler: sampler;
-        @group(0) @binding(7) var<uniform> material: MaterialUniforms;
-
-        @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>
-        ) -> VertexOutput {
-          var output: VertexOutput;
-          let pos4 = vec4f(position, 1.0);
-          
-          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
-          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
-          var normalizedWeights: vec4f;
-          if (weightSum > 0.0001) {
-            normalizedWeights = weights0 / weightSum;
-          } else {
-            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
-          }
-          
-          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;
-          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
-          output.normal = normalize(skinnedNrm);
-          output.uv = uv;
-          output.worldPos = worldPos;
-          return output;
-        }
-
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let n = normalize(input.normal);
-          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
-
-          var lightAccum = vec3f(light.ambient);
-          let numLights = u32(light.lightCount);
-          for (var i = 0u; i < numLights; i++) {
-            let l = -light.lights[i].direction;
-            let nDotL = max(dot(n, l), 0.0);
-            let toonUV = vec2f(nDotL, 0.5);
-            let toonFactor = textureSample(toonTexture, toonSampler, toonUV).rgb;
-            let radiance = light.lights[i].color * light.lights[i].intensity;
-            lightAccum += toonFactor * radiance * nDotL;
-          }
-          
-          // Rim light calculation
-          let viewDir = normalize(camera.viewPos - input.worldPos);
-          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
-          rimFactor = pow(rimFactor, material.rimPower);
-          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
-          
-          let color = albedo * lightAccum + rimLight;
-          let finalAlpha = material.alpha * material.alphaMultiplier;
-          if (finalAlpha < 0.001) {
-            discard;
-          }
-          
-          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), finalAlpha);
-        }
+            code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct Light {
+          direction: vec3f,
+          _padding1: f32,
+          color: vec3f,
+          intensity: f32,
+        };
+
+        struct LightUniforms {
+          ambient: f32,
+          lightCount: f32,
+          _padding1: f32,
+          _padding2: f32,
+          lights: array<Light, 4>,
+        };
+
+        struct MaterialUniforms {
+          alpha: f32,
+          alphaMultiplier: f32,
+          rimIntensity: f32,
+          rimPower: f32,
+          rimColor: vec3f,
+          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise
+        };
+
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) normal: vec3f,
+          @location(1) uv: vec2f,
+          @location(2) worldPos: vec3f,
+        };
+
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(1) var<uniform> light: LightUniforms;
+        @group(0) @binding(2) var diffuseTexture: texture_2d<f32>;
+        @group(0) @binding(3) var diffuseSampler: sampler;
+        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
+        @group(0) @binding(5) var toonTexture: texture_2d<f32>;
+        @group(0) @binding(6) var toonSampler: sampler;
+        @group(0) @binding(7) var<uniform> material: MaterialUniforms;
+
+        @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>
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          let pos4 = vec4f(position, 1.0);
+          
+          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          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;
+          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          output.normal = normalize(skinnedNrm);
+          output.uv = uv;
+          output.worldPos = worldPos;
+          return output;
+        }
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let n = normalize(input.normal);
+          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
+
+          var lightAccum = vec3f(light.ambient);
+          let numLights = u32(light.lightCount);
+          for (var i = 0u; i < numLights; i++) {
+            let l = -light.lights[i].direction;
+            let nDotL = max(dot(n, l), 0.0);
+            let toonUV = vec2f(nDotL, 0.5);
+            let toonFactor = textureSample(toonTexture, toonSampler, toonUV).rgb;
+            let radiance = light.lights[i].color * light.lights[i].intensity;
+            lightAccum += toonFactor * radiance * nDotL;
+          }
+          
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = pow(rimFactor, material.rimPower);
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          
+          let color = albedo * lightAccum + rimLight;
+          
+          var finalAlpha = material.alpha * material.alphaMultiplier;
+          if (material.isOverEyes > 0.5) {
+            finalAlpha *= 0.5; // Hair over eyes gets 50% alpha
+          }
+          
+          if (finalAlpha < 0.001) {
+            discard;
+          }
+          
+          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), finalAlpha);
+        }
       `,
         });
         // Create explicit bind group layout for all pipelines using the main shader
-        // This ensures compatibility across all pipelines (main, eye, hair multiply, hair opaque)
         this.hairBindGroupLayout = this.device.createBindGroupLayout({
             label: "shared material bind group layout",
             entries: [
@@ -286,71 +290,77 @@ 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) @binding(0) var<uniform> camera: CameraUniforms;
-        @group(0) @binding(1) var<uniform> material: MaterialUniforms;
-        @group(0) @binding(2) var<storage, read> skinMats: array<mat4x4f>;
-
-        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);
-          
-          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
-          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
-          var normalizedWeights: vec4f;
-          if (weightSum > 0.0001) {
-            normalizedWeights = weights0 / weightSum;
-          } else {
-            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
-          }
-          
-          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);
-          
-          // MMD invert hull: expand vertices outward along normals
-          let scaleFactor = 0.01;
-          let expandedPos = worldPos + worldNormal * material.edgeSize * scaleFactor;
-          output.position = camera.projection * camera.view * vec4f(expandedPos, 1.0);
-          return output;
-        }
-
-        @fragment fn fs() -> @location(0) vec4f {
-          return material.edgeColor;
-        }
+            code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct MaterialUniforms {
+          edgeColor: vec4f,
+          edgeSize: f32,
+          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise (for hair outlines)
+          _padding1: f32,
+          _padding2: f32,
+        };
+
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(1) var<uniform> material: MaterialUniforms;
+        @group(0) @binding(2) var<storage, read> skinMats: array<mat4x4f>;
+
+        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);
+          
+          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          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);
+          
+          // MMD invert hull: expand vertices outward along normals
+          let scaleFactor = 0.01;
+          let expandedPos = worldPos + worldNormal * material.edgeSize * scaleFactor;
+          output.position = camera.projection * camera.view * vec4f(expandedPos, 1.0);
+          return output;
+        }
+
+        @fragment fn fs() -> @location(0) vec4f {
+          var color = material.edgeColor;
+          
+          if (material.isOverEyes > 0.5) {
+            color.a *= 0.5; // Hair outlines over eyes get 50% alpha
+          }
+          
+          return color;
+        }
       `,
         });
         this.outlinePipeline = this.device.createRenderPipeline({
@@ -416,9 +426,9 @@ export class Engine {
                 count: this.sampleCount,
             },
         });
-        // Hair outline pipeline: draws hair outlines over non-eyes (stencil != 1) - Drawn after hair geometry, so depth testing ensures outlines only appear where hair exists
-        this.hairOutlinePipeline = this.device.createRenderPipeline({
-            label: "hair outline pipeline",
+        // Unified hair outline pipeline: single pass without stencil testing, uses depth test "less-equal" to draw everywhere hair exists
+        this.hairUnifiedOutlinePipeline = this.device.createRenderPipeline({
+            label: "unified hair outline pipeline",
             layout: outlinePipelineLayout,
             vertex: {
                 module: outlineShaderModule,
@@ -474,44 +484,28 @@ export class Engine {
             depthStencil: {
                 format: "depth24plus-stencil8",
                 depthWriteEnabled: false, // Don't write depth - let hair geometry control depth
-                depthCompare: "less-equal", // Only draw where hair depth exists
-                stencilFront: {
-                    compare: "not-equal", // Only render where stencil != 1 (not over eyes)
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
-                stencilBack: {
-                    compare: "not-equal",
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
+                depthCompare: "less-equal", // Only draw where hair depth exists (no stencil test needed)
+                depthBias: -0.0001, // Small negative bias to bring outline slightly closer for depth test
+                depthBiasSlopeScale: 0.0,
+                depthBiasClamp: 0.0,
             },
             multisample: {
                 count: this.sampleCount,
             },
         });
-        // Hair outline pipeline for over eyes: draws where stencil == 1, but only where hair depth exists - Uses depth compare "equal" with a small bias to only appear where hair geometry exists
-        this.hairOutlineOverEyesPipeline = this.device.createRenderPipeline({
-            label: "hair outline over eyes pipeline",
-            layout: outlinePipelineLayout,
+        // Eye overlay pipeline (renders after opaque, writes stencil)
+        this.eyePipeline = this.device.createRenderPipeline({
+            label: "eye overlay pipeline",
+            layout: sharedPipelineLayout,
             vertex: {
-                module: outlineShaderModule,
+                module: shaderModule,
                 buffers: [
                     {
                         arrayStride: 8 * 4,
                         attributes: [
-                            {
-                                shaderLocation: 0,
-                                offset: 0,
-                                format: "float32x3",
-                            },
-                            {
-                                shaderLocation: 1,
-                                offset: 3 * 4,
-                                format: "float32x3",
-                            },
+                            { shaderLocation: 0, offset: 0, format: "float32x3" },
+                            { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
+                            { shaderLocation: 2, offset: 6 * 4, format: "float32x2" },
                         ],
                     },
                     {
@@ -525,7 +519,7 @@ export class Engine {
                 ],
             },
             fragment: {
-                module: outlineShaderModule,
+                module: shaderModule,
                 targets: [
                     {
                         format: this.presentationFormat,
@@ -544,47 +538,86 @@ export class Engine {
                     },
                 ],
             },
-            primitive: {
-                cullMode: "back",
-            },
+            primitive: { cullMode: "none" },
             depthStencil: {
                 format: "depth24plus-stencil8",
                 depthWriteEnabled: false, // Don't write depth
-                depthCompare: "less-equal", // Draw where outline depth <= existing depth (hair depth)
-                depthBias: -0.0001, // Small negative bias to bring outline slightly closer for depth test
-                depthBiasSlopeScale: 0.0,
-                depthBiasClamp: 0.0,
+                depthCompare: "less", // Respect existing depth
                 stencilFront: {
-                    compare: "equal", // Only render where stencil == 1 (over eyes)
+                    compare: "always",
                     failOp: "keep",
                     depthFailOp: "keep",
-                    passOp: "keep",
+                    passOp: "replace", // Write stencil value 1
                 },
                 stencilBack: {
-                    compare: "equal",
+                    compare: "always",
                     failOp: "keep",
                     depthFailOp: "keep",
-                    passOp: "keep",
+                    passOp: "replace",
                 },
             },
-            multisample: {
-                count: this.sampleCount,
-            },
+            multisample: { count: this.sampleCount },
         });
-        // Unified hair pipeline - can be used for both over-eyes and over-non-eyes
-        // The difference is controlled by stencil state and alpha multiplier in material uniform
-        this.hairMultiplyPipeline = this.device.createRenderPipeline({
-            label: "hair pipeline (over eyes)",
+        // Depth-only shader for hair pre-pass (reduces overdraw by early depth rejection)
+        const depthOnlyShaderModule = this.device.createShaderModule({
+            label: "depth only shader",
+            code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
+
+        @vertex fn vs(
+          @location(0) position: vec3f,
+          @location(1) normal: vec3f,
+          @location(3) joints0: vec4<u32>,
+          @location(4) weights0: vec4<f32>
+        ) -> @builtin(position) vec4f {
+          let pos4 = vec4f(position, 1.0);
+          
+          // Normalize weights
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          var skinnedPos = vec4f(0.0, 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 worldPos = skinnedPos.xyz;
+          let clipPos = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          return clipPos;
+        }
+
+        @fragment fn fs() -> @location(0) vec4f {
+          return vec4f(0.0, 0.0, 0.0, 0.0); // Transparent - color writes disabled via writeMask
+        }
+      `,
+        });
+        // Hair depth pre-pass pipeline: depth-only with color writes disabled to eliminate overdraw
+        this.hairDepthPipeline = this.device.createRenderPipeline({
+            label: "hair depth pre-pass",
             layout: sharedPipelineLayout,
             vertex: {
-                module: shaderModule,
+                module: depthOnlyShaderModule,
                 buffers: [
                     {
                         arrayStride: 8 * 4,
                         attributes: [
                             { shaderLocation: 0, offset: 0, format: "float32x3" },
                             { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
-                            { shaderLocation: 2, offset: 6 * 4, format: "float32x2" },
                         ],
                     },
                     {
@@ -598,48 +631,26 @@ export class Engine {
                 ],
             },
             fragment: {
-                module: shaderModule,
+                module: depthOnlyShaderModule,
+                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",
-                            },
-                        },
+                        writeMask: 0, // Disable all color writes - we only care about depth
                     },
                 ],
             },
             primitive: { cullMode: "none" },
             depthStencil: {
                 format: "depth24plus-stencil8",
-                depthWriteEnabled: true, // Write depth so outlines can test against it
+                depthWriteEnabled: true,
                 depthCompare: "less",
-                stencilFront: {
-                    compare: "equal", // Only render where stencil == 1
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
-                stencilBack: {
-                    compare: "equal",
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
             },
             multisample: { count: this.sampleCount },
         });
-        // Hair pipeline for opaque rendering (hair over non-eyes) - uses same shader, different stencil state
-        this.hairOpaquePipeline = this.device.createRenderPipeline({
-            label: "hair pipeline (over non-eyes)",
+        // Unified hair pipeline for over-eyes (stencil == 1): single pass with dynamic branching
+        this.hairUnifiedPipelineOverEyes = this.device.createRenderPipeline({
+            label: "unified hair pipeline (over eyes)",
             layout: sharedPipelineLayout,
             vertex: {
                 module: shaderModule,
@@ -685,16 +696,16 @@ export class Engine {
             primitive: { cullMode: "none" },
             depthStencil: {
                 format: "depth24plus-stencil8",
-                depthWriteEnabled: true,
-                depthCompare: "less",
+                depthWriteEnabled: false, // Don't write depth (already written in pre-pass)
+                depthCompare: "equal", // Only render where depth matches pre-pass
                 stencilFront: {
-                    compare: "not-equal", // Only render where stencil != 1
+                    compare: "equal", // Only render where stencil == 1 (over eyes)
                     failOp: "keep",
                     depthFailOp: "keep",
                     passOp: "keep",
                 },
                 stencilBack: {
-                    compare: "not-equal",
+                    compare: "equal",
                     failOp: "keep",
                     depthFailOp: "keep",
                     passOp: "keep",
@@ -702,9 +713,9 @@ export class Engine {
             },
             multisample: { count: this.sampleCount },
         });
-        // Eye overlay pipeline (renders after opaque, writes stencil)
-        this.eyePipeline = this.device.createRenderPipeline({
-            label: "eye overlay pipeline",
+        // Unified pipeline for hair over non-eyes (stencil != 1)
+        this.hairUnifiedPipelineOverNonEyes = this.device.createRenderPipeline({
+            label: "unified hair pipeline (over non-eyes)",
             layout: sharedPipelineLayout,
             vertex: {
                 module: shaderModule,
@@ -750,19 +761,19 @@ export class Engine {
             primitive: { cullMode: "none" },
             depthStencil: {
                 format: "depth24plus-stencil8",
-                depthWriteEnabled: false, // Don't write depth
-                depthCompare: "less", // Respect existing depth
+                depthWriteEnabled: false, // Don't write depth (already written in pre-pass)
+                depthCompare: "equal", // Only render where depth matches pre-pass
                 stencilFront: {
-                    compare: "always",
+                    compare: "not-equal", // Only render where stencil != 1 (over non-eyes)
                     failOp: "keep",
                     depthFailOp: "keep",
-                    passOp: "replace", // Write stencil value 1
+                    passOp: "keep",
                 },
                 stencilBack: {
-                    compare: "always",
+                    compare: "not-equal",
                     failOp: "keep",
                     depthFailOp: "keep",
-                    passOp: "replace",
+                    passOp: "keep",
                 },
             },
             multisample: { count: this.sampleCount },
@@ -772,31 +783,31 @@ export class Engine {
     createSkinMatrixComputePipeline() {
         const computeShader = this.device.createShaderModule({
             label: "skin matrix compute",
-            code: /* wgsl */ `
-        struct BoneCountUniform {
-          count: u32,
-          _padding1: u32,
-          _padding2: u32,
-          _padding3: u32,
-          _padding4: vec4<u32>,
-        };
-        
-        @group(0) @binding(0) var<uniform> boneCount: BoneCountUniform;
-        @group(0) @binding(1) var<storage, read> worldMatrices: array<mat4x4f>;
-        @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
-        @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
-        
-        @compute @workgroup_size(64)
-        fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
-          let boneIndex = globalId.x;
-          // Bounds check: we dispatch workgroups (64 threads each), so some threads may be out of range
-          if (boneIndex >= boneCount.count) {
-            return;
-          }
-          let worldMat = worldMatrices[boneIndex];
-          let invBindMat = inverseBindMatrices[boneIndex];
-          skinMatrices[boneIndex] = worldMat * invBindMat;
-        }
+            code: /* wgsl */ `
+        struct BoneCountUniform {
+          count: u32,
+          _padding1: u32,
+          _padding2: u32,
+          _padding3: u32,
+          _padding4: vec4<u32>,
+        };
+        
+        @group(0) @binding(0) var<uniform> boneCount: BoneCountUniform;
+        @group(0) @binding(1) var<storage, read> worldMatrices: array<mat4x4f>;
+        @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
+        @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
+        
+        @compute @workgroup_size(64)
+        fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
+          let boneIndex = globalId.x;
+          // Bounds check: we dispatch workgroups (64 threads each), so some threads may be out of range
+          if (boneIndex >= boneCount.count) {
+            return;
+          }
+          let worldMat = worldMatrices[boneIndex];
+          let invBindMat = inverseBindMatrices[boneIndex];
+          skinMatrices[boneIndex] = worldMat * invBindMat;
+        }
       `,
         });
         this.skinMatrixComputePipeline = this.device.createComputePipeline({
@@ -850,143 +861,143 @@ export class Engine {
         // Bloom extraction shader (extracts bright areas)
         const bloomExtractShader = this.device.createShaderModule({
             label: "bloom extract",
-            code: /* wgsl */ `
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) uv: vec2f,
-        };
-
-        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-          var output: VertexOutput;
-          // Generate fullscreen quad from vertex index
-          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
-          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
-          output.position = vec4f(x, y, 0.0, 1.0);
-          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
-          return output;
-        }
-
-        struct BloomExtractUniforms {
-          threshold: f32,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-          _padding4: f32,
-          _padding5: f32,
-          _padding6: f32,
-          _padding7: f32,
-        };
-
-        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
-        @group(0) @binding(1) var inputSampler: sampler;
-        @group(0) @binding(2) var<uniform> extractUniforms: BloomExtractUniforms;
-
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let color = textureSample(inputTexture, inputSampler, input.uv);
-          // Extract bright areas above threshold
-          let threshold = extractUniforms.threshold;
-          let bloom = max(vec3f(0.0), color.rgb - vec3f(threshold)) / max(0.001, 1.0 - threshold);
-          return vec4f(bloom, color.a);
-        }
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          // Generate fullscreen quad from vertex index
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BloomExtractUniforms {
+          threshold: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+          _padding7: f32,
+        };
+
+        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+        @group(0) @binding(1) var inputSampler: sampler;
+        @group(0) @binding(2) var<uniform> extractUniforms: BloomExtractUniforms;
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let color = textureSample(inputTexture, inputSampler, input.uv);
+          // Extract bright areas above threshold
+          let threshold = extractUniforms.threshold;
+          let bloom = max(vec3f(0.0), color.rgb - vec3f(threshold)) / max(0.001, 1.0 - threshold);
+          return vec4f(bloom, color.a);
+        }
       `,
         });
         // Bloom blur shader (gaussian blur - can be used for both horizontal and vertical)
         const bloomBlurShader = this.device.createShaderModule({
             label: "bloom blur",
-            code: /* wgsl */ `
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) uv: vec2f,
-        };
-
-        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-          var output: VertexOutput;
-          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
-          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
-          output.position = vec4f(x, y, 0.0, 1.0);
-          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
-          return output;
-        }
-
-        struct BlurUniforms {
-          direction: vec2f,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-          _padding4: f32,
-          _padding5: f32,
-          _padding6: f32,
-        };
-
-        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
-        @group(0) @binding(1) var inputSampler: sampler;
-        @group(0) @binding(2) var<uniform> blurUniforms: BlurUniforms;
-
-        // 9-tap gaussian blur
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let texelSize = 1.0 / vec2f(textureDimensions(inputTexture));
-          var result = vec4f(0.0);
-          
-          // Gaussian weights for 9-tap filter
-          let weights = array<f32, 9>(
-            0.01621622, 0.05405405, 0.12162162,
-            0.19459459, 0.22702703,
-            0.19459459, 0.12162162, 0.05405405, 0.01621622
-          );
-          
-          let offsets = array<f32, 9>(-4.0, -3.0, -2.0, -1.0, 0.0, 1.0, 2.0, 3.0, 4.0);
-          
-          for (var i = 0u; i < 9u; i++) {
-            let offset = offsets[i] * texelSize * blurUniforms.direction;
-            result += textureSample(inputTexture, inputSampler, input.uv + offset) * weights[i];
-          }
-          
-          return result;
-        }
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BlurUniforms {
+          direction: vec2f,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+        };
+
+        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+        @group(0) @binding(1) var inputSampler: sampler;
+        @group(0) @binding(2) var<uniform> blurUniforms: BlurUniforms;
+
+        // 9-tap gaussian blur
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let texelSize = 1.0 / vec2f(textureDimensions(inputTexture));
+          var result = vec4f(0.0);
+          
+          // Gaussian weights for 9-tap filter
+          let weights = array<f32, 9>(
+            0.01621622, 0.05405405, 0.12162162,
+            0.19459459, 0.22702703,
+            0.19459459, 0.12162162, 0.05405405, 0.01621622
+          );
+          
+          let offsets = array<f32, 9>(-4.0, -3.0, -2.0, -1.0, 0.0, 1.0, 2.0, 3.0, 4.0);
+          
+          for (var i = 0u; i < 9u; i++) {
+            let offset = offsets[i] * texelSize * blurUniforms.direction;
+            result += textureSample(inputTexture, inputSampler, input.uv + offset) * weights[i];
+          }
+          
+          return result;
+        }
       `,
         });
         // Bloom composition shader (combines original scene with bloom)
         const bloomComposeShader = this.device.createShaderModule({
             label: "bloom compose",
-            code: /* wgsl */ `
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) uv: vec2f,
-        };
-
-        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-          var output: VertexOutput;
-          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
-          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
-          output.position = vec4f(x, y, 0.0, 1.0);
-          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
-          return output;
-        }
-
-        struct BloomComposeUniforms {
-          intensity: f32,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-          _padding4: f32,
-          _padding5: f32,
-          _padding6: f32,
-          _padding7: f32,
-        };
-
-        @group(0) @binding(0) var sceneTexture: texture_2d<f32>;
-        @group(0) @binding(1) var sceneSampler: sampler;
-        @group(0) @binding(2) var bloomTexture: texture_2d<f32>;
-        @group(0) @binding(3) var bloomSampler: sampler;
-        @group(0) @binding(4) var<uniform> composeUniforms: BloomComposeUniforms;
-
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let scene = textureSample(sceneTexture, sceneSampler, input.uv);
-          let bloom = textureSample(bloomTexture, bloomSampler, input.uv);
-          // Additive blending with intensity control
-          let result = scene.rgb + bloom.rgb * composeUniforms.intensity;
-          return vec4f(result, scene.a);
-        }
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BloomComposeUniforms {
+          intensity: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+          _padding7: f32,
+        };
+
+        @group(0) @binding(0) var sceneTexture: texture_2d<f32>;
+        @group(0) @binding(1) var sceneSampler: sampler;
+        @group(0) @binding(2) var bloomTexture: texture_2d<f32>;
+        @group(0) @binding(3) var bloomSampler: sampler;
+        @group(0) @binding(4) var<uniform> composeUniforms: BloomComposeUniforms;
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let scene = textureSample(sceneTexture, sceneSampler, input.uv);
+          let bloom = textureSample(bloomTexture, bloomSampler, input.uv);
+          // Additive blending with intensity control
+          let result = scene.rgb + bloom.rgb * composeUniforms.intensity;
+          return vec4f(result, scene.a);
+        }
       `,
         });
         // Create uniform buffer for blur direction (minimum 32 bytes for WebGPU)
@@ -1194,9 +1205,9 @@ export class Engine {
                     depthClearValue: 1.0,
                     depthLoadOp: "clear",
                     depthStoreOp: "store",
-                    stencilClearValue: 0, // New: clear stencil to 0
-                    stencilLoadOp: "clear", // New: clear stencil each frame
-                    stencilStoreOp: "store", // New: store stencil
+                    stencilClearValue: 0,
+                    stencilLoadOp: "clear",
+                    stencilStoreOp: "discard", // Discard stencil after frame to save bandwidth (we only use it during rendering)
                 },
             };
             this.camera.aspect = width / height;
@@ -1444,7 +1455,7 @@ export class Engine {
             materialUniformData[4] = this.rimLightColor[0]; // rimColor.r
             materialUniformData[5] = this.rimLightColor[1]; // rimColor.g
             materialUniformData[6] = this.rimLightColor[2]; // rimColor.b
-            materialUniformData[7] = 0.0; // _padding1
+            materialUniformData[7] = 0.0;
             const materialUniformBuffer = this.device.createBuffer({
                 label: `material uniform: ${mat.name}`,
                 size: materialUniformData.byteLength,
@@ -1476,22 +1487,34 @@ export class Engine {
                 });
             }
             else if (mat.isHair) {
-                // For hair materials, create two bind groups: one for over-eyes (alphaMultiplier = 0.5) and one for over-non-eyes (alphaMultiplier = 1.0)
-                const materialUniformDataOverEyes = new Float32Array(8);
-                materialUniformDataOverEyes[0] = materialAlpha;
-                materialUniformDataOverEyes[1] = 0.5; // alphaMultiplier: 0.5 for over-eyes
-                materialUniformDataOverEyes[2] = this.rimLightIntensity;
-                materialUniformDataOverEyes[3] = this.rimLightPower;
-                materialUniformDataOverEyes[4] = this.rimLightColor[0]; // rimColor.r
-                materialUniformDataOverEyes[5] = this.rimLightColor[1]; // rimColor.g
-                materialUniformDataOverEyes[6] = this.rimLightColor[2]; // rimColor.b
-                materialUniformDataOverEyes[7] = 0.0; // _padding1
+                // Hair materials: create bind groups for unified pipeline with dynamic branching
+                const materialUniformDataHair = new Float32Array(8);
+                materialUniformDataHair[0] = materialAlpha;
+                materialUniformDataHair[1] = 1.0; // alphaMultiplier: base value, shader will adjust
+                materialUniformDataHair[2] = this.rimLightIntensity;
+                materialUniformDataHair[3] = this.rimLightPower;
+                materialUniformDataHair[4] = this.rimLightColor[0]; // rimColor.r
+                materialUniformDataHair[5] = this.rimLightColor[1]; // rimColor.g
+                materialUniformDataHair[6] = this.rimLightColor[2]; // rimColor.b
+                materialUniformDataHair[7] = 0.0;
+                // Create uniform buffers for both modes
                 const materialUniformBufferOverEyes = this.device.createBuffer({
                     label: `material uniform (over eyes): ${mat.name}`,
-                    size: materialUniformDataOverEyes.byteLength,
+                    size: materialUniformDataHair.byteLength,
                     usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
                 });
+                const materialUniformDataOverEyes = new Float32Array(materialUniformDataHair);
+                materialUniformDataOverEyes[7] = 1.0;
                 this.device.queue.writeBuffer(materialUniformBufferOverEyes, 0, materialUniformDataOverEyes);
+                const materialUniformBufferOverNonEyes = this.device.createBuffer({
+                    label: `material uniform (over non-eyes): ${mat.name}`,
+                    size: materialUniformDataHair.byteLength,
+                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+                });
+                const materialUniformDataOverNonEyes = new Float32Array(materialUniformDataHair);
+                materialUniformDataOverNonEyes[7] = 0.0;
+                this.device.queue.writeBuffer(materialUniformBufferOverNonEyes, 0, materialUniformDataOverNonEyes);
+                // Create bind groups for both modes
                 const bindGroupOverEyes = this.device.createBindGroup({
                     label: `material bind group (over eyes): ${mat.name}`,
                     layout: this.hairBindGroupLayout,
@@ -1506,28 +1529,6 @@ export class Engine {
                         { binding: 7, resource: { buffer: materialUniformBufferOverEyes } },
                     ],
                 });
-                this.hairDrawsOverEyes.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
-                    bindGroup: bindGroupOverEyes,
-                    isTransparent,
-                });
-                // Create material uniform for hair over non-eyes (alphaMultiplier = 1.0)
-                const materialUniformDataOverNonEyes = new Float32Array(8);
-                materialUniformDataOverNonEyes[0] = materialAlpha;
-                materialUniformDataOverNonEyes[1] = 1.0; // alphaMultiplier: 1.0 for over-non-eyes
-                materialUniformDataOverNonEyes[2] = this.rimLightIntensity;
-                materialUniformDataOverNonEyes[3] = this.rimLightPower;
-                materialUniformDataOverNonEyes[4] = this.rimLightColor[0]; // rimColor.r
-                materialUniformDataOverNonEyes[5] = this.rimLightColor[1]; // rimColor.g
-                materialUniformDataOverNonEyes[6] = this.rimLightColor[2]; // rimColor.b
-                materialUniformDataOverNonEyes[7] = 0.0; // _padding1
-                const materialUniformBufferOverNonEyes = this.device.createBuffer({
-                    label: `material uniform (over non-eyes): ${mat.name}`,
-                    size: materialUniformDataOverNonEyes.byteLength,
-                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-                });
-                this.device.queue.writeBuffer(materialUniformBufferOverNonEyes, 0, materialUniformDataOverNonEyes);
                 const bindGroupOverNonEyes = this.device.createBindGroup({
                     label: `material bind group (over non-eyes): ${mat.name}`,
                     layout: this.hairBindGroupLayout,
@@ -1542,6 +1543,13 @@ export class Engine {
                         { binding: 7, resource: { buffer: materialUniformBufferOverNonEyes } },
                     ],
                 });
+                // Store both bind groups for unified pipeline
+                this.hairDrawsOverEyes.push({
+                    count: matCount,
+                    firstIndex: runningFirstIndex,
+                    bindGroup: bindGroupOverEyes,
+                    isTransparent,
+                });
                 this.hairDrawsOverNonEyes.push({
                     count: matCount,
                     firstIndex: runningFirstIndex,
@@ -1568,11 +1576,14 @@ export class Engine {
             // Outline for all materials (including transparent) - Edge flag is at bit 4 (0x10) in PMX format, not bit 0 (0x01)
             if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
                 const materialUniformData = new Float32Array(8);
-                materialUniformData[0] = mat.edgeColor[0];
-                materialUniformData[1] = mat.edgeColor[1];
-                materialUniformData[2] = mat.edgeColor[2];
-                materialUniformData[3] = mat.edgeColor[3];
+                materialUniformData[0] = mat.edgeColor[0]; // edgeColor.r
+                materialUniformData[1] = mat.edgeColor[1]; // edgeColor.g
+                materialUniformData[2] = mat.edgeColor[2]; // edgeColor.b
+                materialUniformData[3] = mat.edgeColor[3]; // edgeColor.a
                 materialUniformData[4] = mat.edgeSize;
+                materialUniformData[5] = 0.0; // isOverEyes: 0.0 for all (unified pipeline doesn't use stencil)
+                materialUniformData[6] = 0.0; // _padding1
+                materialUniformData[7] = 0.0; // _padding2
                 const materialUniformBuffer = this.device.createBuffer({
                     label: `outline material uniform: ${mat.name}`,
                     size: materialUniformData.byteLength,
@@ -1686,8 +1697,7 @@ export class Engine {
             pass.setVertexBuffer(2, this.weightsBuffer);
             pass.setIndexBuffer(this.indexBuffer, "uint32");
             this.drawCallCount = 0;
-            // PASS 1: Opaque non-eye, non-hair (face, body, etc)
-            // this.drawOutlines(pass, false) // Opaque outlines
+            // PASS 1: Opaque non-eye, non-hair
             pass.setPipeline(this.pipeline);
             for (const draw of this.opaqueNonEyeNonHairDraws) {
                 if (draw.count > 0) {
@@ -1706,27 +1716,29 @@ export class Engine {
                     this.drawCallCount++;
                 }
             }
-            // PASS 3: Hair rendering - optimized single pass approach
-            // Since both hair passes use the same shader, we batch them together
-            // but still need separate passes due to stencil requirements (equal vs not-equal)
-            this.drawOutlines(pass, false); // Opaque outlines
-            // 3a: Hair over eyes (stencil == 1, alphaMultiplier = 0.5)
-            if (this.hairDrawsOverEyes.length > 0) {
-                pass.setPipeline(this.hairMultiplyPipeline);
-                pass.setStencilReference(1);
+            // PASS 3: Hair rendering with depth pre-pass and unified pipeline
+            this.drawOutlines(pass, false);
+            // 3a: Hair depth pre-pass (eliminates overdraw by rejecting fragments early)
+            if (this.hairDrawsOverEyes.length > 0 || this.hairDrawsOverNonEyes.length > 0) {
+                pass.setPipeline(this.hairDepthPipeline);
                 for (const draw of this.hairDrawsOverEyes) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
                         pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                        this.drawCallCount++;
+                    }
+                }
+                for (const draw of this.hairDrawsOverNonEyes) {
+                    if (draw.count > 0) {
+                        pass.setBindGroup(0, draw.bindGroup);
+                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
                     }
                 }
             }
-            // 3b: Hair over non-eyes (stencil != 1, alphaMultiplier = 1.0)
-            if (this.hairDrawsOverNonEyes.length > 0) {
-                pass.setPipeline(this.hairOpaquePipeline);
+            // 3b: Hair shading pass with unified pipeline and dynamic branching
+            if (this.hairDrawsOverEyes.length > 0) {
+                pass.setPipeline(this.hairUnifiedPipelineOverEyes);
                 pass.setStencilReference(1);
-                for (const draw of this.hairDrawsOverNonEyes) {
+                for (const draw of this.hairDrawsOverEyes) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
                         pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
@@ -1734,20 +1746,20 @@ export class Engine {
                     }
                 }
             }
-            // 3c: Hair outlines - batched together, only draw if outlines exist
-            if (this.hairOutlineDraws.length > 0) {
-                // Over eyes
-                pass.setPipeline(this.hairOutlineOverEyesPipeline);
+            if (this.hairDrawsOverNonEyes.length > 0) {
+                pass.setPipeline(this.hairUnifiedPipelineOverNonEyes);
                 pass.setStencilReference(1);
-                for (const draw of this.hairOutlineDraws) {
+                for (const draw of this.hairDrawsOverNonEyes) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
                         pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                        this.drawCallCount++;
                     }
                 }
-                // Over non-eyes
-                pass.setPipeline(this.hairOutlinePipeline);
-                pass.setStencilReference(1);
+            }
+            // 3c: Hair outlines - unified single pass without stencil testing
+            if (this.hairOutlineDraws.length > 0) {
+                pass.setPipeline(this.hairUnifiedOutlinePipeline);
                 for (const draw of this.hairOutlineDraws) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
@@ -1764,7 +1776,7 @@ export class Engine {
                     this.drawCallCount++;
                 }
             }
-            this.drawOutlines(pass, true); // Transparent outlines
+            this.drawOutlines(pass, true);
             pass.end();
             this.device.queue.submit([encoder.finish()]);
             // Apply bloom post-processing