reze-engine 0.2.10 → 0.2.12

package/dist/engine.js

@@ -1,5 +1,6 @@
 import { Camera } from "./camera";
 import { Quat, Vec3 } from "./math";
+import { Pool } from "./pool";
 import { PmxLoader } from "./pmx-loader";
 import { Physics } from "./physics";
 import { VMDLoader } from "./vmd-loader";
@@ -26,6 +27,7 @@ export class Engine {
         this.currentModel = null;
         this.modelDir = "";
         this.physics = null;
+        this.pool = null;
         this.textureCache = new Map();
         // Draw lists
         this.opaqueDraws = [];
@@ -53,6 +55,8 @@ export class Engine {
         this.animationFrames = [];
         this.animationTimeouts = [];
         this.gpuMemoryMB = 0;
+        this.hasAnimation = false; // Set to true when loadAnimation is called
+        this.playingAnimation = false; // Set to true when playAnimation is called
         this.canvas = canvas;
         if (options) {
             this.ambient = options.ambient ?? 1.0;
@@ -97,121 +101,121 @@ 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,
-          _padding1: f32,
-          rimColor: vec3f,
-          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise
-        };
-
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) normal: vec3f,
-          @location(1) uv: vec2f,
-          @location(2) worldPos: vec3f,
-        };
-
-        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-        @group(0) @binding(1) var<uniform> light: LightUniforms;
-        @group(0) @binding(2) var diffuseTexture: texture_2d<f32>;
-        @group(0) @binding(3) var diffuseSampler: sampler;
-        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
-        @group(0) @binding(5) var toonTexture: texture_2d<f32>;
-        @group(0) @binding(6) var toonSampler: sampler;
-        @group(0) @binding(7) var<uniform> material: MaterialUniforms;
-
-        @vertex fn vs(
-          @location(0) position: vec3f,
-          @location(1) normal: vec3f,
-          @location(2) uv: vec2f,
-          @location(3) joints0: vec4<u32>,
-          @location(4) weights0: vec4<f32>
-        ) -> VertexOutput {
-          var output: VertexOutput;
-          let pos4 = vec4f(position, 1.0);
-          
-          // Branchless weight normalization (avoids GPU branch divergence)
-          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
-          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
-          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
-          
-          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
-          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
-          for (var i = 0u; i < 4u; i++) {
-            let j = joints0[i];
-            let w = normalizedWeights[i];
-            let m = skinMats[j];
-            skinnedPos += (m * pos4) * w;
-            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
-            skinnedNrm += (r3 * normal) * w;
-          }
-          let worldPos = skinnedPos.xyz;
-          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
-          output.normal = normalize(skinnedNrm);
-          output.uv = uv;
-          output.worldPos = worldPos;
-          return output;
-        }
-
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          // Early alpha test - discard before expensive calculations
-          var finalAlpha = material.alpha * material.alphaMultiplier;
-          if (material.isOverEyes > 0.5) {
-            finalAlpha *= 0.5; // Hair over eyes gets 50% alpha
-          }
-          if (finalAlpha < 0.001) {
-            discard;
-          }
-          
-          let n = normalize(input.normal);
-          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
-
-          var lightAccum = vec3f(light.ambient);
-          let numLights = u32(light.lightCount);
-          for (var i = 0u; i < numLights; i++) {
-            let l = -light.lights[i].direction;
-            let nDotL = max(dot(n, l), 0.0);
-            let toonUV = vec2f(nDotL, 0.5);
-            let toonFactor = textureSample(toonTexture, toonSampler, toonUV).rgb;
-            let radiance = light.lights[i].color * light.lights[i].intensity;
-            lightAccum += toonFactor * radiance * nDotL;
-          }
-          
-          // Rim light calculation
-          let viewDir = normalize(camera.viewPos - input.worldPos);
-          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
-          rimFactor = rimFactor * rimFactor; // Optimized: direct multiply instead of pow(x, 2.0)
-          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
-          
-          let color = albedo * lightAccum + rimLight;
-          
-          return vec4f(color, finalAlpha);
-        }
+            code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct Light {
+          direction: vec3f,
+          _padding1: f32,
+          color: vec3f,
+          intensity: f32,
+        };
+
+        struct LightUniforms {
+          ambient: f32,
+          lightCount: f32,
+          _padding1: f32,
+          _padding2: f32,
+          lights: array<Light, 4>,
+        };
+
+        struct MaterialUniforms {
+          alpha: f32,
+          alphaMultiplier: f32,
+          rimIntensity: f32,
+          _padding1: f32,
+          rimColor: vec3f,
+          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise
+        };
+
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) normal: vec3f,
+          @location(1) uv: vec2f,
+          @location(2) worldPos: vec3f,
+        };
+
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(1) var<uniform> light: LightUniforms;
+        @group(0) @binding(2) var diffuseTexture: texture_2d<f32>;
+        @group(0) @binding(3) var diffuseSampler: sampler;
+        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
+        @group(0) @binding(5) var toonTexture: texture_2d<f32>;
+        @group(0) @binding(6) var toonSampler: sampler;
+        @group(0) @binding(7) var<uniform> material: MaterialUniforms;
+
+        @vertex fn vs(
+          @location(0) position: vec3f,
+          @location(1) normal: vec3f,
+          @location(2) uv: vec2f,
+          @location(3) joints0: vec4<u32>,
+          @location(4) weights0: vec4<f32>
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          let pos4 = vec4f(position, 1.0);
+          
+          // Branchless weight normalization (avoids GPU branch divergence)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
+          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          output.normal = normalize(skinnedNrm);
+          output.uv = uv;
+          output.worldPos = worldPos;
+          return output;
+        }
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          // Early alpha test - discard before expensive calculations
+          var finalAlpha = material.alpha * material.alphaMultiplier;
+          if (material.isOverEyes > 0.5) {
+            finalAlpha *= 0.5; // Hair over eyes gets 50% alpha
+          }
+          if (finalAlpha < 0.001) {
+            discard;
+          }
+          
+          let n = normalize(input.normal);
+          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
+
+          var lightAccum = vec3f(light.ambient);
+          let numLights = u32(light.lightCount);
+          for (var i = 0u; i < numLights; i++) {
+            let l = -light.lights[i].direction;
+            let nDotL = max(dot(n, l), 0.0);
+            let toonUV = vec2f(nDotL, 0.5);
+            let toonFactor = textureSample(toonTexture, toonSampler, toonUV).rgb;
+            let radiance = light.lights[i].color * light.lights[i].intensity;
+            lightAccum += toonFactor * radiance * nDotL;
+          }
+          
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = rimFactor * rimFactor; // Optimized: direct multiply instead of pow(x, 2.0)
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          
+          let color = albedo * lightAccum + rimLight;
+          
+          return vec4f(color, finalAlpha);
+        }
       `,
         });
         // Create explicit bind group layout for all pipelines using the main shader
@@ -301,73 +305,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({
@@ -571,45 +575,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
@@ -792,30 +796,30 @@ export class Engine {
     createSkinMatrixComputePipeline() {
         const computeShader = this.device.createShaderModule({
             label: "skin matrix compute",
-            code: /* wgsl */ `
-        struct BoneCountUniform {
-          count: u32,
-          _padding1: u32,
-          _padding2: u32,
-          _padding3: u32,
-          _padding4: vec4<u32>,
-        };
-        
-        @group(0) @binding(0) var<uniform> boneCount: BoneCountUniform;
-        @group(0) @binding(1) var<storage, read> worldMatrices: array<mat4x4f>;
-        @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
-        @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
-        
-        @compute @workgroup_size(64) // 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({
@@ -869,140 +873,140 @@ export class Engine {
         // Bloom extraction shader (extracts bright areas)
         const bloomExtractShader = this.device.createShaderModule({
             label: "bloom extract",
-            code: /* wgsl */ `
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) uv: vec2f,
-        };
-
-        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-          var output: VertexOutput;
-          // Generate fullscreen quad from vertex index
-          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
-          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
-          output.position = vec4f(x, y, 0.0, 1.0);
-          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
-          return output;
-        }
-
-        struct BloomExtractUniforms {
-          threshold: f32,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-          _padding4: f32,
-          _padding5: f32,
-          _padding6: f32,
-          _padding7: f32,
-        };
-
-        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
-        @group(0) @binding(1) var inputSampler: sampler;
-        @group(0) @binding(2) var<uniform> extractUniforms: BloomExtractUniforms;
-
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let color = textureSample(inputTexture, inputSampler, input.uv);
-          // Extract bright areas above threshold
-          let threshold = extractUniforms.threshold;
-          let bloom = max(vec3f(0.0), color.rgb - vec3f(threshold)) / max(0.001, 1.0 - threshold);
-          return vec4f(bloom, color.a);
-        }
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          // Generate fullscreen quad from vertex index
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BloomExtractUniforms {
+          threshold: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+          _padding7: f32,
+        };
+
+        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+        @group(0) @binding(1) var inputSampler: sampler;
+        @group(0) @binding(2) var<uniform> extractUniforms: BloomExtractUniforms;
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let color = textureSample(inputTexture, inputSampler, input.uv);
+          // Extract bright areas above threshold
+          let threshold = extractUniforms.threshold;
+          let bloom = max(vec3f(0.0), color.rgb - vec3f(threshold)) / max(0.001, 1.0 - threshold);
+          return vec4f(bloom, color.a);
+        }
       `,
         });
         // Bloom blur shader (gaussian blur - can be used for both horizontal and vertical)
         const bloomBlurShader = this.device.createShaderModule({
             label: "bloom blur",
-            code: /* wgsl */ `
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) uv: vec2f,
-        };
-
-        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-          var output: VertexOutput;
-          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
-          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
-          output.position = vec4f(x, y, 0.0, 1.0);
-          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
-          return output;
-        }
-
-        struct BlurUniforms {
-          direction: vec2f,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-          _padding4: f32,
-          _padding5: f32,
-          _padding6: f32,
-        };
-
-        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
-        @group(0) @binding(1) var inputSampler: sampler;
-        @group(0) @binding(2) var<uniform> blurUniforms: BlurUniforms;
-
-        // 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)
@@ -1227,6 +1231,36 @@ export class Engine {
         this.camera.aspect = this.canvas.width / this.canvas.height;
         this.camera.attachControl(this.canvas);
     }
+    // Create camera bind group layout for pool (camera-only)
+    createCameraBindGroupLayout() {
+        return this.device.createBindGroupLayout({
+            label: "camera bind group layout",
+            entries: [
+                {
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    buffer: {
+                        type: "uniform",
+                    },
+                },
+            ],
+        });
+    }
+    // Create camera bind group for pool
+    createCameraBindGroup(layout) {
+        return this.device.createBindGroup({
+            label: "camera bind group for pool",
+            layout: layout,
+            entries: [
+                {
+                    binding: 0,
+                    resource: {
+                        buffer: this.cameraUniformBuffer,
+                    },
+                },
+            ],
+        });
+    }
     // Step 5: Create lighting buffers
     setupLighting() {
         this.lightUniformBuffer = this.device.createBuffer({
@@ -1264,11 +1298,13 @@ export class Engine {
     async loadAnimation(url) {
         const frames = await VMDLoader.load(url);
         this.animationFrames = frames;
+        this.hasAnimation = true;
     }
     playAnimation() {
         if (this.animationFrames.length === 0)
             return;
         this.stopAnimation();
+        this.playingAnimation = true;
         const allBoneKeyFrames = [];
         for (const keyFrame of this.animationFrames) {
             for (const boneFrame of keyFrame.boneFrames) {
@@ -1318,9 +1354,9 @@ export class Engine {
                 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) {
+                this.currentModel.evaluatePose();
                 const worldMats = this.currentModel.getBoneWorldMatrices();
                 this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices());
                 // Upload matrices immediately so next frame shows correct pose
@@ -1362,6 +1398,7 @@ export class Engine {
             clearTimeout(timeoutId);
         }
         this.animationTimeouts = [];
+        this.playingAnimation = false;
     }
     getStats() {
         return { ...this.stats };
@@ -1412,6 +1449,14 @@ export class Engine {
         this.physics = new Physics(model.getRigidbodies(), model.getJoints());
         await this.setupModelBuffers(model);
     }
+    async addPool(options) {
+        if (!this.device) {
+            throw new Error("Engine must be initialized before adding pool");
+        }
+        const cameraLayout = this.createCameraBindGroupLayout();
+        this.pool = new Pool(this.device, cameraLayout, this.cameraUniformBuffer, options);
+        await this.pool.init();
+    }
     rotateBones(bones, rotations, durationMs) {
         this.currentModel?.rotateBones(bones, rotations, durationMs);
     }
@@ -1757,7 +1802,7 @@ export class Engine {
     }
     // Render strategy: 1) Opaque non-eye/hair 2) Eyes (stencil=1) 3) Hair (depth pre-pass + split by stencil) 4) Transparent 5) Bloom
     render() {
-        if (this.multisampleTexture && this.camera && this.device && this.currentModel) {
+        if (this.multisampleTexture && this.camera && this.device) {
             const currentTime = performance.now();
             const deltaTime = this.lastFrameTime > 0 ? (currentTime - this.lastFrameTime) / 1000 : 0.016;
             this.lastFrameTime = currentTime;
@@ -1766,92 +1811,116 @@ export class Engine {
             // Use single encoder for both compute and render (reduces sync points)
             const encoder = this.device.createCommandEncoder();
             this.updateModelPose(deltaTime, encoder);
+            // Hide model if animation is loaded but not playing yet (prevents A-pose flash)
+            // Still update physics and poses, just don't render visually
+            if (this.hasAnimation && !this.playingAnimation) {
+                // Submit encoder to ensure matrices are uploaded and physics initializes
+                this.device.queue.submit([encoder.finish()]);
+                return;
+            }
             const pass = encoder.beginRenderPass(this.renderPassDescriptor);
-            pass.setVertexBuffer(0, this.vertexBuffer);
-            pass.setVertexBuffer(1, this.jointsBuffer);
-            pass.setVertexBuffer(2, this.weightsBuffer);
-            pass.setIndexBuffer(this.indexBuffer, "uint32");
             this.drawCallCount = 0;
-            // Pass 1: Opaque
-            pass.setPipeline(this.modelPipeline);
-            for (const draw of this.opaqueDraws) {
-                if (draw.count > 0) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                    this.drawCallCount++;
-                }
-            }
-            // Pass 2: Eyes (writes stencil 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++;
-                }
+            // Render pool first if no model
+            if (this.pool && !this.currentModel) {
+                this.pool.render(pass);
+                this.drawCallCount++;
             }
-            // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
-            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 (this.currentModel) {
+                pass.setVertexBuffer(0, this.vertexBuffer);
+                pass.setVertexBuffer(1, this.jointsBuffer);
+                pass.setVertexBuffer(2, this.weightsBuffer);
+                pass.setIndexBuffer(this.indexBuffer, "uint32");
+                // 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++;
                     }
                 }
-                for (const draw of this.hairDrawsOverNonEyes) {
-                    if (draw.count > 0) {
-                        pass.setBindGroup(0, draw.bindGroup);
-                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                    }
+                // Pass 1.5: Pool (water plane) - render after opaque, before eyes
+                if (this.pool) {
+                    this.pool.render(pass, {
+                        vertexBuffer: this.vertexBuffer,
+                        jointsBuffer: this.jointsBuffer,
+                        weightsBuffer: this.weightsBuffer,
+                        indexBuffer: this.indexBuffer,
+                    });
+                    this.drawCallCount++;
                 }
-            }
-            // 3b: Hair shading (split by stencil for transparency over eyes)
-            if (this.hairDrawsOverEyes.length > 0) {
-                pass.setPipeline(this.hairPipelineOverEyes);
+                // 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.hairDrawsOverEyes) {
+                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++;
                     }
                 }
-            }
-            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++;
+                // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
+                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);
+                        }
                     }
                 }
-            }
-            // 3c: Hair outlines
-            if (this.hairOutlineDraws.length > 0) {
-                pass.setPipeline(this.hairOutlinePipeline);
-                for (const draw of this.hairOutlineDraws) {
+                // 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 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++;
                     }
                 }
+                this.drawOutlines(pass, true);
             }
-            // 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++;
-                }
-            }
-            this.drawOutlines(pass, true);
             pass.end();
             this.device.queue.submit([encoder.finish()]);
             this.applyBloom();