reze-engine 0.1.5 → 0.1.6

package/dist/engine.js

@@ -28,8 +28,14 @@ export class Engine {
         };
         this.animationFrameId = null;
         this.renderLoopCallback = null;
-        this.materialDraws = [];
-        this.outlineDraws = [];
+        this.opaqueNonEyeNonHairDraws = [];
+        this.eyeDraws = [];
+        this.hairDraws = [];
+        this.transparentNonEyeNonHairDraws = [];
+        this.opaqueNonEyeNonHairOutlineDraws = [];
+        this.eyeOutlineDraws = [];
+        this.hairOutlineDraws = [];
+        this.transparentNonEyeNonHairOutlineDraws = [];
         this.canvas = canvas;
     }
     // Step 1: Get WebGPU device and context
@@ -66,118 +72,251 @@ 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,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: 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;
-          }
-          
-          let color = albedo * lightAccum;
-          let finalAlpha = material.alpha;
-          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,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: 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;
+          }
+          
+          let color = albedo * lightAccum;
+          let finalAlpha = material.alpha;
+          if (finalAlpha < 0.001) {
+            discard;
+          }
+          
+          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), finalAlpha);
+        }
+      `,
+        });
+        // Create a separate shader for hair-over-eyes that outputs pre-multiplied color for darkening effect
+        const hairMultiplyShaderModule = this.device.createShaderModule({
+            label: "hair multiply 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,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: 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);
+          
+          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;
+          }
+          
+          let color = albedo * lightAccum;
+          let finalAlpha = material.alpha;
+          if (finalAlpha < 0.001) {
+            discard;
+          }
+          
+          // For hair-over-eyes effect: simple half-transparent overlay
+          // Use 60% opacity to create a semi-transparent hair color overlay
+          let overlayAlpha = finalAlpha * 0.6;
+          
+          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), overlayAlpha);
+        }
       `,
         });
+        // 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: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // camera
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // light
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // diffuseTexture
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // diffuseSampler
+                { binding: 4, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }, // skinMats
+                { binding: 5, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // toonTexture
+                { binding: 6, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // toonSampler
+                { binding: 7, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
+            ],
+        });
+        const sharedPipelineLayout = this.device.createPipelineLayout({
+            label: "shared pipeline layout",
+            bindGroupLayouts: [this.hairBindGroupLayout],
+        });
         // Single pipeline for all materials with alpha blending
         this.pipeline = this.device.createRenderPipeline({
             label: "model pipeline",
-            layout: "auto",
+            layout: sharedPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -221,7 +360,7 @@ export class Engine {
             },
             primitive: { cullMode: "none" },
             depthStencil: {
-                format: "depth24plus",
+                format: "depth24plus-stencil8",
                 depthWriteEnabled: true,
                 depthCompare: "less",
             },
@@ -229,79 +368,92 @@ export class Engine {
                 count: this.sampleCount,
             },
         });
