reze-engine 0.8.0 → 0.8.1

package/dist/engine.js

@@ -1,5 +1,6 @@
 import { Camera } from "./camera";
 import { Mat4, Vec3 } from "./math";
+import { Physics } from "./physics";
 export const DEFAULT_ENGINE_OPTIONS = {
     ambientColor: new Vec3(0.88, 0.88, 0.88),
     directionalLightIntensity: 0.24,
@@ -9,8 +10,6 @@ export const DEFAULT_ENGINE_OPTIONS = {
     cameraTarget: new Vec3(0, 12.5, 0),
     cameraFov: Math.PI / 4,
     onRaycast: undefined,
-    disableIK: false,
-    disablePhysics: false,
     multisampleCount: 4,
 };
 export class Engine {
@@ -31,26 +30,17 @@ export class Engine {
         this.groundHasReflections = false;
         this.groundMode = "reflection";
         this.shadowLightVPMatrix = new Float32Array(16);
-        this.shadowDrawCalls = [];
+        this.groundDrawCall = null;
         this.shadowVPLightX = Number.NaN;
         this.shadowVPLightY = Number.NaN;
         this.shadowVPLightZ = Number.NaN;
-        this.cachedSkinMatricesVersion = -1;
-        this.skinMatricesVersion = 0;
         // Double-tap detection
         this.lastTouchTime = 0;
         this.DOUBLE_TAP_DELAY = 300; // ms
-        // IK and Physics flags
-        this._disableIK = false;
-        this._disablePhysics = false;
-        this.currentModel = null;
-        this.modelDir = "";
+        this.modelInstances = new Map();
         this.textureCache = new Map();
-        this.vertexBufferNeedsUpdate = false;
-        // Unified draw call list
-        this.drawCalls = [];
-        // Material visibility tracking
-        this.hiddenMaterials = new Set();
+        /** Reusable buffer for raycast skinning to avoid per-instance allocations (Three.js/Babylon.js style). */
+        this.raycastVertexBuffer = null;
         this.lastFpsUpdate = performance.now();
         this.framesSinceLastUpdate = 0;
         this.lastFrameTime = performance.now();
@@ -63,15 +53,13 @@ export class Engine {
         this.animationFrameId = null;
         this.renderLoopCallback = null;
         this.handleCanvasDoubleClick = (event) => {
-            if (!this.onRaycast || !this.currentModel)
+            if (!this.onRaycast || this.modelInstances.size === 0)
                 return;
             const rect = this.canvas.getBoundingClientRect();
-            const x = event.clientX - rect.left;
-            const y = event.clientY - rect.top;
-            this.performRaycast(x, y);
+            this.performRaycast(event.clientX - rect.left, event.clientY - rect.top);
         };
         this.handleCanvasTouch = (event) => {
-            if (!this.onRaycast || !this.currentModel)
+            if (!this.onRaycast || this.modelInstances.size === 0)
                 return;
             // Prevent default to avoid triggering mouse events
             event.preventDefault();
@@ -107,8 +95,6 @@ export class Engine {
             this.cameraTarget = options.cameraTarget ?? DEFAULT_ENGINE_OPTIONS.cameraTarget;
             this.cameraFov = options.cameraFov ?? DEFAULT_ENGINE_OPTIONS.cameraFov;
             this.onRaycast = options.onRaycast;
-            this._disableIK = options.disableIK ?? DEFAULT_ENGINE_OPTIONS.disableIK;
-            this._disablePhysics = options.disablePhysics ?? DEFAULT_ENGINE_OPTIONS.disablePhysics;
         }
     }
     // Step 1: Get WebGPU device and context
@@ -968,7 +954,6 @@ export class Engine {
             ...options,
         };
         this.groundMode = opts.mode;
-        this.drawCalls = this.drawCalls.filter((d) => d.type !== "ground");
         this.createGroundGeometry(opts.width, opts.height);
         if (opts.mode === "reflection") {
             this.createGroundMaterialBuffer(opts.diffuseColor, opts.reflectionLevel, opts.fadeStart, opts.fadeEnd);
@@ -978,13 +963,13 @@ export class Engine {
             this.createShadowGroundResources(opts.shadowMapSize, opts.diffuseColor, opts.fadeStart, opts.fadeEnd, opts.shadowStrength);
         }
         this.groundHasReflections = true;
-        this.drawCalls.push({
+        this.groundDrawCall = {
             type: "ground",
             count: 6,
             firstIndex: 0,
             bindGroup: (opts.mode === "reflection" ? this.groundReflectionBindGroup : this.groundShadowBindGroup),
             materialName: "Ground",
-        });
+        };
     }
     updateLightBuffer() {
         this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData);
@@ -1012,7 +997,7 @@ export class Engine {
     }
     dispose() {
         this.stopRenderLoop();
-        this.currentModel?.stopAnimation();
+        this.forEachInstance((inst) => inst.model.stopAnimation());
         if (Engine.instance === this)
             Engine.instance = null;
         if (this.camera)
@@ -1027,116 +1012,175 @@ export class Engine {
             this.resizeObserver = null;
         }
     }
-    // Single active model; prefer Model.loadPmx() so load + register stay paired
-    async registerModel(model, pmxPath) {
+    async addModel(model, pmxPath, name) {
+        const requested = name ?? model.name;
+        let key = requested;
+        let n = 1;
+        while (this.modelInstances.has(key)) {
+            key = `${requested}_${n++}`;
+        }
         const pathParts = pmxPath.split("/");
         pathParts.pop();
-        this.modelDir = pathParts.join("/") + "/";
-        this.cachedSkinnedVertices = undefined;
-        this.cachedSkinMatricesVersion = -1;
-        await this.setupModelBuffers(model);
+        const basePath = pathParts.join("/") + "/";
+        await this.setupModelInstance(key, model, basePath);
+        return key;
     }
-    // After morph/vertex edits, queues GPU vertex upload on next frame
-    markVertexBufferDirty() {
-        this.vertexBufferNeedsUpdate = true;
+    async registerModel(model, pmxPath) {
+        return this.addModel(model, pmxPath);
     }
-    setMaterialVisible(name, visible) {
-        if (visible) {
-            this.hiddenMaterials.delete(name);
-        }
-        else {
-            this.hiddenMaterials.add(name);
-        }
+    removeModel(name) {
+        this.modelInstances.delete(name);
+    }
+    getModelNames() {
+        return Array.from(this.modelInstances.keys());
     }
-    toggleMaterialVisible(name) {
-        if (this.hiddenMaterials.has(name)) {
-            this.hiddenMaterials.delete(name);
+    getModel(name) {
+        return this.modelInstances.get(name)?.model ?? null;
+    }
+    markVertexBufferDirty(modelNameOrModel) {
+        if (modelNameOrModel === undefined)
+            return;
+        if (typeof modelNameOrModel === "string") {
+            const inst = this.modelInstances.get(modelNameOrModel);
+            if (inst)
+                inst.vertexBufferNeedsUpdate = true;
+            return;
         }
-        else {
-            this.hiddenMaterials.add(name);
+        for (const inst of this.modelInstances.values()) {
+            if (inst.model === modelNameOrModel) {
+                inst.vertexBufferNeedsUpdate = true;
+                return;
+            }
         }
     }
-    isMaterialVisible(name) {
-        return !this.hiddenMaterials.has(name);
+    setMaterialVisible(modelName, materialName, visible) {
+        const inst = this.modelInstances.get(modelName);
+        if (!inst)
+            return;
+        if (visible)
+            inst.hiddenMaterials.delete(materialName);
+        else
+            inst.hiddenMaterials.add(materialName);
+    }
+    toggleMaterialVisible(modelName, materialName) {
+        const inst = this.modelInstances.get(modelName);
+        if (!inst)
+            return;
+        if (inst.hiddenMaterials.has(materialName))
+            inst.hiddenMaterials.delete(materialName);
+        else
+            inst.hiddenMaterials.add(materialName);
     }
-    // IK control
-    get disableIK() {
-        return this._disableIK;
+    isMaterialVisible(modelName, materialName) {
+        const inst = this.modelInstances.get(modelName);
+        return inst ? !inst.hiddenMaterials.has(materialName) : false;
     }
-    set disableIK(value) {
-        this._disableIK = value;
-        this.currentModel?.setIKEnabled(!value);
+    setModelIKEnabled(modelName, enabled) {
+        this.modelInstances.get(modelName)?.model.setIKEnabled(enabled);
     }
-    // Physics control
-    get disablePhysics() {
-        return this._disablePhysics;
+    setModelPhysicsEnabled(modelName, enabled) {
+        this.modelInstances.get(modelName)?.model.setPhysicsEnabled(enabled);
     }
-    set disablePhysics(value) {
-        this._disablePhysics = value;
-        this.currentModel?.setPhysicsEnabled(!value);
+    resetPhysics() {
+        this.forEachInstance((inst) => {
+            if (!inst.physics)
+                return;
+            inst.model.computeWorldMatrices();
+            inst.physics.reset(inst.model.getWorldMatrices(), inst.model.getBoneInverseBindMatrices());
+        });
     }
-    updateVertexBuffer() {
-        if (!this.currentModel || !this.vertexBuffer)
-            return;
-        const vertices = this.currentModel.getVertices();
-        if (!vertices || vertices.length === 0)
+    instances() {
+        return this.modelInstances.values();
+    }
+    forEachInstance(fn) {
+        for (const inst of this.instances())
+            fn(inst);
+    }
+    updateInstances(deltaTime) {
+        this.forEachInstance((inst) => {
+            const verticesChanged = inst.model.update(deltaTime);
+            if (verticesChanged)
+                inst.vertexBufferNeedsUpdate = true;
+            if (inst.physics && inst.model.getPhysicsEnabled()) {
+                inst.physics.step(deltaTime, inst.model.getWorldMatrices(), inst.model.getBoneInverseBindMatrices());
+            }
+            if (inst.vertexBufferNeedsUpdate)
+                this.updateVertexBuffer(inst);
+        });
+    }
+    updateVertexBuffer(inst) {
+        const vertices = inst.model.getVertices();
+        if (!vertices?.length)
             return;
-        this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices);
+        this.device.queue.writeBuffer(inst.vertexBuffer, 0, vertices);
+        inst.vertexBufferNeedsUpdate = false;
     }
-    // Step 7: Create vertex, index, and joint buffers
-    async setupModelBuffers(model) {
-        this.currentModel = model;
-        // Apply IK and Physics flags from engine options
-        model.setIKEnabled(!this._disableIK);
-        model.setPhysicsEnabled(!this._disablePhysics);
+    async setupModelInstance(name, model, basePath) {
         const vertices = model.getVertices();
         const skinning = model.getSkinning();
         const skeleton = model.getSkeleton();
-        this.vertexBuffer = this.device.createBuffer({
-            label: "model vertex buffer",
+        const boneCount = skeleton.bones.length;
+        const matrixSize = boneCount * 16 * 4;
+        const vertexBuffer = this.device.createBuffer({
+            label: `${name}: vertex buffer`,
             size: vertices.byteLength,
             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
         });
-        this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices);
-        this.jointsBuffer = this.device.createBuffer({
-            label: "joints buffer",
+        this.device.queue.writeBuffer(vertexBuffer, 0, vertices);
+        const jointsBuffer = this.device.createBuffer({
+            label: `${name}: joints buffer`,
             size: skinning.joints.byteLength,
             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
         });
-        this.device.queue.writeBuffer(this.jointsBuffer, 0, skinning.joints.buffer, skinning.joints.byteOffset, skinning.joints.byteLength);
-        this.weightsBuffer = this.device.createBuffer({
-            label: "weights buffer",
+        this.device.queue.writeBuffer(jointsBuffer, 0, skinning.joints.buffer, skinning.joints.byteOffset, skinning.joints.byteLength);
+        const weightsBuffer = this.device.createBuffer({
+            label: `${name}: weights buffer`,
             size: skinning.weights.byteLength,
             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
         });
-        this.device.queue.writeBuffer(this.weightsBuffer, 0, skinning.weights.buffer, skinning.weights.byteOffset, skinning.weights.byteLength);
-        const boneCount = skeleton.bones.length;
-        const matrixSize = boneCount * 16 * 4;
-        this.skinMatrixBuffer = this.device.createBuffer({
-            label: "skin matrices",
+        this.device.queue.writeBuffer(weightsBuffer, 0, skinning.weights.buffer, skinning.weights.byteOffset, skinning.weights.byteLength);
+        const skinMatrixBuffer = this.device.createBuffer({
+            label: `${name}: skin matrices`,
             size: Math.max(256, matrixSize),
             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
         });
-        this.inverseBindMatrixBuffer = this.device.createBuffer({
-            label: "inverse bind matrices",
-            size: Math.max(256, matrixSize),
-            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
-        });
-        const invBindMatrices = skeleton.inverseBindMatrices;
-        this.device.queue.writeBuffer(this.inverseBindMatrixBuffer, 0, invBindMatrices.buffer, invBindMatrices.byteOffset, invBindMatrices.byteLength);
         const indices = model.getIndices();
-        if (indices) {
-            this.indexBuffer = this.device.createBuffer({
-                label: "model index buffer",
-                size: indices.byteLength,
-                usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-            });
-            this.device.queue.writeBuffer(this.indexBuffer, 0, indices);
-        }
-        else {
+        if (!indices)
             throw new Error("Model has no index buffer");
-        }
-        await this.setupMaterials(model);
+        const indexBuffer = this.device.createBuffer({
+            label: `${name}: index buffer`,
+            size: indices.byteLength,
+            usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(indexBuffer, 0, indices);
+        const rbs = model.getRigidbodies();
+        const physics = rbs.length > 0 ? new Physics(rbs, model.getJoints()) : null;
+        const shadowBindGroup = this.device.createBindGroup({
+            label: `${name}: shadow bind`,
+            layout: this.shadowDepthPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: this.shadowLightVPBuffer } },
+                { binding: 1, resource: { buffer: skinMatrixBuffer } },
+            ],
+        });
+        const inst = {
+            name,
+            model,
+            basePath,
+            vertexBuffer,
+            indexBuffer,
+            jointsBuffer,
+            weightsBuffer,
+            skinMatrixBuffer,
+            drawCalls: [],
+            shadowDrawCalls: [],
+            shadowBindGroup,
+            hiddenMaterials: new Set(),
+            physics,
+            vertexBufferNeedsUpdate: false,
+        };
+        await this.setupMaterialsForInstance(inst);
+        this.modelInstances.set(name, inst);
     }
     createGroundGeometry(width = 100, height = 100) {
         const halfWidth = width / 2;
@@ -1271,14 +1315,6 @@ export class Engine {
         gb[7] = 0;
         this.groundShadowMaterialBuffer = this.device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
         this.device.queue.writeBuffer(this.groundShadowMaterialBuffer, 0, gb);
-        this.shadowBindGroup = this.device.createBindGroup({
-            label: "shadow bind",
-            layout: this.shadowDepthPipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: { buffer: this.shadowLightVPBuffer } },
-                { binding: 1, resource: { buffer: this.skinMatrixBuffer } },
-            ],
-        });
         this.groundShadowBindGroup = this.device.createBindGroup({
             label: "ground shadow bind",
             layout: this.groundShadowBindGroupLayout,
@@ -1317,21 +1353,19 @@ export class Engine {
         this.shadowLightVPMatrix.set(vp.values);
         this.device.queue.writeBuffer(this.shadowLightVPBuffer, 0, this.shadowLightVPMatrix);
     }
-    async setupMaterials(model) {
+    async setupMaterialsForInstance(inst) {
+        const model = inst.model;
         const materials = model.getMaterials();
-        if (materials.length === 0) {
+        if (materials.length === 0)
             throw new Error("Model has no materials");
-        }
         const textures = model.getTextures();
+        const prefix = `${inst.name}: `;
         const loadTextureByIndex = async (texIndex) => {
-            if (texIndex < 0 || texIndex >= textures.length) {
+            if (texIndex < 0 || texIndex >= textures.length)
                 return null;
-            }
-            const path = this.modelDir + textures[texIndex].path;
-            const texture = await this.createTextureFromPath(path);
-            return texture;
+            const path = inst.basePath + textures[texIndex].path;
+            return this.createTextureFromPath(path);
         };
-        this.drawCalls = [];
         let currentIndexOffset = 0;
         for (const mat of materials) {
             const indexCount = mat.vertexCount;
@@ -1342,128 +1376,86 @@ export class Engine {
                 throw new Error(`Material "${mat.name}" has no diffuse texture`);
             const materialAlpha = mat.diffuse[3];
             const isTransparent = materialAlpha < 1.0 - 0.001;
-            const materialUniformBuffer = this.createMaterialUniformBuffer(mat.name, materialAlpha, 0.0, [mat.diffuse[0], mat.diffuse[1], mat.diffuse[2]], mat.ambient, mat.specular, mat.shininess);
-            // Create bind groups using the shared bind group layout - All pipelines (main, eye, hair multiply, hair opaque) use the same shader and layout
+            const materialUniformBuffer = this.createMaterialUniformBuffer(prefix + mat.name, materialAlpha, 0.0, [mat.diffuse[0], mat.diffuse[1], mat.diffuse[2]], mat.ambient, mat.specular, mat.shininess);
             const bindGroup = this.device.createBindGroup({
-                label: `material bind group: ${mat.name}`,
+                label: `${prefix}material: ${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: 4, resource: { buffer: inst.skinMatrixBuffer } },
                     { binding: 5, resource: { buffer: materialUniformBuffer } },
                 ],
             });
             if (indexCount > 0) {
                 if (mat.isEye) {
-                    this.drawCalls.push({
-                        type: "eye",
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup,
-                        materialName: mat.name,
-                    });
+                    inst.drawCalls.push({ type: "eye", count: indexCount, firstIndex: currentIndexOffset, bindGroup, materialName: mat.name });
                 }
                 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, [mat.diffuse[0], mat.diffuse[1], mat.diffuse[2]], mat.ambient, mat.specular, mat.shininess);
+                        const buf = this.createMaterialUniformBuffer(`${prefix}${mat.name} (${isOverEyes ? "over eyes" : "over non-eyes"})`, materialAlpha, isOverEyes ? 1.0 : 0.0, [mat.diffuse[0], mat.diffuse[1], mat.diffuse[2]], mat.ambient, mat.specular, mat.shininess);
                         return this.device.createBindGroup({
-                            label: `material bind group (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
+                            label: `${prefix}hair ${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 } },
+                                { binding: 4, resource: { buffer: inst.skinMatrixBuffer } },
+                                { binding: 5, resource: { buffer: buf } },
                             ],
                         });
                     };
-                    const bindGroupOverEyes = createHairBindGroup(true);
-                    const bindGroupOverNonEyes = createHairBindGroup(false);
-                    this.drawCalls.push({
+                    inst.drawCalls.push({
                         type: "hair-over-eyes",
                         count: indexCount,
                         firstIndex: currentIndexOffset,
-                        bindGroup: bindGroupOverEyes,
+                        bindGroup: createHairBindGroup(true),
                         materialName: mat.name,
                     });
-                    this.drawCalls.push({
+                    inst.drawCalls.push({
                         type: "hair-over-non-eyes",
                         count: indexCount,
                         firstIndex: currentIndexOffset,
-                        bindGroup: bindGroupOverNonEyes,
+                        bindGroup: createHairBindGroup(false),
                         materialName: mat.name,
                     });
                 }
                 else if (isTransparent) {
-                    this.drawCalls.push({
-                        type: "transparent",
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup,
-                        materialName: mat.name,
-                    });
+                    inst.drawCalls.push({ type: "transparent", count: indexCount, firstIndex: currentIndexOffset, bindGroup, materialName: mat.name });
                 }
                 else {
-                    this.drawCalls.push({
-                        type: "opaque",
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup,
-                        materialName: mat.name,
-                    });
+                    inst.drawCalls.push({ type: "opaque", count: indexCount, firstIndex: currentIndexOffset, bindGroup, materialName: mat.name });
                 }
             }
-            // Edge flag is at bit 4 (0x10) in PMX format
             if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
                 const materialUniformData = new Float32Array([
-                    mat.edgeColor[0],
-                    mat.edgeColor[1],
-                    mat.edgeColor[2],
-                    mat.edgeColor[3],
-                    mat.edgeSize,
-                    0,
-                    0,
-                    0,
+                    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 outlineUniformBuffer = this.createUniformBuffer(`${prefix}outline: ${mat.name}`, materialUniformData);
                 const outlineBindGroup = this.device.createBindGroup({
-                    label: `outline bind group: ${mat.name}`,
+                    label: `${prefix}outline: ${mat.name}`,
                     layout: this.outlineBindGroupLayout,
                     entries: [
                         { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                        { binding: 1, resource: { buffer: materialUniformBuffer } },
-                        { binding: 2, resource: { buffer: this.skinMatrixBuffer } },
+                        { binding: 1, resource: { buffer: outlineUniformBuffer } },
+                        { binding: 2, resource: { buffer: inst.skinMatrixBuffer } },
                     ],
                 });
                 if (indexCount > 0) {
-                    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,
-                        materialName: mat.name,
-                    });
+                    const outlineType = mat.isEye ? "eye-outline" : mat.isHair ? "hair-outline" : isTransparent ? "transparent-outline" : "opaque-outline";
+                    inst.drawCalls.push({ type: outlineType, count: indexCount, firstIndex: currentIndexOffset, bindGroup: outlineBindGroup, materialName: mat.name });
                 }
             }
             currentIndexOffset += indexCount;
         }
-        this.shadowDrawCalls.length = 0;
-        for (const d of this.drawCalls) {
+        for (const d of inst.drawCalls) {
             if (d.type === "opaque" || d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes")
-                this.shadowDrawCalls.push(d);
+                inst.shadowDrawCalls.push(d);
         }
     }
     createMaterialUniformBuffer(label, alpha, isOverEyes, diffuseColor, ambientColor, specularColor, shininess) {
@@ -1501,8 +1493,8 @@ export class Engine {
         this.device.queue.writeBuffer(buffer, 0, data);
         return buffer;
     }
-    shouldRenderDrawCall(drawCall) {
-        return !this.hiddenMaterials.has(drawCall.materialName);
+    shouldRenderDrawCall(inst, drawCall) {
+        return !inst.hiddenMaterials.has(drawCall.materialName);
     }
     async createTextureFromPath(path) {
         const cached = this.textureCache.get(path);
@@ -1536,11 +1528,10 @@ export class Engine {
         }
     }
     // Helper: Render eyes with stencil writing (for post-alpha-eye effect)
-    renderEyes(pass, useReflectionPipeline = false) {
+    renderEyes(pass, inst, useReflectionPipeline = false) {
         if (useReflectionPipeline) {
-            // For reflections, use the basic reflection pipeline instead of specialized eye pipeline
             pass.setPipeline(this.reflectionPipeline);
-            for (const draw of this.drawCalls) {
+            for (const draw of inst.drawCalls) {
                 if (draw.type === "eye") {
                     pass.setBindGroup(0, draw.bindGroup);
                     pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
@@ -1550,8 +1541,8 @@ export class Engine {
         else {
             pass.setPipeline(this.eyePipeline);
             pass.setStencilReference(this.STENCIL_EYE_VALUE);
-            for (const draw of this.drawCalls) {
-                if (draw.type === "eye" && this.shouldRenderDrawCall(draw)) {
+            for (const draw of inst.drawCalls) {
+                if (draw.type === "eye" && this.shouldRenderDrawCall(inst, draw)) {
                     pass.setBindGroup(0, draw.bindGroup);
                     pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
                 }
@@ -1559,19 +1550,15 @@ export class Engine {
         }
     }
     renderGround(pass) {
-        if (!this.groundHasReflections || !this.groundVertexBuffer || !this.groundIndexBuffer)
+        if (!this.groundHasReflections || !this.groundVertexBuffer || !this.groundIndexBuffer || !this.groundDrawCall)
             return;
         if (this.groundMode === "reflection" && this.groundReflectionTexture)
             this.renderReflectionTexture();
         pass.setPipeline(this.groundMode === "reflection" ? this.groundPipeline : this.groundShadowPipeline);
         pass.setVertexBuffer(0, this.groundVertexBuffer);
         pass.setIndexBuffer(this.groundIndexBuffer, "uint16");
-        for (const draw of this.drawCalls) {
-            if (draw.type === "ground" && this.shouldRenderDrawCall(draw)) {
-                pass.setBindGroup(0, draw.bindGroup);
-                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-            }
-        }
+        pass.setBindGroup(0, this.groundDrawCall.bindGroup);
+        pass.drawIndexed(this.groundDrawCall.count, 1, this.groundDrawCall.firstIndex, 0, 0);
     }
     renderReflectionTexture() {
         if (!this.groundReflectionTexture)
@@ -1601,45 +1588,15 @@ export class Engine {
             },
         };
         const reflectionPass = reflectionEncoder.beginRenderPass(reflectionPassDescriptor);
-        if (this.currentModel) {
-            reflectionPass.setVertexBuffer(0, this.vertexBuffer);
-            reflectionPass.setVertexBuffer(1, this.jointsBuffer);
-            reflectionPass.setVertexBuffer(2, this.weightsBuffer);
-            reflectionPass.setIndexBuffer(this.indexBuffer, "uint32");
-            this.writeMirrorTransformedSkinMatrices(mirrorMatrix);
-            reflectionPass.setPipeline(this.reflectionPipeline);
-            for (const draw of this.drawCalls) {
-                if (draw.type === "opaque" && this.shouldRenderDrawCall(draw)) {
-                    reflectionPass.setBindGroup(0, draw.bindGroup);
-                    reflectionPass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                }
-            }
-            // Render eyes (using reflection pipeline)
-            this.renderEyes(reflectionPass, true);
-            // Render hair (using reflection pipeline)
-            this.renderHair(reflectionPass, true);
-            // Render transparent objects
-            for (const draw of this.drawCalls) {
-                if (draw.type === "transparent" && this.shouldRenderDrawCall(draw)) {
-                    reflectionPass.setBindGroup(0, draw.bindGroup);
-                    reflectionPass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                }
-            }
-            this.drawOutlines(reflectionPass, true, true);
-        }
+        this.forEachInstance((inst) => this.renderOneModel(reflectionPass, inst, true, mirrorMatrix));
         reflectionPass.end();
-        // Submit reflection rendering commands
-        const reflectionCommandBuffer = reflectionEncoder.finish();
-        this.device.queue.submit([reflectionCommandBuffer]);
-        // Restore original skin matrices
+        this.device.queue.submit([reflectionEncoder.finish()]);
         this.updateSkinMatrices();
     }
-    // Helper: Render hair with post-alpha-eye effect (depth pre-pass + stencil-based shading + outlines)
-    renderHair(pass, useReflectionPipeline = false) {
+    renderHair(pass, inst, useReflectionPipeline = false) {
         if (useReflectionPipeline) {
-            // For reflections, use the basic reflection pipeline for all hair
             pass.setPipeline(this.reflectionPipeline);
-            for (const draw of this.drawCalls) {
+            for (const draw of inst.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);
@@ -1647,19 +1604,17 @@ export class Engine {
             }
             return;
         }
-        // Hair depth pre-pass (reduces overdraw via early depth rejection)
-        const hasHair = this.drawCalls.some((d) => (d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes") && this.shouldRenderDrawCall(d));
+        const hasHair = inst.drawCalls.some((d) => (d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes") && this.shouldRenderDrawCall(inst, d));
         if (hasHair) {
             pass.setPipeline(this.hairDepthPipeline);
-            for (const draw of this.drawCalls) {
-                if ((draw.type === "hair-over-eyes" || draw.type === "hair-over-non-eyes") && this.shouldRenderDrawCall(draw)) {
+            for (const draw of inst.drawCalls) {
+                if ((draw.type === "hair-over-eyes" || draw.type === "hair-over-non-eyes") && this.shouldRenderDrawCall(inst, draw)) {
                     pass.setBindGroup(0, draw.bindGroup);
                     pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
                 }
             }
         }
-        // Hair shading (split by stencil for transparency over eyes)
-        const hairOverEyes = this.drawCalls.filter((d) => d.type === "hair-over-eyes" && this.shouldRenderDrawCall(d));
+        const hairOverEyes = inst.drawCalls.filter((d) => d.type === "hair-over-eyes" && this.shouldRenderDrawCall(inst, d));
         if (hairOverEyes.length > 0) {
             pass.setPipeline(this.hairPipelineOverEyes);
             pass.setStencilReference(this.STENCIL_EYE_VALUE);
@@ -1668,7 +1623,7 @@ export class Engine {
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
         }
-        const hairOverNonEyes = this.drawCalls.filter((d) => d.type === "hair-over-non-eyes" && this.shouldRenderDrawCall(d));
+        const hairOverNonEyes = inst.drawCalls.filter((d) => d.type === "hair-over-non-eyes" && this.shouldRenderDrawCall(inst, d));
         if (hairOverNonEyes.length > 0) {
             pass.setPipeline(this.hairPipelineOverNonEyes);
             pass.setStencilReference(this.STENCIL_EYE_VALUE);
@@ -1677,8 +1632,7 @@ export class Engine {
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
         }
-        // Hair outlines
-        const hairOutlines = this.drawCalls.filter((d) => d.type === "hair-outline" && this.shouldRenderDrawCall(d));
+        const hairOutlines = inst.drawCalls.filter((d) => d.type === "hair-outline" && this.shouldRenderDrawCall(inst, d));
         if (hairOutlines.length > 0) {
             pass.setPipeline(this.hairOutlinePipeline);
             for (const draw of hairOutlines) {
@@ -1688,261 +1642,203 @@ export class Engine {
         }
     }
     performRaycast(screenX, screenY) {
-        if (!this.currentModel || !this.onRaycast)
+        if (!this.onRaycast || this.modelInstances.size === 0) {
+            this.onRaycast?.("", null, screenX, screenY);
             return;
-        const materials = this.currentModel.getMaterials();
-        if (materials.length === 0)
-            return;
-        // Get camera matrices
+        }
         const viewMatrix = this.camera.getViewMatrix();
         const projectionMatrix = this.camera.getProjectionMatrix();
-        // Convert screen coordinates to world space ray
-        const canvas = this.canvas;
-        const rect = canvas.getBoundingClientRect();
-        // Convert to clip space (-1 to 1)
+        const rect = this.canvas.getBoundingClientRect();
         const clipX = (screenX / rect.width) * 2 - 1;
-        const clipY = 1 - (screenY / rect.height) * 2; // Flip Y
-        // Create ray in clip space at near and far planes
-        const clipNear = new Vec3(clipX, clipY, -1); // Near plane
-        const clipFar = new Vec3(clipX, clipY, 1); // Far plane
-        // Transform to world space using inverse view-projection matrix
+        const clipY = 1 - (screenY / rect.height) * 2;
         const viewProjMatrix = projectionMatrix.multiply(viewMatrix);
         const inverseViewProj = viewProjMatrix.inverse();
-        // Transform point through 4x4 matrix with perspective division
         const transformPoint = (matrix, point) => {
             const m = matrix.values;
             const x = point.x, y = point.y, z = point.z;
-            // Compute transformed point (matrix * vec4(point, 1.0))
             const result = new Vec3(m[0] * x + m[4] * y + m[8] * z + m[12], m[1] * x + m[5] * y + m[9] * z + m[13], m[2] * x + m[6] * y + m[10] * z + m[14]);
-            // Perspective division
             const w = m[3] * x + m[7] * y + m[11] * z + m[15];
-            const invW = w !== 0 ? 1 / w : 1;
-            return result.scale(invW);
+            return result.scale(w !== 0 ? 1 / w : 1);
         };
-        const worldNear = transformPoint(inverseViewProj, clipNear);
-        const worldFar = transformPoint(inverseViewProj, clipFar);
-        // Create ray from camera position through the clicked point
+        const worldNear = transformPoint(inverseViewProj, new Vec3(clipX, clipY, -1));
+        const worldFar = transformPoint(inverseViewProj, new Vec3(clipX, clipY, 1));
         const rayOrigin = this.camera.getPosition();
         const rayDirection = worldFar.subtract(worldNear).normalize();
-        // Get model geometry for ray-triangle intersection
-        const baseVertices = this.currentModel.getVertices();
-        const indices = this.currentModel.getIndices();
-        const skinning = this.currentModel.getSkinning();
-        if (!baseVertices || !indices || !skinning) {
-            if (this.onRaycast) {
-                this.onRaycast(null, screenX, screenY);
-            }
-            return;
-        }
-        // Use cached skinned vertices if available and up-to-date
-        let vertices;
-        if (this.cachedSkinnedVertices && this.cachedSkinMatricesVersion === this.skinMatricesVersion) {
-            vertices = this.cachedSkinnedVertices;
-        }
-        else {
-            // Apply current skinning transformations to get animated vertex positions
-            vertices = new Float32Array(baseVertices.length);
-            const skinMatrices = this.currentModel.getSkinMatrices();
-            // Helper function to transform point by 4x4 matrix
-            const transformByMatrix = (matrix, offset, point) => {
-                const m = matrix;
-                const x = point.x, y = point.y, z = point.z;
-                return new Vec3(m[offset + 0] * x + m[offset + 4] * y + m[offset + 8] * z + m[offset + 12], m[offset + 1] * x + m[offset + 5] * y + m[offset + 9] * z + m[offset + 13], m[offset + 2] * x + m[offset + 6] * y + m[offset + 10] * z + m[offset + 14]);
-            };
+        const transformByMatrix = (matrix, offset, point) => {
+            const m = matrix, x = point.x, y = point.y, z = point.z;
+            return new Vec3(m[offset + 0] * x + m[offset + 4] * y + m[offset + 8] * z + m[offset + 12], m[offset + 1] * x + m[offset + 5] * y + m[offset + 9] * z + m[offset + 13], m[offset + 2] * x + m[offset + 6] * y + m[offset + 10] * z + m[offset + 14]);
+        };
+        let closest = null;
+        const maxDistance = 1000;
+        this.forEachInstance((inst) => {
+            const model = inst.model;
+            const materials = model.getMaterials();
+            if (materials.length === 0)
+                return;
+            const baseVertices = model.getVertices();
+            const indices = model.getIndices();
+            const skinning = model.getSkinning();
+            if (!baseVertices?.length || !indices || !skinning)
+                return;
+            const vertices = new Float32Array(baseVertices.length);
+            const skinMatrices = model.getSkinMatrices();
             for (let i = 0; i < baseVertices.length; i += 8) {
-                const vertexIndex = Math.floor(i / 8);
+                const vertexIndex = i / 8;
                 const position = new Vec3(baseVertices[i], baseVertices[i + 1], baseVertices[i + 2]);
-                // Get bone influences for this vertex
-                const jointIndices = [
-                    skinning.joints[vertexIndex * 4],
-                    skinning.joints[vertexIndex * 4 + 1],
-                    skinning.joints[vertexIndex * 4 + 2],
-                    skinning.joints[vertexIndex * 4 + 3],
-                ];
-                const weights = [
-                    skinning.weights[vertexIndex * 4],
-                    skinning.weights[vertexIndex * 4 + 1],
-                    skinning.weights[vertexIndex * 4 + 2],
-                    skinning.weights[vertexIndex * 4 + 3],
-                ];
-                // Normalize weights (same as shader)
-                const weightSum = weights[0] + weights[1] + weights[2] + weights[3];
-                const invWeightSum = weightSum > 0.0001 ? 1.0 / weightSum : 1.0;
-                const normalizedWeights = weightSum > 0.0001 ? weights.map((w) => w * invWeightSum) : [1.0, 0.0, 0.0, 0.0];
-                // Apply skinning transformation (same as shader)
-                let skinnedPosition = new Vec3(0, 0, 0);
+                const j0 = skinning.joints[vertexIndex * 4], j1 = skinning.joints[vertexIndex * 4 + 1], j2 = skinning.joints[vertexIndex * 4 + 2], j3 = skinning.joints[vertexIndex * 4 + 3];
+                const w0 = skinning.weights[vertexIndex * 4] / 255, w1 = skinning.weights[vertexIndex * 4 + 1] / 255, w2 = skinning.weights[vertexIndex * 4 + 2] / 255, w3 = skinning.weights[vertexIndex * 4 + 3] / 255;
+                const ws = w0 + w1 + w2 + w3;
+                const nw = ws > 0.0001 ? [w0 / ws, w1 / ws, w2 / ws, w3 / ws] : [1, 0, 0, 0];
+                let sp = new Vec3(0, 0, 0);
                 for (let j = 0; j < 4; j++) {
-                    const weight = normalizedWeights[j];
-                    if (weight > 0) {
-                        const matrixOffset = jointIndices[j] * 16;
-                        const transformed = transformByMatrix(skinMatrices, matrixOffset, position);
-                        skinnedPosition = skinnedPosition.add(transformed.scale(weight));
-                    }
+                    if (nw[j] <= 0)
+                        continue;
+                    const transformed = transformByMatrix(skinMatrices, [j0, j1, j2, j3][j] * 16, position);
+                    sp = sp.add(transformed.scale(nw[j]));
                 }
-                // Store transformed position, copy other attributes unchanged
-                vertices[i] = skinnedPosition.x;
-                vertices[i + 1] = skinnedPosition.y;
-                vertices[i + 2] = skinnedPosition.z;
-                vertices[i + 3] = baseVertices[i + 3]; // normal X
-                vertices[i + 4] = baseVertices[i + 4]; // normal Y
-                vertices[i + 5] = baseVertices[i + 5]; // normal Z
-                vertices[i + 6] = baseVertices[i + 6]; // UV X
-                vertices[i + 7] = baseVertices[i + 7]; // UV Y
+                vertices[i] = sp.x;
+                vertices[i + 1] = sp.y;
+                vertices[i + 2] = sp.z;
+                vertices[i + 3] = baseVertices[i + 3];
+                vertices[i + 4] = baseVertices[i + 4];
+                vertices[i + 5] = baseVertices[i + 5];
+                vertices[i + 6] = baseVertices[i + 6];
+                vertices[i + 7] = baseVertices[i + 7];
             }
-            // Cache the result
-            this.cachedSkinnedVertices = vertices;
-            this.cachedSkinMatricesVersion = this.skinMatricesVersion;
-        }
-        let closestHit = null;
-        const maxDistance = 1000; // Reasonable max distance
-        // Test ray against all triangles (Möller-Trumbore algorithm)
-        for (let i = 0; i < indices.length; i += 3) {
-            const idx0 = indices[i] * 8; // Each vertex has 8 floats (pos + normal + uv)
-            const idx1 = indices[i + 1] * 8;
-            const idx2 = indices[i + 2] * 8;
-            // Get triangle vertices in world space (first 3 floats are position)
-            const v0 = new Vec3(vertices[idx0], vertices[idx0 + 1], vertices[idx0 + 2]);
-            const v1 = new Vec3(vertices[idx1], vertices[idx1 + 1], vertices[idx1 + 2]);
-            const v2 = new Vec3(vertices[idx2], vertices[idx2 + 1], vertices[idx2 + 2]);
-            // Find which material this triangle belongs to
-            // Each material has mat.vertexCount indices (3 per triangle)
-            let triangleMaterialIndex = -1;
-            let indexOffset = 0;
-            for (let matIdx = 0; matIdx < materials.length; matIdx++) {
-                const mat = materials[matIdx];
-                if (i >= indexOffset && i < indexOffset + mat.vertexCount) {
-                    triangleMaterialIndex = matIdx;
-                    break;
+            for (let i = 0; i < indices.length; i += 3) {
+                const idx0 = indices[i] * 8, idx1 = indices[i + 1] * 8, idx2 = indices[i + 2] * 8;
+                const v0 = new Vec3(vertices[idx0], vertices[idx0 + 1], vertices[idx0 + 2]);
+                const v1 = new Vec3(vertices[idx1], vertices[idx1 + 1], vertices[idx1 + 2]);
+                const v2 = new Vec3(vertices[idx2], vertices[idx2 + 1], vertices[idx2 + 2]);
+                let triangleMaterialIndex = -1;
+                let indexOffset = 0;
+                for (let matIdx = 0; matIdx < materials.length; matIdx++) {
+                    if (i >= indexOffset && i < indexOffset + materials[matIdx].vertexCount) {
+                        triangleMaterialIndex = matIdx;
+                        break;
+                    }
+                    indexOffset += materials[matIdx].vertexCount;
                 }
-                indexOffset += mat.vertexCount;
-            }
-            if (triangleMaterialIndex === -1)
-                continue;
-            // Skip invisible materials
-            // const materialName = materials[triangleMaterialIndex].name
-            // if (this.hiddenMaterials.has(materialName)) continue
-            // Ray-triangle intersection test (Möller-Trumbore algorithm)
-            const edge1 = v1.subtract(v0);
-            const edge2 = v2.subtract(v0);
-            const h = rayDirection.cross(edge2);
-            const a = edge1.dot(h);
-            if (Math.abs(a) < 0.0001)
-                continue; // Ray is parallel to triangle
-            const f = 1.0 / a;
-            const s = rayOrigin.subtract(v0);
-            const u = f * s.dot(h);
-            if (u < 0.0 || u > 1.0)
-                continue;
-            const q = s.cross(edge1);
-            const v = f * rayDirection.dot(q);
-            if (v < 0.0 || u + v > 1.0)
-                continue;
-            // At this point we have a hit
-            const t = f * edge2.dot(q);
-            if (t > 0.0001 && t < maxDistance) {
-                // Backface culling: only consider front-facing triangles
+                if (triangleMaterialIndex === -1)
+                    continue;
+                const edge1 = v1.subtract(v0), edge2 = v2.subtract(v0), h = rayDirection.cross(edge2), a = edge1.dot(h);
+                if (Math.abs(a) < 0.0001)
+                    continue;
+                const f = 1 / a, s = rayOrigin.subtract(v0), u = f * s.dot(h);
+                if (u < 0 || u > 1)
+                    continue;
+                const q = s.cross(edge1), v = f * rayDirection.dot(q);
+                if (v < 0 || u + v > 1)
+                    continue;
+                const t = f * edge2.dot(q);
+                if (t <= 0.0001 || t >= maxDistance)
+                    continue;
                 const triangleNormal = edge1.cross(edge2).normalize();
-                const isFrontFace = triangleNormal.dot(rayDirection) < 0;
-                if (isFrontFace) {
-                    if (!closestHit || t < closestHit.distance) {
-                        closestHit = {
-                            materialName: materials[triangleMaterialIndex].name,
-                            distance: t,
-                        };
-                    }
+                if (triangleNormal.dot(rayDirection) >= 0)
+                    continue;
+                if (!closest || t < closest.distance) {
+                    closest = { modelName: inst.name, materialName: materials[triangleMaterialIndex].name, distance: t };
                 }
             }
-        }
-        // Call the callback with the result
+        });
         if (this.onRaycast) {
-            this.onRaycast(closestHit?.materialName || null, screenX, screenY);
+            const hit = closest;
+            this.onRaycast(hit?.modelName ?? "", hit?.materialName ?? null, screenX, screenY);
         }
     }
-    // Render strategy: 1) Opaque non-eye/hair 2) Eyes (stencil=1) 3) Hair (depth pre-pass + split by stencil) 4) Transparent
     render() {
-        if (this.multisampleTexture && this.camera && this.device) {
-            const currentTime = performance.now();
-            const deltaTime = this.lastFrameTime > 0 ? (currentTime - this.lastFrameTime) / 1000 : 0.016;
-            this.lastFrameTime = currentTime;
-            this.updateCameraUniforms();
-            this.updateRenderTarget();
-            // Update model (handles tweens, animation, physics, IK, and skin matrices)
-            if (this.currentModel) {
-                const verticesChanged = this.currentModel.update(deltaTime);
-                if (verticesChanged) {
-                    this.vertexBufferNeedsUpdate = true;
-                }
-            }
-            // Update vertex buffer if morphs changed
-            if (this.vertexBufferNeedsUpdate) {
-                this.updateVertexBuffer();
-                this.vertexBufferNeedsUpdate = false;
-            }
+        if (!this.multisampleTexture || !this.camera || !this.device)
+            return;
+        const currentTime = performance.now();
+        const deltaTime = this.lastFrameTime > 0 ? (currentTime - this.lastFrameTime) / 1000 : 0.016;
+        this.lastFrameTime = currentTime;
+        this.updateCameraUniforms();
+        this.updateRenderTarget();
+        const hasModels = this.modelInstances.size > 0;
+        if (hasModels) {
+            this.updateInstances(deltaTime);
             this.updateSkinMatrices();
-            if (this.groundMode === "shadow")
-                this.updateShadowLightVP();
-            const encoder = this.device.createCommandEncoder();
-            if (this.groundMode === "shadow" &&
-                this.currentModel &&
-                this.shadowMapDepthView &&
-                this.shadowBindGroup) {
-                const sp = encoder.beginRenderPass({
-                    colorAttachments: [],
-                    depthStencilAttachment: {
-                        view: this.shadowMapDepthView,
-                        depthClearValue: 1.0,
-                        depthLoadOp: "clear",
-                        depthStoreOp: "store",
-                    },
-                });
-                sp.setPipeline(this.shadowDepthPipeline);
-                sp.setBindGroup(0, this.shadowBindGroup);
-                sp.setVertexBuffer(0, this.vertexBuffer);
-                sp.setVertexBuffer(1, this.jointsBuffer);
-                sp.setVertexBuffer(2, this.weightsBuffer);
-                sp.setIndexBuffer(this.indexBuffer, "uint32");
-                for (const draw of this.shadowDrawCalls) {
-                    if (this.shouldRenderDrawCall(draw))
-                        sp.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+        }
+        if (this.groundMode === "shadow")
+            this.updateShadowLightVP();
+        const encoder = this.device.createCommandEncoder();
+        if (hasModels && this.groundMode === "shadow" && this.shadowMapDepthView) {
+            const sp = encoder.beginRenderPass({
+                colorAttachments: [],
+                depthStencilAttachment: {
+                    view: this.shadowMapDepthView,
+                    depthClearValue: 1.0,
+                    depthLoadOp: "clear",
+                    depthStoreOp: "store",
+                },
+            });
+            sp.setPipeline(this.shadowDepthPipeline);
+            this.forEachInstance((inst) => this.drawInstanceShadow(sp, inst));
+            sp.end();
+        }
+        const pass = encoder.beginRenderPass(this.renderPassDescriptor);
+        if (hasModels)
+            this.forEachInstance((inst) => this.renderOneModel(pass, inst, false));
+        if (this.groundHasReflections)
+            this.renderGround(pass);
+        pass.end();
+        this.device.queue.submit([encoder.finish()]);
+        this.updateStats(performance.now() - currentTime);
+    }
+    drawInstanceShadow(sp, inst) {
+        sp.setBindGroup(0, inst.shadowBindGroup);
+        sp.setVertexBuffer(0, inst.vertexBuffer);
+        sp.setVertexBuffer(1, inst.jointsBuffer);
+        sp.setVertexBuffer(2, inst.weightsBuffer);
+        sp.setIndexBuffer(inst.indexBuffer, "uint32");
+        for (const draw of inst.shadowDrawCalls) {
+            if (this.shouldRenderDrawCall(inst, draw))
+                sp.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+        }
+    }
+    renderOneModel(pass, inst, useReflection, mirrorMatrix) {
+        pass.setVertexBuffer(0, inst.vertexBuffer);
+        pass.setVertexBuffer(1, inst.jointsBuffer);
+        pass.setVertexBuffer(2, inst.weightsBuffer);
+        pass.setIndexBuffer(inst.indexBuffer, "uint32");
+        if (useReflection && mirrorMatrix) {
+            this.writeMirrorTransformedSkinMatrices(inst, mirrorMatrix);
+            pass.setPipeline(this.reflectionPipeline);
+            for (const draw of inst.drawCalls) {
+                if (draw.type === "opaque" && this.shouldRenderDrawCall(inst, draw)) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
                 }
-                sp.end();
             }
-            const pass = encoder.beginRenderPass(this.renderPassDescriptor);
-            if (this.currentModel) {
-                pass.setVertexBuffer(0, this.vertexBuffer);
-                pass.setVertexBuffer(1, this.jointsBuffer);
-                pass.setVertexBuffer(2, this.weightsBuffer);
-                pass.setIndexBuffer(this.indexBuffer, "uint32");
-                // Pass 1: Opaque
-                pass.setPipeline(this.modelPipeline);
-                for (const draw of this.drawCalls) {
-                    if (draw.type === "opaque" && this.shouldRenderDrawCall(draw)) {
-                        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);
-                this.drawOutlines(pass, false);
-                // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
-                this.renderHair(pass);
-                // Pass 5: Transparent
-                pass.setPipeline(this.modelPipeline);
-                for (const draw of this.drawCalls) {
-                    if (draw.type === "transparent" && this.shouldRenderDrawCall(draw)) {
-                        pass.setBindGroup(0, draw.bindGroup);
-                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                    }
+            this.renderEyes(pass, inst, true);
+            this.renderHair(pass, inst, true);
+            for (const draw of inst.drawCalls) {
+                if (draw.type === "transparent" && this.shouldRenderDrawCall(inst, draw)) {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
                 }
-                this.drawOutlines(pass, true);
             }
-            if (this.groundHasReflections) {
-                this.renderGround(pass);
+            this.drawOutlines(pass, inst, true, true);
+            return;
+        }
+        pass.setPipeline(this.modelPipeline);
+        for (const draw of inst.drawCalls) {
+            if (draw.type === "opaque" && this.shouldRenderDrawCall(inst, draw)) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+        this.renderEyes(pass, inst, false);
+        this.drawOutlines(pass, inst, false);
+        this.renderHair(pass, inst, false);
+        pass.setPipeline(this.modelPipeline);
+        for (const draw of inst.drawCalls) {
+            if (draw.type === "transparent" && this.shouldRenderDrawCall(inst, draw)) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
-            pass.end();
-            this.device.queue.submit([encoder.finish()]);
-            this.updateStats(performance.now() - currentTime);
         }
+        this.drawOutlines(pass, inst, true);
     }
     updateCameraUniforms() {
         const viewMatrix = this.camera.getViewMatrix();
@@ -1966,22 +1862,18 @@ export class Engine {
         }
     }
     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);
-        // Increment version to invalidate cached skinned vertices
-        this.skinMatricesVersion++;
+        this.forEachInstance((inst) => {
+            const skinMatrices = inst.model.getSkinMatrices();
+            this.device.queue.writeBuffer(inst.skinMatrixBuffer, 0, skinMatrices.buffer, skinMatrices.byteOffset, skinMatrices.byteLength);
+        });
     }
-    drawOutlines(pass, transparent, useReflectionPipeline = false) {
-        if (useReflectionPipeline) {
-            // Skip outlines for reflections - not critical for the effect
+    drawOutlines(pass, inst, transparent, useReflectionPipeline = false) {
+        if (useReflectionPipeline)
             return;
-        }
         pass.setPipeline(this.outlinePipeline);
         const outlineType = transparent ? "transparent-outline" : "opaque-outline";
-        for (const draw of this.drawCalls) {
-            if (draw.type === outlineType && this.shouldRenderDrawCall(draw)) {
+        for (const draw of inst.drawCalls) {
+            if (draw.type === outlineType && this.shouldRenderDrawCall(inst, draw)) {
                 pass.setBindGroup(0, draw.bindGroup);
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
@@ -2031,23 +1923,19 @@ export class Engine {
             1,
         ]));
     }
-    writeMirrorTransformedSkinMatrices(mirrorMatrix) {
-        if (!this.currentModel || !this.skinMatrixBuffer)
-            return;
-        const originalMatrices = this.currentModel.getSkinMatrices();
+    writeMirrorTransformedSkinMatrices(inst, mirrorMatrix) {
+        const originalMatrices = inst.model.getSkinMatrices();
         const transformedMatrices = new Float32Array(originalMatrices.length);
         for (let i = 0; i < originalMatrices.length; i += 16) {
             const boneMatrixValues = new Float32Array(16);
-            for (let j = 0; j < 16; j++) {
+            for (let j = 0; j < 16; j++)
                 boneMatrixValues[j] = originalMatrices[i + j];
-            }
             const boneMatrix = new Mat4(boneMatrixValues);
             const transformed = mirrorMatrix.multiply(boneMatrix);
-            for (let j = 0; j < 16; j++) {
+            for (let j = 0; j < 16; j++)
                 transformedMatrices[i + j] = transformed.values[j];
-            }
         }
-        this.device.queue.writeBuffer(this.skinMatrixBuffer, 0, transformedMatrices);
+        this.device.queue.writeBuffer(inst.skinMatrixBuffer, 0, transformedMatrices);
     }
 }
 Engine.instance = null;