reze-engine 0.1.5 → 0.1.7

package/src/engine.ts

@@ -28,6 +28,13 @@ export class Engine {
   private depthTexture!: GPUTexture
   private pipeline!: GPURenderPipeline
   private outlinePipeline!: GPURenderPipeline
+  private hairOutlinePipeline!: GPURenderPipeline
+  private hairOutlineOverEyesPipeline!: GPURenderPipeline
+  private hairMultiplyPipeline!: GPURenderPipeline
+  private hairOpaquePipeline!: GPURenderPipeline
+  private eyePipeline!: GPURenderPipeline
+  private hairBindGroupLayout!: GPUBindGroupLayout
+  private outlineBindGroupLayout!: GPUBindGroupLayout
   private jointsBuffer!: GPUBuffer
   private weightsBuffer!: GPUBuffer
   private skinMatrixBuffer?: GPUBuffer
@@ -212,10 +219,146 @@ export class Engine {
       `,
     })
 
+    // 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 50% opacity to create a semi-transparent hair color overlay
+          let overlayAlpha = finalAlpha * 0.5;
+          
+          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: [
@@ -259,7 +402,7 @@ export class Engine {
       },
       primitive: { cullMode: "none" },
       depthStencil: {
-        format: "depth24plus",
+        format: "depth24plus-stencil8",
         depthWriteEnabled: true,
         depthCompare: "less",
       },
@@ -268,6 +411,21 @@ export class Engine {
       },
     })
 
+    // 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 */ `
@@ -341,7 +499,7 @@ export class Engine {
 
     this.outlinePipeline = this.device.createRenderPipeline({
       label: "outline pipeline",
-      layout: "auto",
+      layout: outlinePipelineLayout,
       vertex: {
         module: outlineShaderModule,
         buffers: [
@@ -399,7 +557,7 @@ export class Engine {
         cullMode: "back",
       },
       depthStencil: {
-        format: "depth24plus",
+        format: "depth24plus-stencil8",
         depthWriteEnabled: true,
         depthCompare: "less",
       },
@@ -407,6 +565,376 @@ 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" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 1,
+                offset: 3 * 4,
+                format: "float32x3" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 2,
+                offset: 6 * 4,
+                format: "float32x2" as GPUVertexFormat,
+              },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      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" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 1,
+                offset: 3 * 4,
+                format: "float32x3" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 2,
+                offset: 6 * 4,
+                format: "float32x2" as GPUVertexFormat,
+              },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      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" as GPUVertexFormat },
+              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      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" as GPUVertexFormat },
+              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      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" as GPUVertexFormat },
+              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      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
@@ -481,7 +1009,7 @@ export class Engine {
         label: "depth texture",
         size: [width, height],
         sampleCount: this.sampleCount,
-        format: "depth24plus",
+        format: "depth24plus-stencil8",
         usage: GPUTextureUsage.RENDER_ATTACHMENT,
       })
 
@@ -511,6 +1039,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
         },
       }
 
@@ -722,8 +1253,35 @@ export class Engine {
     await this.setupMaterials(model)
   }
 
-  private materialDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
-  private outlineDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
+  private opaqueNonEyeNonHairDraws: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
+  private eyeDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
+  private hairDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
+  private transparentNonEyeNonHairDraws: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
+  private opaqueNonEyeNonHairOutlineDraws: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
+  private eyeOutlineDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
+  private hairOutlineDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] =
+    []
+  private transparentNonEyeNonHairOutlineDraws: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
 
   // Step 8: Load textures and create material bind groups
   private async setupMaterials(model: Model) {
@@ -783,9 +1341,14 @@ export class Engine {
       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) {
@@ -814,9 +1377,11 @@ export class Engine {
       })
       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 } },
@@ -829,13 +1394,36 @@ export class Engine {
         ],
       })
 
-      // 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)
@@ -856,7 +1444,7 @@ export class Engine {
 
         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 } },
@@ -864,13 +1452,36 @@ export class Engine {
           ],
         })
 
-        // 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
@@ -948,10 +1559,89 @@ export class Engine {
       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)
+        }
+      }
+
+      this.drawOutlines(pass, false) // Opaque outlines
+
+      // === 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()])
@@ -1046,24 +1736,22 @@ export class Engine {
 
   // Draw outlines (opaque or transparent)
   private drawOutlines(pass: GPURenderPassEncoder, transparent: boolean) {
-    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)
-  private drawModel(pass: GPURenderPassEncoder, transparent: boolean) {
-    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)
+        }
       }
     }
   }
@@ -1120,7 +1808,12 @@ 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) {