+        // Create bind group layout for outline pipelines
+        this.outlineBindGroupLayout = this.device.createBindGroupLayout({
+            label: "outline bind group layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // camera
+                { binding: 1, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
+                { binding: 2, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }, // skinMats
+            ],
+        });
+        const outlinePipelineLayout = this.device.createPipelineLayout({
+            label: "outline pipeline layout",
+            bindGroupLayouts: [this.outlineBindGroupLayout],
+        });
         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(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;
-          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,
+          _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(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;
+          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;
+        }
       `,
         });
         this.outlinePipeline = this.device.createRenderPipeline({
             label: "outline pipeline",
-            layout: "auto",
+            layout: outlinePipelineLayout,
             vertex: {
                 module: outlineShaderModule,
                 buffers: [
@@ -359,7 +511,7 @@ export class Engine {
                 cullMode: "back",
             },
             depthStencil: {
-                format: "depth24plus",
+                format: "depth24plus-stencil8",
                 depthWriteEnabled: true,
                 depthCompare: "less",
             },
@@ -367,36 +519,400 @@ 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",
+            layout: outlinePipelineLayout,
+            vertex: {
+                module: outlineShaderModule,
+                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",
+                            },
+                        ],
+                    },
+                    {
+                        arrayStride: 4 * 2,
+                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+                    },
+                    {
+                        arrayStride: 4,
+                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+                    },
+                ],
+            },
+            fragment: {
+                module: outlineShaderModule,
+                targets: [
+                    {
+                        format: this.presentationFormat,
+                        blend: {
+                            color: {
+                                srcFactor: "src-alpha",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                            alpha: {
+                                srcFactor: "one",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                        },
+                    },
+                ],
+            },
+            primitive: {
+                cullMode: "back",
+            },
+            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",
+                },
+            },
+            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,
+            vertex: {
+                module: outlineShaderModule,
+                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",
+                            },
+                        ],
+                    },
+                    {
+                        arrayStride: 4 * 2,
+                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+                    },
+                    {
+                        arrayStride: 4,
+                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+                    },
+                ],
+            },
+            fragment: {
+                module: outlineShaderModule,
+                targets: [
+                    {
+                        format: this.presentationFormat,
+                        blend: {
+                            color: {
+                                srcFactor: "src-alpha",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                            alpha: {
+                                srcFactor: "one",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                        },
+                    },
+                ],
+            },
+            primitive: {
+                cullMode: "back",
+            },
+            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,
+                stencilFront: {
+                    compare: "equal", // Only render where stencil == 1 (over eyes)
+                    failOp: "keep",
+                    depthFailOp: "keep",
+                    passOp: "keep",
+                },
+                stencilBack: {
+                    compare: "equal",
+                    failOp: "keep",
+                    depthFailOp: "keep",
+                    passOp: "keep",
+                },
+            },
+            multisample: {
+                count: this.sampleCount,
+            },
+        });
+        // Hair pipeline with multiplicative blending (for hair over eyes)
+        this.hairMultiplyPipeline = this.device.createRenderPipeline({
+            label: "hair multiply pipeline",
+            layout: sharedPipelineLayout,
+            vertex: {
+                module: hairMultiplyShaderModule,
+                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" },
+                        ],
+                    },
+                    {
+                        arrayStride: 4 * 2,
+                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+                    },
+                    {
+                        arrayStride: 4,
+                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+                    },
+                ],
+            },
+            fragment: {
+                module: hairMultiplyShaderModule,
+                targets: [
+                    {
+                        format: this.presentationFormat,
+                        blend: {
+                            color: {
+                                // Simple half-transparent overlay effect
+                                // Blend: hairColor * overlayAlpha + eyeColor * (1 - overlayAlpha)
+                                srcFactor: "src-alpha",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                            alpha: {
+                                srcFactor: "one",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                        },
+                    },
+                ],
+            },
+            primitive: { cullMode: "none" },
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: true, // Write depth so outlines can test against it
+                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)
+        this.hairOpaquePipeline = this.device.createRenderPipeline({
+            label: "hair opaque pipeline",
+            layout: sharedPipelineLayout,
+            vertex: {
+                module: shaderModule,
+                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" },
+                        ],
+                    },
+                    {
+                        arrayStride: 4 * 2,
+                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+                    },
+                    {
+                        arrayStride: 4,
+                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+                    },
+                ],
+            },
+            fragment: {
+                module: shaderModule,
+                targets: [
+                    {
+                        format: this.presentationFormat,
+                        blend: {
+                            color: {
+                                srcFactor: "src-alpha",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                            alpha: {
+                                srcFactor: "one",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                        },
+                    },
+                ],
+            },
+            primitive: { cullMode: "none" },
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: true,
+                depthCompare: "less",
+                stencilFront: {
+                    compare: "not-equal", // Only render where stencil != 1
+                    failOp: "keep",
+                    depthFailOp: "keep",
+                    passOp: "keep",
+                },
+                stencilBack: {
+                    compare: "not-equal",
+                    failOp: "keep",
+                    depthFailOp: "keep",
+                    passOp: "keep",
+                },
+            },
+            multisample: { count: this.sampleCount },
+        });
+        // Eye overlay pipeline (renders after opaque, writes stencil)
+        this.eyePipeline = this.device.createRenderPipeline({
+            label: "eye overlay pipeline",
+            layout: sharedPipelineLayout,
+            vertex: {
+                module: shaderModule,
+                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" },
+                        ],
+                    },
+                    {
+                        arrayStride: 4 * 2,
+                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+                    },
+                    {
+                        arrayStride: 4,
+                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+                    },
+                ],
+            },
+            fragment: {
+                module: shaderModule,
+                targets: [
+                    {
+                        format: this.presentationFormat,
+                        blend: {
+                            color: {
+                                srcFactor: "src-alpha",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                            alpha: {
+                                srcFactor: "one",
+                                dstFactor: "one-minus-src-alpha",
+                                operation: "add",
+                            },
+                        },
+                    },
+                ],
+            },
+            primitive: { cullMode: "none" },
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: false, // Don't write depth
+                depthCompare: "less", // Respect existing depth
+                stencilFront: {
+                    compare: "always",
+                    failOp: "keep",
+                    depthFailOp: "keep",
+                    passOp: "replace", // Write stencil value 1
+                },
+                stencilBack: {
+                    compare: "always",
+                    failOp: "keep",
+                    depthFailOp: "keep",
+                    passOp: "replace",
+                },
+            },
+            multisample: { count: this.sampleCount },
+        });
     }
     // Create compute shader for skin matrix computation
     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({
@@ -433,7 +949,7 @@ export class Engine {
                 label: "depth texture",
                 size: [width, height],
                 sampleCount: this.sampleCount,
-                format: "depth24plus",
+                format: "depth24plus-stencil8",
                 usage: GPUTextureUsage.RENDER_ATTACHMENT,
             });
             const depthTextureView = this.depthTexture.createView();
@@ -459,6 +975,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
                 },
             };
             this.camera.aspect = width / height;
@@ -667,9 +1186,14 @@ export class Engine {
             this.textureSizes.set(defaultToonPath, { width: 256, height: 2 });
             return defaultToonTexture;
         };
-        this.materialDraws = [];
-        this.outlineDraws = [];
-        const outlineBindGroupLayout = this.outlinePipeline.getBindGroupLayout(0);
+        this.opaqueNonEyeNonHairDraws = [];
+        this.eyeDraws = [];
+        this.hairDraws = [];
+        this.transparentNonEyeNonHairDraws = [];
+        this.opaqueNonEyeNonHairOutlineDraws = [];
+        this.eyeOutlineDraws = [];
+        this.hairOutlineDraws = [];
+        this.transparentNonEyeNonHairOutlineDraws = [];
         let runningFirstIndex = 0;
         for (const mat of materials) {
             const matCount = mat.vertexCount | 0;
@@ -693,9 +1217,11 @@ export class Engine {
                 usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
             });
             this.device.queue.writeBuffer(materialUniformBuffer, 0, materialUniformData);
+            // Create bind groups using the shared bind group layout
+            // All pipelines (main, eye, hair multiply, hair opaque) use the same shader and layout
             const bindGroup = this.device.createBindGroup({
                 label: `material bind group: ${mat.name}`,
-                layout: this.pipeline.getBindGroupLayout(0),
+                layout: this.hairBindGroupLayout,
                 entries: [
                     { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
                     { binding: 1, resource: { buffer: this.lightUniformBuffer } },
@@ -707,13 +1233,39 @@ export class Engine {
                     { binding: 7, resource: { buffer: materialUniformBuffer } },
                 ],
             });
-            // All materials use the same pipeline
-            this.materialDraws.push({
-                count: matCount,
-                firstIndex: runningFirstIndex,
-                bindGroup,
-                isTransparent,
-            });
+            // Classify materials into appropriate draw lists
+            if (mat.isEye) {
+                this.eyeDraws.push({
+                    count: matCount,
+                    firstIndex: runningFirstIndex,
+                    bindGroup,
+                    isTransparent,
+                });
+            }
+            else if (mat.isHair) {
+                this.hairDraws.push({
+                    count: matCount,
+                    firstIndex: runningFirstIndex,
+                    bindGroup,
+                    isTransparent,
+                });
+            }
+            else if (isTransparent) {
+                this.transparentNonEyeNonHairDraws.push({
+                    count: matCount,
+                    firstIndex: runningFirstIndex,
+                    bindGroup,
+                    isTransparent,
+                });
+            }
+            else {
+                this.opaqueNonEyeNonHairDraws.push({
+                    count: matCount,
+                    firstIndex: runningFirstIndex,
+                    bindGroup,
+                    isTransparent,
+                });
+            }
             // 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) {
@@ -731,20 +1283,46 @@ export class Engine {
                 this.device.queue.writeBuffer(materialUniformBuffer, 0, materialUniformData);
                 const outlineBindGroup = this.device.createBindGroup({
                     label: `outline bind group: ${mat.name}`,
-                    layout: outlineBindGroupLayout,
+                    layout: this.outlineBindGroupLayout,
                     entries: [
                         { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
                         { binding: 1, resource: { buffer: materialUniformBuffer } },
                         { binding: 2, resource: { buffer: this.skinMatrixBuffer } },
                     ],
                 });
-                // All outlines use the same pipeline
-                this.outlineDraws.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
-                    bindGroup: outlineBindGroup,
-                    isTransparent,
-                });
+                // Classify outlines into appropriate draw lists
+                if (mat.isEye) {
+                    this.eyeOutlineDraws.push({
+                        count: matCount,
+                        firstIndex: runningFirstIndex,
+                        bindGroup: outlineBindGroup,
+                        isTransparent,
+                    });
+                }
+                else if (mat.isHair) {
+                    this.hairOutlineDraws.push({
+                        count: matCount,
+                        firstIndex: runningFirstIndex,
+                        bindGroup: outlineBindGroup,
+                        isTransparent,
+                    });
+                }
+                else if (isTransparent) {
+                    this.transparentNonEyeNonHairOutlineDraws.push({
+                        count: matCount,
+                        firstIndex: runningFirstIndex,
+                        bindGroup: outlineBindGroup,
+                        isTransparent,
+                    });
+                }
+                else {
+                    this.opaqueNonEyeNonHairOutlineDraws.push({
+                        count: matCount,
+                        firstIndex: runningFirstIndex,
+                        bindGroup: outlineBindGroup,
+                        isTransparent,
+                    });
+                }
             }
             runningFirstIndex += matCount;
         }
@@ -810,10 +1388,78 @@ export class Engine {
             pass.setVertexBuffer(2, this.weightsBuffer);
             pass.setIndexBuffer(this.indexBuffer, "uint32");
             this.drawCallCount = 0;
-            this.drawOutlines(pass, false);
-            this.drawModel(pass, false);
-            this.drawModel(pass, true);
-            this.drawOutlines(pass, true);
+            // === PASS 1: Opaque non-eye, non-hair (face, body, etc) ===
+            this.drawOutlines(pass, false); // Opaque outlines
+            pass.setPipeline(this.pipeline);
+            for (const draw of this.opaqueNonEyeNonHairDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    this.drawCallCount++;
+                }
+            }
+            // === PASS 2: Eyes (writes stencil = 1) ===
+            pass.setPipeline(this.eyePipeline);
+            pass.setStencilReference(1); // Set stencil reference value to 1
+            for (const draw of this.eyeDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    this.drawCallCount++;
+                }
+            }
+            // === PASS 3a: Hair over eyes (stencil == 1, multiply blend) ===
+            // Draw hair geometry first to establish depth
+            pass.setPipeline(this.hairMultiplyPipeline);
+            pass.setStencilReference(1); // Check against stencil value 1
+            for (const draw of this.hairDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    this.drawCallCount++;
+                }
+            }
+            // === PASS 3a.5: Hair outlines over eyes (stencil == 1, depth test to only draw near hair) ===
+            // Use depth compare "less-equal" with the hair depth to only draw outline where hair exists
+            // The outline is expanded outward, so we need to ensure it only appears near the hair edge
+            pass.setPipeline(this.hairOutlineOverEyesPipeline);
+            pass.setStencilReference(1); // Check against stencil value 1 (with equal test)
+            for (const draw of this.hairOutlineDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                }
+            }
+            // === PASS 3b: Hair over non-eyes (stencil != 1, opaque) ===
+            pass.setPipeline(this.hairOpaquePipeline);
+            pass.setStencilReference(1); // Check against stencil value 1 (with not-equal test)
+            for (const draw of this.hairDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    this.drawCallCount++;
+                }
+            }
+            // === PASS 3b.5: Hair outlines over non-eyes (stencil != 1) ===
+            // Draw hair outlines after hair geometry, so they only appear where hair exists
+            pass.setPipeline(this.hairOutlinePipeline);
+            pass.setStencilReference(1); // Check against stencil value 1 (with not-equal test)
+            for (const draw of this.hairOutlineDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                }
+            }
+            // === PASS 4: Transparent non-eye, non-hair ===
+            pass.setPipeline(this.pipeline);
+            for (const draw of this.transparentNonEyeNonHairDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    this.drawCallCount++;
+                }
+            }
+            this.drawOutlines(pass, true); // Transparent outlines
             pass.end();
             this.device.queue.submit([encoder.finish()]);
             this.updateStats(performance.now() - currentTime);
@@ -885,24 +1531,23 @@ export class Engine {
     }
     // Draw outlines (opaque or transparent)
     drawOutlines(pass, transparent) {
-        if (this.outlineDraws.length === 0)
-            return;
         pass.setPipeline(this.outlinePipeline);
-        for (const draw of this.outlineDraws) {
-            if (draw.count > 0 && draw.isTransparent === transparent) {
-                pass.setBindGroup(0, draw.bindGroup);
-                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+        if (transparent) {
+            // Draw transparent outlines (if any)
+            for (const draw of this.transparentNonEyeNonHairOutlineDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                }
             }
         }
-    }
-    // Draw model materials (opaque or transparent)
-    drawModel(pass, transparent) {
-        pass.setPipeline(this.pipeline);
-        for (const draw of this.materialDraws) {
-            if (draw.count > 0 && draw.isTransparent === transparent) {
-                pass.setBindGroup(0, draw.bindGroup);
-                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                this.drawCallCount++;
+        else {
+            // Draw opaque outlines before main geometry
+            for (const draw of this.opaqueNonEyeNonHairOutlineDraws) {
+                if (draw.count > 0) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                }
             }
         }
     }
@@ -959,7 +1604,11 @@ export class Engine {
         }
         bufferMemoryBytes += 40 * 4; // cameraUniformBuffer
         bufferMemoryBytes += 64 * 4; // lightUniformBuffer
-        bufferMemoryBytes += this.materialDraws.length * 4; // Material uniform buffers
+        const totalMaterialDraws = this.opaqueNonEyeNonHairDraws.length +
+            this.eyeDraws.length +
+            this.hairDraws.length +
+            this.transparentNonEyeNonHairDraws.length;
+        bufferMemoryBytes += totalMaterialDraws * 4; // Material uniform buffers
         let renderTargetMemoryBytes = 0;
         if (this.multisampleTexture) {
             const width = this.canvas.width;