reze-engine 0.1.15 → 0.2.0

package/dist/engine.js

@@ -1,7 +1,8 @@
 import { Camera } from "./camera";
-import { Vec3 } from "./math";
+import { Quat, Vec3 } from "./math";
 import { PmxLoader } from "./pmx-loader";
 import { Physics } from "./physics";
+import { VMDLoader } from "./vmd-loader";
 export class Engine {
     constructor(canvas) {
         this.cameraMatrixData = new Float32Array(36);
@@ -34,6 +35,8 @@ export class Engine {
         };
         this.animationFrameId = null;
         this.renderLoopCallback = null;
+        this.animationFrames = [];
+        this.animationTimeouts = [];
         this.opaqueNonEyeNonHairDraws = [];
         this.eyeDraws = [];
         this.hairDrawsOverEyes = [];
@@ -81,131 +84,128 @@ export class Engine {
         });
         const shaderModule = this.device.createShaderModule({
             label: "model shaders",
-            code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct Light {
-          direction: vec3f,
-          _padding1: f32,
-          color: vec3f,
-          intensity: f32,
-        };
-
-        struct LightUniforms {
-          ambient: f32,
-          lightCount: f32,
-          _padding1: f32,
-          _padding2: f32,
-          lights: array<Light, 4>,
-        };
-
-        struct MaterialUniforms {
-          alpha: f32,
-          alphaMultiplier: f32,
-          rimIntensity: f32,
-          rimPower: f32,
-          rimColor: vec3f,
-          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;
-          
-          // Dynamic branching: adjust alpha based on whether we're over eyes
-          // This allows single-pass hair rendering instead of two separate passes
-          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,
+          rimPower: f32,
+          rimColor: vec3f,
+          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise
+        };
+
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) normal: vec3f,
+          @location(1) uv: vec2f,
+          @location(2) worldPos: vec3f,
+        };
+
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(1) var<uniform> light: LightUniforms;
+        @group(0) @binding(2) var diffuseTexture: texture_2d<f32>;
+        @group(0) @binding(3) var diffuseSampler: sampler;
+        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
+        @group(0) @binding(5) var toonTexture: texture_2d<f32>;
+        @group(0) @binding(6) var toonSampler: sampler;
+        @group(0) @binding(7) var<uniform> material: MaterialUniforms;
+
+        @vertex fn vs(
+          @location(0) position: vec3f,
+          @location(1) normal: vec3f,
+          @location(2) uv: vec2f,
+          @location(3) joints0: vec4<u32>,
+          @location(4) weights0: vec4<f32>
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          let pos4 = vec4f(position, 1.0);
+          
+          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          output.normal = normalize(skinnedNrm);
+          output.uv = uv;
+          output.worldPos = worldPos;
+          return output;
+        }
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let n = normalize(input.normal);
+          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
+
+          var lightAccum = vec3f(light.ambient);
+          let numLights = u32(light.lightCount);
+          for (var i = 0u; i < numLights; i++) {
+            let l = -light.lights[i].direction;
+            let nDotL = max(dot(n, l), 0.0);
+            let toonUV = vec2f(nDotL, 0.5);
+            let toonFactor = textureSample(toonTexture, toonSampler, toonUV).rgb;
+            let radiance = light.lights[i].color * light.lights[i].intensity;
+            lightAccum += toonFactor * radiance * nDotL;
+          }
+          
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = pow(rimFactor, material.rimPower);
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          
+          let color = albedo * lightAccum + rimLight;
+          
+          var finalAlpha = material.alpha * material.alphaMultiplier;
+          if (material.isOverEyes > 0.5) {
+            finalAlpha *= 0.5; // Hair over eyes gets 50% alpha
+          }
+          
+          if (finalAlpha < 0.001) {
+            discard;
+          }
+          
+          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), finalAlpha);
+        }
       `,
         });
         // Create explicit bind group layout for all pipelines using the main shader
-        // This ensures compatibility across all pipelines (main, eye, hair multiply, hair opaque)
         this.hairBindGroupLayout = this.device.createBindGroupLayout({
             label: "shared material bind group layout",
             entries: [
@@ -293,79 +293,77 @@ export class Engine {
         });
         const outlineShaderModule = this.device.createShaderModule({
             label: "outline shaders",
-            code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct MaterialUniforms {
-          edgeColor: vec4f,
-          edgeSize: f32,
-          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;
-          
-          // Dynamic branching: adjust alpha for hair outlines over eyes
-          // This allows single-pass outline rendering instead of two separate passes
-          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);
+          
+          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          let worldNormal = normalize(skinnedNrm);
+          
+          // MMD invert hull: expand vertices outward along normals
+          let scaleFactor = 0.01;
+          let expandedPos = worldPos + worldNormal * material.edgeSize * scaleFactor;
+          output.position = camera.projection * camera.view * vec4f(expandedPos, 1.0);
+          return output;
+        }
+
+        @fragment fn fs() -> @location(0) vec4f {
+          var color = material.edgeColor;
+          
+          if (material.isOverEyes > 0.5) {
+            color.a *= 0.5; // Hair outlines over eyes get 50% alpha
+          }
+          
+          return color;
+        }
       `,
         });
         this.outlinePipeline = this.device.createRenderPipeline({
@@ -431,165 +429,7 @@ export class Engine {
                 count: this.sampleCount,
             },
         });
