reze-engine 0.3.6 → 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,8 +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.canvas = canvas;
         if (options) {
             this.ambientColor = options.ambientColor ?? new Vec3(1.0, 1.0, 1.0);
@@ -84,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",
@@ -91,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 */ `
@@ -204,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({
@@ -342,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",
@@ -538,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({
@@ -585,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",
@@ -693,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)
@@ -1119,128 +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();
+        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 };
@@ -1280,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) {
@@ -1335,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",
@@ -1349,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({
@@ -1396,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;
@@ -1429,51 +1085,48 @@ export class Engine {
                     { binding: 5, resource: { buffer: materialUniformBuffer } },
                 ],
             });
-            const addDrawCall = (draws) => {
-                if (indexCount > 0) {
-                    draws.push({ count: indexCount, firstIndex: currentIndexOffset, bindGroup });
+            if (indexCount > 0) {
+                if (mat.isEye) {
+                    this.drawCalls.push({ type: "eye", count: indexCount, firstIndex: currentIndexOffset, bindGroup });
                 }
-            };
-            if (mat.isEye) {
-                addDrawCall(this.eyeDraws);
-            }
-            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);
-                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) {
-                addDrawCall(this.transparentDraws);
-            }
-            else {
-                addDrawCall(this.opaqueDraws);
+                else if (isTransparent) {
+                    this.drawCalls.push({ type: "transparent", 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) {
@@ -1498,14 +1151,19 @@ export class Engine {
                     ],
                 });
                 if (indexCount > 0) {
-                    const outlineDraws = mat.isEye
-                        ? this.eyeOutlineDraws
+                    const outlineType = mat.isEye
+                        ? "eye-outline"
                         : mat.isHair
-                            ? this.hairOutlineDraws
+                            ? "hair-outline"
                             : isTransparent
-                                ? this.transparentOutlineDraws
-                                : this.opaqueOutlineDraws;
-                    outlineDraws.push({ count: indexCount, firstIndex: currentIndexOffset, bindGroup: outlineBindGroup });
+                                ? "transparent-outline"
+                                : "opaque-outline";
+                    this.drawCalls.push({
+                        type: outlineType,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup: outlineBindGroup,
+                    });
                 }
             }
             currentIndexOffset += indexCount;
@@ -1560,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);
             }
@@ -1614,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;
                 }
             }
@@ -1634,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);
@@ -1645,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);
@@ -1656,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);
             }
@@ -1775,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) {