reze-engine 0.7.0 → 0.8.1

package/dist/engine.js

@@ -1,6 +1,6 @@
 import { Camera } from "./camera";
 import { Mat4, Vec3 } from "./math";
-import { PmxLoader } from "./pmx-loader";
+import { Physics } from "./physics";
 export const DEFAULT_ENGINE_OPTIONS = {
     ambientColor: new Vec3(0.88, 0.88, 0.88),
     directionalLightIntensity: 0.24,
@@ -10,10 +10,15 @@ 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 {
+    static getInstance() {
+        if (!Engine.instance) {
+            throw new Error("Engine not ready: create Engine, await init(), then load models via Model.loadPmx().");
+        }
+        return Engine.instance;
+    }
     constructor(canvas, options) {
         this.cameraMatrixData = new Float32Array(36);
         this.lightData = new Float32Array(64);
@@ -23,22 +28,19 @@ export class Engine {
         // Constants
         this.STENCIL_EYE_VALUE = 1;
         this.groundHasReflections = false;
-        this.cachedSkinMatricesVersion = -1;
-        this.skinMatricesVersion = 0;
+        this.groundMode = "reflection";
+        this.shadowLightVPMatrix = new Float32Array(16);
+        this.groundDrawCall = null;
+        this.shadowVPLightX = Number.NaN;
+        this.shadowVPLightY = Number.NaN;
+        this.shadowVPLightZ = Number.NaN;
         // 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();
@@ -51,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();
@@ -84,6 +84,7 @@ export class Engine {
             }
         };
         this.canvas = canvas;
+        this.sampleCount = options?.multisampleCount ?? DEFAULT_ENGINE_OPTIONS.multisampleCount;
         if (options) {
             this.ambientColor = options.ambientColor ?? DEFAULT_ENGINE_OPTIONS.ambientColor;
             this.directionalLightIntensity =
@@ -94,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
@@ -121,6 +120,7 @@ export class Engine {
         this.setupLighting();
         this.createPipelines();
         this.setupResize();
+        Engine.instance = this;
     }
     createRenderPipeline(config) {
         return this.device.createRenderPipeline({
@@ -379,15 +379,14 @@ export class Engine {
                 depthCompare: "less-equal",
             },
         });
-        // Create ground/reflection pipeline with reflection texture support
         this.groundBindGroupLayout = this.device.createBindGroupLayout({
             label: "ground bind group layout",
             entries: [
-                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // camera
-                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // light
-                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // reflectionTexture
-                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // reflectionSampler
-                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // groundMaterial
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
             ],
         });
         const groundPipelineLayout = this.device.createPipelineLayout({
@@ -397,97 +396,41 @@ export class Engine {
         const groundShaderModule = this.device.createShaderModule({
             label: "ground shaders",
             code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct LightUniforms {
-          ambientColor: vec4f,
-          lights: array<Light, 4>,
-        };
-
-        struct Light {
-          direction: vec4f,
-          color: vec4f,
-        };
-
-        struct GroundMaterialUniforms {
-          diffuseColor: vec3f,
-          reflectionLevel: f32,
-          fadeStart: f32,
-          fadeEnd: f32,
-          _padding1: f32,
-          _padding2: f32,
-        };
-
+        struct CameraUniforms { view: mat4x4f, projection: mat4x4f, viewPos: vec3f, _p: f32, };
+        struct Light { direction: vec4f, color: vec4f, };
+        struct LightUniforms { ambientColor: vec4f, lights: array<Light, 4>, };
+        struct GroundMaterialUniforms { diffuseColor: vec3f, reflectionLevel: f32, fadeStart: f32, fadeEnd: f32, _a: f32, _b: f32, };
         @group(0) @binding(0) var<uniform> camera: CameraUniforms;
         @group(0) @binding(1) var<uniform> light: LightUniforms;
         @group(0) @binding(2) var reflectionTexture: texture_2d<f32>;
         @group(0) @binding(3) var reflectionSampler: sampler;
         @group(0) @binding(4) var<uniform> material: GroundMaterialUniforms;
-
         struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) normal: vec3f,
-          @location(1) uv: vec2f,
-          @location(2) worldPos: vec3f,
+          @builtin(position) position: vec4f, @location(0) normal: vec3f, @location(1) uv: vec2f, @location(2) worldPos: vec3f,
         };
-
-        @vertex fn vs(
-          @location(0) position: vec3f,
-          @location(1) normal: vec3f,
-          @location(2) uv: vec2f,
-        ) -> VertexOutput {
-          var output: VertexOutput;
-          let worldPos = position;
-          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
-          output.normal = normal;
-          output.uv = uv;
-          output.worldPos = worldPos;
-          return output;
+        @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f) -> VertexOutput {
+          var o: VertexOutput;
+          o.worldPos = position;
+          o.position = camera.projection * camera.view * vec4f(position, 1.0);
+          o.normal = normal; o.uv = uv; return o;
         }
-
         @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
           let n = normalize(input.normal);
-
+          let centerDist = length(input.worldPos.xz);
+          let t = clamp((centerDist - material.fadeStart) / max(material.fadeEnd - material.fadeStart, 0.001), 0.0, 1.0);
+          let edgeFade = 1.0 - smoothstep(0.0, 1.0, t);
           let clipPos = camera.projection * camera.view * vec4f(input.worldPos, 1.0);
           let ndcPos = clipPos.xyz / clipPos.w;
-          var reflectionUV = vec2f(ndcPos.x * 0.5 + 0.5, 0.5 - ndcPos.y * 0.5);
-
+          let reflectionUV = vec2f(ndcPos.x * 0.5 + 0.5, 0.5 - ndcPos.y * 0.5);
           let sampledReflectionColor = textureSample(reflectionTexture, reflectionSampler, reflectionUV).rgb;
-          let isValidReflection = clipPos.w > 0.0 &&
-                                  all(reflectionUV >= vec2f(0.0)) && all(reflectionUV <= vec2f(1.0));
-          var reflectionColor = select(vec3f(1.0, 1.0, 1.0), sampledReflectionColor, isValidReflection);
-
-          let distanceFromCamera = length(input.worldPos - camera.viewPos);
-          let fadeFactor = clamp((distanceFromCamera - 15.0) / 20.0, 0.0, 1.0);
-          reflectionColor *= (1.0 - fadeFactor * 0.3);
-
-          let diffuseColor = material.diffuseColor;
-          var finalColor = mix(diffuseColor, reflectionColor, material.reflectionLevel);
-
-          // Ground edge fade effect - smooth fade out at edges based on distance from center
-          let centerDist = length(input.worldPos.xz); // Distance from ground center in XZ plane
-
-          // Smoothstep for much smoother gradient transition
-          let t = clamp((centerDist - material.fadeStart) / (material.fadeEnd - material.fadeStart), 0.0, 1.0);
-          let edgeFade = 1.0 - smoothstep(0.0, 1.0, t);
-          finalColor *= edgeFade;
-
-          // Single directional light
+          let isValidReflection = clipPos.w > 0.0 && all(reflectionUV >= vec2f(0.0)) && all(reflectionUV <= vec2f(1.0));
+          let reflectionColor = select(vec3f(1.0, 1.0, 1.0), sampledReflectionColor, isValidReflection);
+          let fadeFactor = clamp((length(input.worldPos - camera.viewPos) - 15.0) / 20.0, 0.0, 1.0);
+          let refl = reflectionColor * (1.0 - fadeFactor * 0.3);
+          var finalColor = mix(material.diffuseColor, refl, material.reflectionLevel) * edgeFade;
           let l = -light.lights[0].direction.xyz;
-          let nDotL = max(dot(n, l), 0.0);
-          let intensity = light.lights[0].color.w;
-          let radiance = light.lights[0].color.xyz * intensity;
-          let lightAccum = light.ambientColor.xyz + radiance * nDotL;
-
-          // Apply lighting to the blended color
-          let litColor = finalColor * lightAccum;
-
-          return vec4f(litColor, edgeFade);
+          let lightAccum = light.ambientColor.xyz + light.lights[0].color.xyz * light.lights[0].color.w * max(dot(n, l), 0.0);
+          return vec4f(finalColor * lightAccum, edgeFade);
         }
       `,
         });
@@ -498,12 +441,123 @@ export class Engine {
             vertexBuffers: fullVertexBuffers,
             fragmentTarget: standardBlend,
             cullMode: "back",
+            depthStencil: { format: "depth24plus-stencil8", depthWriteEnabled: true, depthCompare: "less-equal" },
+        });
+        this.shadowLightVPBuffer = this.device.createBuffer({
+            size: 64,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        const shadowBindGroupLayout = this.device.createBindGroupLayout({
+            label: "shadow depth bind layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } },
+            ],
+        });
+        const shadowShader = this.device.createShaderModule({
+            label: "shadow depth",
+            code: /* wgsl */ `
+        struct LightVP { viewProj: mat4x4f, };
+        @group(0) @binding(0) var<uniform> lp: LightVP;
+        @group(0) @binding(1) var<storage, read> skinMats: array<mat4x4f>;
+        @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f,
+          @location(3) joints0: vec4<u32>, @location(4) weights0: vec4<f32>) -> @builtin(position) vec4f {
+          let pos4 = vec4f(position, 1.0);
+          let ws = weights0.x + weights0.y + weights0.z + weights0.w;
+          let inv = select(1.0, 1.0 / ws, ws > 0.0001);
+          let nw = select(vec4f(1.0,0.0,0.0,0.0), weights0 * inv, ws > 0.0001);
+          var sp = vec4f(0.0);
+          for (var i = 0u; i < 4u; i++) { sp += (skinMats[joints0[i]] * pos4) * nw[i]; }
+          return lp.viewProj * vec4f(sp.xyz, 1.0);
+        }
+      `,
+        });
+        this.shadowDepthPipeline = this.device.createRenderPipeline({
+            label: "shadow depth pipeline",
+            layout: this.device.createPipelineLayout({ bindGroupLayouts: [shadowBindGroupLayout] }),
+            vertex: { module: shadowShader, entryPoint: "vs", buffers: fullVertexBuffers },
+            primitive: { cullMode: "none" },
             depthStencil: {
-                format: "depth24plus-stencil8",
+                format: "depth32float",
                 depthWriteEnabled: true,
                 depthCompare: "less-equal",
+                depthBias: 2,
+                depthBiasSlopeScale: 1.5,
+                depthBiasClamp: 0,
             },
         });
+        this.shadowComparisonSampler = this.device.createSampler({
+            compare: "less",
+            magFilter: "linear",
+            minFilter: "linear",
+        });
+        this.groundShadowBindGroupLayout = this.device.createBindGroupLayout({
+            label: "ground shadow layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "comparison" } },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 5, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ],
+        });
+        const groundShadowShader = this.device.createShaderModule({
+            label: "ground shadow",
+            code: /* wgsl */ `
+        struct CameraUniforms { view: mat4x4f, projection: mat4x4f, viewPos: vec3f, _p: f32, };
+        struct Light { direction: vec4f, color: vec4f, };
+        struct LightUniforms { ambientColor: vec4f, lights: array<Light, 4>, };
+        struct GroundShadowMat { diffuseColor: vec3f, fadeStart: f32, fadeEnd: f32, shadowStrength: f32, pcfTexel: f32, _y: f32, };
+        struct LightVP { viewProj: mat4x4f, };
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(1) var<uniform> light: LightUniforms;
+        @group(0) @binding(2) var shadowMap: texture_depth_2d;
+        @group(0) @binding(3) var shadowSampler: sampler_comparison;
+        @group(0) @binding(4) var<uniform> material: GroundShadowMat;
+        @group(0) @binding(5) var<uniform> lightVP: LightVP;
+        struct VO { @builtin(position) position: vec4f, @location(0) worldPos: vec3f, @location(1) normal: vec3f, };
+        @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f) -> VO {
+          var o: VO; o.worldPos = position; o.normal = normal;
+          o.position = camera.projection * camera.view * vec4f(position, 1.0); return o;
+        }
+        @fragment fn fs(i: VO) -> @location(0) vec4f {
+          let n = normalize(i.normal);
+          let centerDist = length(i.worldPos.xz);
+          let edgeFade = 1.0 - smoothstep(0.0, 1.0, clamp((centerDist - material.fadeStart) / max(material.fadeEnd - material.fadeStart, 0.001), 0.0, 1.0));
+          let lclip = lightVP.viewProj * vec4f(i.worldPos, 1.0);
+          let ndc = lclip.xyz / max(lclip.w, 1e-6);
+          let suv = vec2f(ndc.x * 0.5 + 0.5, 0.5 - ndc.y * 0.5);
+          let suv_c = clamp(suv, vec2f(0.02), vec2f(0.98));
+          let st = material.pcfTexel;
+          let compareZ = ndc.z - 0.0035;
+          var vis = 0.0;
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(-st, -st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(0.0, -st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(st, -st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(-st, 0.0), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c, compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(st, 0.0), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(-st, st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(0.0, st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(st, st), compareZ);
+          vis *= 0.1111111;
+          let sun = light.ambientColor.xyz + light.lights[0].color.xyz * light.lights[0].color.w * max(dot(n, -light.lights[0].direction.xyz), 0.0);
+          let dark = (1.0 - vis) * material.shadowStrength;
+          let lit = material.diffuseColor * sun * (1.0 - dark * 0.65);
+          return vec4f(lit * edgeFade, edgeFade);
+        }
+      `,
+        });
+        this.groundShadowPipeline = this.createRenderPipeline({
+            label: "ground shadow pipeline",
+            layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.groundShadowBindGroupLayout] }),
+            shaderModule: groundShadowShader,
+            vertexBuffers: fullVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "back",
+            depthStencil: { format: "depth24plus-stencil8", depthWriteEnabled: true, depthCompare: "less-equal" },
+        });
         // Create reflection pipeline (multisampled version for higher quality)
         this.reflectionPipeline = this.createRenderPipeline({
             label: "reflection pipeline",
@@ -894,50 +948,32 @@ export class Engine {
             reflectionTextureSize: 1024,
             fadeStart: 5.0,
             fadeEnd: 60.0,
+            mode: "reflection",
+            shadowMapSize: 4096,
+            shadowStrength: 1.0,
             ...options,
         };
-        // Create ground geometry
+        this.groundMode = opts.mode;
         this.createGroundGeometry(opts.width, opts.height);
-        this.createGroundMaterialBuffer(opts.diffuseColor, opts.reflectionLevel, opts.fadeStart, opts.fadeEnd);
-        this.createReflectionTexture(opts.reflectionTextureSize);
+        if (opts.mode === "reflection") {
+            this.createGroundMaterialBuffer(opts.diffuseColor, opts.reflectionLevel, opts.fadeStart, opts.fadeEnd);
+            this.createReflectionTexture(opts.reflectionTextureSize);
+        }
+        else {
+            this.createShadowGroundResources(opts.shadowMapSize, opts.diffuseColor, opts.fadeStart, opts.fadeEnd, opts.shadowStrength);
+        }
         this.groundHasReflections = true;
-        this.drawCalls.push({
+        this.groundDrawCall = {
             type: "ground",
-            count: 6, // 2 triangles, 3 indices each
+            count: 6,
             firstIndex: 0,
-            bindGroup: this.groundReflectionBindGroup,
+            bindGroup: (opts.mode === "reflection" ? this.groundReflectionBindGroup : this.groundShadowBindGroup),
             materialName: "Ground",
-        });
+        };
     }
     updateLightBuffer() {
         this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData);
     }
-    async loadAnimation(url) {
-        if (!this.currentModel)
-            return;
-        await this.currentModel.loadVmd(url);
-    }
-    loadAnimationData(data) {
-        this.currentModel?.loadAnimationData(data);
-    }
-    getAnimationData() {
-        return this.currentModel?.getAnimationData() ?? null;
-    }
-    playAnimation() {
-        this.currentModel?.playAnimation();
-    }
-    stopAnimation() {
-        this.currentModel?.stopAnimation();
-    }
-    pauseAnimation() {
-        this.currentModel?.pauseAnimation();
-    }
-    seekAnimation(time) {
-        this.currentModel?.seekAnimation(time);
-    }
-    getAnimationProgress() {
-        return this.currentModel?.getAnimationProgress() ?? { current: 0, duration: 0, percentage: 0 };
-    }
     getStats() {
         return { ...this.stats };
     }
@@ -961,7 +997,9 @@ export class Engine {
     }
     dispose() {
         this.stopRenderLoop();
-        this.stopAnimation();
+        this.forEachInstance((inst) => inst.model.stopAnimation());
+        if (Engine.instance === this)
+            Engine.instance = null;
         if (this.camera)
             this.camera.detachControl();
         // Remove raycasting event listeners
@@ -974,145 +1012,175 @@ export class Engine {
             this.resizeObserver = null;
         }
     }
-    // Step 6: Load PMX model file
-    async loadModel(path) {
-        const pathParts = path.split("/");
+    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();
-        const dir = pathParts.join("/") + "/";
-        this.modelDir = dir;
-        const model = await PmxLoader.load(path);
-        // Clear cached skinned vertices when loading a new model
-        this.cachedSkinnedVertices = undefined;
-        this.cachedSkinMatricesVersion = -1;
-        await this.setupModelBuffers(model);
+        const basePath = pathParts.join("/") + "/";
+        await this.setupModelInstance(key, model, basePath);
+        return key;
     }
-    rotateBones(boneRotations, durationMs) {
-        this.currentModel?.rotateBones(boneRotations, durationMs);
+    async registerModel(model, pmxPath) {
+        return this.addModel(model, pmxPath);
     }
-    // moveBones now takes relative translations (VMD-style) by default
-    moveBones(boneTranslations, durationMs) {
-        this.currentModel?.moveBones(boneTranslations, durationMs);
+    removeModel(name) {
+        this.modelInstances.delete(name);
     }
-    resetAllBones() {
-        this.currentModel?.resetAllBones();
+    getModelNames() {
+        return Array.from(this.modelInstances.keys());
     }
-    resetAllMorphs() {
-        this.currentModel?.resetAllMorphs();
+    getModel(name) {
+        return this.modelInstances.get(name)?.model ?? null;
     }
-    setMorphWeight(name, weight, durationMs) {
-        if (!this.currentModel)
+    markVertexBufferDirty(modelNameOrModel) {
+        if (modelNameOrModel === undefined)
+            return;
+        if (typeof modelNameOrModel === "string") {
+            const inst = this.modelInstances.get(modelNameOrModel);
+            if (inst)
+                inst.vertexBufferNeedsUpdate = true;
             return;
-        this.currentModel.setMorphWeight(name, weight, durationMs);
-        if (!durationMs || durationMs === 0) {
-            this.vertexBufferNeedsUpdate = true;
-        }
-    }
-    setMaterialVisible(name, visible) {
-        if (visible) {
-            this.hiddenMaterials.delete(name);
-        }
-        else {
-            this.hiddenMaterials.add(name);
-        }
-    }
-    toggleMaterialVisible(name) {
-        if (this.hiddenMaterials.has(name)) {
-            this.hiddenMaterials.delete(name);
         }
-        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);
     }
-    getBones() {
-        return this.currentModel?.getSkeleton().bones.map((bone) => bone.name) ?? [];
+    isMaterialVisible(modelName, materialName) {
+        const inst = this.modelInstances.get(modelName);
+        return inst ? !inst.hiddenMaterials.has(materialName) : false;
     }
-    getMorphs() {
-        return this.currentModel?.getMorphing().morphs.map((morph) => morph.name) ?? [];
+    setModelIKEnabled(modelName, enabled) {
+        this.modelInstances.get(modelName)?.model.setIKEnabled(enabled);
     }
-    getMaterials() {
-        return this.currentModel?.getMaterials().map((material) => material.name) ?? [];
+    setModelPhysicsEnabled(modelName, enabled) {
+        this.modelInstances.get(modelName)?.model.setPhysicsEnabled(enabled);
     }
-    // IK control
-    get disableIK() {
-        return this._disableIK;
+    resetPhysics() {
+        this.forEachInstance((inst) => {
+            if (!inst.physics)
+                return;
+            inst.model.computeWorldMatrices();
+            inst.physics.reset(inst.model.getWorldMatrices(), inst.model.getBoneInverseBindMatrices());
+        });
     }
-    set disableIK(value) {
-        this._disableIK = value;
-        this.currentModel?.setIKEnabled(!value);
+    instances() {
+        return this.modelInstances.values();
     }
-    // Physics control
-    get disablePhysics() {
-        return this._disablePhysics;
+    forEachInstance(fn) {
+        for (const inst of this.instances())
+            fn(inst);
     }
-    set disablePhysics(value) {
-        this._disablePhysics = value;
-        this.currentModel?.setPhysicsEnabled(!value);
+    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() {
-        if (!this.currentModel || !this.vertexBuffer)
-            return;
-        const vertices = this.currentModel.getVertices();
-        if (!vertices || vertices.length === 0)
+    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;
@@ -1178,27 +1246,24 @@ export class Engine {
         });
         this.device.queue.writeBuffer(this.groundIndexBuffer, 0, indices);
     }
-    createGroundMaterialBuffer(diffuseColor = new Vec3(1, 1, 1), reflectionLevel = 0.5, fadeStart = 5.0, fadeEnd = 60.0) {
-        const materialData = new Float32Array([
-            diffuseColor.x,
-            diffuseColor.y,
-            diffuseColor.z, // diffuseColor (12 bytes)
-            reflectionLevel, // reflectionLevel (4 bytes)
-            fadeStart, // fadeStart (4 bytes)
-            fadeEnd, // fadeEnd (4 bytes)
-            0, // padding (4 bytes)
-            0, // padding (4 bytes)
-            0, // padding (4 bytes)
-            0, // padding (4 bytes)
-        ]);
+    createGroundMaterialBuffer(diffuseColor, reflectionLevel, fadeStart, fadeEnd) {
+        const u = new Float32Array(8);
+        u[0] = diffuseColor.x;
+        u[1] = diffuseColor.y;
+        u[2] = diffuseColor.z;
+        u[3] = reflectionLevel;
+        u[4] = fadeStart;
+        u[5] = fadeEnd;
+        u[6] = 0;
+        u[7] = 0;
         this.groundMaterialUniformBuffer = this.device.createBuffer({
             label: "ground material uniform buffer",
-            size: materialData.byteLength,
+            size: 64,
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
         });
-        this.device.queue.writeBuffer(this.groundMaterialUniformBuffer, 0, materialData);
+        this.device.queue.writeBuffer(this.groundMaterialUniformBuffer, 0, u);
     }
-    createReflectionTexture(size = 1024) {
+    createReflectionTexture(size) {
         this.groundReflectionTexture = this.device.createTexture({
             label: "ground reflection texture",
             size: [size, size],
@@ -1219,34 +1284,88 @@ export class Engine {
             format: "depth24plus-stencil8",
             usage: GPUTextureUsage.RENDER_ATTACHMENT,
         });
-        // Create a bind group for the reflection texture that can be used in the ground material
         this.groundReflectionBindGroup = this.device.createBindGroup({
             label: "ground reflection bind group",
             layout: this.groundBindGroupLayout,
             entries: [
                 { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
                 { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                { binding: 2, resource: this.groundReflectionResolveTexture.createView() }, // Use resolve texture for sampling
+                { binding: 2, resource: this.groundReflectionResolveTexture.createView() },
                 { binding: 3, resource: this.materialSampler },
                 { binding: 4, resource: { buffer: this.groundMaterialUniformBuffer } },
             ],
         });
     }
-    async setupMaterials(model) {
+    createShadowGroundResources(shadowMapSize, diffuseColor, fadeStart, fadeEnd, shadowStrength) {
+        this.shadowMapTexture = this.device.createTexture({
+            label: "shadow map",
+            size: [shadowMapSize, shadowMapSize],
+            format: "depth32float",
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        this.shadowMapDepthView = this.shadowMapTexture.createView();
+        const gb = new Float32Array(8);
+        gb[0] = diffuseColor.x;
+        gb[1] = diffuseColor.y;
+        gb[2] = diffuseColor.z;
+        gb[3] = fadeStart;
+        gb[4] = fadeEnd;
+        gb[5] = shadowStrength;
+        gb[6] = 1.2 / shadowMapSize;
+        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.groundShadowBindGroup = this.device.createBindGroup({
+            label: "ground shadow bind",
+            layout: this.groundShadowBindGroupLayout,
+            entries: [
+                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                { binding: 2, resource: this.shadowMapDepthView },
+                { binding: 3, resource: this.shadowComparisonSampler },
+                { binding: 4, resource: { buffer: this.groundShadowMaterialBuffer } },
+                { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
+            ],
+        });
+    }
+    updateShadowLightVP() {
+        const lx = this.lightData[4];
+        const ly = this.lightData[5];
+        const lz = this.lightData[6];
+        if (lx === this.shadowVPLightX && ly === this.shadowVPLightY && lz === this.shadowVPLightZ)
+            return;
+        this.shadowVPLightX = lx;
+        this.shadowVPLightY = ly;
+        this.shadowVPLightZ = lz;
+        const dir = new Vec3(lx, ly, lz);
+        if (dir.length() < 1e-6) {
+            dir.x = 0.35;
+            dir.y = -1;
+            dir.z = 0.2;
+        }
+        else
+            dir.normalize();
+        const target = new Vec3(0, 11, 0);
+        const eye = new Vec3(target.x - dir.x * 72, target.y - dir.y * 72, target.z - dir.z * 72);
+        const view = Mat4.lookAt(eye, target, new Vec3(0, 1, 0));
+        const proj = Mat4.orthographicLh(-72, 72, -72, 72, 1, 140);
+        const vp = proj.multiply(view);
+        this.shadowLightVPMatrix.set(vp.values);
+        this.device.queue.writeBuffer(this.shadowLightVPBuffer, 0, this.shadowLightVPMatrix);
+    }
+    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;
@@ -1257,124 +1376,87 @@ 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;
         }
+        for (const d of inst.drawCalls) {
+            if (d.type === "opaque" || d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes")
+                inst.shadowDrawCalls.push(d);
+        }
     }
     createMaterialUniformBuffer(label, alpha, isOverEyes, diffuseColor, ambientColor, specularColor, shininess) {
         const data = new Float32Array(20);
@@ -1411,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);
@@ -1446,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);
@@ -1460,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);
                 }
@@ -1469,23 +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.groundReflectionTexture) {
+        if (this.groundMode === "reflection" && this.groundReflectionTexture)
             this.renderReflectionTexture();
-        }
-        pass.setPipeline(this.groundPipeline);
+        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);
-            }
-        }
-        // // Restore model index buffer for subsequent rendering
-        // pass.setIndexBuffer(this.indexBuffer!, "uint32")
+        pass.setBindGroup(0, this.groundDrawCall.bindGroup);
+        pass.drawIndexed(this.groundDrawCall.count, 1, this.groundDrawCall.firstIndex, 0, 0);
     }
     renderReflectionTexture() {
         if (!this.groundReflectionTexture)
@@ -1515,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);
@@ -1561,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);
@@ -1582,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);
@@ -1591,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) {
@@ -1602,237 +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;
-            }
-            // Update skin matrices buffer
+        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();
-            // Use single encoder for render
-            const encoder = this.device.createCommandEncoder();
-            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);
-                    }
+        }
+        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);
                 }
-                // 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);
             }
-            // Pass 4: Ground (with reflections)
-            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();
@@ -1856,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);
             }
@@ -1921,22 +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;