reze-engine 0.7.0 → 0.8.1

package/src/engine.ts

@@ -1,10 +1,9 @@
 import { Camera } from "./camera"
 import { Mat4, Quat, Vec3 } from "./math"
 import { Model } from "./model"
-import type { AnimationData } from "./animation"
-import { PmxLoader } from "./pmx-loader"
+import { Physics } from "./physics"
 
-export type RaycastCallback = (material: string | null, screenX: number, screenY: number) => void
+export type RaycastCallback = (modelName: string, material: string | null, screenX: number, screenY: number) => void
 
 export type EngineOptions = {
   ambientColor?: Vec3
@@ -15,8 +14,7 @@ export type EngineOptions = {
   cameraTarget?: Vec3
   cameraFov?: number
   onRaycast?: RaycastCallback
-  disableIK?: boolean
-  disablePhysics?: boolean
+  multisampleCount?: 1 | 4
 }
 
 export type RequiredEngineOptions = Required<Omit<EngineOptions, "onRaycast">> & Pick<EngineOptions, "onRaycast">
@@ -30,8 +28,7 @@ export const DEFAULT_ENGINE_OPTIONS: RequiredEngineOptions = {
   cameraTarget: new Vec3(0, 12.5, 0),
   cameraFov: Math.PI / 4,
   onRaycast: undefined,
-  disableIK: false,
-  disablePhysics: false,
+  multisampleCount: 4,
 }
 
 export interface EngineStats {
@@ -59,7 +56,33 @@ interface DrawCall {
   materialName: string
 }
 
+interface ModelInstance {
+  name: string
+  model: Model
+  basePath: string
+  vertexBuffer: GPUBuffer
+  indexBuffer: GPUBuffer
+  jointsBuffer: GPUBuffer
+  weightsBuffer: GPUBuffer
+  skinMatrixBuffer: GPUBuffer
+  drawCalls: DrawCall[]
+  shadowDrawCalls: DrawCall[]
+  shadowBindGroup: GPUBindGroup
+  hiddenMaterials: Set<string>
+  physics: Physics | null
+  vertexBufferNeedsUpdate: boolean
+}
+
 export class Engine {
+  private static instance: Engine | null = null
+
+  public static getInstance(): Engine {
+    if (!Engine.instance) {
+      throw new Error("Engine not ready: create Engine, await init(), then load models via Model.loadPmx().")
+    }
+    return Engine.instance
+  }
+
   private canvas: HTMLCanvasElement
   private device!: GPUDevice
   private context!: GPUCanvasContext
@@ -73,8 +96,6 @@ export class Engine {
   private lightUniformBuffer!: GPUBuffer
   private lightData = new Float32Array(64)
   private lightCount = 0
-  private vertexBuffer!: GPUBuffer
-  private indexBuffer?: GPUBuffer
   private resizeObserver: ResizeObserver | null = null
   private depthTexture!: GPUTexture
   // Material rendering pipelines
@@ -92,12 +113,8 @@ export class Engine {
   private hairOutlinePipeline!: GPURenderPipeline
   private mainBindGroupLayout!: GPUBindGroupLayout
   private outlineBindGroupLayout!: GPUBindGroupLayout
-  private jointsBuffer!: GPUBuffer
-  private weightsBuffer!: GPUBuffer
-  private skinMatrixBuffer?: GPUBuffer
-  private inverseBindMatrixBuffer?: GPUBuffer
   private multisampleTexture!: GPUTexture
-  private readonly sampleCount = 4
+  private sampleCount: 1 | 4 = 4
   private renderPassDescriptor!: GPURenderPassDescriptor
   // Constants
   private readonly STENCIL_EYE_VALUE = 1
@@ -118,29 +135,32 @@ export class Engine {
   private groundReflectionBindGroup?: GPUBindGroup
   private groundMaterialUniformBuffer?: GPUBuffer
   private groundHasReflections = false
+  private groundMode: "reflection" | "shadow" = "reflection"
+  private shadowMapTexture?: GPUTexture
+  private shadowMapDepthView?: GPUTextureView
+  private shadowDepthPipeline!: GPURenderPipeline
+  private shadowLightVPBuffer!: GPUBuffer
+  private shadowLightVPMatrix = new Float32Array(16)
+  private groundShadowPipeline!: GPURenderPipeline
+  private groundShadowBindGroupLayout!: GPUBindGroupLayout
+  private groundShadowBindGroup?: GPUBindGroup
+  private shadowComparisonSampler!: GPUSampler
+  private groundShadowMaterialBuffer?: GPUBuffer
+  private groundDrawCall: DrawCall | null = null
+  private shadowVPLightX = Number.NaN
+  private shadowVPLightY = Number.NaN
+  private shadowVPLightZ = Number.NaN
 
-  // Raycasting
   private onRaycast?: RaycastCallback
-  private cachedSkinnedVertices?: Float32Array
-  private cachedSkinMatricesVersion = -1
-  private skinMatricesVersion = 0
   // Double-tap detection
   private lastTouchTime = 0
   private readonly DOUBLE_TAP_DELAY = 300 // ms
 
-  // IK and Physics flags
-  private _disableIK = false
-  private _disablePhysics = false
-
-  private currentModel: Model | null = null
-  private modelDir: string = ""
+  private modelInstances = new Map<string, ModelInstance>()
   private materialSampler!: GPUSampler
   private textureCache = new Map<string, GPUTexture>()
-  private vertexBufferNeedsUpdate = false
-  // Unified draw call list
-  private drawCalls: DrawCall[] = []
-  // Material visibility tracking
-  private hiddenMaterials = new Set<string>()
+  /** Reusable buffer for raycast skinning to avoid per-instance allocations (Three.js/Babylon.js style). */
+  private raycastVertexBuffer: Float32Array | null = null
 
   private lastFpsUpdate = performance.now()
   private framesSinceLastUpdate = 0
@@ -156,6 +176,7 @@ export class Engine {
 
   constructor(canvas: HTMLCanvasElement, options?: EngineOptions) {
     this.canvas = canvas
+    this.sampleCount = options?.multisampleCount ?? DEFAULT_ENGINE_OPTIONS.multisampleCount
     if (options) {
       this.ambientColor = options.ambientColor ?? DEFAULT_ENGINE_OPTIONS.ambientColor!
       this.directionalLightIntensity =
@@ -166,8 +187,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
     }
   }
 
@@ -198,6 +217,7 @@ export class Engine {
     this.setupLighting()
     this.createPipelines()
     this.setupResize()
+    Engine.instance = this
   }
 
   private createRenderPipeline(config: {
@@ -477,121 +497,61 @@ export class Engine {
       },
     })
 
-    // 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({
       label: "ground pipeline layout",
       bindGroupLayouts: [this.groundBindGroupLayout],
     })
-
     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);
         }
       `,
     })
-
     this.groundPipeline = this.createRenderPipeline({
       label: "ground pipeline",
       layout: groundPipelineLayout,
@@ -599,12 +559,124 @@ 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 as GPUVertexBufferLayout[] },
+      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({
@@ -1029,6 +1101,9 @@ export class Engine {
     reflectionTextureSize?: number
     fadeStart?: number
     fadeEnd?: number
+    mode?: "reflection" | "shadow"
+    shadowMapSize?: number
+    shadowStrength?: number
   }): void {
     const opts = {
       width: 100,
@@ -1038,62 +1113,33 @@ export class Engine {
       reflectionTextureSize: 1024,
       fadeStart: 5.0,
       fadeEnd: 60.0,
+      mode: "reflection" as const,
+      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",
-    })
+    }
   }
 
   private updateLightBuffer() {
     this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData)
   }
 
-  public async loadAnimation(url: string) {
-    if (!this.currentModel) return
-    await this.currentModel.loadVmd(url)
-  }
-
-  public loadAnimationData(data: AnimationData) {
-    this.currentModel?.loadAnimationData(data)
-  }
-
-  public getAnimationData(): AnimationData | null {
-    return this.currentModel?.getAnimationData() ?? null
-  }
-
-  public playAnimation() {
-    this.currentModel?.playAnimation()
-  }
-
-  public stopAnimation() {
-    this.currentModel?.stopAnimation()
-  }
-
-  public pauseAnimation() {
-    this.currentModel?.pauseAnimation()
-  }
-
-  public seekAnimation(time: number) {
-    this.currentModel?.seekAnimation(time)
-  }
-
-  public getAnimationProgress() {
-    return this.currentModel?.getAnimationProgress() ?? { current: 0, duration: 0, percentage: 0 }
-  }
-
   public getStats(): EngineStats {
     return { ...this.stats }
   }
@@ -1124,7 +1170,8 @@ export class Engine {
 
   public 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
@@ -1139,189 +1186,201 @@ export class Engine {
     }
   }
 
-  // Step 6: Load PMX model file
-  public async loadModel(path: string) {
-    const pathParts = path.split("/")
+  public async addModel(model: Model, pmxPath: string, name?: string): Promise<string> {
+    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
   }
 
-  public rotateBones(boneRotations: Record<string, Quat>, durationMs?: number) {
-    this.currentModel?.rotateBones(boneRotations, durationMs)
+  public async registerModel(model: Model, pmxPath: string): Promise<string> {
+    return this.addModel(model, pmxPath)
   }
 
-  // moveBones now takes relative translations (VMD-style) by default
-  public moveBones(boneTranslations: Record<string, Vec3>, durationMs?: number) {
-    this.currentModel?.moveBones(boneTranslations, durationMs)
+  public removeModel(name: string): void {
+    this.modelInstances.delete(name)
   }
 
-
-  public resetAllBones() {
-    this.currentModel?.resetAllBones()
+  public getModelNames(): string[] {
+    return Array.from(this.modelInstances.keys())
   }
 
-  public resetAllMorphs(): void {
-    this.currentModel?.resetAllMorphs()
+  public getModel(name: string): Model | null {
+    return this.modelInstances.get(name)?.model ?? null
   }
 
-  public setMorphWeight(name: string, weight: number, durationMs?: number): void {
-    if (!this.currentModel) return
-    this.currentModel.setMorphWeight(name, weight, durationMs)
-    if (!durationMs || durationMs === 0) {
-      this.vertexBufferNeedsUpdate = true
+  public markVertexBufferDirty(modelNameOrModel?: string | Model): void {
+    if (modelNameOrModel === undefined) return
+    if (typeof modelNameOrModel === "string") {
+      const inst = this.modelInstances.get(modelNameOrModel)
+      if (inst) inst.vertexBufferNeedsUpdate = true
+      return
     }
-  }
-
-  public setMaterialVisible(name: string, visible: boolean): void {
-    if (visible) {
-      this.hiddenMaterials.delete(name)
-    } else {
-      this.hiddenMaterials.add(name)
+    for (const inst of this.modelInstances.values()) {
+      if (inst.model === modelNameOrModel) {
+        inst.vertexBufferNeedsUpdate = true
+        return
+      }
     }
   }
 
-  public toggleMaterialVisible(name: string): void {
-    if (this.hiddenMaterials.has(name)) {
-      this.hiddenMaterials.delete(name)
-    } else {
-      this.hiddenMaterials.add(name)
-    }
+  public setMaterialVisible(modelName: string, materialName: string, visible: boolean): void {
+    const inst = this.modelInstances.get(modelName)
+    if (!inst) return
+    if (visible) inst.hiddenMaterials.delete(materialName)
+    else inst.hiddenMaterials.add(materialName)
   }
 
-  public isMaterialVisible(name: string): boolean {
-    return !this.hiddenMaterials.has(name)
+  public toggleMaterialVisible(modelName: string, materialName: string): void {
+    const inst = this.modelInstances.get(modelName)
+    if (!inst) return
+    if (inst.hiddenMaterials.has(materialName)) inst.hiddenMaterials.delete(materialName)
+    else inst.hiddenMaterials.add(materialName)
   }
 
-  public getBones(): string[] {
-    return this.currentModel?.getSkeleton().bones.map((bone) => bone.name) ?? []
+  public isMaterialVisible(modelName: string, materialName: string): boolean {
+    const inst = this.modelInstances.get(modelName)
+    return inst ? !inst.hiddenMaterials.has(materialName) : false
   }
 
-  public getMorphs(): string[] {
-    return this.currentModel?.getMorphing().morphs.map((morph) => morph.name) ?? []
+  public setModelIKEnabled(modelName: string, enabled: boolean): void {
+    this.modelInstances.get(modelName)?.model.setIKEnabled(enabled)
   }
 
-  public getMaterials(): string[] {
-    return this.currentModel?.getMaterials().map((material) => material.name) ?? []
+  public setModelPhysicsEnabled(modelName: string, enabled: boolean): void {
+    this.modelInstances.get(modelName)?.model.setPhysicsEnabled(enabled)
   }
 
-  // IK control
-  public get disableIK(): boolean {
-    return this._disableIK
+  public resetPhysics(): void {
+    this.forEachInstance((inst) => {
+      if (!inst.physics) return
+      inst.model.computeWorldMatrices()
+      inst.physics.reset(inst.model.getWorldMatrices(), inst.model.getBoneInverseBindMatrices())
+    })
   }
 
-  public set disableIK(value: boolean) {
-    this._disableIK = value
-    this.currentModel?.setIKEnabled(!value)
+  private instances(): IterableIterator<ModelInstance> {
+    return this.modelInstances.values()
   }
 
-  // Physics control
-  public get disablePhysics(): boolean {
-    return this._disablePhysics
+  private forEachInstance(fn: (inst: ModelInstance) => void): void {
+    for (const inst of this.instances()) fn(inst)
   }
 
-  public set disablePhysics(value: boolean) {
-    this._disablePhysics = value
-    this.currentModel?.setPhysicsEnabled(!value)
+  private updateInstances(deltaTime: number): void {
+    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)
+    })
   }
 
-  private updateVertexBuffer(): void {
-    if (!this.currentModel || !this.vertexBuffer) return
-    const vertices = this.currentModel.getVertices()
-    if (!vertices || vertices.length === 0) return
-    this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices)
+  private updateVertexBuffer(inst: ModelInstance): void {
+    const vertices = inst.model.getVertices()
+    if (!vertices?.length) return
+    this.device.queue.writeBuffer(inst.vertexBuffer, 0, vertices)
+    inst.vertexBufferNeedsUpdate = false
   }
 
-  // Step 7: Create vertex, index, and joint buffers
-  private async setupModelBuffers(model: Model) {
-    this.currentModel = model
-
-    // Apply IK and Physics flags from engine options
-    model.setIKEnabled(!this._disableIK)
-    model.setPhysicsEnabled(!this._disablePhysics)
-
+  private async setupModelInstance(name: string, model: Model, basePath: string): Promise<void> {
     const vertices = model.getVertices()
     const skinning = model.getSkinning()
     const skeleton = model.getSkeleton()
+    const boneCount = skeleton.bones.length
+    const matrixSize = boneCount * 16 * 4
 
-    this.vertexBuffer = this.device.createBuffer({
-      label: "model vertex buffer",
+    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.device.queue.writeBuffer(vertexBuffer, 0, vertices)
 
-    this.jointsBuffer = this.device.createBuffer({
-      label: "joints buffer",
+    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,
+      jointsBuffer,
       0,
       skinning.joints.buffer,
       skinning.joints.byteOffset,
       skinning.joints.byteLength
     )
 
-    this.weightsBuffer = this.device.createBuffer({
-      label: "weights buffer",
+    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,
+      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",
+    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 indices = model.getIndices()
+    if (!indices) throw new Error("Model has no index buffer")
+    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 invBindMatrices = skeleton.inverseBindMatrices
-    this.device.queue.writeBuffer(
-      this.inverseBindMatrixBuffer,
-      0,
-      invBindMatrices.buffer,
-      invBindMatrices.byteOffset,
-      invBindMatrices.byteLength
-    )
+    const rbs = model.getRigidbodies()
+    const physics = rbs.length > 0 ? new Physics(rbs, model.getJoints()) : null
 
-    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 {
-      throw new Error("Model has no index buffer")
-    }
+    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 } },
+      ],
+    })
 
-    await this.setupMaterials(model)
+    const inst: ModelInstance = {
+      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)
   }
 
   private createGroundGeometry(width: number = 100, height: number = 100) {
@@ -1396,34 +1455,25 @@ export class Engine {
     this.device.queue.writeBuffer(this.groundIndexBuffer, 0, indices)
   }
 
-  private createGroundMaterialBuffer(
-    diffuseColor: Vec3 = new Vec3(1, 1, 1),
-    reflectionLevel: number = 0.5,
-    fadeStart: number = 5.0,
-    fadeEnd: number = 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)
-    ])
-
+  private createGroundMaterialBuffer(diffuseColor: Vec3, reflectionLevel: number, fadeStart: number, fadeEnd: number) {
+    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)
   }
 
-  private createReflectionTexture(size: number = 1024) {
+  private createReflectionTexture(size: number) {
     this.groundReflectionTexture = this.device.createTexture({
       label: "ground reflection texture",
       size: [size, size],
@@ -1431,14 +1481,12 @@ export class Engine {
       format: this.presentationFormat,
       usage: GPUTextureUsage.RENDER_ATTACHMENT,
     })
-
     this.groundReflectionResolveTexture = this.device.createTexture({
       label: "ground reflection resolve texture",
       size: [size, size],
       format: this.presentationFormat,
       usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
     })
-
     this.groundReflectionDepthTexture = this.device.createTexture({
       label: "ground reflection depth texture",
       size: [size, size],
@@ -1446,42 +1494,95 @@ 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! } },
       ],
     })
   }
 
-  private async setupMaterials(model: Model) {
-    const materials = model.getMaterials()
-    if (materials.length === 0) {
-      throw new Error("Model has no materials")
-    }
+  private createShadowGroundResources(
+    shadowMapSize: number,
+    diffuseColor: Vec3,
+    fadeStart: number,
+    fadeEnd: number,
+    shadowStrength: number
+  ) {
+    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 } },
+      ],
+    })
+  }
 
+  private 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)
+  }
+
+  private async setupMaterialsForInstance(inst: ModelInstance): Promise<void> {
+    const model = inst.model
+    const materials = model.getMaterials()
+    if (materials.length === 0) throw new Error("Model has no materials")
     const textures = model.getTextures()
+    const prefix = `${inst.name}: `
 
     const loadTextureByIndex = async (texIndex: number): Promise<GPUTexture | null> => {
-      if (texIndex < 0 || texIndex >= textures.length) {
-        return null
-      }
-
-      const path = this.modelDir + textures[texIndex].path
-      const texture = await this.createTextureFromPath(path)
-      return texture
+      if (texIndex < 0 || texIndex >= textures.length) return null
+      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
       if (indexCount === 0) continue
@@ -1493,7 +1594,7 @@ export class Engine {
       const isTransparent = materialAlpha < 1.0 - 0.001
 
       const materialUniformBuffer = this.createMaterialUniformBuffer(
-        mat.name,
+        prefix + mat.name,
         materialAlpha,
         0.0,
         [mat.diffuse[0], mat.diffuse[1], mat.diffuse[2]],
@@ -1502,34 +1603,26 @@ export class Engine {
         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 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: boolean) => {
-            const buffer = this.createMaterialUniformBuffer(
-              `${mat.name} (${isOverEyes ? "over eyes" : "over non-eyes"})`,
+            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]],
@@ -1537,104 +1630,68 @@ export class Engine {
               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: DrawCallType = 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: DrawCallType = 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)
+    }
   }
 
   private createMaterialUniformBuffer(
@@ -1682,8 +1739,8 @@ export class Engine {
     return buffer
   }
 
-  private shouldRenderDrawCall(drawCall: DrawCall): boolean {
-    return !this.hiddenMaterials.has(drawCall.materialName)
+  private shouldRenderDrawCall(inst: ModelInstance, drawCall: DrawCall): boolean {
+    return !inst.hiddenMaterials.has(drawCall.materialName)
   }
 
   private async createTextureFromPath(path: string): Promise<GPUTexture | null> {
@@ -1721,11 +1778,10 @@ export class Engine {
   }
 
   // Helper: Render eyes with stencil writing (for post-alpha-eye effect)
-  private renderEyes(pass: GPURenderPassEncoder, useReflectionPipeline: boolean = false) {
+  private renderEyes(pass: GPURenderPassEncoder, inst: ModelInstance, 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)
@@ -1734,8 +1790,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)
         }
@@ -1744,26 +1800,13 @@ export class Engine {
   }
 
   private renderGround(pass: GPURenderPassEncoder) {
-    if (!this.groundHasReflections || !this.groundVertexBuffer || !this.groundIndexBuffer) {
-      return
-    }
-
-    if (this.groundReflectionTexture) {
-      this.renderReflectionTexture()
-    }
-    pass.setPipeline(this.groundPipeline)
+    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)
-      }
-    }
-
-    // // 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)
   }
 
   private renderReflectionTexture() {
@@ -1796,55 +1839,16 @@ 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)
-  private renderHair(pass: GPURenderPassEncoder, useReflectionPipeline: boolean = false) {
+  private renderHair(pass: GPURenderPassEncoder, inst: ModelInstance, 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)
@@ -1853,22 +1857,20 @@ 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)
@@ -1878,9 +1880,7 @@ export class Engine {
       }
     }
 
-    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)
@@ -1890,8 +1890,7 @@ export class Engine {
       }
     }
 
-    // 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) {
@@ -1902,17 +1901,13 @@ export class Engine {
   }
 
   private handleCanvasDoubleClick = (event: MouseEvent) => {
-    if (!this.onRaycast || !this.currentModel) return
-
+    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)
   }
 
   private handleCanvasTouch = (event: TouchEvent) => {
-    if (!this.onRaycast || !this.currentModel) return
+    if (!this.onRaycast || this.modelInstances.size === 0) return
 
     // Prevent default to avoid triggering mouse events
     event.preventDefault()
@@ -1940,299 +1935,215 @@ export class Engine {
   }
 
   private performRaycast(screenX: number, screenY: number) {
-    if (!this.currentModel || !this.onRaycast) return
-
-    const materials = this.currentModel.getMaterials()
-    if (materials.length === 0) return
+    if (!this.onRaycast || this.modelInstances.size === 0) {
+      this.onRaycast?.("", null, screenX, screenY)
+      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: Mat4, point: Vec3): Vec3 => {
       const m = matrix.values
-      const x = point.x,
-        y = point.y,
-        z = point.z
-
-      // Compute transformed point (matrix * vec4(point, 1.0))
+      const x = point.x, y = point.y, z = point.z
       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
+    const transformByMatrix = (matrix: Float32Array, offset: number, point: Vec3): Vec3 => {
+      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]
+      )
     }
 
-    // Use cached skinned vertices if available and up-to-date
-    let vertices: Float32Array
-    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: Float32Array, offset: number, point: Vec3): Vec3 => {
-        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]
-        )
-      }
+    let closest: { modelName: string; materialName: string; distance: number } | null = 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: { materialName: string; distance: number } | null = 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 as { modelName: string; materialName: string; distance: number } | null
+      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
   public 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
-        }
-      }
+    if (!this.multisampleTexture || !this.camera || !this.device) return
 
-      // Update vertex buffer if morphs changed
-      if (this.vertexBufferNeedsUpdate) {
-        this.updateVertexBuffer()
-        this.vertexBufferNeedsUpdate = false
-      }
-
-      // Update skin matrices buffer
-      this.updateSkinMatrices()
+    const currentTime = performance.now()
+    const deltaTime = this.lastFrameTime > 0 ? (currentTime - this.lastFrameTime) / 1000 : 0.016
+    this.lastFrameTime = currentTime
 
-      // Use single encoder for render
-      const encoder = this.device.createCommandEncoder()
+    this.updateCameraUniforms()
+    this.updateRenderTarget()
 
-      const pass = encoder.beginRenderPass(this.renderPassDescriptor)
+    const hasModels = this.modelInstances.size > 0
+    if (hasModels) {
+      this.updateInstances(deltaTime)
+      this.updateSkinMatrices()
+    }
+    if (this.groundMode === "shadow") this.updateShadowLightVP()
 
-      if (this.currentModel) {
-        pass.setVertexBuffer(0, this.vertexBuffer)
-        pass.setVertexBuffer(1, this.jointsBuffer)
-        pass.setVertexBuffer(2, this.weightsBuffer)
-        pass.setIndexBuffer(this.indexBuffer!, "uint32")
+    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()
+    }
 
-        // 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)
-          }
-        }
+    const pass = encoder.beginRenderPass(this.renderPassDescriptor)
+    if (hasModels) this.forEachInstance((inst) => this.renderOneModel(pass, inst, false))
+    if (this.groundHasReflections) this.renderGround(pass)
 
-        // Pass 2: Eyes (writes stencil value for hair to test against)
-        this.renderEyes(pass)
+    pass.end()
+    this.device.queue.submit([encoder.finish()])
+    this.updateStats(performance.now() - currentTime)
+  }
 
-        this.drawOutlines(pass, false)
+  private drawInstanceShadow(sp: GPURenderPassEncoder, inst: ModelInstance): void {
+    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)
+    }
+  }
 
-        // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
-        this.renderHair(pass)
+  private renderOneModel(pass: GPURenderPassEncoder, inst: ModelInstance, useReflection: boolean, mirrorMatrix?: Mat4): void {
+    pass.setVertexBuffer(0, inst.vertexBuffer)
+    pass.setVertexBuffer(1, inst.jointsBuffer)
+    pass.setVertexBuffer(2, inst.weightsBuffer)
+    pass.setIndexBuffer(inst.indexBuffer, "uint32")
 
-        // 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)
-          }
+    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)
         }
-
-        this.drawOutlines(pass, true)
       }
-
-      // Pass 4: Ground (with reflections)
-      if (this.groundHasReflections) {
-        this.renderGround(pass)
+      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, inst, true, true)
+      return
+    }
 
-      pass.end()
-      this.device.queue.submit([encoder.finish()])
-
-      this.updateStats(performance.now() - currentTime)
+    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)
+      }
+    }
+    this.drawOutlines(pass, inst, true)
   }
 
 
@@ -2259,31 +2170,24 @@ export class Engine {
   }
 
   private 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
+      )
+    })
   }
 
-  private drawOutlines(pass: GPURenderPassEncoder, transparent: boolean, useReflectionPipeline: boolean = false) {
-    if (useReflectionPipeline) {
-      // Skip outlines for reflections - not critical for the effect
-      return
-    }
-
+  private drawOutlines(pass: GPURenderPassEncoder, inst: ModelInstance, transparent: boolean, useReflectionPipeline = false) {
+    if (useReflectionPipeline) return
     pass.setPipeline(this.outlinePipeline)
     const outlineType: DrawCallType = 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)
       }
@@ -2341,24 +2245,16 @@ export class Engine {
     )
   }
 
-  private writeMirrorTransformedSkinMatrices(mirrorMatrix: Mat4) {
-    if (!this.currentModel || !this.skinMatrixBuffer) return
-
-    const originalMatrices = this.currentModel.getSkinMatrices()
+  private writeMirrorTransformedSkinMatrices(inst: ModelInstance, mirrorMatrix: Mat4) {
+    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++) {
-        boneMatrixValues[j] = originalMatrices[i + 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++) {
-        transformedMatrices[i + j] = transformed.values[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)
   }
 }