reze-engine 0.3.5 → 0.3.7

package/dist/engine.js

@@ -1,8 +1,6 @@
 import { Camera } from "./camera";
-import { Quat, Vec3 } from "./math";
+import { Vec3 } from "./math";
 import { PmxLoader } from "./pmx-loader";
-import { Physics } from "./physics";
-import { Player } from "./player";
 export class Engine {
     constructor(canvas, options) {
         this.cameraMatrixData = new Float32Array(36);
@@ -13,7 +11,6 @@ export class Engine {
         this.sampleCount = 4;
         // Constants
         this.STENCIL_EYE_VALUE = 1;
-        this.COMPUTE_WORKGROUP_SIZE = 64;
         this.BLOOM_DOWNSCALE_FACTOR = 2;
         // Ambient light settings
         this.ambientColor = new Vec3(1.0, 1.0, 1.0);
@@ -24,19 +21,10 @@ export class Engine {
         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 = [];
-        this.hairDrawsOverEyes = [];
-        this.hairDrawsOverNonEyes = [];
-        this.transparentDraws = [];
-        this.opaqueOutlineDraws = [];
-        this.eyeOutlineDraws = [];
-        this.hairOutlineDraws = [];
-        this.transparentOutlineDraws = [];
+        // Unified draw call list
+        this.drawCalls = [];
         this.lastFpsUpdate = performance.now();
         this.framesSinceLastUpdate = 0;
         this.lastFrameTime = performance.now();
@@ -48,9 +36,6 @@ export class Engine {
         };
         this.animationFrameId = null;
         this.renderLoopCallback = null;
-        this.player = new Player();
-        this.hasAnimation = false; // Set to true when loadAnimation is called
-        this.animationStartTime = 0; // Track when animation first started (for A-pose prevention)
         this.canvas = canvas;
         if (options) {
             this.ambientColor = options.ambientColor ?? new Vec3(1.0, 1.0, 1.0);
@@ -85,6 +70,26 @@ export class Engine {
         this.createBloomPipelines();
         this.setupResize();
     }
+    createRenderPipeline(config) {
+        return this.device.createRenderPipeline({
+            label: config.label,
+            layout: config.layout,
+            vertex: {
+                module: config.shaderModule,
+                buffers: config.vertexBuffers,
+            },
+            fragment: config.fragmentTarget
+                ? {
+                    module: config.shaderModule,
+                    entryPoint: config.fragmentEntryPoint,
+                    targets: [config.fragmentTarget],
+                }
+                : undefined,
+            primitive: { cullMode: config.cullMode ?? "none" },
+            depthStencil: config.depthStencil,
+            multisample: config.multisample ?? { count: this.sampleCount },
+        });
+    }
     createPipelines() {
         this.materialSampler = this.device.createSampler({
             magFilter: "linear",
@@ -92,6 +97,74 @@ export class Engine {
             addressModeU: "repeat",
             addressModeV: "repeat",
         });
+        // Shared vertex buffer layouts
+        const fullVertexBuffers = [
+            {
+                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" }],
+            },
+        ];
+        const outlineVertexBuffers = [
+            {
+                arrayStride: 8 * 4,
+                attributes: [
+                    { shaderLocation: 0, offset: 0, format: "float32x3" },
+                    { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
+                ],
+            },
+            {
+                arrayStride: 4 * 2,
+                attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+            },
+            {
+                arrayStride: 4,
+                attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+            },
+        ];
+        const depthOnlyVertexBuffers = [
+            {
+                arrayStride: 8 * 4,
+                attributes: [
+                    { shaderLocation: 0, offset: 0, format: "float32x3" },
+                    { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
+                ],
+            },
+            {
+                arrayStride: 4 * 2,
+                attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+            },
+            {
+                arrayStride: 4,
+                attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+            },
+        ];
+        const standardBlend = {
+            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",
+                },
+            },
+        };
         const shaderModule = this.device.createShaderModule({
             label: "model shaders",
             code: /* wgsl */ `
@@ -205,59 +278,18 @@ export class Engine {
             label: "main pipeline layout",
             bindGroupLayouts: [this.mainBindGroupLayout],
         });
-        this.modelPipeline = this.device.createRenderPipeline({
+        this.modelPipeline = this.createRenderPipeline({
             label: "model pipeline",
             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",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: { cullMode: "none" },
+            shaderModule,
+            vertexBuffers: fullVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "none",
             depthStencil: {
                 format: "depth24plus-stencil8",
                 depthWriteEnabled: true,
                 depthCompare: "less-equal",
             },
-            multisample: {
-                count: this.sampleCount,
-            },
         });
         // Create bind group layout for outline pipelines
         this.outlineBindGroupLayout = this.device.createBindGroupLayout({
@@ -343,194 +375,56 @@ export class Engine {
         }
       `,
         });
-        this.outlinePipeline = this.device.createRenderPipeline({
+        this.outlinePipeline = this.createRenderPipeline({
             label: "outline pipeline",
             layout: outlinePipelineLayout,
-            vertex: {
-                module: outlineShaderModule,
-                buffers: [
-                    {
-                        arrayStride: 8 * 4,
-                        attributes: [
-                            {
-                                shaderLocation: 0,
-                                offset: 0,
-                                format: "float32x3",
-                            },
-                            {
-                                shaderLocation: 1,
-                                offset: 3 * 4,
-                                format: "float32x3",
-                            },
-                        ],
-                    },
-                    {
-                        arrayStride: 4 * 2,
-                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-                    },
-                    {
-                        arrayStride: 4,
-                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-                    },
-                ],
-            },
-            fragment: {
-                module: outlineShaderModule,
-                targets: [
-                    {
-                        format: this.presentationFormat,
-                        blend: {
-                            color: {
-                                srcFactor: "src-alpha",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                            alpha: {
-                                srcFactor: "one",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: {
-                cullMode: "back",
-            },
+            shaderModule: outlineShaderModule,
+            vertexBuffers: outlineVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "back",
             depthStencil: {
                 format: "depth24plus-stencil8",
                 depthWriteEnabled: true,
                 depthCompare: "less-equal",
             },
-            multisample: {
-                count: this.sampleCount,
-            },
         });
         // Hair outline pipeline
-        this.hairOutlinePipeline = this.device.createRenderPipeline({
+        this.hairOutlinePipeline = this.createRenderPipeline({
             label: "hair outline pipeline",
             layout: outlinePipelineLayout,
-            vertex: {
-                module: outlineShaderModule,
-                buffers: [
-                    {
-                        arrayStride: 8 * 4,
-                        attributes: [
-                            {
-                                shaderLocation: 0,
-                                offset: 0,
-                                format: "float32x3",
-                            },
-                            {
-                                shaderLocation: 1,
-                                offset: 3 * 4,
-                                format: "float32x3",
-                            },
-                        ],
-                    },
-                    {
-                        arrayStride: 4 * 2,
-                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-                    },
-                    {
-                        arrayStride: 4,
-                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-                    },
-                ],
-            },
-            fragment: {
-                module: outlineShaderModule,
-                targets: [
-                    {
-                        format: this.presentationFormat,
-                        blend: {
-                            color: {
-                                srcFactor: "src-alpha",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                            alpha: {
-                                srcFactor: "one",
-                                dstFactor: "one-minus-src-alpha",
-                                operation: "add",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: {
-                cullMode: "back",
-            },
+            shaderModule: outlineShaderModule,
+            vertexBuffers: outlineVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "back",
             depthStencil: {
                 format: "depth24plus-stencil8",
-                depthWriteEnabled: false, // Don't write depth - let hair geometry control depth
-                depthCompare: "less-equal", // Only draw where hair depth exists (no stencil test needed)
-                depthBias: -0.0001, // Small negative bias to bring outline slightly closer for depth test
+                depthWriteEnabled: false,
+                depthCompare: "less-equal",
+                depthBias: -0.0001,
                 depthBiasSlopeScale: 0.0,
                 depthBiasClamp: 0.0,
             },
-            multisample: {
-                count: this.sampleCount,
-            },
         });
         // Eye overlay pipeline (renders after opaque, writes stencil)
-        this.eyePipeline = this.device.createRenderPipeline({
+        this.eyePipeline = this.createRenderPipeline({
             label: "eye overlay pipeline",
             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",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: { cullMode: "front" },
+            shaderModule,
+            vertexBuffers: fullVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "front",
             depthStencil: {
                 format: "depth24plus-stencil8",
-                depthWriteEnabled: true, // Write depth to occlude back of head
-                depthCompare: "less-equal", // More lenient to reduce precision conflicts
-                depthBias: -0.00005, // Reduced bias to minimize conflicts while still occluding back face
+                depthWriteEnabled: true,
+                depthCompare: "less-equal",
+                depthBias: -0.00005,
                 depthBiasSlopeScale: 0.0,
                 depthBiasClamp: 0.0,
                 stencilFront: {
                     compare: "always",
                     failOp: "keep",
                     depthFailOp: "keep",
-                    passOp: "replace", // Write stencil value 1
+                    passOp: "replace",
                 },
                 stencilBack: {
                     compare: "always",
@@ -539,7 +433,6 @@ export class Engine {
                     passOp: "replace",
                 },
             },
-            multisample: { count: this.sampleCount },
         });
         // Depth-only shader for hair pre-pass (reduces overdraw by early depth rejection)
         const depthOnlyShaderModule = this.device.createShaderModule({
@@ -586,103 +479,41 @@ export class Engine {
       `,
         });
         // Hair depth pre-pass pipeline: depth-only with color writes disabled to eliminate overdraw
-        this.hairDepthPipeline = this.device.createRenderPipeline({
+        this.hairDepthPipeline = this.createRenderPipeline({
             label: "hair depth pre-pass",
             layout: mainPipelineLayout,
-            vertex: {
-                module: depthOnlyShaderModule,
-                buffers: [
-                    {
-                        arrayStride: 8 * 4,
-                        attributes: [
-                            { shaderLocation: 0, offset: 0, format: "float32x3" },
-                            { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
-                        ],
-                    },
-                    {
-                        arrayStride: 4 * 2,
-                        attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-                    },
-                    {
-                        arrayStride: 4,
-                        attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-                    },
-                ],
-            },
-            fragment: {
-                module: depthOnlyShaderModule,
-                entryPoint: "fs",
-                targets: [
-                    {
-                        format: this.presentationFormat,
-                        writeMask: 0, // Disable all color writes - we only care about depth
-                    },
-                ],
+            shaderModule: depthOnlyShaderModule,
+            vertexBuffers: depthOnlyVertexBuffers,
+            fragmentTarget: {
+                format: this.presentationFormat,
+                writeMask: 0,
             },
-            primitive: { cullMode: "front" },
+            fragmentEntryPoint: "fs",
+            cullMode: "front",
             depthStencil: {
                 format: "depth24plus-stencil8",
                 depthWriteEnabled: true,
-                depthCompare: "less-equal", // Match the color pass compare mode for consistency
+                depthCompare: "less-equal",
                 depthBias: 0.0,
                 depthBiasSlopeScale: 0.0,
                 depthBiasClamp: 0.0,
             },
-            multisample: { count: this.sampleCount },
         });
         // Hair pipelines for rendering over eyes vs non-eyes (only differ in stencil compare mode)
         const createHairPipeline = (isOverEyes) => {
-            return this.device.createRenderPipeline({
+            return this.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" },
-                            ],
-                        },
-                        {
-                            arrayStride: 4 * 2,
-                            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-                        },
-                        {
-                            arrayStride: 4,
-                            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-                        },
-                    ],
-                },
-                fragment: {
-                    module: shaderModule,
-                    targets: [
-                        {
-                            format: this.presentationFormat,
-                            blend: {
-                                color: {
-                                    srcFactor: "src-alpha",
-                                    dstFactor: "one-minus-src-alpha",
-                                    operation: "add",
-                                },
-                                alpha: {
-                                    srcFactor: "one",
-                                    dstFactor: "one-minus-src-alpha",
-                                    operation: "add",
-                                },
-                            },
-                        },
-                    ],
-                },
-                primitive: { cullMode: "front" },
+                shaderModule,
+                vertexBuffers: fullVertexBuffers,
+                fragmentTarget: standardBlend,
+                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
+                    depthWriteEnabled: false,
+                    depthCompare: "less-equal",
                     stencilFront: {
-                        compare: isOverEyes ? "equal" : "not-equal", // Over eyes: stencil == 1, over non-eyes: stencil != 1
+                        compare: isOverEyes ? "equal" : "not-equal",
                         failOp: "keep",
                         depthFailOp: "keep",
                         passOp: "keep",
@@ -694,50 +525,11 @@ export class Engine {
                         passOp: "keep",
                     },
                 },
-                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;
-        }
-      `,
-        });
-        this.skinMatrixComputePipeline = this.device.createComputePipeline({
-            label: "skin matrix compute pipeline",
-            layout: "auto",
-            compute: {
-                module: computeShader,
-            },
-        });
-    }
     // Create bloom post-processing pipelines
     createBloomPipelines() {
         // Bloom extraction shader (extracts bright areas)
@@ -1120,131 +912,24 @@ export class Engine {
         this.lightData[3] = 0.0; // Padding for vec3f alignment
     }
     async loadAnimation(url) {
-        await this.player.loadVmd(url);
-        this.hasAnimation = true;
-        // Show first frame (time 0) immediately
-        if (this.currentModel) {
-            const initialPose = this.player.getPoseAtTime(0);
-            this.applyPose(initialPose);
-            // Reset bones without time 0 keyframes
-            const skeleton = this.currentModel.getSkeleton();
-            const bonesWithPose = new Set(initialPose.boneRotations.keys());
-            const bonesToReset = [];
-            for (const bone of skeleton.bones) {
-                if (!bonesWithPose.has(bone.name)) {
-                    bonesToReset.push(bone.name);
-                }
-            }
-            if (bonesToReset.length > 0) {
-                const identityQuat = new Quat(0, 0, 0, 1);
-                const identityQuats = new Array(bonesToReset.length).fill(identityQuat);
-                this.rotateBones(bonesToReset, identityQuats, 0);
-            }
-            // Update model pose and physics
-            this.currentModel.evaluatePose();
-            if (this.physics) {
-                const worldMats = this.currentModel.getBoneWorldMatrices();
-                this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices());
-                // Upload matrices immediately
-                this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-                const encoder = this.device.createCommandEncoder();
-                this.computeSkinMatrices(encoder);
-                this.device.queue.submit([encoder.finish()]);
-            }
-        }
+        if (!this.currentModel)
+            return;
+        await this.currentModel.loadVmd(url);
     }
     playAnimation() {
-        if (!this.hasAnimation || !this.currentModel)
-            return;
-        const wasPaused = this.player.isPausedState();
-        const wasPlaying = this.player.isPlayingState();
-        // Only reset pose and physics if starting from beginning (not resuming)
-        if (!wasPlaying && !wasPaused) {
-            // Get initial pose at time 0
-            const initialPose = this.player.getPoseAtTime(0);
-            this.applyPose(initialPose);
-            // Reset bones without time 0 keyframes
-            const skeleton = this.currentModel.getSkeleton();
-            const bonesWithPose = new Set(initialPose.boneRotations.keys());
-            const bonesToReset = [];
-            for (const bone of skeleton.bones) {
-                if (!bonesWithPose.has(bone.name)) {
-                    bonesToReset.push(bone.name);
-                }
-            }
-            if (bonesToReset.length > 0) {
-                const identityQuat = new Quat(0, 0, 0, 1);
-                const identityQuats = new Array(bonesToReset.length).fill(identityQuat);
-                this.rotateBones(bonesToReset, identityQuats, 0);
-            }
-            // 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
-                this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-                const encoder = this.device.createCommandEncoder();
-                this.computeSkinMatrices(encoder);
-                this.device.queue.submit([encoder.finish()]);
-            }
-        }
-        // Start playback (or resume if paused)
-        this.player.play();
-        if (this.animationStartTime === 0) {
-            this.animationStartTime = performance.now();
-        }
+        this.currentModel?.playAnimation();
     }
     stopAnimation() {
-        this.player.stop();
+        this.currentModel?.stopAnimation();
     }
     pauseAnimation() {
-        this.player.pause();
+        this.currentModel?.pauseAnimation();
     }
     seekAnimation(time) {
-        if (!this.currentModel || !this.hasAnimation)
-            return;
-        this.player.seek(time);
-        // Immediately apply pose at seeked time
-        const pose = this.player.getPoseAtTime(time);
-        this.applyPose(pose);
-        // Update model pose and physics
-        this.currentModel.evaluatePose();
-        if (this.physics) {
-            const worldMats = this.currentModel.getBoneWorldMatrices();
-            this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices());
-            // Upload matrices immediately
-            this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-            const encoder = this.device.createCommandEncoder();
-            this.computeSkinMatrices(encoder);
-            this.device.queue.submit([encoder.finish()]);
-        }
+        this.currentModel?.seekAnimation(time);
     }
     getAnimationProgress() {
-        return this.player.getProgress();
-    }
-    /**
-     * Apply animation pose to model
-     */
-    applyPose(pose) {
-        if (!this.currentModel)
-            return;
-        // Apply bone rotations
-        if (pose.boneRotations.size > 0) {
-            const boneNames = Array.from(pose.boneRotations.keys());
-            const rotations = Array.from(pose.boneRotations.values());
-            this.rotateBones(boneNames, rotations, 0);
-        }
-        // Apply bone translations
-        if (pose.boneTranslations.size > 0) {
-            const boneNames = Array.from(pose.boneTranslations.keys());
-            const translations = Array.from(pose.boneTranslations.values());
-            this.moveBones(boneNames, translations, 0);
-        }
-        // Apply morph weights
-        for (const [morphName, weight] of pose.morphWeights.entries()) {
-            this.setMorphWeight(morphName, weight, 0);
-        }
+        return this.currentModel?.getAnimationProgress() ?? { current: 0, duration: 0, percentage: 0 };
     }
     getStats() {
         return { ...this.stats };
@@ -1284,7 +969,6 @@ export class Engine {
         const dir = pathParts.join("/") + "/";
         this.modelDir = dir;
         const model = await PmxLoader.load(path);
-        this.physics = new Physics(model.getRigidbodies(), model.getJoints());
         await this.setupModelBuffers(model);
     }
     rotateBones(bones, rotations, durationMs) {
@@ -1339,12 +1023,7 @@ export class Engine {
         this.skinMatrixBuffer = this.device.createBuffer({
             label: "skin matrices",
             size: Math.max(256, matrixSize),
-            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX,
-        });
-        this.worldMatrixBuffer = this.device.createBuffer({
-            label: "world matrices",
-            size: Math.max(256, matrixSize),
-            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
         });
         this.inverseBindMatrixBuffer = this.device.createBuffer({
             label: "inverse bind matrices",
@@ -1353,25 +1032,6 @@ export class Engine {
         });
         const invBindMatrices = skeleton.inverseBindMatrices;
         this.device.queue.writeBuffer(this.inverseBindMatrixBuffer, 0, invBindMatrices.buffer, invBindMatrices.byteOffset, invBindMatrices.byteLength);
-        this.boneCountBuffer = this.device.createBuffer({
-            label: "bone count uniform",
-            size: 32, // Minimum uniform buffer size is 32 bytes
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        });
-        const boneCountData = new Uint32Array(8); // 32 bytes total
-        boneCountData[0] = boneCount;
-        this.device.queue.writeBuffer(this.boneCountBuffer, 0, boneCountData);
-        this.createSkinMatrixComputePipeline();
-        // Create compute bind group once (reused every frame)
-        this.skinMatrixComputeBindGroup = this.device.createBindGroup({
-            layout: this.skinMatrixComputePipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: { buffer: this.boneCountBuffer } },
-                { binding: 1, resource: { buffer: this.worldMatrixBuffer } },
-                { binding: 2, resource: { buffer: this.inverseBindMatrixBuffer } },
-                { binding: 3, resource: { buffer: this.skinMatrixBuffer } },
-            ],
-        });
         const indices = model.getIndices();
         if (indices) {
             this.indexBuffer = this.device.createBuffer({
@@ -1400,15 +1060,7 @@ export class Engine {
             const texture = await this.createTextureFromPath(path);
             return texture;
         };
-        this.opaqueDraws = [];
-        this.eyeDraws = [];
-        this.hairDrawsOverEyes = [];
-        this.hairDrawsOverNonEyes = [];
-        this.transparentDraws = [];
-        this.opaqueOutlineDraws = [];
-        this.eyeOutlineDraws = [];
-        this.hairOutlineDraws = [];
-        this.transparentOutlineDraws = [];
+        this.drawCalls = [];
         let currentIndexOffset = 0;
         for (const mat of materials) {
             const indexCount = mat.vertexCount;
@@ -1419,22 +1071,7 @@ export class Engine {
                 throw new Error(`Material "${mat.name}" has no diffuse texture`);
             const materialAlpha = mat.diffuse[3];
             const isTransparent = materialAlpha < 1.0 - Engine.TRANSPARENCY_EPSILON;
-            // Create material uniform data
-            const materialUniformData = new Float32Array(8);
-            materialUniformData[0] = materialAlpha;
-            materialUniformData[1] = 1.0; // alphaMultiplier: 1.0 for non-hair materials
-            materialUniformData[2] = this.rimLightIntensity;
-            materialUniformData[3] = 0.0; // _padding1
-            materialUniformData[4] = 1.0; // rimColor.r
-            materialUniformData[5] = 1.0; // rimColor.g
-            materialUniformData[6] = 1.0; // rimColor.b
-            materialUniformData[7] = 0.0; // isOverEyes
-            const materialUniformBuffer = this.device.createBuffer({
-                label: `material uniform: ${mat.name}`,
-                size: materialUniformData.byteLength,
-                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-            });
-            this.device.queue.writeBuffer(materialUniformBuffer, 0, materialUniformData);
+            const materialUniformBuffer = this.createMaterialUniformBuffer(mat.name, materialAlpha, 0.0);
             // Create bind groups using the shared bind group layout - All pipelines (main, eye, hair multiply, hair opaque) use the same shader and layout
             const bindGroup = this.device.createBindGroup({
                 label: `material bind group: ${mat.name}`,
@@ -1448,96 +1085,62 @@ export class Engine {
                     { binding: 5, resource: { buffer: materialUniformBuffer } },
                 ],
             });
-            if (mat.isEye) {
-                if (indexCount > 0) {
-                    this.eyeDraws.push({
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup,
-                    });
+            if (indexCount > 0) {
+                if (mat.isEye) {
+                    this.drawCalls.push({ type: "eye", count: indexCount, firstIndex: currentIndexOffset, bindGroup });
                 }
-            }
-            else if (mat.isHair) {
-                // Hair materials: create separate bind groups for over-eyes vs over-non-eyes
-                const createHairBindGroup = (isOverEyes) => {
-                    const uniformData = new Float32Array(8);
-                    uniformData[0] = materialAlpha;
-                    uniformData[1] = 1.0; // alphaMultiplier (shader adjusts based on isOverEyes)
-                    uniformData[2] = this.rimLightIntensity;
-                    uniformData[3] = 0.0; // _padding1
-                    uniformData[4] = 1.0; // rimColor.rgb
-                    uniformData[5] = 1.0;
-                    uniformData[6] = 1.0;
-                    uniformData[7] = isOverEyes ? 1.0 : 0.0; // isOverEyes
-                    const buffer = this.device.createBuffer({
-                        label: `material uniform (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
-                        size: uniformData.byteLength,
-                        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-                    });
-                    this.device.queue.writeBuffer(buffer, 0, uniformData);
-                    return this.device.createBindGroup({
-                        label: `material bind group (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
-                        layout: this.mainBindGroupLayout,
-                        entries: [
-                            { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                            { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                            { binding: 2, resource: diffuseTexture.createView() },
-                            { binding: 3, resource: this.materialSampler },
-                            { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
-                            { binding: 5, resource: { buffer: buffer } },
-                        ],
-                    });
-                };
-                const bindGroupOverEyes = createHairBindGroup(true);
-                const bindGroupOverNonEyes = createHairBindGroup(false);
-                if (indexCount > 0) {
-                    this.hairDrawsOverEyes.push({
+                else if (mat.isHair) {
+                    // Hair materials: create separate bind groups for over-eyes vs over-non-eyes
+                    const createHairBindGroup = (isOverEyes) => {
+                        const buffer = this.createMaterialUniformBuffer(`${mat.name} (${isOverEyes ? "over eyes" : "over non-eyes"})`, materialAlpha, isOverEyes ? 1.0 : 0.0);
+                        return this.device.createBindGroup({
+                            label: `material bind group (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
+                            layout: this.mainBindGroupLayout,
+                            entries: [
+                                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                                { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                                { binding: 2, resource: diffuseTexture.createView() },
+                                { binding: 3, resource: this.materialSampler },
+                                { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
+                                { binding: 5, resource: { buffer: buffer } },
+                            ],
+                        });
+                    };
+                    const bindGroupOverEyes = createHairBindGroup(true);
+                    const bindGroupOverNonEyes = createHairBindGroup(false);
+                    this.drawCalls.push({
+                        type: "hair-over-eyes",
                         count: indexCount,
                         firstIndex: currentIndexOffset,
                         bindGroup: bindGroupOverEyes,
                     });
-                    this.hairDrawsOverNonEyes.push({
+                    this.drawCalls.push({
+                        type: "hair-over-non-eyes",
                         count: indexCount,
                         firstIndex: currentIndexOffset,
                         bindGroup: bindGroupOverNonEyes,
                     });
                 }
-            }
-            else if (isTransparent) {
-                if (indexCount > 0) {
-                    this.transparentDraws.push({
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup,
-                    });
+                else if (isTransparent) {
+                    this.drawCalls.push({ type: "transparent", count: indexCount, firstIndex: currentIndexOffset, bindGroup });
                 }
-            }
-            else {
-                if (indexCount > 0) {
-                    this.opaqueDraws.push({
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup,
-                    });
+                else {
+                    this.drawCalls.push({ type: "opaque", count: indexCount, firstIndex: currentIndexOffset, bindGroup });
                 }
             }
             // Edge flag is at bit 4 (0x10) in PMX format
             if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
-                const materialUniformData = new Float32Array(8);
-                materialUniformData[0] = mat.edgeColor[0]; // edgeColor.r
-                materialUniformData[1] = mat.edgeColor[1]; // edgeColor.g
-                materialUniformData[2] = mat.edgeColor[2]; // edgeColor.b
-                materialUniformData[3] = mat.edgeColor[3]; // edgeColor.a
-                materialUniformData[4] = mat.edgeSize;
-                materialUniformData[5] = 0.0; // isOverEyes
-                materialUniformData[6] = 0.0;
-                materialUniformData[7] = 0.0;
-                const materialUniformBuffer = this.device.createBuffer({
-                    label: `outline material uniform: ${mat.name}`,
-                    size: materialUniformData.byteLength,
-                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-                });
-                this.device.queue.writeBuffer(materialUniformBuffer, 0, materialUniformData);
+                const materialUniformData = new Float32Array([
+                    mat.edgeColor[0],
+                    mat.edgeColor[1],
+                    mat.edgeColor[2],
+                    mat.edgeColor[3],
+                    mat.edgeSize,
+                    0,
+                    0,
+                    0,
+                ]);
+                const materialUniformBuffer = this.createUniformBuffer(`outline material uniform: ${mat.name}`, materialUniformData);
                 const outlineBindGroup = this.device.createBindGroup({
                     label: `outline bind group: ${mat.name}`,
                     layout: this.outlineBindGroupLayout,
@@ -1548,39 +1151,38 @@ export class Engine {
                     ],
                 });
                 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,
-                        });
-                    }
+                    const outlineType = mat.isEye
+                        ? "eye-outline"
+                        : mat.isHair
+                            ? "hair-outline"
+                            : isTransparent
+                                ? "transparent-outline"
+                                : "opaque-outline";
+                    this.drawCalls.push({
+                        type: outlineType,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup: outlineBindGroup,
+                    });
                 }
             }
             currentIndexOffset += indexCount;
         }
     }
+    createMaterialUniformBuffer(label, alpha, isOverEyes) {
+        const data = new Float32Array(8);
+        data.set([alpha, 1.0, this.rimLightIntensity, 0.0, 1.0, 1.0, 1.0, isOverEyes]);
+        return this.createUniformBuffer(`material uniform: ${label}`, data);
+    }
+    createUniformBuffer(label, data) {
+        const buffer = this.device.createBuffer({
+            label,
+            size: data.byteLength,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(buffer, 0, data);
+        return buffer;
+    }
     async createTextureFromPath(path) {
         const cached = this.textureCache.get(path);
         if (cached) {
@@ -1616,47 +1218,50 @@ export class Engine {
     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);
+        for (const draw of this.drawCalls) {
+            if (draw.type === "eye") {
+                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;
+        const hasHair = this.drawCalls.some((d) => d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes");
         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);
+            for (const draw of this.drawCalls) {
+                if (draw.type === "hair-over-eyes" || draw.type === "hair-over-non-eyes") {
+                    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) {
+        const hairOverEyes = this.drawCalls.filter((d) => d.type === "hair-over-eyes");
+        if (hairOverEyes.length > 0) {
             pass.setPipeline(this.hairPipelineOverEyes);
             pass.setStencilReference(this.STENCIL_EYE_VALUE);
-            for (const draw of this.hairDrawsOverEyes) {
+            for (const draw of hairOverEyes) {
                 pass.setBindGroup(0, draw.bindGroup);
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
         }
-        if (this.hairDrawsOverNonEyes.length > 0) {
+        const hairOverNonEyes = this.drawCalls.filter((d) => d.type === "hair-over-non-eyes");
+        if (hairOverNonEyes.length > 0) {
             pass.setPipeline(this.hairPipelineOverNonEyes);
             pass.setStencilReference(this.STENCIL_EYE_VALUE);
-            for (const draw of this.hairDrawsOverNonEyes) {
+            for (const draw of hairOverNonEyes) {
                 pass.setBindGroup(0, draw.bindGroup);
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
         }
         // Hair outlines
-        if (this.hairOutlineDraws.length > 0) {
+        const hairOutlines = this.drawCalls.filter((d) => d.type === "hair-outline");
+        if (hairOutlines.length > 0) {
             pass.setPipeline(this.hairOutlinePipeline);
-            for (const draw of this.hairOutlineDraws) {
+            for (const draw of hairOutlines) {
                 pass.setBindGroup(0, draw.bindGroup);
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
@@ -1670,18 +1275,10 @@ export class Engine {
             this.lastFrameTime = currentTime;
             this.updateCameraUniforms();
             this.updateRenderTarget();
-            // Animate VMD animation if playing
-            if (this.hasAnimation && this.currentModel) {
-                const pose = this.player.update(currentTime);
-                if (pose) {
-                    this.applyPose(pose);
-                }
-            }
-            // 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
+            // Update model (handles tweens, animation, physics, IK, and skin matrices)
             if (this.currentModel) {
-                const hasActiveMorphTweens = this.currentModel.evaluatePose();
-                if (hasActiveMorphTweens) {
+                const verticesChanged = this.currentModel.update(deltaTime);
+                if (verticesChanged) {
                     this.vertexBufferNeedsUpdate = true;
                 }
             }
@@ -1690,9 +1287,10 @@ export class Engine {
                 this.updateVertexBuffer();
                 this.vertexBufferNeedsUpdate = false;
             }
-            // Use single encoder for both compute and render (reduces sync points)
+            // Update skin matrices buffer
+            this.updateSkinMatrices();
+            // Use single encoder for render
             const encoder = this.device.createCommandEncoder();
-            this.updateModelPose(deltaTime, encoder);
             const pass = encoder.beginRenderPass(this.renderPassDescriptor);
             if (this.currentModel) {
                 pass.setVertexBuffer(0, this.vertexBuffer);
@@ -1701,9 +1299,11 @@ export class Engine {
                 pass.setIndexBuffer(this.indexBuffer, "uint32");
                 // Pass 1: Opaque
                 pass.setPipeline(this.modelPipeline);
-                for (const draw of this.opaqueDraws) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                for (const draw of this.drawCalls) {
+                    if (draw.type === "opaque") {
+                        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)
                 this.renderEyes(pass);
@@ -1712,9 +1312,11 @@ export class Engine {
                 this.renderHair(pass);
                 // Pass 4: Transparent
                 pass.setPipeline(this.modelPipeline);
-                for (const draw of this.transparentDraws) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                for (const draw of this.drawCalls) {
+                    if (draw.type === "transparent") {
+                        pass.setBindGroup(0, draw.bindGroup);
+                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    }
                 }
                 this.drawOutlines(pass, true);
             }
@@ -1831,31 +1433,20 @@ export class Engine {
             colorAttachment.view = this.sceneRenderTextureView;
         }
     }
-    updateModelPose(deltaTime, encoder) {
-        // 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());
-        }
-        this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-        this.computeSkinMatrices(encoder);
-    }
-    computeSkinMatrices(encoder) {
-        const boneCount = this.currentModel.getSkeleton().bones.length;
-        const workgroupCount = Math.ceil(boneCount / this.COMPUTE_WORKGROUP_SIZE);
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(this.skinMatrixComputePipeline);
-        pass.setBindGroup(0, this.skinMatrixComputeBindGroup);
-        pass.dispatchWorkgroups(workgroupCount);
-        pass.end();
+    updateSkinMatrices() {
+        if (!this.currentModel || !this.skinMatrixBuffer)
+            return;
+        const skinMatrices = this.currentModel.getSkinMatrices();
+        this.device.queue.writeBuffer(this.skinMatrixBuffer, 0, skinMatrices.buffer, skinMatrices.byteOffset, skinMatrices.byteLength);
     }
     drawOutlines(pass, transparent) {
         pass.setPipeline(this.outlinePipeline);
-        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);
+        const outlineType = transparent ? "transparent-outline" : "opaque-outline";
+        for (const draw of this.drawCalls) {
+            if (draw.type === outlineType) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
         }
     }
     updateStats(frameTime) {