reze-engine 0.2.17 → 0.2.19

package/dist/engine.js

@@ -18,14 +18,15 @@ export class Engine {
         // Ambient light settings
         this.ambientColor = new Vec3(1.0, 1.0, 1.0);
         // Bloom settings
-        this.bloomThreshold = 0.01;
-        this.bloomIntensity = 0.12;
+        this.bloomThreshold = Engine.DEFAULT_BLOOM_THRESHOLD;
+        this.bloomIntensity = Engine.DEFAULT_BLOOM_INTENSITY;
         // Rim light settings
-        this.rimLightIntensity = 0.45;
+        this.rimLightIntensity = Engine.DEFAULT_RIM_LIGHT_INTENSITY;
         this.currentModel = null;
         this.modelDir = "";
         this.physics = null;
         this.textureCache = new Map();
+        this.vertexBufferNeedsUpdate = false;
         // Draw lists
         this.opaqueDraws = [];
         this.eyeDraws = [];
@@ -38,10 +39,9 @@ export class Engine {
         this.transparentOutlineDraws = [];
         this.lastFpsUpdate = performance.now();
         this.framesSinceLastUpdate = 0;
-        this.frameTimeSamples = [];
-        this.frameTimeSum = 0;
-        this.drawCallCount = 0;
         this.lastFrameTime = performance.now();
+        this.frameTimeSum = 0;
+        this.frameTimeCount = 0;
         this.stats = {
             fps: 0,
             frameTime: 0,
@@ -57,10 +57,10 @@ export class Engine {
         this.canvas = canvas;
         if (options) {
             this.ambientColor = options.ambientColor ?? new Vec3(1.0, 1.0, 1.0);
-            this.bloomIntensity = options.bloomIntensity ?? 0.12;
-            this.rimLightIntensity = options.rimLightIntensity ?? 0.45;
-            this.cameraDistance = options.cameraDistance ?? 26.6;
-            this.cameraTarget = options.cameraTarget ?? new Vec3(0, 12.5, 0);
+            this.bloomIntensity = options.bloomIntensity ?? Engine.DEFAULT_BLOOM_INTENSITY;
+            this.rimLightIntensity = options.rimLightIntensity ?? Engine.DEFAULT_RIM_LIGHT_INTENSITY;
+            this.cameraDistance = options.cameraDistance ?? Engine.DEFAULT_CAMERA_DISTANCE;
+            this.cameraTarget = options.cameraTarget ?? Engine.DEFAULT_CAMERA_TARGET;
         }
     }
     // Step 1: Get WebGPU device and context
@@ -85,7 +85,6 @@ export class Engine {
         this.setupCamera();
         this.setupLighting();
         this.createPipelines();
-        this.createFullscreenQuad();
         this.createBloomPipelines();
         this.setupResize();
     }
@@ -98,101 +97,99 @@ export class Engine {
         });
         const shaderModule = this.device.createShaderModule({
             label: "model shaders",
-            code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct LightUniforms {
-          ambientColor: vec3f,
-        };
-
-        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;
-
-          let lightAccum = light.ambientColor;
-          
-          // 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);
-        }
+            code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct LightUniforms {
+          ambientColor: vec3f,
+        };
+
+        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<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;
+
+          let lightAccum = light.ambientColor;
+          
+          // 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
@@ -204,9 +201,7 @@ export class Engine {
                 { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // diffuseTexture
                 { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // diffuseSampler
                 { binding: 4, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }, // skinMats
-                { binding: 5, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // toonTexture
-                { binding: 6, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // toonSampler
-                { binding: 7, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
+                { binding: 5, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
             ],
         });
         const mainPipelineLayout = this.device.createPipelineLayout({
@@ -282,73 +277,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);
-          
-          // 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;
-        }
+            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({
@@ -552,45 +547,45 @@ 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);
-          
-          // 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
-        }
+            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
@@ -638,165 +633,104 @@ export class Engine {
             },
             multisample: { count: this.sampleCount },
         });
-        // Hair pipeline for rendering over eyes (stencil == 1)
-        this.hairPipelineOverEyes = this.device.createRenderPipeline({
-            label: "hair pipeline (over eyes)",
-            layout: mainPipelineLayout,
-            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",
-                            },
+        // Hair pipelines for rendering over eyes vs non-eyes (only differ in stencil compare mode)
+        const createHairPipeline = (isOverEyes) => {
+            return this.device.createRenderPipeline({
+                label: `hair pipeline (${isOverEyes ? "over eyes" : "over non-eyes"})`,
+                layout: mainPipelineLayout,
+                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" },
+                            ],
                         },
-                    },
-                ],
-            },
-            primitive: { cullMode: "front" },
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: false, // Don't write depth (already written in pre-pass)
-                depthCompare: "less-equal", // More lenient than "equal" to avoid precision issues with MSAA
-                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",
+                        {
+                            arrayStride: 4 * 2,
+                            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+                        },
+                        {
+                            arrayStride: 4,
+                            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+                        },
+                    ],
                 },
-            },
-            multisample: { count: this.sampleCount },
-        });
-        // 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: [
-                    {
-                        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",
+                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: "front" },
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: false, // Don't write depth (already written in pre-pass)
-                depthCompare: "less-equal", // More lenient than "equal" to avoid precision issues with MSAA
-                stencilFront: {
-                    compare: "not-equal", // Only render where stencil != 1 (over non-eyes)
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
+                    ],
                 },
