reze-engine 0.2.4 → 0.2.6

package/dist/engine.js

@@ -9,7 +9,11 @@ export class Engine {
         this.lightData = new Float32Array(64);
         this.lightCount = 0;
         this.resizeObserver = null;
-        this.sampleCount = 4; // MSAA 4x
+        this.sampleCount = 4;
+        // Constants
+        this.STENCIL_EYE_VALUE = 1;
+        this.COMPUTE_WORKGROUP_SIZE = 64;
+        this.BLOOM_DOWNSCALE_FACTOR = 2;
         // Ambient light settings
         this.ambient = 1.0;
         // Bloom settings
@@ -17,12 +21,20 @@ export class Engine {
         this.bloomIntensity = 0.12;
         // Rim light settings
         this.rimLightIntensity = 0.45;
-        this.rimLightPower = 2.0;
         this.currentModel = null;
         this.modelDir = "";
         this.physics = null;
         this.textureCache = new Map();
-        this.textureSizes = new Map();
+        // Draw lists
+        this.opaqueDraws = [];
+        this.eyeDraws = [];
+        this.hairDrawsOverEyes = [];
+        this.hairDrawsOverNonEyes = [];
+        this.transparentDraws = [];
+        this.opaqueOutlineDraws = [];
+        this.eyeOutlineDraws = [];
+        this.hairOutlineDraws = [];
+        this.transparentOutlineDraws = [];
         this.lastFpsUpdate = performance.now();
         this.framesSinceLastUpdate = 0;
         this.frameTimeSamples = [];
@@ -38,15 +50,7 @@ export class Engine {
         this.renderLoopCallback = null;
         this.animationFrames = [];
         this.animationTimeouts = [];
-        this.opaqueNonEyeNonHairDraws = [];
-        this.eyeDraws = [];
-        this.hairDrawsOverEyes = [];
-        this.hairDrawsOverNonEyes = [];
-        this.transparentNonEyeNonHairDraws = [];
-        this.opaqueNonEyeNonHairOutlineDraws = [];
-        this.eyeOutlineDraws = [];
-        this.hairOutlineDraws = [];
-        this.transparentNonEyeNonHairOutlineDraws = [];
+        this.gpuMemoryMB = 0;
         this.canvas = canvas;
         if (options) {
             this.ambient = options.ambient ?? 1.0;
@@ -80,9 +84,8 @@ export class Engine {
         this.createBloomPipelines();
         this.setupResize();
     }
-    // Step 2: Create shaders and render pipelines
     createPipelines() {
-        this.textureSampler = this.device.createSampler({
+        this.materialSampler = this.device.createSampler({
             magFilter: "linear",
             minFilter: "linear",
             addressModeU: "repeat",
@@ -90,130 +93,126 @@ 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,
-          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);
-        }
+            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,
+          _padding1: 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);
+          
+          // Branchless weight normalization (avoids GPU branch divergence)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
+          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          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 {
+          // Early alpha test - discard before expensive calculations
+          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;
+          }
+          
+          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 = rimFactor * rimFactor; // Optimized: direct multiply instead of pow(x, 2.0)
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          
+          let color = albedo * lightAccum + rimLight;
+          
+          return vec4f(color, finalAlpha);
+        }
       `,
         });
         // Create explicit bind group layout for all pipelines using the main shader
-        this.hairBindGroupLayout = this.device.createBindGroupLayout({
-            label: "shared material bind group layout",
+        this.mainBindGroupLayout = this.device.createBindGroupLayout({
+            label: "main 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
@@ -225,14 +224,13 @@ export class Engine {
                 { binding: 7, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
             ],
         });
-        const sharedPipelineLayout = this.device.createPipelineLayout({
-            label: "shared pipeline layout",
-            bindGroupLayouts: [this.hairBindGroupLayout],
+        const mainPipelineLayout = this.device.createPipelineLayout({
+            label: "main pipeline layout",
+            bindGroupLayouts: [this.mainBindGroupLayout],
         });
-        // Single pipeline for all materials with alpha blending
-        this.pipeline = this.device.createRenderPipeline({
+        this.modelPipeline = this.device.createRenderPipeline({
             label: "model pipeline",
-            layout: sharedPipelineLayout,
+            layout: mainPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -299,77 +297,73 @@ 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,
-          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;
-        }
+            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);
+          
+          // Branchless weight normalization (avoids GPU branch divergence)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
+          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          let worldNormal = normalize(skinnedNrm);
+          
+          // 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({
@@ -435,9 +429,9 @@ export class Engine {
                 count: this.sampleCount,
             },
         });
-        // 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",
+        // Hair outline pipeline
+        this.hairOutlinePipeline = this.device.createRenderPipeline({
+            label: "hair outline pipeline",
             layout: outlinePipelineLayout,
             vertex: {
                 module: outlineShaderModule,
@@ -505,7 +499,7 @@ export class Engine {
         // Eye overlay pipeline (renders after opaque, writes stencil)
         this.eyePipeline = this.device.createRenderPipeline({
             label: "eye overlay pipeline",
-            layout: sharedPipelineLayout,
+            layout: mainPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -570,55 +564,51 @@ export class Engine {
         // 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
-        }
+            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);
+          
+          // Branchless weight normalization (avoids GPU branch divergence)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
+          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          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,
+            layout: mainPipelineLayout,
             vertex: {
                 module: depthOnlyShaderModule,
                 buffers: [
@@ -657,10 +647,10 @@ export class Engine {
             },
             multisample: { count: this.sampleCount },
         });
-        // 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,
+        // Hair pipeline for rendering over eyes (stencil == 1)
+        this.hairPipelineOverEyes = this.device.createRenderPipeline({
+            label: "hair pipeline (over eyes)",
+            layout: mainPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -722,10 +712,10 @@ export class Engine {
             },
             multisample: { count: this.sampleCount },
         });
-        // Unified pipeline for hair over non-eyes (stencil != 1)
-        this.hairUnifiedPipelineOverNonEyes = this.device.createRenderPipeline({
-            label: "unified hair pipeline (over non-eyes)",
-            layout: sharedPipelineLayout,
+        // Hair pipeline for rendering over non-eyes (stencil != 1)
+        this.hairPipelineOverNonEyes = this.device.createRenderPipeline({
+            label: "hair pipeline (over non-eyes)",
+            layout: mainPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -792,31 +782,30 @@ 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) // Must match COMPUTE_WORKGROUP_SIZE
+        fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
+          let boneIndex = globalId.x;
+          if (boneIndex >= boneCount.count) {
+            return;
+          }
+          let worldMat = worldMatrices[boneIndex];
+          let invBindMat = inverseBindMatrices[boneIndex];
+          skinMatrices[boneIndex] = worldMat * invBindMat;
+        }
       `,
         });
         this.skinMatrixComputePipeline = this.device.createComputePipeline({
@@ -870,143 +859,140 @@ 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;
+
+        // 3-tap gaussian blur using bilinear filtering trick (40% fewer texture fetches!)
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let texelSize = 1.0 / vec2f(textureDimensions(inputTexture));
+          
+          // Bilinear optimization: leverage hardware filtering to sample between pixels
+          // Original 5-tap: weights [0.06136, 0.24477, 0.38774, 0.24477, 0.06136] at offsets [-2, -1, 0, 1, 2]
+          // Optimized 3-tap: combine adjacent samples using weighted offsets
+          let weight0 = 0.38774; // Center sample
+          let weight1 = 0.24477 + 0.06136; // Combined outer samples = 0.30613
+          let offset1 = (0.24477 * 1.0 + 0.06136 * 2.0) / weight1; // Weighted position = 1.2
+          
+          var result = textureSample(inputTexture, inputSampler, input.uv) * weight0;
+          let offsetVec = offset1 * texelSize * blurUniforms.direction;
+          result += textureSample(inputTexture, inputSampler, input.uv + offsetVec) * weight1;
+          result += textureSample(inputTexture, inputSampler, input.uv - offsetVec) * weight1;
+          
+          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)
@@ -1092,11 +1078,9 @@ export class Engine {
         this.bloomThresholdBuffer = bloomThresholdBuffer;
         this.linearSampler = linearSampler;
     }
-    // Setup bloom textures and bind groups (called when canvas is resized)
     setupBloom(width, height) {
-        // Create bloom textures (half resolution for performance)
-        const bloomWidth = Math.floor(width / 2);
-        const bloomHeight = Math.floor(height / 2);
+        const bloomWidth = Math.floor(width / this.BLOOM_DOWNSCALE_FACTOR);
+        const bloomHeight = Math.floor(height / this.BLOOM_DOWNSCALE_FACTOR);
         this.bloomExtractTexture = this.device.createTexture({
             label: "bloom extract",
             size: [bloomWidth, bloomHeight],
@@ -1331,7 +1315,9 @@ export class Engine {
                 this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices());
                 // Upload matrices immediately so next frame shows correct pose
                 this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-                this.computeSkinMatrices();
+                const encoder = this.device.createCommandEncoder();
+                this.computeSkinMatrices(encoder);
+                this.device.queue.submit([encoder.finish()]);
             }
         }
         for (const [_, keyFrames] of boneKeyFramesByBone.entries()) {
@@ -1495,7 +1481,6 @@ export class Engine {
         }
         await this.setupMaterials(model);
     }
-    // Step 8: Load textures and create material bind groups
     async setupMaterials(model) {
         const materials = model.getMaterials();
         if (materials.length === 0) {
@@ -1540,22 +1525,21 @@ export class Engine {
             });
             this.device.queue.writeTexture({ texture: defaultToonTexture }, defaultToonData, { bytesPerRow: 256 * 4 }, [256, 2]);
             this.textureCache.set(defaultToonPath, defaultToonTexture);
-            this.textureSizes.set(defaultToonPath, { width: 256, height: 2 });
             return defaultToonTexture;
         };
-        this.opaqueNonEyeNonHairDraws = [];
+        this.opaqueDraws = [];
         this.eyeDraws = [];
         this.hairDrawsOverEyes = [];
         this.hairDrawsOverNonEyes = [];
-        this.transparentNonEyeNonHairDraws = [];
-        this.opaqueNonEyeNonHairOutlineDraws = [];
+        this.transparentDraws = [];
+        this.opaqueOutlineDraws = [];
         this.eyeOutlineDraws = [];
         this.hairOutlineDraws = [];
-        this.transparentNonEyeNonHairOutlineDraws = [];
-        let runningFirstIndex = 0;
+        this.transparentOutlineDraws = [];
+        let currentIndexOffset = 0;
         for (const mat of materials) {
-            const matCount = mat.vertexCount | 0;
-            if (matCount === 0)
+            const indexCount = mat.vertexCount;
+            if (indexCount === 0)
                 continue;
             const diffuseTexture = await loadTextureByIndex(mat.diffuseTextureIndex);
             if (!diffuseTexture)
@@ -1569,11 +1553,11 @@ export class Engine {
             materialUniformData[0] = materialAlpha;
             materialUniformData[1] = 1.0; // alphaMultiplier: 1.0 for non-hair materials
             materialUniformData[2] = this.rimLightIntensity;
-            materialUniformData[3] = this.rimLightPower;
+            materialUniformData[3] = 0.0; // _padding1
             materialUniformData[4] = 1.0; // rimColor.r
             materialUniformData[5] = 1.0; // rimColor.g
             materialUniformData[6] = 1.0; // rimColor.b
-            materialUniformData[7] = 0.0;
+            materialUniformData[7] = 0.0; // isOverEyes
             const materialUniformBuffer = this.device.createBuffer({
                 label: `material uniform: ${mat.name}`,
                 size: materialUniformData.byteLength,
@@ -1583,115 +1567,91 @@ export class Engine {
             // 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.hairBindGroupLayout,
+                layout: this.mainBindGroupLayout,
                 entries: [
                     { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
                     { binding: 1, resource: { buffer: this.lightUniformBuffer } },
                     { binding: 2, resource: diffuseTexture.createView() },
-                    { binding: 3, resource: this.textureSampler },
+                    { binding: 3, resource: this.materialSampler },
                     { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
                     { binding: 5, resource: toonTexture.createView() },
-                    { binding: 6, resource: this.textureSampler },
+                    { binding: 6, resource: this.materialSampler },
                     { binding: 7, resource: { buffer: materialUniformBuffer } },
                 ],
             });
-            // Classify materials into appropriate draw lists
             if (mat.isEye) {
                 this.eyeDraws.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup,
                     isTransparent,
                 });
             }
             else if (mat.isHair) {
-                // 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] = 1.0; // rimColor.r
-                materialUniformDataHair[5] = 1.0; // rimColor.g
-                materialUniformDataHair[6] = 1.0; // 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: 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,
-                    entries: [
-                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                        { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                        { binding: 2, resource: diffuseTexture.createView() },
-                        { binding: 3, resource: this.textureSampler },
-                        { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
-                        { binding: 5, resource: toonTexture.createView() },
-                        { binding: 6, resource: this.textureSampler },
-                        { binding: 7, resource: { buffer: materialUniformBufferOverEyes } },
-                    ],
-                });
-                const bindGroupOverNonEyes = this.device.createBindGroup({
-                    label: `material bind group (over non-eyes): ${mat.name}`,
-                    layout: this.hairBindGroupLayout,
-                    entries: [
-                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                        { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                        { binding: 2, resource: diffuseTexture.createView() },
-                        { binding: 3, resource: this.textureSampler },
-                        { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
-                        { binding: 5, resource: toonTexture.createView() },
-                        { binding: 6, resource: this.textureSampler },
-                        { binding: 7, resource: { buffer: materialUniformBufferOverNonEyes } },
-                    ],
-                });
-                // Store both bind groups for unified pipeline
+                // Hair materials: create separate bind groups for over-eyes vs over-non-eyes
+                const createHairBindGroup = (isOverEyes) => {
+                    const uniformData = new Float32Array(8);
+                    uniformData[0] = materialAlpha;
+                    uniformData[1] = 1.0; // alphaMultiplier (shader adjusts based on isOverEyes)
+                    uniformData[2] = this.rimLightIntensity;
+                    uniformData[3] = 0.0; // _padding1
+                    uniformData[4] = 1.0; // rimColor.rgb
+                    uniformData[5] = 1.0;
+                    uniformData[6] = 1.0;
+                    uniformData[7] = isOverEyes ? 1.0 : 0.0; // isOverEyes
+                    const buffer = this.device.createBuffer({
+                        label: `material uniform (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
+                        size: uniformData.byteLength,
+                        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+                    });
+                    this.device.queue.writeBuffer(buffer, 0, uniformData);
+                    return this.device.createBindGroup({
+                        label: `material bind group (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
+                        layout: this.mainBindGroupLayout,
+                        entries: [
+                            { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                            { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                            { binding: 2, resource: diffuseTexture.createView() },
+                            { binding: 3, resource: this.materialSampler },
+                            { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
+                            { binding: 5, resource: toonTexture.createView() },
+                            { binding: 6, resource: this.materialSampler },
+                            { binding: 7, resource: { buffer: buffer } },
+                        ],
+                    });
+                };
+                const bindGroupOverEyes = createHairBindGroup(true);
+                const bindGroupOverNonEyes = createHairBindGroup(false);
                 this.hairDrawsOverEyes.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup: bindGroupOverEyes,
                     isTransparent,
                 });
                 this.hairDrawsOverNonEyes.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup: bindGroupOverNonEyes,
                     isTransparent,
                 });
             }
             else if (isTransparent) {
-                this.transparentNonEyeNonHairDraws.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                this.transparentDraws.push({
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup,
                     isTransparent,
                 });
             }
             else {
-                this.opaqueNonEyeNonHairDraws.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                this.opaqueDraws.push({
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup,
                     isTransparent,
                 });
             }
-            // Outline for all materials (including transparent) - Edge flag is at bit 4 (0x10) in PMX format, not bit 0 (0x01)
+            // Edge flag is at bit 4 (0x10) in PMX format
             if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
                 const materialUniformData = new Float32Array(8);
                 materialUniformData[0] = mat.edgeColor[0]; // edgeColor.r
@@ -1699,9 +1659,9 @@ export class Engine {
                 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
+                materialUniformData[5] = 0.0; // isOverEyes
+                materialUniformData[6] = 0.0;
+                materialUniformData[7] = 0.0;
                 const materialUniformBuffer = this.device.createBuffer({
                     label: `outline material uniform: ${mat.name}`,
                     size: materialUniformData.byteLength,
@@ -1717,45 +1677,44 @@ export class Engine {
                         { binding: 2, resource: { buffer: this.skinMatrixBuffer } },
                     ],
                 });
-                // Classify outlines into appropriate draw lists
                 if (mat.isEye) {
                     this.eyeOutlineDraws.push({
-                        count: matCount,
-                        firstIndex: runningFirstIndex,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
                         bindGroup: outlineBindGroup,
                         isTransparent,
                     });
                 }
                 else if (mat.isHair) {
                     this.hairOutlineDraws.push({
-                        count: matCount,
-                        firstIndex: runningFirstIndex,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
                         bindGroup: outlineBindGroup,
                         isTransparent,
                     });
                 }
                 else if (isTransparent) {
-                    this.transparentNonEyeNonHairOutlineDraws.push({
-                        count: matCount,
-                        firstIndex: runningFirstIndex,
+                    this.transparentOutlineDraws.push({
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
                         bindGroup: outlineBindGroup,
                         isTransparent,
                     });
                 }
                 else {
-                    this.opaqueNonEyeNonHairOutlineDraws.push({
-                        count: matCount,
-                        firstIndex: runningFirstIndex,
+                    this.opaqueOutlineDraws.push({
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
                         bindGroup: outlineBindGroup,
                         isTransparent,
                     });
                 }
             }
-            runningFirstIndex += matCount;
+            currentIndexOffset += indexCount;
         }
+        this.gpuMemoryMB = this.calculateGpuMemory();
     }
-    // Helper: Load texture from file path with optional max size limit
-    async createTextureFromPath(path, maxSize = 2048) {
+    async createTextureFromPath(path) {
         const cached = this.textureCache.get(path);
         if (cached) {
             return cached;
@@ -1765,41 +1724,28 @@ export class Engine {
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
-            let imageBitmap = await createImageBitmap(await response.blob(), {
+            const imageBitmap = await createImageBitmap(await response.blob(), {
                 premultiplyAlpha: "none",
                 colorSpaceConversion: "none",
             });
-            // Downscale if texture is too large
-            let finalWidth = imageBitmap.width;
-            let finalHeight = imageBitmap.height;
-            if (finalWidth > maxSize || finalHeight > maxSize) {
-                const scale = Math.min(maxSize / finalWidth, maxSize / finalHeight);
-                finalWidth = Math.floor(finalWidth * scale);
-                finalHeight = Math.floor(finalHeight * scale);
-                // Create canvas to downscale
-                const canvas = new OffscreenCanvas(finalWidth, finalHeight);
-                const ctx = canvas.getContext("2d");
-                if (ctx) {
-                    ctx.drawImage(imageBitmap, 0, 0, finalWidth, finalHeight);
-                    imageBitmap = await createImageBitmap(canvas);
-                }
-            }
             const texture = this.device.createTexture({
                 label: `texture: ${path}`,
-                size: [finalWidth, finalHeight],
+                size: [imageBitmap.width, imageBitmap.height],
                 format: "rgba8unorm",
                 usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
             });
-            this.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [finalWidth, finalHeight]);
+            this.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [
+                imageBitmap.width,
+                imageBitmap.height,
+            ]);
             this.textureCache.set(path, texture);
-            this.textureSizes.set(path, { width: finalWidth, height: finalHeight });
             return texture;
         }
         catch {
             return null;
         }
     }
-    // Step 9: Render one frame
+    // Render strategy: 1) Opaque non-eye/hair 2) Eyes (stencil=1) 3) Hair (depth pre-pass + split by stencil) 4) Transparent 5) Bloom
     render() {
         if (this.multisampleTexture && this.camera && this.device && this.currentModel) {
             const currentTime = performance.now();
@@ -1807,26 +1753,27 @@ export class Engine {
             this.lastFrameTime = currentTime;
             this.updateCameraUniforms();
             this.updateRenderTarget();
-            this.updateModelPose(deltaTime);
+            // Use single encoder for both compute and render (reduces sync points)
             const encoder = this.device.createCommandEncoder();
+            this.updateModelPose(deltaTime, encoder);
             const pass = encoder.beginRenderPass(this.renderPassDescriptor);
             pass.setVertexBuffer(0, this.vertexBuffer);
             pass.setVertexBuffer(1, this.jointsBuffer);
             pass.setVertexBuffer(2, this.weightsBuffer);
             pass.setIndexBuffer(this.indexBuffer, "uint32");
             this.drawCallCount = 0;
-            // PASS 1: Opaque non-eye, non-hair
-            pass.setPipeline(this.pipeline);
-            for (const draw of this.opaqueNonEyeNonHairDraws) {
+            // Pass 1: Opaque
+            pass.setPipeline(this.modelPipeline);
+            for (const draw of this.opaqueDraws) {
                 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 2: Eyes (writes stencil value for hair to test against)
             pass.setPipeline(this.eyePipeline);
-            pass.setStencilReference(1); // Set stencil reference value to 1
+            pass.setStencilReference(this.STENCIL_EYE_VALUE);
             for (const draw of this.eyeDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
@@ -1834,9 +1781,9 @@ export class Engine {
                     this.drawCallCount++;
                 }
             }
-            // PASS 3: Hair rendering with depth pre-pass and unified pipeline
+            // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
             this.drawOutlines(pass, false);
-            // 3a: Hair depth pre-pass (eliminates overdraw by rejecting fragments early)
+            // 3a: Hair depth pre-pass (reduces overdraw via early depth rejection)
             if (this.hairDrawsOverEyes.length > 0 || this.hairDrawsOverNonEyes.length > 0) {
                 pass.setPipeline(this.hairDepthPipeline);
                 for (const draw of this.hairDrawsOverEyes) {
@@ -1852,10 +1799,10 @@ export class Engine {
                     }
                 }
             }
-            // 3b: Hair shading pass with unified pipeline and dynamic branching
+            // 3b: Hair shading (split by stencil for transparency over eyes)
             if (this.hairDrawsOverEyes.length > 0) {
-                pass.setPipeline(this.hairUnifiedPipelineOverEyes);
-                pass.setStencilReference(1);
+                pass.setPipeline(this.hairPipelineOverEyes);
+                pass.setStencilReference(this.STENCIL_EYE_VALUE);
                 for (const draw of this.hairDrawsOverEyes) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
@@ -1865,8 +1812,8 @@ export class Engine {
                 }
             }
             if (this.hairDrawsOverNonEyes.length > 0) {
-                pass.setPipeline(this.hairUnifiedPipelineOverNonEyes);
-                pass.setStencilReference(1);
+                pass.setPipeline(this.hairPipelineOverNonEyes);
+                pass.setStencilReference(this.STENCIL_EYE_VALUE);
                 for (const draw of this.hairDrawsOverNonEyes) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
@@ -1875,9 +1822,9 @@ export class Engine {
                     }
                 }
             }
-            // 3c: Hair outlines - unified single pass without stencil testing
+            // 3c: Hair outlines
             if (this.hairOutlineDraws.length > 0) {
-                pass.setPipeline(this.hairUnifiedOutlinePipeline);
+                pass.setPipeline(this.hairOutlinePipeline);
                 for (const draw of this.hairOutlineDraws) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
@@ -1885,9 +1832,9 @@ export class Engine {
                     }
                 }
             }
-            // PASS 4: Transparent non-eye, non-hair
-            pass.setPipeline(this.pipeline);
-            for (const draw of this.transparentNonEyeNonHairDraws) {
+            // Pass 4: Transparent
+            pass.setPipeline(this.modelPipeline);
+            for (const draw of this.transparentDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
                     pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
@@ -1897,12 +1844,10 @@ export class Engine {
             this.drawOutlines(pass, true);
             pass.end();
             this.device.queue.submit([encoder.finish()]);
-            // Apply bloom post-processing
             this.applyBloom();
             this.updateStats(performance.now() - currentTime);
         }
     }
-    // Apply bloom post-processing
     applyBloom() {
         if (!this.sceneRenderTexture || !this.bloomExtractTexture) {
             return;
@@ -1917,9 +1862,9 @@ export class Engine {
         const encoder = this.device.createCommandEncoder();
         const width = this.canvas.width;
         const height = this.canvas.height;
-        const bloomWidth = Math.floor(width / 2);
-        const bloomHeight = Math.floor(height / 2);
-        // Pass 1: Extract bright areas (downsample to half resolution)
+        const bloomWidth = Math.floor(width / this.BLOOM_DOWNSCALE_FACTOR);
+        const bloomHeight = Math.floor(height / this.BLOOM_DOWNSCALE_FACTOR);
+        // Extract bright areas
         const extractPass = encoder.beginRenderPass({
             label: "bloom extract",
             colorAttachments: [
@@ -1935,8 +1880,8 @@ export class Engine {
         extractPass.setBindGroup(0, this.bloomExtractBindGroup);
         extractPass.draw(6, 1, 0, 0);
         extractPass.end();
-        // Pass 2: Horizontal blur
-        const hBlurData = new Float32Array(4); // vec2f + padding = 4 floats
+        // Horizontal blur
+        const hBlurData = new Float32Array(4);
         hBlurData[0] = 1.0;
         hBlurData[1] = 0.0;
         this.device.queue.writeBuffer(this.blurDirectionBuffer, 0, hBlurData);
@@ -1955,8 +1900,8 @@ export class Engine {
         blurHPass.setBindGroup(0, this.bloomBlurHBindGroup);
         blurHPass.draw(6, 1, 0, 0);
         blurHPass.end();
-        // Pass 3: Vertical blur
-        const vBlurData = new Float32Array(4); // vec2f + padding = 4 floats
+        // Vertical blur
+        const vBlurData = new Float32Array(4);
         vBlurData[0] = 0.0;
         vBlurData[1] = 1.0;
         this.device.queue.writeBuffer(this.blurDirectionBuffer, 0, vBlurData);
@@ -1975,7 +1920,7 @@ export class Engine {
         blurVPass.setBindGroup(0, this.bloomBlurVBindGroup);
         blurVPass.draw(6, 1, 0, 0);
         blurVPass.end();
-        // Pass 4: Compose scene + bloom to canvas
+        // Compose to canvas
         const composePass = encoder.beginRenderPass({
             label: "bloom compose",
             colorAttachments: [
@@ -1993,7 +1938,6 @@ export class Engine {
         composePass.end();
         this.device.queue.submit([encoder.finish()]);
     }
-    // Update camera uniform buffer each frame
     updateCameraUniforms() {
         const viewMatrix = this.camera.getViewMatrix();
         const projectionMatrix = this.camera.getProjectionMatrix();
@@ -2005,48 +1949,37 @@ export class Engine {
         this.cameraMatrixData[34] = cameraPos.z;
         this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData);
     }
-    // Update render target texture view
     updateRenderTarget() {
         const colorAttachment = this.renderPassDescriptor.colorAttachments[0];
         if (this.sampleCount > 1) {
-            // Resolve to scene render texture for post-processing
             colorAttachment.resolveTarget = this.sceneRenderTextureView;
         }
         else {
-            // Render directly to scene render texture
             colorAttachment.view = this.sceneRenderTextureView;
         }
     }
-    updateModelPose(deltaTime) {
+    updateModelPose(deltaTime, encoder) {
         this.currentModel.evaluatePose();
         const worldMats = this.currentModel.getBoneWorldMatrices();
         if (this.physics) {
             this.physics.step(deltaTime, worldMats, this.currentModel.getBoneInverseBindMatrices());
         }
         this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-        this.computeSkinMatrices();
+        this.computeSkinMatrices(encoder);
     }
-    // Compute skin matrices on GPU
-    computeSkinMatrices() {
+    computeSkinMatrices(encoder) {
         const boneCount = this.currentModel.getSkeleton().bones.length;
-        const workgroupSize = 64;
-        // Dispatch exactly enough threads for all bones (no bounds check needed)
-        const workgroupCount = Math.ceil(boneCount / workgroupSize);
-        // Bone count is written once in setupModelBuffers() and never changes
-        const encoder = this.device.createCommandEncoder();
+        const workgroupCount = Math.ceil(boneCount / this.COMPUTE_WORKGROUP_SIZE);
         const pass = encoder.beginComputePass();
         pass.setPipeline(this.skinMatrixComputePipeline);
         pass.setBindGroup(0, this.skinMatrixComputeBindGroup);
         pass.dispatchWorkgroups(workgroupCount);
         pass.end();
-        this.device.queue.submit([encoder.finish()]);
     }
-    // Draw outlines (opaque or transparent)
     drawOutlines(pass, transparent) {
         pass.setPipeline(this.outlinePipeline);
         if (transparent) {
-            // Draw transparent outlines (if any)
-            for (const draw of this.transparentNonEyeNonHairOutlineDraws) {
+            for (const draw of this.transparentOutlineDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
                     pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
@@ -2054,8 +1987,7 @@ export class Engine {
             }
         }
         else {
-            // Draw opaque outlines before main geometry
-            for (const draw of this.opaqueNonEyeNonHairOutlineDraws) {
+            for (const draw of this.opaqueOutlineDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
                     pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
@@ -2081,12 +2013,12 @@ export class Engine {
             this.framesSinceLastUpdate = 0;
             this.lastFpsUpdate = now;
         }
-        // Calculate GPU memory: textures + buffers + render targets
+        this.stats.gpuMemory = this.gpuMemoryMB;
+    }
+    calculateGpuMemory() {
         let textureMemoryBytes = 0;
-        for (const [path, size] of this.textureSizes.entries()) {
-            if (this.textureCache.has(path)) {
-                textureMemoryBytes += size.width * size.height * 4; // RGBA8 = 4 bytes per pixel
-            }
+        for (const texture of this.textureCache.values()) {
+            textureMemoryBytes += texture.width * texture.height * 4;
         }
         let bufferMemoryBytes = 0;
         if (this.vertexBuffer) {
@@ -2124,48 +2056,44 @@ export class Engine {
             if (skeleton)
                 bufferMemoryBytes += Math.max(256, skeleton.bones.length * 16 * 4);
         }
-        bufferMemoryBytes += 40 * 4; // cameraUniformBuffer
-        bufferMemoryBytes += 64 * 4; // lightUniformBuffer
-        bufferMemoryBytes += 32; // boneCountBuffer
-        bufferMemoryBytes += 32; // blurDirectionBuffer
-        bufferMemoryBytes += 32; // bloomIntensityBuffer
-        bufferMemoryBytes += 32; // bloomThresholdBuffer
+        bufferMemoryBytes += 40 * 4;
+        bufferMemoryBytes += 64 * 4;
+        bufferMemoryBytes += 32;
+        bufferMemoryBytes += 32;
+        bufferMemoryBytes += 32;
+        bufferMemoryBytes += 32;
         if (this.fullscreenQuadBuffer) {
-            bufferMemoryBytes += 24 * 4; // fullscreenQuadBuffer (6 vertices * 4 floats)
+            bufferMemoryBytes += 24 * 4;
         }
-        // Material uniform buffers: Float32Array(8) = 32 bytes each
-        const totalMaterialDraws = this.opaqueNonEyeNonHairDraws.length +
+        const totalMaterialDraws = this.opaqueDraws.length +
             this.eyeDraws.length +
             this.hairDrawsOverEyes.length +
             this.hairDrawsOverNonEyes.length +
-            this.transparentNonEyeNonHairDraws.length;
-        bufferMemoryBytes += totalMaterialDraws * 32; // Material uniform buffers (8 floats = 32 bytes)
-        // Outline material uniform buffers: Float32Array(8) = 32 bytes each
-        const totalOutlineDraws = this.opaqueNonEyeNonHairOutlineDraws.length +
+            this.transparentDraws.length;
+        bufferMemoryBytes += totalMaterialDraws * 32;
+        const totalOutlineDraws = this.opaqueOutlineDraws.length +
             this.eyeOutlineDraws.length +
             this.hairOutlineDraws.length +
-            this.transparentNonEyeNonHairOutlineDraws.length;
-        bufferMemoryBytes += totalOutlineDraws * 32; // Outline material uniform buffers
+            this.transparentOutlineDraws.length;
+        bufferMemoryBytes += totalOutlineDraws * 32;
         let renderTargetMemoryBytes = 0;
         if (this.multisampleTexture) {
             const width = this.canvas.width;
             const height = this.canvas.height;
-            renderTargetMemoryBytes += width * height * 4 * this.sampleCount; // multisample color
-            renderTargetMemoryBytes += width * height * 4; // depth (depth24plus-stencil8 = 4 bytes)
+            renderTargetMemoryBytes += width * height * 4 * this.sampleCount;
+            renderTargetMemoryBytes += width * height * 4;
         }
         if (this.sceneRenderTexture) {
             const width = this.canvas.width;
             const height = this.canvas.height;
-            renderTargetMemoryBytes += width * height * 4; // sceneRenderTexture (non-multisampled)
+            renderTargetMemoryBytes += width * height * 4;
         }
         if (this.bloomExtractTexture) {
-            const width = Math.floor(this.canvas.width / 2);
-            const height = Math.floor(this.canvas.height / 2);
-            renderTargetMemoryBytes += width * height * 4; // bloomExtractTexture
-            renderTargetMemoryBytes += width * height * 4; // bloomBlurTexture1
-            renderTargetMemoryBytes += width * height * 4; // bloomBlurTexture2
+            const width = Math.floor(this.canvas.width / this.BLOOM_DOWNSCALE_FACTOR);
+            const height = Math.floor(this.canvas.height / this.BLOOM_DOWNSCALE_FACTOR);
+            renderTargetMemoryBytes += width * height * 4 * 3;
         }
         const totalGPUMemoryBytes = textureMemoryBytes + bufferMemoryBytes + renderTargetMemoryBytes;
-        this.stats.gpuMemory = Math.round((totalGPUMemoryBytes / 1024 / 1024) * 100) / 100;
+        return Math.round((totalGPUMemoryBytes / 1024 / 1024) * 100) / 100;
     }
 }