-        // Hair outline pipeline: draws hair outlines over non-eyes (stencil != 1) - Drawn after hair geometry, so depth testing ensures outlines only appear where hair exists
-        this.hairOutlinePipeline = this.device.createRenderPipeline({
-            label: "hair outline pipeline",
-            layout: outlinePipelineLayout,
-            vertex: {
-                module: outlineShaderModule,
-                buffers: [
-                    {
-                        arrayStride: 8 * 4,
-                        attributes: [
-                            {
-                                shaderLocation: 0,
-                                offset: 0,
-                                format: "float32x3",
-                            },
-                            {
-                                shaderLocation: 1,
-                                offset: 3 * 4,
-                                format: "float32x3",
-                            },
-                        ],
-                    },
-                    {
-                        arrayStride: 4 * 2,
-                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-                    },
-                    {
-                        arrayStride: 4,
-                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-                    },
-                ],
-            },
-            fragment: {
-                module: outlineShaderModule,
-                targets: [
-                    {
-                        format: this.presentationFormat,
-                        blend: {
-                            color: {
-                                srcFactor: "src-alpha",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                            alpha: {
-                                srcFactor: "one",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: {
-                cullMode: "back",
-            },
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: false, // Don't write depth - let hair geometry control depth
-                depthCompare: "less-equal", // Only draw where hair depth exists
-                stencilFront: {
-                    compare: "not-equal", // Only render where stencil != 1 (not over eyes)
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
-                stencilBack: {
-                    compare: "not-equal",
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
-            },
-            multisample: {
-                count: this.sampleCount,
-            },
-        });
-        // Hair outline pipeline for over eyes: draws where stencil == 1, but only where hair depth exists - Uses depth compare "equal" with a small bias to only appear where hair geometry exists
-        this.hairOutlineOverEyesPipeline = this.device.createRenderPipeline({
-            label: "hair outline over eyes pipeline",
-            layout: outlinePipelineLayout,
-            vertex: {
-                module: outlineShaderModule,
-                buffers: [
-                    {
-                        arrayStride: 8 * 4,
-                        attributes: [
-                            {
-                                shaderLocation: 0,
-                                offset: 0,
-                                format: "float32x3",
-                            },
-                            {
-                                shaderLocation: 1,
-                                offset: 3 * 4,
-                                format: "float32x3",
-                            },
-                        ],
-                    },
-                    {
-                        arrayStride: 4 * 2,
-                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-                    },
-                    {
-                        arrayStride: 4,
-                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-                    },
-                ],
-            },
-            fragment: {
-                module: outlineShaderModule,
-                targets: [
-                    {
-                        format: this.presentationFormat,
-                        blend: {
-                            color: {
-                                srcFactor: "src-alpha",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                            alpha: {
-                                srcFactor: "one",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: {
-                cullMode: "back",
-            },
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: false, // Don't write depth
-                depthCompare: "less-equal", // Draw where outline depth <= existing depth (hair depth)
-                depthBias: -0.0001, // Small negative bias to bring outline slightly closer for depth test
-                depthBiasSlopeScale: 0.0,
-                depthBiasClamp: 0.0,
-                stencilFront: {
-                    compare: "equal", // Only render where stencil == 1 (over eyes)
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
-                stencilBack: {
-                    compare: "equal",
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
-            },
-            multisample: {
-                count: this.sampleCount,
-            },
-        });
-        // Unified hair outline pipeline: single pass without stencil testing
-        // Uses depth test "less-equal" to draw everywhere hair exists
-        // Shader branches on isOverEyes uniform to adjust alpha dynamically
-        // This eliminates the need for two separate outline passes
+        // Unified hair outline pipeline: single pass without stencil testing, uses depth test "less-equal" to draw everywhere hair exists
         this.hairUnifiedOutlinePipeline = this.device.createRenderPipeline({
             label: "unified hair outline pipeline",
             layout: outlinePipelineLayout,
@@ -656,137 +496,6 @@ export class Engine {
                 count: this.sampleCount,
             },
         });
-        // Unified hair pipeline - can be used for both over-eyes and over-non-eyes
-        // The difference is controlled by stencil state and alpha multiplier in material uniform
-        this.hairMultiplyPipeline = this.device.createRenderPipeline({
-            label: "hair pipeline (over eyes)",
-            layout: sharedPipelineLayout,
-            vertex: {
-                module: shaderModule,
-                buffers: [
-                    {
-                        arrayStride: 8 * 4,
-                        attributes: [
-                            { shaderLocation: 0, offset: 0, format: "float32x3" },
-                            { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
-                            { shaderLocation: 2, offset: 6 * 4, format: "float32x2" },
-                        ],
-                    },
-                    {
-                        arrayStride: 4 * 2,
-                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-                    },
-                    {
-                        arrayStride: 4,
-                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-                    },
-                ],
-            },
-            fragment: {
-                module: shaderModule,
-                targets: [
-                    {
-                        format: this.presentationFormat,
-                        blend: {
-                            color: {
-                                srcFactor: "src-alpha",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                            alpha: {
-                                srcFactor: "one",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: { cullMode: "none" },
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: true, // 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) - uses same shader, different stencil state
-        this.hairOpaquePipeline = this.device.createRenderPipeline({
-            label: "hair pipeline (over non-eyes)",
-            layout: sharedPipelineLayout,
-            vertex: {
-                module: shaderModule,
-                buffers: [
-                    {
-                        arrayStride: 8 * 4,
-                        attributes: [
-                            { shaderLocation: 0, offset: 0, format: "float32x3" },
-                            { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
-                            { shaderLocation: 2, offset: 6 * 4, format: "float32x2" },
-                        ],
-                    },
-                    {
-                        arrayStride: 4 * 2,
-                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-                    },
-                    {
-                        arrayStride: 4,
-                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-                    },
-                ],
-            },
-            fragment: {
-                module: shaderModule,
-                targets: [
-                    {
-                        format: this.presentationFormat,
-                        blend: {
-                            color: {
-                                srcFactor: "src-alpha",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                            alpha: {
-                                srcFactor: "one",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: { cullMode: "none" },
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: true,
-                depthCompare: "less",
-                stencilFront: {
-                    compare: "not-equal", // Only render where stencil != 1
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
-                stencilBack: {
-                    compare: "not-equal",
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
-                },
-            },
-            multisample: { count: this.sampleCount },
-        });
         // Eye overlay pipeline (renders after opaque, writes stencil)
         this.eyePipeline = this.device.createRenderPipeline({
             label: "eye overlay pipeline",
@@ -855,57 +564,52 @@ 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;
-        }
-
-        // Minimal fragment shader - returns transparent, no color writes (writeMask: 0)
-        // Required because render pass has color attachments
-        // Depth is still written even though we don't write color
-        @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);
+          
+          // Normalize weights
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          let clipPos = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          return clipPos;
+        }
+
+        @fragment fn fs() -> @location(0) vec4f {
+          return vec4f(0.0, 0.0, 0.0, 0.0); // Transparent - color writes disabled via writeMask
+        }
       `,
         });
-        // Hair depth pre-pass pipeline (depth-only, no color writes)
-        // This eliminates most overdraw by rejecting fragments early before expensive shading
-        // Note: Must have a color target to match render pass, but we disable all color writes
+        // 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,
@@ -947,11 +651,7 @@ export class Engine {
             },
             multisample: { count: this.sampleCount },
         });
-        // Unified hair pipeline: single pass with dynamic branching in shader
-        // Uses stencil testing to filter fragments, then shader branches on isOverEyes uniform
-        // This eliminates the need for separate pipelines - same shader, different stencil states
-        // We create two variants: one for over-eyes (stencil == 1) and one for over-non-eyes (stencil != 1)
-        // Unified pipeline for hair over eyes (stencil == 1)
+        // 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,
@@ -1086,31 +786,31 @@ export class Engine {
     createSkinMatrixComputePipeline() {
         const computeShader = this.device.createShaderModule({
             label: "skin matrix compute",
-            code: /* wgsl */ `
-        struct BoneCountUniform {
-          count: u32,
-          _padding1: u32,
-          _padding2: u32,
-          _padding3: u32,
-          _padding4: vec4<u32>,
-        };
-        
-        @group(0) @binding(0) var<uniform> boneCount: BoneCountUniform;
-        @group(0) @binding(1) var<storage, read> worldMatrices: array<mat4x4f>;
-        @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
-        @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
-        
-        @compute @workgroup_size(64)
-        fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
-          let boneIndex = globalId.x;
-          // Bounds check: we dispatch workgroups (64 threads each), so some threads may be out of range
-          if (boneIndex >= boneCount.count) {
-            return;
-          }
-          let worldMat = worldMatrices[boneIndex];
-          let invBindMat = inverseBindMatrices[boneIndex];
-          skinMatrices[boneIndex] = worldMat * invBindMat;
-        }
+            code: /* wgsl */ `
+        struct BoneCountUniform {
+          count: u32,
+          _padding1: u32,
+          _padding2: u32,
+          _padding3: u32,
+          _padding4: vec4<u32>,
+        };
+        
+        @group(0) @binding(0) var<uniform> boneCount: BoneCountUniform;
+        @group(0) @binding(1) var<storage, read> worldMatrices: array<mat4x4f>;
+        @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
+        @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
+        
+        @compute @workgroup_size(64)
+        fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
+          let boneIndex = globalId.x;
+          // Bounds check: we dispatch workgroups (64 threads each), so some threads may be out of range
+          if (boneIndex >= boneCount.count) {
+            return;
+          }
+          let worldMat = worldMatrices[boneIndex];
+          let invBindMat = inverseBindMatrices[boneIndex];
+          skinMatrices[boneIndex] = worldMat * invBindMat;
+        }
       `,
         });
         this.skinMatrixComputePipeline = this.device.createComputePipeline({
@@ -1164,143 +864,143 @@ export class Engine {
         // Bloom extraction shader (extracts bright areas)
         const bloomExtractShader = this.device.createShaderModule({
             label: "bloom extract",
-            code: /* wgsl */ `
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) uv: vec2f,
-        };
-
-        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-          var output: VertexOutput;
-          // Generate fullscreen quad from vertex index
-          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
-          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
-          output.position = vec4f(x, y, 0.0, 1.0);
-          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
-          return output;
-        }
-
-        struct BloomExtractUniforms {
-          threshold: f32,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-          _padding4: f32,
-          _padding5: f32,
-          _padding6: f32,
-          _padding7: f32,
-        };
-
-        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
-        @group(0) @binding(1) var inputSampler: sampler;
-        @group(0) @binding(2) var<uniform> extractUniforms: BloomExtractUniforms;
-
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let color = textureSample(inputTexture, inputSampler, input.uv);
-          // Extract bright areas above threshold
-          let threshold = extractUniforms.threshold;
-          let bloom = max(vec3f(0.0), color.rgb - vec3f(threshold)) / max(0.001, 1.0 - threshold);
-          return vec4f(bloom, color.a);
-        }
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          // Generate fullscreen quad from vertex index
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BloomExtractUniforms {
+          threshold: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+          _padding7: f32,
+        };
+
+        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+        @group(0) @binding(1) var inputSampler: sampler;
+        @group(0) @binding(2) var<uniform> extractUniforms: BloomExtractUniforms;
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let color = textureSample(inputTexture, inputSampler, input.uv);
+          // Extract bright areas above threshold
+          let threshold = extractUniforms.threshold;
+          let bloom = max(vec3f(0.0), color.rgb - vec3f(threshold)) / max(0.001, 1.0 - threshold);
+          return vec4f(bloom, color.a);
+        }
       `,
         });
         // Bloom blur shader (gaussian blur - can be used for both horizontal and vertical)
         const bloomBlurShader = this.device.createShaderModule({
             label: "bloom blur",
-            code: /* wgsl */ `
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) uv: vec2f,
-        };
-
-        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-          var output: VertexOutput;
-          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
-          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
-          output.position = vec4f(x, y, 0.0, 1.0);
-          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
-          return output;
-        }
-
-        struct BlurUniforms {
-          direction: vec2f,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-          _padding4: f32,
-          _padding5: f32,
-          _padding6: f32,
-        };
-
-        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
-        @group(0) @binding(1) var inputSampler: sampler;
-        @group(0) @binding(2) var<uniform> blurUniforms: BlurUniforms;
-
-        // 9-tap gaussian blur
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let texelSize = 1.0 / vec2f(textureDimensions(inputTexture));
-          var result = vec4f(0.0);
-          
-          // Gaussian weights for 9-tap filter
-          let weights = array<f32, 9>(
-            0.01621622, 0.05405405, 0.12162162,
-            0.19459459, 0.22702703,
-            0.19459459, 0.12162162, 0.05405405, 0.01621622
-          );
-          
-          let offsets = array<f32, 9>(-4.0, -3.0, -2.0, -1.0, 0.0, 1.0, 2.0, 3.0, 4.0);
-          
-          for (var i = 0u; i < 9u; i++) {
-            let offset = offsets[i] * texelSize * blurUniforms.direction;
-            result += textureSample(inputTexture, inputSampler, input.uv + offset) * weights[i];
-          }
-          
-          return result;
-        }
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BlurUniforms {
+          direction: vec2f,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+        };
+
+        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+        @group(0) @binding(1) var inputSampler: sampler;
+        @group(0) @binding(2) var<uniform> blurUniforms: BlurUniforms;
+
+        // 9-tap gaussian blur
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let texelSize = 1.0 / vec2f(textureDimensions(inputTexture));
+          var result = vec4f(0.0);
+          
+          // Gaussian weights for 9-tap filter
+          let weights = array<f32, 9>(
+            0.01621622, 0.05405405, 0.12162162,
+            0.19459459, 0.22702703,
+            0.19459459, 0.12162162, 0.05405405, 0.01621622
+          );
+          
+          let offsets = array<f32, 9>(-4.0, -3.0, -2.0, -1.0, 0.0, 1.0, 2.0, 3.0, 4.0);
+          
+          for (var i = 0u; i < 9u; i++) {
+            let offset = offsets[i] * texelSize * blurUniforms.direction;
+            result += textureSample(inputTexture, inputSampler, input.uv + offset) * weights[i];
+          }
+          
+          return result;
+        }
       `,
         });
         // Bloom composition shader (combines original scene with bloom)
         const bloomComposeShader = this.device.createShaderModule({
             label: "bloom compose",
-            code: /* wgsl */ `
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) uv: vec2f,
-        };
-
-        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-          var output: VertexOutput;
-          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
-          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
-          output.position = vec4f(x, y, 0.0, 1.0);
-          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
-          return output;
-        }
-
-        struct BloomComposeUniforms {
-          intensity: f32,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-          _padding4: f32,
-          _padding5: f32,
-          _padding6: f32,
-          _padding7: f32,
-        };
-
-        @group(0) @binding(0) var sceneTexture: texture_2d<f32>;
-        @group(0) @binding(1) var sceneSampler: sampler;
-        @group(0) @binding(2) var bloomTexture: texture_2d<f32>;
-        @group(0) @binding(3) var bloomSampler: sampler;
-        @group(0) @binding(4) var<uniform> composeUniforms: BloomComposeUniforms;
-
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let scene = textureSample(sceneTexture, sceneSampler, input.uv);
-          let bloom = textureSample(bloomTexture, bloomSampler, input.uv);
-          // Additive blending with intensity control
-          let result = scene.rgb + bloom.rgb * composeUniforms.intensity;
-          return vec4f(result, scene.a);
-        }
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BloomComposeUniforms {
+          intensity: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+          _padding7: f32,
+        };
+
+        @group(0) @binding(0) var sceneTexture: texture_2d<f32>;
+        @group(0) @binding(1) var sceneSampler: sampler;
+        @group(0) @binding(2) var bloomTexture: texture_2d<f32>;
+        @group(0) @binding(3) var bloomSampler: sampler;
+        @group(0) @binding(4) var<uniform> composeUniforms: BloomComposeUniforms;
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let scene = textureSample(sceneTexture, sceneSampler, input.uv);
+          let bloom = textureSample(bloomTexture, bloomSampler, input.uv);
+          // Additive blending with intensity control
+          let result = scene.rgb + bloom.rgb * composeUniforms.intensity;
+          return vec4f(result, scene.a);
+        }
       `,
         });
         // Create uniform buffer for blur direction (minimum 32 bytes for WebGPU)
@@ -1508,9 +1208,9 @@ export class Engine {
                     depthClearValue: 1.0,
                     depthLoadOp: "clear",
                     depthStoreOp: "store",
-                    stencilClearValue: 0, // New: clear stencil to 0
-                    stencilLoadOp: "clear", // New: clear stencil each frame
-                    stencilStoreOp: "store", // New: store stencil
+                    stencilClearValue: 0,
+                    stencilLoadOp: "clear",
+                    stencilStoreOp: "discard", // Discard stencil after frame to save bandwidth (we only use it during rendering)
                 },
             };
             this.camera.aspect = width / height;
@@ -1561,6 +1261,107 @@ export class Engine {
     setAmbient(intensity) {
         this.lightData[0] = intensity;
     }
+    async loadAnimation(url) {
+        const frames = await VMDLoader.load(url);
+        this.animationFrames = frames;
+        console.log(this.animationFrames);
+    }
+    playAnimation() {
+        if (this.animationFrames.length === 0)
+            return;
+        this.stopAnimation();
+        const allBoneKeyFrames = [];
+        for (const keyFrame of this.animationFrames) {
+            for (const boneFrame of keyFrame.boneFrames) {
+                allBoneKeyFrames.push({
+                    boneName: boneFrame.boneName,
+                    time: keyFrame.time,
+                    rotation: boneFrame.rotation,
+                });
+            }
+        }
+        const boneKeyFramesByBone = new Map();
+        for (const boneKeyFrame of allBoneKeyFrames) {
+            if (!boneKeyFramesByBone.has(boneKeyFrame.boneName)) {
+                boneKeyFramesByBone.set(boneKeyFrame.boneName, []);
+            }
+            boneKeyFramesByBone.get(boneKeyFrame.boneName).push(boneKeyFrame);
+        }
+        for (const keyFrames of boneKeyFramesByBone.values()) {
+            keyFrames.sort((a, b) => a.time - b.time);
+        }
+        const time0Rotations = [];
+        const bonesWithTime0 = new Set();
+        for (const [boneName, keyFrames] of boneKeyFramesByBone.entries()) {
+            if (keyFrames.length > 0 && keyFrames[0].time === 0) {
+                time0Rotations.push({
+                    boneName: boneName,
+                    rotation: keyFrames[0].rotation,
+                });
+                bonesWithTime0.add(boneName);
+            }
+        }
+        if (this.currentModel) {
+            if (time0Rotations.length > 0) {
+                const boneNames = time0Rotations.map((r) => r.boneName);
+                const rotations = time0Rotations.map((r) => r.rotation);
+                this.rotateBones(boneNames, rotations, 0);
+            }
+            const skeleton = this.currentModel.getSkeleton();
+            const bonesToReset = [];
+            for (const bone of skeleton.bones) {
+                if (!bonesWithTime0.has(bone.name)) {
+                    bonesToReset.push(bone.name);
+                }
+            }
+            if (bonesToReset.length > 0) {
+                const identityQuat = new Quat(0, 0, 0, 1);
+                const identityQuats = new Array(bonesToReset.length).fill(identityQuat);
+                this.rotateBones(bonesToReset, identityQuats, 0);
+            }
+            this.currentModel.evaluatePose();
+            // Reset physics immediately and upload matrices to prevent A-pose flash
+            if (this.physics) {
+                const worldMats = this.currentModel.getBoneWorldMatrices();
+                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();
+            }
+        }
+        for (const [_, keyFrames] of boneKeyFramesByBone.entries()) {
+            for (let i = 0; i < keyFrames.length; i++) {
+                const boneKeyFrame = keyFrames[i];
+                const previousBoneKeyFrame = i > 0 ? keyFrames[i - 1] : null;
+                if (boneKeyFrame.time === 0)
+                    continue;
+                let durationMs = 0;
+                if (i === 0) {
+                    durationMs = boneKeyFrame.time * 1000;
+                }
+                else if (previousBoneKeyFrame) {
+                    durationMs = (boneKeyFrame.time - previousBoneKeyFrame.time) * 1000;
+                }
+                const scheduleTime = i > 0 && previousBoneKeyFrame ? previousBoneKeyFrame.time : 0;
+                const delayMs = scheduleTime * 1000;
+                if (delayMs <= 0) {
+                    this.rotateBones([boneKeyFrame.boneName], [boneKeyFrame.rotation], durationMs);
+                }
+                else {
+                    const timeoutId = window.setTimeout(() => {
+                        this.rotateBones([boneKeyFrame.boneName], [boneKeyFrame.rotation], durationMs);
+                    }, delayMs);
+                    this.animationTimeouts.push(timeoutId);
+                }
+            }
+        }
+    }
+    stopAnimation() {
+        for (const timeoutId of this.animationTimeouts) {
+            clearTimeout(timeoutId);
+        }
+        this.animationTimeouts = [];
+    }
     getStats() {
         return { ...this.stats };
     }
@@ -1584,6 +1385,7 @@ export class Engine {
     }
     dispose() {
         this.stopRenderLoop();
+        this.stopAnimation();
         if (this.camera)
             this.camera.detachControl();
         if (this.resizeObserver) {
@@ -1758,7 +1560,7 @@ export class Engine {
             materialUniformData[4] = this.rimLightColor[0]; // rimColor.r
             materialUniformData[5] = this.rimLightColor[1]; // rimColor.g
             materialUniformData[6] = this.rimLightColor[2]; // rimColor.b
-            materialUniformData[7] = 0.0; // isOverEyes: 0.0 for non-hair materials
+            materialUniformData[7] = 0.0;
             const materialUniformBuffer = this.device.createBuffer({
                 label: `material uniform: ${mat.name}`,
                 size: materialUniformData.byteLength,
@@ -1790,9 +1592,7 @@ export class Engine {
                 });
             }
             else if (mat.isHair) {
-                // For hair materials, create a single bind group that will be used with the unified pipeline
-                // The shader will dynamically branch based on isOverEyes uniform
-                // We still need two uniform buffers (one for each render mode) but can reuse the same bind group structure
+                // 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
@@ -1801,15 +1601,15 @@ export class Engine {
                 materialUniformDataHair[4] = this.rimLightColor[0]; // rimColor.r
                 materialUniformDataHair[5] = this.rimLightColor[1]; // rimColor.g
                 materialUniformDataHair[6] = this.rimLightColor[2]; // rimColor.b
-                materialUniformDataHair[7] = 0.0; // isOverEyes: will be set per draw call
-                // Create uniform buffers for both modes (we'll update them per frame)
+                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; // isOverEyes = 1.0
+                materialUniformDataOverEyes[7] = 1.0;
                 this.device.queue.writeBuffer(materialUniformBufferOverEyes, 0, materialUniformDataOverEyes);
                 const materialUniformBufferOverNonEyes = this.device.createBuffer({
                     label: `material uniform (over non-eyes): ${mat.name}`,
@@ -1817,9 +1617,9 @@ export class Engine {
                     usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
                 });
                 const materialUniformDataOverNonEyes = new Float32Array(materialUniformDataHair);
-                materialUniformDataOverNonEyes[7] = 0.0; // isOverEyes = 0.0
+                materialUniformDataOverNonEyes[7] = 0.0;
                 this.device.queue.writeBuffer(materialUniformBufferOverNonEyes, 0, materialUniformDataOverNonEyes);
-                // Create bind groups for both modes (they share everything except the uniform buffer)
+                // Create bind groups for both modes
                 const bindGroupOverEyes = this.device.createBindGroup({
                     label: `material bind group (over eyes): ${mat.name}`,
                     layout: this.hairBindGroupLayout,
@@ -1848,7 +1648,7 @@ export class Engine {
                         { binding: 7, resource: { buffer: materialUniformBufferOverNonEyes } },
                     ],
                 });
-                // Store both bind groups - we'll use them with the unified pipeline
+                // Store both bind groups for unified pipeline
                 this.hairDrawsOverEyes.push({
                     count: matCount,
                     firstIndex: runningFirstIndex,
@@ -1886,7 +1686,7 @@ export class Engine {
                 materialUniformData[2] = mat.edgeColor[2]; // edgeColor.b
                 materialUniformData[3] = mat.edgeColor[3]; // edgeColor.a
                 materialUniformData[4] = mat.edgeSize;
-                materialUniformData[5] = mat.isHair ? 0.0 : 0.0; // isOverEyes: 0.0 for all (unified pipeline doesn't use stencil)
+                materialUniformData[5] = 0.0; // isOverEyes: 0.0 for all (unified pipeline doesn't use stencil)
                 materialUniformData[6] = 0.0; // _padding1
                 materialUniformData[7] = 0.0; // _padding2
                 const materialUniformBuffer = this.device.createBuffer({
@@ -2002,8 +1802,7 @@ export class Engine {
             pass.setVertexBuffer(2, this.weightsBuffer);
             pass.setIndexBuffer(this.indexBuffer, "uint32");
             this.drawCallCount = 0;
-            // PASS 1: Opaque non-eye, non-hair (face, body, etc)
-            // this.drawOutlines(pass, false) // Opaque outlines
+            // PASS 1: Opaque non-eye, non-hair
             pass.setPipeline(this.pipeline);
             for (const draw of this.opaqueNonEyeNonHairDraws) {
                 if (draw.count > 0) {
@@ -2022,18 +1821,13 @@ export class Engine {
                     this.drawCallCount++;
                 }
             }
-            // PASS 3: Hair rendering - optimized with depth pre-pass and unified pipeline
-            // Depth pre-pass: render hair depth-only to eliminate overdraw early
-            // Then render shaded hair once with depth test "equal" to only shade visible fragments
-            this.drawOutlines(pass, false); // Opaque outlines
-            // 3a: Hair depth pre-pass (depth-only, no color writes)
-            // This eliminates most overdraw by rejecting fragments early before expensive shading
+            // PASS 3: Hair rendering with depth pre-pass and unified pipeline
+            this.drawOutlines(pass, false);
+            // 3a: Hair depth pre-pass (eliminates overdraw by rejecting fragments early)
             if (this.hairDrawsOverEyes.length > 0 || this.hairDrawsOverNonEyes.length > 0) {
                 pass.setPipeline(this.hairDepthPipeline);
-                // Render all hair materials for depth (no stencil test needed for depth pass)
                 for (const draw of this.hairDrawsOverEyes) {
                     if (draw.count > 0) {
-                        // Use the same bind group structure (camera, skin matrices) for depth pass
                         pass.setBindGroup(0, draw.bindGroup);
                         pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
                     }
@@ -2045,10 +1839,7 @@ export class Engine {
                     }
                 }
             }
-            // 3b: Hair shading pass - unified pipeline with dynamic branching
-            // Uses depth test "equal" to only render where depth was written in pre-pass
-            // Shader branches on isOverEyes uniform to adjust alpha dynamically
-            // This eliminates one full geometry pass compared to the old approach
+            // 3b: Hair shading pass with unified pipeline and dynamic branching
             if (this.hairDrawsOverEyes.length > 0) {
                 pass.setPipeline(this.hairUnifiedPipelineOverEyes);
                 pass.setStencilReference(1);
@@ -2072,9 +1863,6 @@ export class Engine {
                 }
             }
             // 3c: Hair outlines - unified single pass without stencil testing
-            // Uses depth test "less-equal" to draw everywhere hair exists
-            // Shader branches on isOverEyes uniform to adjust alpha dynamically (currently always 0.0)
-            // This eliminates the need for two separate outline passes
             if (this.hairOutlineDraws.length > 0) {
                 pass.setPipeline(this.hairUnifiedOutlinePipeline);
                 for (const draw of this.hairOutlineDraws) {
@@ -2093,7 +1881,7 @@ export class Engine {
                     this.drawCallCount++;
                 }
             }
-            this.drawOutlines(pass, true); // Transparent outlines
+            this.drawOutlines(pass, true);
             pass.end();
             this.device.queue.submit([encoder.finish()]);
             // Apply bloom post-processing
@@ -2216,19 +2004,13 @@ export class Engine {
             colorAttachment.view = this.sceneRenderTextureView;
         }
     }
-    // Update model pose and physics
     updateModelPose(deltaTime) {
-        // Step 1: Animation evaluation (computes matrices to CPU memory, no upload yet)
         this.currentModel.evaluatePose();
-        // Step 2: Get world matrices (still in CPU memory)
         const worldMats = this.currentModel.getBoneWorldMatrices();
-        // Step 3: Physics modifies matrices in-place
         if (this.physics) {
             this.physics.step(deltaTime, worldMats, this.currentModel.getBoneInverseBindMatrices());
         }
-        // Step 4: Upload ONCE with final result (animation + physics)
         this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-        // Step 5: GPU skinning
         this.computeSkinMatrices();
     }
     // Compute skin matrices on GPU