-                stencilBack: {
-                    compare: "not-equal",
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "keep",
+                primitive: { cullMode: "front" },
+                depthStencil: {
+                    format: "depth24plus-stencil8",
+                    depthWriteEnabled: false, // Don't write depth (already written in pre-pass)
+                    depthCompare: "less-equal", // More lenient than "equal" to avoid precision issues with MSAA
+                    stencilFront: {
+                        compare: isOverEyes ? "equal" : "not-equal", // Over eyes: stencil == 1, over non-eyes: stencil != 1
+                        failOp: "keep",
+                        depthFailOp: "keep",
+                        passOp: "keep",
+                    },
+                    stencilBack: {
+                        compare: isOverEyes ? "equal" : "not-equal",
+                        failOp: "keep",
+                        depthFailOp: "keep",
+                        passOp: "keep",
+                    },
                 },
-            },
-            multisample: { count: this.sampleCount },
-        });
+                multisample: { count: this.sampleCount },
+            });
+        };
+        this.hairPipelineOverEyes = createHairPipeline(true);
+        this.hairPipelineOverNonEyes = createHairPipeline(false);
     }
     // Create compute shader for skin matrix computation
     createSkinMatrixComputePipeline() {
         const computeShader = this.device.createShaderModule({
             label: "skin matrix compute",
-            code: /* wgsl */ `
-        struct BoneCountUniform {
-          count: u32,
-          _padding1: u32,
-          _padding2: u32,
-          _padding3: u32,
-          _padding4: vec4<u32>,
-        };
-        
-        @group(0) @binding(0) var<uniform> boneCount: BoneCountUniform;
-        @group(0) @binding(1) var<storage, read> worldMatrices: array<mat4x4f>;
-        @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
-        @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
-        
-        @compute @workgroup_size(64) // 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;
-        }
+            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({
@@ -807,183 +741,145 @@ export class Engine {
             },
         });
     }
-    // Create fullscreen quad for post-processing
-    createFullscreenQuad() {
-        // Fullscreen quad vertices: two triangles covering the entire screen - Format: position (x, y), uv (u, v)
-        const quadVertices = new Float32Array([
-            // Triangle 1
-            -1.0,
-            -1.0,
-            0.0,
-            0.0, // bottom-left
-            1.0,
-            -1.0,
-            1.0,
-            0.0, // bottom-right
-            -1.0,
-            1.0,
-            0.0,
-            1.0, // top-left
-            // Triangle 2
-            -1.0,
-            1.0,
-            0.0,
-            1.0, // top-left
-            1.0,
-            -1.0,
-            1.0,
-            0.0, // bottom-right
-            1.0,
-            1.0,
-            1.0,
-            1.0, // top-right
-        ]);
-        this.fullscreenQuadBuffer = this.device.createBuffer({
-            label: "fullscreen quad",
-            size: quadVertices.byteLength,
-            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-        });
-        this.device.queue.writeBuffer(this.fullscreenQuadBuffer, 0, quadVertices);
-    }
     // Create bloom post-processing pipelines
     createBloomPipelines() {
         // 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;
-
-        // 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;
-        }
+            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)
@@ -1162,10 +1058,11 @@ export class Engine {
                 format: this.presentationFormat,
                 usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
             });
-            this.sceneRenderTextureView = this.sceneRenderTexture.createView();
             // Setup bloom textures and bind groups
             this.setupBloom(width, height);
             const depthTextureView = this.depthTexture.createView();
+            // Cache the scene render texture view (only recreate on resize)
+            this.sceneRenderTextureView = this.sceneRenderTexture.createView();
             // Render scene to texture instead of directly to canvas
             const colorAttachment = this.sampleCount > 1
                 ? {
@@ -1472,6 +1369,22 @@ export class Engine {
     rotateBones(bones, rotations, durationMs) {
         this.currentModel?.rotateBones(bones, rotations, durationMs);
     }
+    setMorphWeight(name, weight, durationMs) {
+        if (!this.currentModel)
+            return;
+        this.currentModel.setMorphWeight(name, weight, durationMs);
+        if (!durationMs || durationMs === 0) {
+            this.vertexBufferNeedsUpdate = true;
+        }
+    }
+    updateVertexBuffer() {
+        if (!this.currentModel || !this.vertexBuffer)
+            return;
+        const vertices = this.currentModel.getVertices();
+        if (!vertices || vertices.length === 0)
+            return;
+        this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices);
+    }
     // Step 7: Create vertex, index, and joint buffers
     async setupModelBuffers(model) {
         this.currentModel = model;
@@ -1562,38 +1475,6 @@ export class Engine {
             const texture = await this.createTextureFromPath(path);
             return texture;
         };
-        const loadToonTexture = async (toonTextureIndex) => {
-            const texture = await loadTextureByIndex(toonTextureIndex);
-            if (texture)
-                return texture;
-            // Default toon texture fallback - cache it
-            const defaultToonPath = "__default_toon__";
-            const cached = this.textureCache.get(defaultToonPath);
-            if (cached)
-                return cached;
-            const defaultToonData = new Uint8Array(256 * 2 * 4);
-            for (let i = 0; i < 256; i++) {
-                const factor = i / 255.0;
-                const gray = Math.floor(128 + factor * 127);
-                defaultToonData[i * 4] = gray;
-                defaultToonData[i * 4 + 1] = gray;
-                defaultToonData[i * 4 + 2] = gray;
-                defaultToonData[i * 4 + 3] = 255;
-                defaultToonData[(256 + i) * 4] = gray;
-                defaultToonData[(256 + i) * 4 + 1] = gray;
-                defaultToonData[(256 + i) * 4 + 2] = gray;
-                defaultToonData[(256 + i) * 4 + 3] = 255;
-            }
-            const defaultToonTexture = this.device.createTexture({
-                label: "default toon texture",
-                size: [256, 2],
-                format: "rgba8unorm",
-                usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-            });
-            this.device.queue.writeTexture({ texture: defaultToonTexture }, defaultToonData, { bytesPerRow: 256 * 4 }, [256, 2]);
-            this.textureCache.set(defaultToonPath, defaultToonTexture);
-            return defaultToonTexture;
-        };
         this.opaqueDraws = [];
         this.eyeDraws = [];
         this.hairDrawsOverEyes = [];
@@ -1611,10 +1492,8 @@ export class Engine {
             const diffuseTexture = await loadTextureByIndex(mat.diffuseTextureIndex);
             if (!diffuseTexture)
                 throw new Error(`Material "${mat.name}" has no diffuse texture`);
-            const toonTexture = await loadToonTexture(mat.toonTextureIndex);
             const materialAlpha = mat.diffuse[3];
-            const EPSILON = 0.001;
-            const isTransparent = materialAlpha < 1.0 - EPSILON;
+            const isTransparent = materialAlpha < 1.0 - Engine.TRANSPARENCY_EPSILON;
             // Create material uniform data
             const materialUniformData = new Float32Array(8);
             materialUniformData[0] = materialAlpha;
@@ -1641,18 +1520,17 @@ export class Engine {
                     { 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: materialUniformBuffer } },
+                    { binding: 5, resource: { buffer: materialUniformBuffer } },
                 ],
             });
             if (mat.isEye) {
-                this.eyeDraws.push({
-                    count: indexCount,
-                    firstIndex: currentIndexOffset,
-                    bindGroup,
-                    isTransparent,
-                });
+                if (indexCount > 0) {
+                    this.eyeDraws.push({
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup,
+                    });
+                }
             }
             else if (mat.isHair) {
                 // Hair materials: create separate bind groups for over-eyes vs over-non-eyes
@@ -1681,42 +1559,42 @@ export class Engine {
                             { 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 } },
+                            { binding: 5, resource: { buffer: buffer } },
                         ],
                     });
                 };
                 const bindGroupOverEyes = createHairBindGroup(true);
                 const bindGroupOverNonEyes = createHairBindGroup(false);
-                this.hairDrawsOverEyes.push({
-                    count: indexCount,
-                    firstIndex: currentIndexOffset,
-                    bindGroup: bindGroupOverEyes,
-                    isTransparent,
-                });
-                this.hairDrawsOverNonEyes.push({
-                    count: indexCount,
-                    firstIndex: currentIndexOffset,
-                    bindGroup: bindGroupOverNonEyes,
-                    isTransparent,
-                });
+                if (indexCount > 0) {
+                    this.hairDrawsOverEyes.push({
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup: bindGroupOverEyes,
+                    });
+                    this.hairDrawsOverNonEyes.push({
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup: bindGroupOverNonEyes,
+                    });
+                }
             }
             else if (isTransparent) {
-                this.transparentDraws.push({
-                    count: indexCount,
-                    firstIndex: currentIndexOffset,
-                    bindGroup,
-                    isTransparent,
-                });
+                if (indexCount > 0) {
+                    this.transparentDraws.push({
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup,
+                    });
+                }
             }
             else {
-                this.opaqueDraws.push({
-                    count: indexCount,
-                    firstIndex: currentIndexOffset,
-                    bindGroup,
-                    isTransparent,
-                });
+                if (indexCount > 0) {
+                    this.opaqueDraws.push({
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup,
+                    });
+                }
             }
             // Edge flag is at bit 4 (0x10) in PMX format
             if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
@@ -1744,37 +1622,35 @@ export class Engine {
                         { binding: 2, resource: { buffer: this.skinMatrixBuffer } },
                     ],
                 });
-                if (mat.isEye) {
-                    this.eyeOutlineDraws.push({
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup: outlineBindGroup,
-                        isTransparent,
-                    });
-                }
-                else if (mat.isHair) {
-                    this.hairOutlineDraws.push({
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup: outlineBindGroup,
-                        isTransparent,
-                    });
-                }
-                else if (isTransparent) {
-                    this.transparentOutlineDraws.push({
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup: outlineBindGroup,
-                        isTransparent,
-                    });
-                }
-                else {
-                    this.opaqueOutlineDraws.push({
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup: outlineBindGroup,
-                        isTransparent,
-                    });
+                if (indexCount > 0) {
+                    if (mat.isEye) {
+                        this.eyeOutlineDraws.push({
+                            count: indexCount,
+                            firstIndex: currentIndexOffset,
+                            bindGroup: outlineBindGroup,
+                        });
+                    }
+                    else if (mat.isHair) {
+                        this.hairOutlineDraws.push({
+                            count: indexCount,
+                            firstIndex: currentIndexOffset,
+                            bindGroup: outlineBindGroup,
+                        });
+                    }
+                    else if (isTransparent) {
+                        this.transparentOutlineDraws.push({
+                            count: indexCount,
+                            firstIndex: currentIndexOffset,
+                            bindGroup: outlineBindGroup,
+                        });
+                    }
+                    else {
+                        this.opaqueOutlineDraws.push({
+                            count: indexCount,
+                            firstIndex: currentIndexOffset,
+                            bindGroup: outlineBindGroup,
+                        });
+                    }
                 }
             }
             currentIndexOffset += indexCount;
@@ -1811,6 +1687,56 @@ export class Engine {
             return null;
         }
     }
+    // Helper: Render eyes with stencil writing (for post-alpha-eye effect)
+    renderEyes(pass) {
+        pass.setPipeline(this.eyePipeline);
+        pass.setStencilReference(this.STENCIL_EYE_VALUE);
+        for (const draw of this.eyeDraws) {
+            pass.setBindGroup(0, draw.bindGroup);
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+        }
+    }
+    // Helper: Render hair with post-alpha-eye effect (depth pre-pass + stencil-based shading + outlines)
+    renderHair(pass) {
+        // Hair depth pre-pass (reduces overdraw via early depth rejection)
+        const hasHair = this.hairDrawsOverEyes.length > 0 || this.hairDrawsOverNonEyes.length > 0;
+        if (hasHair) {
+            pass.setPipeline(this.hairDepthPipeline);
+            for (const draw of this.hairDrawsOverEyes) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+            for (const draw of this.hairDrawsOverNonEyes) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+        // Hair shading (split by stencil for transparency over eyes)
+        if (this.hairDrawsOverEyes.length > 0) {
+            pass.setPipeline(this.hairPipelineOverEyes);
+            pass.setStencilReference(this.STENCIL_EYE_VALUE);
+            for (const draw of this.hairDrawsOverEyes) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+        if (this.hairDrawsOverNonEyes.length > 0) {
+            pass.setPipeline(this.hairPipelineOverNonEyes);
+            pass.setStencilReference(this.STENCIL_EYE_VALUE);
+            for (const draw of this.hairDrawsOverNonEyes) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+        // Hair outlines
+        if (this.hairOutlineDraws.length > 0) {
+            pass.setPipeline(this.hairOutlinePipeline);
+            for (const draw of this.hairOutlineDraws) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+    }
     // 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) {
@@ -1819,6 +1745,19 @@ export class Engine {
             this.lastFrameTime = currentTime;
             this.updateCameraUniforms();
             this.updateRenderTarget();
+            // Update model pose first (this may update morph weights via tweens)
+            // We need to do this before creating the encoder to ensure vertex buffer is ready
+            if (this.currentModel) {
+                const hasActiveMorphTweens = this.currentModel.evaluatePose();
+                if (hasActiveMorphTweens) {
+                    this.vertexBufferNeedsUpdate = true;
+                }
+            }
+            // Update vertex buffer if morphs changed
+            if (this.vertexBufferNeedsUpdate) {
+                this.updateVertexBuffer();
+                this.vertexBufferNeedsUpdate = false;
+            }
             // Use single encoder for both compute and render (reduces sync points)
             const encoder = this.device.createCommandEncoder();
             this.updateModelPose(deltaTime, encoder);
@@ -1830,7 +1769,6 @@ export class Engine {
                 return;
             }
             const pass = encoder.beginRenderPass(this.renderPassDescriptor);
-            this.drawCallCount = 0;
             if (this.currentModel) {
                 pass.setVertexBuffer(0, this.vertexBuffer);
                 pass.setVertexBuffer(1, this.jointsBuffer);
@@ -1839,81 +1777,19 @@ export class Engine {
                 // 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.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
                 }
                 // Pass 2: Eyes (writes stencil value for hair to test against)
-                pass.setPipeline(this.eyePipeline);
-                pass.setStencilReference(this.STENCIL_EYE_VALUE);
-                for (const draw of this.eyeDraws) {
-                    if (draw.count > 0) {
-                        pass.setBindGroup(0, draw.bindGroup);
-                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                        this.drawCallCount++;
-                    }
-                }
-                // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
+                this.renderEyes(pass);
                 this.drawOutlines(pass, false);
-                // 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) {
-                        if (draw.count > 0) {
-                            pass.setBindGroup(0, draw.bindGroup);
-                            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                        }
-                    }
-                    for (const draw of this.hairDrawsOverNonEyes) {
-                        if (draw.count > 0) {
-                            pass.setBindGroup(0, draw.bindGroup);
-                            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                        }
-                    }
-                }
-                // 3b: Hair shading (split by stencil for transparency over eyes)
-                if (this.hairDrawsOverEyes.length > 0) {
-                    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);
-                            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                            this.drawCallCount++;
-                        }
-                    }
-                }
-                if (this.hairDrawsOverNonEyes.length > 0) {
-                    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);
-                            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                            this.drawCallCount++;
-                        }
-                    }
-                }
-                // 3c: Hair outlines
-                if (this.hairOutlineDraws.length > 0) {
-                    pass.setPipeline(this.hairOutlinePipeline);
-                    for (const draw of this.hairOutlineDraws) {
-                        if (draw.count > 0) {
-                            pass.setBindGroup(0, draw.bindGroup);
-                            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                        }
-                    }
-                }
+                // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
+                this.renderHair(pass);
                 // 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);
-                        this.drawCallCount++;
-                    }
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
                 }
                 this.drawOutlines(pass, true);
             }
@@ -2021,6 +1897,7 @@ export class Engine {
         this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData);
     }
     updateRenderTarget() {
+        // Use cached view (only recreated on resize in handleResize)
         const colorAttachment = this.renderPassDescriptor.colorAttachments[0];
         if (this.sampleCount > 1) {
             colorAttachment.resolveTarget = this.sceneRenderTextureView;
@@ -2030,7 +1907,8 @@ export class Engine {
         }
     }
     updateModelPose(deltaTime, encoder) {
-        this.currentModel.evaluatePose();
+        // Note: evaluatePose is called earlier in render() to update vertex buffer before encoder creation
+        // Here we just get the matrices and update physics/compute
         const worldMats = this.currentModel.getBoneWorldMatrices();
         if (this.physics) {
             this.physics.step(deltaTime, worldMats, this.currentModel.getBoneInverseBindMatrices());
@@ -2049,40 +1927,44 @@ export class Engine {
     }
     drawOutlines(pass, transparent) {
         pass.setPipeline(this.outlinePipeline);
-        if (transparent) {
-            for (const draw of this.transparentOutlineDraws) {
-                if (draw.count > 0) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                }
-            }
-        }
-        else {
-            for (const draw of this.opaqueOutlineDraws) {
-                if (draw.count > 0) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                }
-            }
+        const draws = transparent ? this.transparentOutlineDraws : this.opaqueOutlineDraws;
+        for (const draw of draws) {
+            pass.setBindGroup(0, draw.bindGroup);
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
         }
     }
     updateStats(frameTime) {
+        // Simplified frame time tracking - rolling average with fixed window
         const maxSamples = 60;
-        this.frameTimeSamples.push(frameTime);
         this.frameTimeSum += frameTime;
-        if (this.frameTimeSamples.length > maxSamples) {
-            const removed = this.frameTimeSamples.shift();
-            this.frameTimeSum -= removed;
+        this.frameTimeCount++;
+        if (this.frameTimeCount > maxSamples) {
+            // Maintain rolling window by subtracting oldest sample estimate
+            const avg = this.frameTimeSum / maxSamples;
+            this.frameTimeSum -= avg;
+            this.frameTimeCount = maxSamples;
         }
-        const avgFrameTime = this.frameTimeSum / this.frameTimeSamples.length;
-        this.stats.frameTime = Math.round(avgFrameTime * 100) / 100;
+        this.stats.frameTime =
+            Math.round((this.frameTimeSum / this.frameTimeCount) * Engine.STATS_FRAME_TIME_ROUNDING) /
+                Engine.STATS_FRAME_TIME_ROUNDING;
+        // FPS tracking
         const now = performance.now();
         this.framesSinceLastUpdate++;
         const elapsed = now - this.lastFpsUpdate;
-        if (elapsed >= 1000) {
-            this.stats.fps = Math.round((this.framesSinceLastUpdate / elapsed) * 1000);
+        if (elapsed >= Engine.STATS_FPS_UPDATE_INTERVAL_MS) {
+            this.stats.fps = Math.round((this.framesSinceLastUpdate / elapsed) * Engine.STATS_FPS_UPDATE_INTERVAL_MS);
             this.framesSinceLastUpdate = 0;
             this.lastFpsUpdate = now;
         }
     }
 }
+// Default values
+Engine.DEFAULT_BLOOM_THRESHOLD = 0.01;
+Engine.DEFAULT_BLOOM_INTENSITY = 0.12;
+Engine.DEFAULT_RIM_LIGHT_INTENSITY = 0.45;
+Engine.DEFAULT_CAMERA_DISTANCE = 26.6;
+Engine.DEFAULT_CAMERA_TARGET = new Vec3(0, 12.5, 0);
+Engine.HAIR_OVER_EYES_ALPHA = 0.5;
+Engine.TRANSPARENCY_EPSILON = 0.001;
+Engine.STATS_FPS_UPDATE_INTERVAL_MS = 1000;
+Engine.STATS_FRAME_TIME_ROUNDING = 100;