reze-engine 0.8.3 → 0.9.0

package/dist/engine.js

@@ -1,5 +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),
@@ -10,12 +11,11 @@ export const DEFAULT_ENGINE_OPTIONS = {
     cameraTarget: new Vec3(0, 12.5, 0),
     cameraFov: Math.PI / 4,
     onRaycast: undefined,
-    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.loadFrom().");
+            throw new Error("Engine not ready: create Engine, await init(), then load models via engine.loadModel().");
         }
         return Engine.instance;
     }
@@ -24,22 +24,25 @@ export class Engine {
         this.lightData = new Float32Array(64);
         this.lightCount = 0;
         this.resizeObserver = null;
-        this.sampleCount = 4;
-        // Constants
-        this.STENCIL_EYE_VALUE = 1;
-        this.groundHasReflections = false;
-        this.groundMode = "reflection";
+        this.hasGround = false;
         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
+        this.DOUBLE_TAP_DELAY = 300;
+        this.pendingPick = null;
         this.modelInstances = new Map();
         this.textureCache = new Map();
-        this.raycastVertexBuffer = null;
+        this._nextDefaultModelId = 0;
+        // IK and physics enabled at engine level (same for all models)
+        this.ikEnabled = true;
+        this.physicsEnabled = true;
+        // Camera target binding (Babylon/Three style: camera follows model)
+        this.cameraTargetModel = null;
+        this.cameraTargetBoneName = "全ての親";
+        this.cameraTargetOffset = new Vec3(0, 0, 0);
         this.lastFpsUpdate = performance.now();
         this.framesSinceLastUpdate = 0;
         this.lastFrameTime = performance.now();
@@ -83,7 +86,6 @@ 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 =
@@ -138,7 +140,7 @@ export class Engine {
                 : undefined,
             primitive: { cullMode: config.cullMode ?? "none" },
             depthStencil: config.depthStencil,
-            multisample: config.multisample ?? { count: this.sampleCount },
+            multisample: config.multisample ?? { count: Engine.MULTISAMPLE_COUNT },
         });
     }
     createPipelines() {
@@ -184,23 +186,6 @@ export class Engine {
                 attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
             },
         ];
-        const depthOnlyVertexBuffers = [
-            {
-                arrayStride: 8 * 4,
-                attributes: [
-                    { shaderLocation: 0, offset: 0, format: "float32x3" },
-                    { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
-                ],
-            },
-            {
-                arrayStride: 4 * 2,
-                attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
-            },
-            {
-                arrayStride: 4,
-                attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
-            },
-        ];
         const standardBlend = {
             format: this.presentationFormat,
             blend: {
@@ -238,17 +223,17 @@ export class Engine {
 
         struct MaterialUniforms {
           alpha: f32,
-          alphaMultiplier: f32,
           rimIntensity: f32,
           shininess: f32,
+          _padding1: f32,
           rimColor: vec3f,
-          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise
-          diffuseColor: vec3f,
           _padding2: f32,
-          ambientColor: vec3f,
+          diffuseColor: vec3f,
           _padding3: f32,
-          specularColor: vec3f,
+          ambientColor: vec3f,
           _padding4: f32,
+          specularColor: vec3f,
+          _padding5: f32,
         };
 
         struct VertexOutput {
@@ -258,12 +243,15 @@ export class Engine {
           @location(2) worldPos: vec3f,
         };
 
+        // group 0: per-frame (bound once per pass)
         @group(0) @binding(0) var<uniform> camera: CameraUniforms;
         @group(0) @binding(1) var<uniform> light: LightUniforms;
-        @group(0) @binding(2) var diffuseTexture: texture_2d<f32>;
-        @group(0) @binding(3) var diffuseSampler: sampler;
-        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
-        @group(0) @binding(5) var<uniform> material: MaterialUniforms;
+        @group(0) @binding(2) var diffuseSampler: sampler;
+        // group 1: per-instance (bound once per model)
+        @group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;
+        // group 2: per-material (bound per draw call)
+        @group(2) @binding(0) var diffuseTexture: texture_2d<f32>;
+        @group(2) @binding(1) var<uniform> material: MaterialUniforms;
 
         @vertex fn vs(
           @location(0) position: vec3f,
@@ -275,7 +263,6 @@ export class Engine {
           var output: VertexOutput;
           let pos4 = vec4f(position, 1.0);
           
-          // Branchless weight normalization (avoids GPU branch divergence)
           let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
           let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
           let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
@@ -299,11 +286,7 @@ export class Engine {
         }
 
         @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          // Early alpha test - discard before expensive calculations
-          var finalAlpha = material.alpha * material.alphaMultiplier;
-          if (material.isOverEyes > 0.5) {
-            finalAlpha *= 0.5; // Hair over eyes gets 50% alpha
-          }
+          let finalAlpha = material.alpha;
           if (finalAlpha < 0.001) {
             discard;
           }
@@ -311,18 +294,14 @@ export class Engine {
           let n = normalize(input.normal);
           let textureColor = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
 
-          // View direction for specular and rim
           let viewDir = normalize(camera.viewPos - input.worldPos);
 
-          // Simple lighting: global ambient + diffuse lighting
           let albedo = textureColor * material.diffuseColor;
           
-          // Precompute material values
           let minSpec = light.ambientColor.w;
           let effectiveSpecular = max(material.specularColor, vec3f(minSpec));
           let specPower = max(material.shininess, 1.0);
           
-          // Single directional light
           let l = -light.lights[0].direction.xyz;
           let nDotL = max(dot(n, l), 0.0);
           let intensity = light.lights[0].color.w;
@@ -330,7 +309,6 @@ export class Engine {
           
           let lightAccum = light.ambientColor.xyz + radiance * nDotL;
 
-          // Blinn-Phong specular
           let h = normalize(l + viewDir);
           let nDotH = max(dot(n, h), 0.0);
           let specFactor = pow(nDotH, specPower);
@@ -338,9 +316,8 @@ export class Engine {
           
           let litColor = albedo * lightAccum;
 
-          // Rim light calculation - proper Fresnel for edge-only highlights
           let fresnel = 1.0 - abs(dot(n, viewDir));
-          let rimFactor = pow(fresnel, 4.0); // Higher power for sharper edge-only effect
+          let rimFactor = pow(fresnel, 4.0);
           let rimLight = material.rimColor * material.rimIntensity * rimFactor;
 
           let color = litColor + specularAccum + rimLight;
@@ -349,21 +326,42 @@ export class Engine {
         }
       `,
         });
-        // Create explicit bind group layout for all pipelines using the main shader
-        this.mainBindGroupLayout = this.device.createBindGroupLayout({
-            label: "main material bind group layout",
+        // group 0: per-frame (camera + light + sampler) — bound once per pass
+        this.mainPerFrameBindGroupLayout = this.device.createBindGroupLayout({
+            label: "main per-frame bind group 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, sampler: {} },
+            ],
+        });
+        // group 1: per-instance (skinMats) — bound once per model
+        this.mainPerInstanceBindGroupLayout = this.device.createBindGroupLayout({
+            label: "main per-instance 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: {} }, // diffuseTexture
-                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // diffuseSampler
-                { binding: 4, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }, // skinMats
-                { binding: 5, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
+                { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } },
+            ],
+        });
+        // group 2: per-material (texture + material uniforms) — bound per draw call
+        this.mainPerMaterialBindGroupLayout = this.device.createBindGroupLayout({
+            label: "main per-material bind group layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
             ],
         });
         const mainPipelineLayout = this.device.createPipelineLayout({
             label: "main pipeline layout",
-            bindGroupLayouts: [this.mainBindGroupLayout],
+            bindGroupLayouts: [this.mainPerFrameBindGroupLayout, this.mainPerInstanceBindGroupLayout, this.mainPerMaterialBindGroupLayout],
+        });
+        this.perFrameBindGroup = this.device.createBindGroup({
+            label: "main per-frame bind group",
+            layout: this.mainPerFrameBindGroupLayout,
+            entries: [
+                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                { binding: 2, resource: this.materialSampler },
+            ],
         });
         this.modelPipeline = this.createRenderPipeline({
             label: "model pipeline",
@@ -378,70 +376,6 @@ export class Engine {
                 depthCompare: "less-equal",
             },
         });
-        this.groundBindGroupLayout = this.device.createBindGroupLayout({
-            label: "ground bind group 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: {} },
-                { 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, _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,
-        };
-        @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;
-          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));
-          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 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,
-            shaderModule: groundShaderModule,
-            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,
@@ -557,36 +491,30 @@ export class Engine {
             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",
-            layout: mainPipelineLayout,
-            shaderModule,
-            vertexBuffers: fullVertexBuffers,
-            fragmentTarget: {
-                format: this.presentationFormat,
-                blend: standardBlend.blend,
-            },
-            multisample: { count: this.sampleCount }, // Use same multisampling as main render
-            cullMode: "none",
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: true,
-                depthCompare: "less-equal",
-            },
+        // Outline: group 0 = per-frame (camera), group 1 = per-instance (skinMats), group 2 = per-material (edge uniforms)
+        this.outlinePerFrameBindGroupLayout = this.device.createBindGroupLayout({
+            label: "outline per-frame bind group layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ],
         });
-        // Create bind group layout for outline pipelines
-        this.outlineBindGroupLayout = this.device.createBindGroupLayout({
-            label: "outline bind group layout",
+        // Outline per-instance reuses mainPerInstanceBindGroupLayout (same skinMats binding)
+        this.outlinePerMaterialBindGroupLayout = this.device.createBindGroupLayout({
+            label: "outline per-material bind group layout",
             entries: [
-                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // camera
-                { binding: 1, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
-                { binding: 2, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }, // skinMats
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
             ],
         });
         const outlinePipelineLayout = this.device.createPipelineLayout({
             label: "outline pipeline layout",
-            bindGroupLayouts: [this.outlineBindGroupLayout],
+            bindGroupLayouts: [this.outlinePerFrameBindGroupLayout, this.mainPerInstanceBindGroupLayout, this.outlinePerMaterialBindGroupLayout],
+        });
+        this.outlinePerFrameBindGroup = this.device.createBindGroup({
+            label: "outline per-frame bind group",
+            layout: this.outlinePerFrameBindGroupLayout,
+            entries: [
+                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+            ],
         });
         const outlineShaderModule = this.device.createShaderModule({
             label: "outline shaders",
@@ -601,14 +529,17 @@ export class Engine {
         struct MaterialUniforms {
           edgeColor: vec4f,
           edgeSize: f32,
-          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise (for hair outlines)
           _padding1: f32,
           _padding2: f32,
+          _padding3: f32,
         };
 
+        // group 0: per-frame
         @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-        @group(0) @binding(1) var<uniform> material: MaterialUniforms;
-        @group(0) @binding(2) var<storage, read> skinMats: array<mat4x4f>;
+        // group 1: per-instance
+        @group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;
+        // group 2: per-material
+        @group(2) @binding(0) var<uniform> material: MaterialUniforms;
 
         struct VertexOutput {
           @builtin(position) position: vec4f,
@@ -623,7 +554,6 @@ export class Engine {
           var output: VertexOutput;
           let pos4 = vec4f(position, 1.0);
           
-          // Branchless weight normalization (avoids GPU branch divergence)
           let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
           let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
           let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
@@ -641,7 +571,6 @@ export class Engine {
           let worldPos = skinnedPos.xyz;
           let worldNormal = normalize(skinnedNrm);
           
-          // MMD invert hull: expand vertices outward along normals
           let scaleFactor = 0.01;
           let expandedPos = worldPos + worldNormal * material.edgeSize * scaleFactor;
           output.position = camera.projection * camera.view * vec4f(expandedPos, 1.0);
@@ -649,13 +578,7 @@ export class Engine {
         }
 
         @fragment fn fs() -> @location(0) vec4f {
-          var color = material.edgeColor;
-          
-          if (material.isOverEyes > 0.5) {
-            color.a *= 0.5; // Hair outlines over eyes get 50% alpha
-          }
-          
-          return color;
+          return material.edgeColor;
         }
       `,
         });
@@ -672,55 +595,9 @@ export class Engine {
                 depthCompare: "less-equal",
             },
         });
-        // Hair outline pipeline
-        this.hairOutlinePipeline = this.createRenderPipeline({
-            label: "hair outline pipeline",
-            layout: outlinePipelineLayout,
-            shaderModule: outlineShaderModule,
-            vertexBuffers: outlineVertexBuffers,
-            fragmentTarget: standardBlend,
-            cullMode: "back",
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: false,
-                depthCompare: "less-equal",
-                depthBias: -0.0001,
-                depthBiasSlopeScale: 0.0,
-                depthBiasClamp: 0.0,
-            },
-        });
-        // Eye overlay pipeline (renders after opaque, writes stencil)
-        this.eyePipeline = this.createRenderPipeline({
-            label: "eye overlay pipeline",
-            layout: mainPipelineLayout,
-            shaderModule,
-            vertexBuffers: fullVertexBuffers,
-            fragmentTarget: standardBlend,
-            cullMode: "front",
-            depthStencil: {
-                format: "depth24plus-stencil8",
-                depthWriteEnabled: true,
-                depthCompare: "less-equal",
-                depthBias: -0.00005,
-                depthBiasSlopeScale: 0.0,
-                depthBiasClamp: 0.0,
-                stencilFront: {
-                    compare: "always",
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "replace",
-                },
-                stencilBack: {
-                    compare: "always",
-                    failOp: "keep",
-                    depthFailOp: "keep",
-                    passOp: "replace",
-                },
-            },
-        });
-        // Depth-only shader for hair pre-pass (reduces overdraw by early depth rejection)
-        const depthOnlyShaderModule = this.device.createShaderModule({
-            label: "depth only shader",
+        // GPU picking: encode (modelIndex, materialIndex) as color
+        const pickShaderModule = this.device.createShaderModule({
+            label: "pick shader",
             code: /* wgsl */ `
         struct CameraUniforms {
           view: mat4x4f,
@@ -728,91 +605,87 @@ export class Engine {
           viewPos: vec3f,
           _padding: f32,
         };
+        struct PickId {
+          modelId: f32,
+          materialId: f32,
+          _p1: f32,
+          _p2: f32,
+        };
 
         @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
+        @group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;
+        @group(2) @binding(0) var<uniform> pickId: PickId;
 
         @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);
-          
-          // Branchless weight normalization (avoids GPU branch divergence)
           let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
           let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
-          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
-          
-          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
-          for (var i = 0u; i < 4u; i++) {
-            let j = joints0[i];
-            let w = normalizedWeights[i];
-            let m = skinMats[j];
-            skinnedPos += (m * pos4) * w;
-          }
-          let worldPos = skinnedPos.xyz;
-          let clipPos = camera.projection * camera.view * vec4f(worldPos, 1.0);
-          return clipPos;
+          let nw = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
+          var sp = vec4f(0.0);
+          for (var i = 0u; i < 4u; i++) { sp += (skinMats[joints0[i]] * pos4) * nw[i]; }
+          return camera.projection * camera.view * vec4f(sp.xyz, 1.0);
         }
 
         @fragment fn fs() -> @location(0) vec4f {
-          return vec4f(0.0, 0.0, 0.0, 0.0); // Transparent - color writes disabled via writeMask
+          return vec4f(pickId.modelId / 255.0, pickId.materialId / 255.0, 0.0, 1.0);
         }
       `,
         });
-        // Hair depth pre-pass pipeline: depth-only with color writes disabled to eliminate overdraw
-        this.hairDepthPipeline = this.createRenderPipeline({
-            label: "hair depth pre-pass",
-            layout: mainPipelineLayout,
-            shaderModule: depthOnlyShaderModule,
-            vertexBuffers: depthOnlyVertexBuffers,
-            fragmentTarget: {
-                format: this.presentationFormat,
-                writeMask: 0,
+        this.pickPerFrameBindGroupLayout = this.device.createBindGroupLayout({
+            label: "pick per-frame layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } },
+            ],
+        });
+        this.pickPerInstanceBindGroupLayout = this.device.createBindGroupLayout({
+            label: "pick per-instance layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } },
+            ],
+        });
+        this.pickPerMaterialBindGroupLayout = this.device.createBindGroupLayout({
+            label: "pick per-material layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ],
+        });
+        const pickPipelineLayout = this.device.createPipelineLayout({
+            label: "pick pipeline layout",
+            bindGroupLayouts: [this.pickPerFrameBindGroupLayout, this.pickPerInstanceBindGroupLayout, this.pickPerMaterialBindGroupLayout],
+        });
+        this.pickPerFrameBindGroup = this.device.createBindGroup({
+            label: "pick per-frame bind group",
+            layout: this.pickPerFrameBindGroupLayout,
+            entries: [
+                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+            ],
+        });
+        this.pickPipeline = this.device.createRenderPipeline({
+            label: "pick pipeline",
+            layout: pickPipelineLayout,
+            vertex: { module: pickShaderModule, buffers: fullVertexBuffers },
+            fragment: {
+                module: pickShaderModule,
+                targets: [{ format: "rgba8unorm" }],
             },
-            fragmentEntryPoint: "fs",
-            cullMode: "none",
+            primitive: { cullMode: "none" },
             depthStencil: {
-                format: "depth24plus-stencil8",
+                format: "depth24plus",
                 depthWriteEnabled: true,
                 depthCompare: "less-equal",
-                depthBias: 0.0,
-                depthBiasSlopeScale: 0.0,
-                depthBiasClamp: 0.0,
             },
         });
-        // Hair pipelines for rendering over eyes vs non-eyes (only differ in stencil compare mode)
-        const createHairPipeline = (isOverEyes) => {
-            return this.createRenderPipeline({
-                label: `hair pipeline (${isOverEyes ? "over eyes" : "over non-eyes"})`,
-                layout: mainPipelineLayout,
-                shaderModule,
-                vertexBuffers: fullVertexBuffers,
-                fragmentTarget: standardBlend,
-                cullMode: "none",
-                depthStencil: {
-                    format: "depth24plus-stencil8",
-                    depthWriteEnabled: false,
-                    depthCompare: "less-equal",
-                    stencilFront: {
-                        compare: isOverEyes ? "equal" : "not-equal",
-                        failOp: "keep",
-                        depthFailOp: "keep",
-                        passOp: "keep",
-                    },
-                    stencilBack: {
-                        compare: isOverEyes ? "equal" : "not-equal",
-                        failOp: "keep",
-                        depthFailOp: "keep",
-                        passOp: "keep",
-                    },
-                },
-            });
-        };
-        this.hairPipelineOverEyes = createHairPipeline(true);
-        this.hairPipelineOverNonEyes = createHairPipeline(false);
+        this.pickReadbackBuffer = this.device.createBuffer({
+            label: "pick readback",
+            size: 256,
+            usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+        });
     }
     // Step 3: Setup canvas resize handling
     setupResize() {
@@ -837,33 +710,25 @@ export class Engine {
             this.multisampleTexture = this.device.createTexture({
                 label: "multisample render target",
                 size: [width, height],
-                sampleCount: this.sampleCount,
+                sampleCount: Engine.MULTISAMPLE_COUNT,
                 format: this.presentationFormat,
                 usage: GPUTextureUsage.RENDER_ATTACHMENT,
             });
             this.depthTexture = this.device.createTexture({
                 label: "depth texture",
                 size: [width, height],
-                sampleCount: this.sampleCount,
+                sampleCount: Engine.MULTISAMPLE_COUNT,
                 format: "depth24plus-stencil8",
                 usage: GPUTextureUsage.RENDER_ATTACHMENT,
             });
             const depthTextureView = this.depthTexture.createView();
-            // Render directly to canvas
-            const colorAttachment = this.sampleCount > 1
-                ? {
-                    view: this.multisampleTexture.createView(),
-                    resolveTarget: this.context.getCurrentTexture().createView(),
-                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
-                    loadOp: "clear",
-                    storeOp: "store",
-                }
-                : {
-                    view: this.context.getCurrentTexture().createView(),
-                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
-                    loadOp: "clear",
-                    storeOp: "store",
-                };
+            const colorAttachment = {
+                view: this.multisampleTexture.createView(),
+                resolveTarget: this.context.getCurrentTexture().createView(),
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                loadOp: "clear",
+                storeOp: "store",
+            };
             this.renderPassDescriptor = {
                 label: "renderPass",
                 colorAttachments: [colorAttachment],
@@ -874,10 +739,24 @@ export class Engine {
                     depthStoreOp: "store",
                     stencilClearValue: 0,
                     stencilLoadOp: "clear",
-                    stencilStoreOp: "discard", // Discard stencil after frame to save bandwidth (we only use it during rendering)
+                    stencilStoreOp: "discard",
                 },
             };
             this.camera.aspect = width / height;
+            if (this.onRaycast) {
+                this.pickTexture = this.device.createTexture({
+                    label: "pick render target",
+                    size: [width, height],
+                    format: "rgba8unorm",
+                    usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+                });
+                this.pickDepthTexture = this.device.createTexture({
+                    label: "pick depth",
+                    size: [width, height],
+                    format: "depth24plus",
+                    usage: GPUTextureUsage.RENDER_ATTACHMENT,
+                });
+            }
         }
     }
     // Step 4: Create camera and uniform buffer
@@ -891,6 +770,42 @@ export class Engine {
         this.camera.aspect = this.canvas.width / this.canvas.height;
         this.camera.attachControl(this.canvas);
     }
+    setCameraTarget(modelOrVec, boneName, offset) {
+        if (modelOrVec === null) {
+            this.cameraTargetModel = null;
+            return;
+        }
+        if ("x" in modelOrVec && "y" in modelOrVec && "z" in modelOrVec) {
+            this.cameraTargetModel = null;
+            this.camera.target.x = modelOrVec.x;
+            this.camera.target.y = modelOrVec.y;
+            this.camera.target.z = modelOrVec.z;
+            return;
+        }
+        this.cameraTargetModel = modelOrVec;
+        this.cameraTargetBoneName = boneName ?? "";
+        this.cameraTargetOffset.x = offset?.x ?? 0;
+        this.cameraTargetOffset.y = offset?.y ?? 0;
+        this.cameraTargetOffset.z = offset?.z ?? 0;
+    }
+    /** Souls-style follow cam: orbit center tracks a model bone each frame. Shorthand for setCameraTarget(model, boneName, offset). */
+    setCameraFollow(model, boneName, offset) {
+        if (model === null) {
+            this.cameraTargetModel = null;
+            return;
+        }
+        this.cameraTargetModel = model;
+        this.cameraTargetBoneName = boneName ?? "全ての親";
+        this.cameraTargetOffset.x = offset?.x ?? 0;
+        this.cameraTargetOffset.y = offset?.y ?? 0;
+        this.cameraTargetOffset.z = offset?.z ?? 0;
+    }
+    getCameraDistance() { return this.camera.radius; }
+    setCameraDistance(d) { this.camera.radius = d; }
+    getCameraAlpha() { return this.camera.alpha; }
+    setCameraAlpha(a) { this.camera.alpha = a; }
+    getCameraBeta() { return this.camera.beta; }
+    setCameraBeta(b) { this.camera.beta = b; }
     // Step 5: Create lighting buffers
     setupLighting() {
         this.lightUniformBuffer = this.device.createBuffer({
@@ -943,30 +858,20 @@ export class Engine {
             width: 100,
             height: 100,
             diffuseColor: new Vec3(1, 1, 1),
-            reflectionLevel: 0.5,
-            reflectionTextureSize: 1024,
             fadeStart: 5.0,
             fadeEnd: 60.0,
-            mode: "reflection",
             shadowMapSize: 4096,
             shadowStrength: 1.0,
             ...options,
         };
-        this.groundMode = opts.mode;
         this.createGroundGeometry(opts.width, opts.height);
-        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.createShadowGroundResources(opts.shadowMapSize, opts.diffuseColor, opts.fadeStart, opts.fadeEnd, opts.shadowStrength);
+        this.hasGround = true;
         this.groundDrawCall = {
             type: "ground",
             count: 6,
             firstIndex: 0,
-            bindGroup: (opts.mode === "reflection" ? this.groundReflectionBindGroup : this.groundShadowBindGroup),
+            bindGroup: this.groundShadowBindGroup,
             materialName: "Ground",
         };
     }
@@ -1011,6 +916,14 @@ export class Engine {
             this.resizeObserver = null;
         }
     }
+    async loadModel(nameOrPath, path) {
+        const pmxPath = path === undefined ? nameOrPath : path;
+        const name = path === undefined ? "model_" + (this._nextDefaultModelId++) : nameOrPath;
+        const model = await PmxLoader.load(pmxPath);
+        model.setName(name);
+        await this.addModel(model, pmxPath, name);
+        return model;
+    }
     async addModel(model, pmxPath, name) {
         const requested = name ?? model.name;
         let key = requested;
@@ -1024,9 +937,6 @@ export class Engine {
         await this.setupModelInstance(key, model, basePath);
         return key;
     }
-    async registerModel(model, pmxPath) {
-        return this.addModel(model, pmxPath);
-    }
     removeModel(name) {
         this.modelInstances.delete(name);
     }
@@ -1074,11 +984,17 @@ export class Engine {
         const inst = this.modelInstances.get(modelName);
         return inst ? !inst.hiddenMaterials.has(materialName) : false;
     }
-    setModelIKEnabled(modelName, enabled) {
-        this.modelInstances.get(modelName)?.model.setIKEnabled(enabled);
+    setIKEnabled(enabled) {
+        this.ikEnabled = enabled;
+    }
+    getIKEnabled() {
+        return this.ikEnabled;
+    }
+    setPhysicsEnabled(enabled) {
+        this.physicsEnabled = enabled;
     }
-    setModelPhysicsEnabled(modelName, enabled) {
-        this.modelInstances.get(modelName)?.model.setPhysicsEnabled(enabled);
+    getPhysicsEnabled() {
+        return this.physicsEnabled;
     }
     resetPhysics() {
         this.forEachInstance((inst) => {
@@ -1088,19 +1004,16 @@ export class Engine {
             inst.physics.reset(inst.model.getWorldMatrices(), inst.model.getBoneInverseBindMatrices());
         });
     }
-    instances() {
-        return this.modelInstances.values();
-    }
     forEachInstance(fn) {
-        for (const inst of this.instances())
+        for (const inst of this.modelInstances.values())
             fn(inst);
     }
     updateInstances(deltaTime) {
         this.forEachInstance((inst) => {
-            const verticesChanged = inst.model.update(deltaTime);
+            const verticesChanged = inst.model.update(deltaTime, this.ikEnabled);
             if (verticesChanged)
                 inst.vertexBufferNeedsUpdate = true;
-            if (inst.physics && inst.model.getPhysicsEnabled()) {
+            if (inst.physics && this.physicsEnabled) {
                 inst.physics.step(deltaTime, inst.model.getWorldMatrices(), inst.model.getBoneInverseBindMatrices());
             }
             if (inst.vertexBufferNeedsUpdate)
@@ -1162,6 +1075,20 @@ export class Engine {
                 { binding: 1, resource: { buffer: skinMatrixBuffer } },
             ],
         });
+        const mainPerInstanceBindGroup = this.device.createBindGroup({
+            label: `${name}: main per-instance bind group`,
+            layout: this.mainPerInstanceBindGroupLayout,
+            entries: [
+                { binding: 0, resource: { buffer: skinMatrixBuffer } },
+            ],
+        });
+        const pickPerInstanceBindGroup = this.device.createBindGroup({
+            label: `${name}: pick per-instance bind group`,
+            layout: this.pickPerInstanceBindGroupLayout,
+            entries: [
+                { binding: 0, resource: { buffer: skinMatrixBuffer } },
+            ],
+        });
         const inst = {
             name,
             model,
@@ -1174,6 +1101,9 @@ export class Engine {
             drawCalls: [],
             shadowDrawCalls: [],
             shadowBindGroup,
+            mainPerInstanceBindGroup,
+            pickPerInstanceBindGroup,
+            pickDrawCalls: [],
             hiddenMaterials: new Set(),
             physics,
             vertexBufferNeedsUpdate: false,
@@ -1245,56 +1175,6 @@ export class Engine {
         });
         this.device.queue.writeBuffer(this.groundIndexBuffer, 0, indices);
     }
-    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: 64,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        });
-        this.device.queue.writeBuffer(this.groundMaterialUniformBuffer, 0, u);
-    }
-    createReflectionTexture(size) {
-        this.groundReflectionTexture = this.device.createTexture({
-            label: "ground reflection texture",
-            size: [size, size],
-            sampleCount: this.sampleCount,
-            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],
-            sampleCount: this.sampleCount,
-            format: "depth24plus-stencil8",
-            usage: GPUTextureUsage.RENDER_ATTACHMENT,
-        });
-        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() },
-                { binding: 3, resource: this.materialSampler },
-                { binding: 4, resource: { buffer: this.groundMaterialUniformBuffer } },
-            ],
-        });
-    }
     createShadowGroundResources(shadowMapSize, diffuseColor, fadeStart, fadeEnd, shadowStrength) {
         this.shadowMapTexture = this.device.createTexture({
             label: "shadow map",
@@ -1359,6 +1239,8 @@ export class Engine {
             throw new Error("Model has no materials");
         const textures = model.getTextures();
         const prefix = `${inst.name}: `;
+        // 1-based so that (0,0) = clear color = "no hit"
+        const modelId = this.modelInstances.size + 1;
         const loadTextureByIndex = async (texIndex) => {
             if (texIndex < 0 || texIndex >= textures.length)
                 return null;
@@ -1366,70 +1248,29 @@ export class Engine {
             return this.createTextureFromPath(path);
         };
         let currentIndexOffset = 0;
+        let materialId = 0;
         for (const mat of materials) {
             const indexCount = mat.vertexCount;
             if (indexCount === 0)
                 continue;
+            materialId++;
             const diffuseTexture = await loadTextureByIndex(mat.diffuseTextureIndex);
             if (!diffuseTexture)
                 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(prefix + mat.name, materialAlpha, 0.0, [mat.diffuse[0], mat.diffuse[1], mat.diffuse[2]], mat.ambient, mat.specular, mat.shininess);
+            const materialUniformBuffer = this.createMaterialUniformBuffer(prefix + mat.name, materialAlpha, [mat.diffuse[0], mat.diffuse[1], mat.diffuse[2]], mat.ambient, mat.specular, mat.shininess);
+            const textureView = diffuseTexture.createView();
             const bindGroup = this.device.createBindGroup({
                 label: `${prefix}material: ${mat.name}`,
-                layout: this.mainBindGroupLayout,
+                layout: this.mainPerMaterialBindGroupLayout,
                 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: inst.skinMatrixBuffer } },
-                    { binding: 5, resource: { buffer: materialUniformBuffer } },
+                    { binding: 0, resource: textureView },
+                    { binding: 1, resource: { buffer: materialUniformBuffer } },
                 ],
             });
-            if (indexCount > 0) {
-                if (mat.isEye) {
-                    inst.drawCalls.push({ type: "eye", count: indexCount, firstIndex: currentIndexOffset, bindGroup, materialName: mat.name });
-                }
-                else if (mat.isHair) {
-                    const createHairBindGroup = (isOverEyes) => {
-                        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: `${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: inst.skinMatrixBuffer } },
-                                { binding: 5, resource: { buffer: buf } },
-                            ],
-                        });
-                    };
-                    inst.drawCalls.push({
-                        type: "hair-over-eyes",
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup: createHairBindGroup(true),
-                        materialName: mat.name,
-                    });
-                    inst.drawCalls.push({
-                        type: "hair-over-non-eyes",
-                        count: indexCount,
-                        firstIndex: currentIndexOffset,
-                        bindGroup: createHairBindGroup(false),
-                        materialName: mat.name,
-                    });
-                }
-                else if (isTransparent) {
-                    inst.drawCalls.push({ type: "transparent", count: indexCount, firstIndex: currentIndexOffset, bindGroup, materialName: mat.name });
-                }
-                else {
-                    inst.drawCalls.push({ type: "opaque", count: indexCount, firstIndex: currentIndexOffset, bindGroup, materialName: mat.name });
-                }
-            }
+            const type = isTransparent ? "transparent" : "opaque";
+            inst.drawCalls.push({ type, count: indexCount, firstIndex: currentIndexOffset, bindGroup, materialName: mat.name });
             if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
                 const materialUniformData = new Float32Array([
                     mat.edgeColor[0], mat.edgeColor[1], mat.edgeColor[2], mat.edgeColor[3],
@@ -1438,48 +1279,42 @@ export class Engine {
                 const outlineUniformBuffer = this.createUniformBuffer(`${prefix}outline: ${mat.name}`, materialUniformData);
                 const outlineBindGroup = this.device.createBindGroup({
                     label: `${prefix}outline: ${mat.name}`,
-                    layout: this.outlineBindGroupLayout,
+                    layout: this.outlinePerMaterialBindGroupLayout,
                     entries: [
-                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                        { binding: 1, resource: { buffer: outlineUniformBuffer } },
-                        { binding: 2, resource: { buffer: inst.skinMatrixBuffer } },
+                        { binding: 0, resource: { buffer: outlineUniformBuffer } },
                     ],
                 });
-                if (indexCount > 0) {
-                    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 });
-                }
+                const outlineType = isTransparent ? "transparent-outline" : "opaque-outline";
+                inst.drawCalls.push({ type: outlineType, count: indexCount, firstIndex: currentIndexOffset, bindGroup: outlineBindGroup, materialName: mat.name });
+            }
+            if (this.onRaycast) {
+                const pickIdData = new Float32Array([modelId, materialId, 0, 0]);
+                const pickIdBuffer = this.createUniformBuffer(`${prefix}pick: ${mat.name}`, pickIdData);
+                const pickBindGroup = this.device.createBindGroup({
+                    label: `${prefix}pick: ${mat.name}`,
+                    layout: this.pickPerMaterialBindGroupLayout,
+                    entries: [{ binding: 0, resource: { buffer: pickIdBuffer } }],
+                });
+                inst.pickDrawCalls.push({ count: indexCount, firstIndex: currentIndexOffset, bindGroup: pickBindGroup });
             }
             currentIndexOffset += indexCount;
         }
         for (const d of inst.drawCalls) {
-            if (d.type === "opaque" || d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes")
+            if (d.type === "opaque")
                 inst.shadowDrawCalls.push(d);
         }
     }
-    createMaterialUniformBuffer(label, alpha, isOverEyes, diffuseColor, ambientColor, specularColor, shininess) {
+    createMaterialUniformBuffer(label, alpha, diffuseColor, ambientColor, specularColor, shininess) {
         const data = new Float32Array(20);
         data.set([
             alpha,
-            1.0,
             this.rimLightIntensity,
-            shininess, // alpha, alphaMultiplier, rimIntensity, shininess
-            1.0,
-            1.0,
-            1.0,
-            isOverEyes, // rimColor (vec3), isOverEyes
-            diffuseColor[0],
-            diffuseColor[1],
-            diffuseColor[2],
-            0.0, // diffuseColor (vec3), _padding2
-            ambientColor[0],
-            ambientColor[1],
-            ambientColor[2],
-            0.0, // ambientColor (vec3), _padding3
-            specularColor[0],
-            specularColor[1],
-            specularColor[2],
-            0.0, // specularColor (vec3), _padding4
+            shininess,
+            0.0,
+            1.0, 1.0, 1.0, 0.0, // rimColor (vec3), _padding2
+            diffuseColor[0], diffuseColor[1], diffuseColor[2], 0.0,
+            ambientColor[0], ambientColor[1], ambientColor[2], 0.0,
+            specularColor[0], specularColor[1], specularColor[2], 0.0,
         ]);
         return this.createUniformBuffer(`material uniform: ${label}`, data);
     }
@@ -1526,224 +1361,100 @@ export class Engine {
             return null;
         }
     }
-    // Helper: Render eyes with stencil writing (for post-alpha-eye effect)
-    renderEyes(pass, inst, useReflectionPipeline = false) {
-        if (useReflectionPipeline) {
-            pass.setPipeline(this.reflectionPipeline);
-            for (const draw of inst.drawCalls) {
-                if (draw.type === "eye") {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                }
-            }
-        }
-        else {
-            pass.setPipeline(this.eyePipeline);
-            pass.setStencilReference(this.STENCIL_EYE_VALUE);
-            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);
-                }
-            }
-        }
-    }
     renderGround(pass) {
-        if (!this.groundHasReflections || !this.groundVertexBuffer || !this.groundIndexBuffer || !this.groundDrawCall)
+        if (!this.hasGround || !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.setPipeline(this.groundShadowPipeline);
         pass.setVertexBuffer(0, this.groundVertexBuffer);
         pass.setIndexBuffer(this.groundIndexBuffer, "uint16");
         pass.setBindGroup(0, this.groundDrawCall.bindGroup);
         pass.drawIndexed(this.groundDrawCall.count, 1, this.groundDrawCall.firstIndex, 0, 0);
     }
-    renderReflectionTexture() {
-        if (!this.groundReflectionTexture)
+    performRaycast(screenX, screenY) {
+        if (!this.onRaycast || this.modelInstances.size === 0) {
+            this.onRaycast?.("", null, screenX, screenY);
             return;
-        const mirrorMatrix = this.createMirrorMatrix(new Vec3(0, 1, 0), 0);
-        this.updateCameraUniforms();
-        const reflectionEncoder = this.device.createCommandEncoder();
-        const reflectionPassDescriptor = {
-            label: "reflection render pass",
-            colorAttachments: [
-                {
-                    view: this.groundReflectionTexture.createView(),
-                    resolveTarget: this.groundReflectionResolveTexture.createView(),
-                    clearValue: { r: 1.0, g: 1.0, b: 1.0, a: 1.0 }, // White
+        }
+        const dpr = window.devicePixelRatio || 1;
+        this.pendingPick = { x: Math.floor(screenX * dpr), y: Math.floor(screenY * dpr) };
+    }
+    renderPickPass(encoder) {
+        if (!this.pendingPick || !this.pickTexture || !this.pickDepthTexture)
+            return;
+        const pass = encoder.beginRenderPass({
+            colorAttachments: [{
+                    view: this.pickTexture.createView(),
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
                     loadOp: "clear",
                     storeOp: "store",
-                },
-            ],
+                }],
             depthStencilAttachment: {
-                view: this.groundReflectionDepthTexture.createView(),
+                view: this.pickDepthTexture.createView(),
                 depthClearValue: 1.0,
                 depthLoadOp: "clear",
                 depthStoreOp: "store",
-                stencilClearValue: 0,
-                stencilLoadOp: "clear",
-                stencilStoreOp: "discard",
             },
-        };
-        const reflectionPass = reflectionEncoder.beginRenderPass(reflectionPassDescriptor);
-        this.forEachInstance((inst) => this.renderOneModel(reflectionPass, inst, true, mirrorMatrix));
-        reflectionPass.end();
-        this.device.queue.submit([reflectionEncoder.finish()]);
-        this.updateSkinMatrices();
-    }
-    renderHair(pass, inst, useReflectionPipeline = false) {
-        if (useReflectionPipeline) {
-            pass.setPipeline(this.reflectionPipeline);
-            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);
-                }
-            }
-            return;
-        }
-        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 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);
-                }
-            }
-        }
-        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);
-            for (const draw of hairOverEyes) {
-                pass.setBindGroup(0, draw.bindGroup);
-                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-            }
-        }
-        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);
-            for (const draw of hairOverNonEyes) {
-                pass.setBindGroup(0, draw.bindGroup);
-                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-            }
-        }
-        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) {
-                pass.setBindGroup(0, draw.bindGroup);
+        });
+        pass.setPipeline(this.pickPipeline);
+        pass.setBindGroup(0, this.pickPerFrameBindGroup);
+        this.forEachInstance((inst) => {
+            pass.setVertexBuffer(0, inst.vertexBuffer);
+            pass.setVertexBuffer(1, inst.jointsBuffer);
+            pass.setVertexBuffer(2, inst.weightsBuffer);
+            pass.setIndexBuffer(inst.indexBuffer, "uint32");
+            pass.setBindGroup(1, inst.pickPerInstanceBindGroup);
+            for (const draw of inst.pickDrawCalls) {
+                pass.setBindGroup(2, draw.bindGroup);
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
-        }
+        });
+        pass.end();
+        // Copy the single pixel under cursor to readback buffer
+        const px = Math.min(this.pendingPick.x, this.pickTexture.width - 1);
+        const py = Math.min(this.pendingPick.y, this.pickTexture.height - 1);
+        encoder.copyTextureToBuffer({ texture: this.pickTexture, origin: { x: Math.max(0, px), y: Math.max(0, py) } }, { buffer: this.pickReadbackBuffer, bytesPerRow: 256 }, { width: 1, height: 1 });
     }
-    performRaycast(screenX, screenY) {
-        if (!this.onRaycast || this.modelInstances.size === 0) {
-            this.onRaycast?.("", null, screenX, screenY);
+    async resolvePickResult(screenX, screenY) {
+        if (!this.onRaycast)
+            return;
+        await this.pickReadbackBuffer.mapAsync(GPUMapMode.READ);
+        const data = new Uint8Array(this.pickReadbackBuffer.getMappedRange());
+        const modelId = data[0];
+        const materialId = data[1];
+        this.pickReadbackBuffer.unmap();
+        if (modelId === 0) {
+            this.onRaycast("", null, screenX, screenY);
             return;
         }
-        const viewMatrix = this.camera.getViewMatrix();
-        const projectionMatrix = this.camera.getProjectionMatrix();
-        const rect = this.canvas.getBoundingClientRect();
-        const clipX = (screenX / rect.width) * 2 - 1;
-        const clipY = 1 - (screenY / rect.height) * 2;
-        const viewProjMatrix = projectionMatrix.multiply(viewMatrix);
-        const inverseViewProj = viewProjMatrix.inverse();
-        const transformPoint = (matrix, point) => {
-            const m = matrix.values;
-            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]);
-            const w = m[3] * x + m[7] * y + m[11] * z + m[15];
-            return result.scale(w !== 0 ? 1 / w : 1);
-        };
-        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();
-        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 = i / 8;
-                const position = new Vec3(baseVertices[i], baseVertices[i + 1], baseVertices[i + 2]);
-                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++) {
-                    if (nw[j] <= 0)
-                        continue;
-                    const transformed = transformByMatrix(skinMatrices, [j0, j1, j2, j3][j] * 16, position);
-                    sp = sp.add(transformed.scale(nw[j]));
-                }
-                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];
+        // Find model by 1-based index
+        let idx = 1;
+        let hitModel = "";
+        for (const [name] of this.modelInstances) {
+            if (idx === modelId) {
+                hitModel = name;
+                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;
+            idx++;
+        }
+        // Find material by 1-based index (skipping zero-vertex materials)
+        let hitMaterial = null;
+        if (hitModel) {
+            const inst = this.modelInstances.get(hitModel);
+            if (inst) {
+                const materials = inst.model.getMaterials();
+                let matIdx = 0;
+                for (const mat of materials) {
+                    if (mat.vertexCount === 0)
+                        continue;
+                    matIdx++;
+                    if (matIdx === materialId) {
+                        hitMaterial = mat.name;
                         break;
                     }
-                    indexOffset += materials[matIdx].vertexCount;
-                }
-                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();
-                if (triangleNormal.dot(rayDirection) >= 0)
-                    continue;
-                if (!closest || t < closest.distance) {
-                    closest = { modelName: inst.name, materialName: materials[triangleMaterialIndex].name, distance: t };
                 }
             }
-        });
-        if (this.onRaycast) {
-            const hit = closest;
-            this.onRaycast(hit?.modelName ?? "", hit?.materialName ?? null, screenX, screenY);
         }
+        this.onRaycast(hitModel, hitMaterial, screenX, screenY);
     }
     render() {
         if (!this.multisampleTexture || !this.camera || !this.device)
@@ -1751,17 +1462,27 @@ export class Engine {
         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();
+            // Update camera target from bound model (bone not found → 0,0,0 + offset)
+            if (this.cameraTargetModel) {
+                const pos = this.cameraTargetModel.getBoneWorldPosition(this.cameraTargetBoneName);
+                const px = pos?.x ?? 0;
+                const py = pos?.y ?? 0;
+                const pz = pos?.z ?? 0;
+                this.camera.target.x = px + this.cameraTargetOffset.x;
+                this.camera.target.y = py + this.cameraTargetOffset.y;
+                this.camera.target.z = pz + this.cameraTargetOffset.z;
+            }
         }
-        if (this.groundMode === "shadow")
+        this.updateCameraUniforms();
+        if (this.hasGround)
             this.updateShadowLightVP();
         const encoder = this.device.createCommandEncoder();
-        if (hasModels && this.groundMode === "shadow" && this.shadowMapDepthView) {
+        if (hasModels && this.hasGround && this.shadowMapDepthView) {
             const sp = encoder.beginRenderPass({
                 colorAttachments: [],
                 depthStencilAttachment: {
@@ -1777,13 +1498,25 @@ export class Engine {
         }
         const pass = encoder.beginRenderPass(this.renderPassDescriptor);
         if (hasModels)
-            this.forEachInstance((inst) => this.renderOneModel(pass, inst, false));
-        if (this.groundHasReflections)
+            this.forEachInstance((inst) => this.renderOneModel(pass, inst));
+        if (this.hasGround)
             this.renderGround(pass);
         pass.end();
+        const pick = this.pendingPick;
+        if (pick && hasModels)
+            this.renderPickPass(encoder);
         this.device.queue.submit([encoder.finish()]);
+        if (pick) {
+            this.pendingPick = null;
+            const dpr = window.devicePixelRatio || 1;
+            this.resolvePickResult(pick.x / dpr, pick.y / dpr);
+        }
         this.updateStats(performance.now() - currentTime);
     }
+    updateRenderTarget() {
+        const colorAttachment = this.renderPassDescriptor.colorAttachments[0];
+        colorAttachment.resolveTarget = this.context.getCurrentTexture().createView();
+    }
     drawInstanceShadow(sp, inst) {
         sp.setBindGroup(0, inst.shadowBindGroup);
         sp.setVertexBuffer(0, inst.vertexBuffer);
@@ -1795,48 +1528,38 @@ export class Engine {
                 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);
-                }
-            }
-            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.setPipeline(this.modelPipeline);
+    drawOpaque(pass, inst, pipeline) {
+        pass.setPipeline(pipeline);
         for (const draw of inst.drawCalls) {
             if (draw.type === "opaque" && this.shouldRenderDrawCall(inst, draw)) {
-                pass.setBindGroup(0, draw.bindGroup);
+                pass.setBindGroup(2, 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);
+    }
+    drawTransparent(pass, inst, pipeline) {
+        pass.setPipeline(pipeline);
         for (const draw of inst.drawCalls) {
             if (draw.type === "transparent" && this.shouldRenderDrawCall(inst, draw)) {
-                pass.setBindGroup(0, draw.bindGroup);
+                pass.setBindGroup(2, draw.bindGroup);
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
         }
+    }
+    bindMainGroups(pass, inst) {
+        pass.setBindGroup(0, this.perFrameBindGroup);
+        pass.setBindGroup(1, inst.mainPerInstanceBindGroup);
+    }
+    renderOneModel(pass, inst) {
+        pass.setVertexBuffer(0, inst.vertexBuffer);
+        pass.setVertexBuffer(1, inst.jointsBuffer);
+        pass.setVertexBuffer(2, inst.weightsBuffer);
+        pass.setIndexBuffer(inst.indexBuffer, "uint32");
+        this.bindMainGroups(pass, inst);
+        this.drawOpaque(pass, inst, this.modelPipeline);
+        this.drawOutlines(pass, inst, false);
+        this.bindMainGroups(pass, inst);
+        this.drawTransparent(pass, inst, this.modelPipeline);
         this.drawOutlines(pass, inst, true);
     }
     updateCameraUniforms() {
@@ -1850,30 +1573,20 @@ export class Engine {
         this.cameraMatrixData[34] = cameraPos.z;
         this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData);
     }
-    updateRenderTarget() {
-        // Update render target to use current canvas texture
-        const colorAttachment = this.renderPassDescriptor.colorAttachments[0];
-        if (this.sampleCount > 1) {
-            colorAttachment.resolveTarget = this.context.getCurrentTexture().createView();
-        }
-        else {
-            colorAttachment.view = this.context.getCurrentTexture().createView();
-        }
-    }
     updateSkinMatrices() {
         this.forEachInstance((inst) => {
             const skinMatrices = inst.model.getSkinMatrices();
             this.device.queue.writeBuffer(inst.skinMatrixBuffer, 0, skinMatrices.buffer, skinMatrices.byteOffset, skinMatrices.byteLength);
         });
     }
-    drawOutlines(pass, inst, transparent, useReflectionPipeline = false) {
-        if (useReflectionPipeline)
-            return;
+    drawOutlines(pass, inst, transparent) {
         pass.setPipeline(this.outlinePipeline);
+        pass.setBindGroup(0, this.outlinePerFrameBindGroup);
+        pass.setBindGroup(1, inst.mainPerInstanceBindGroup);
         const outlineType = transparent ? "transparent-outline" : "opaque-outline";
         for (const draw of inst.drawCalls) {
             if (draw.type === outlineType && this.shouldRenderDrawCall(inst, draw)) {
-                pass.setBindGroup(0, draw.bindGroup);
+                pass.setBindGroup(2, draw.bindGroup);
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
         }
@@ -1900,41 +1613,6 @@ export class Engine {
             this.lastFpsUpdate = now;
         }
     }
-    createMirrorMatrix(planeNormal, planeDistance) {
-        // Create reflection matrix across a plane
-        const n = planeNormal.normalize();
-        return new Mat4(new Float32Array([
-            1 - 2 * n.x * n.x,
-            -2 * n.x * n.y,
-            -2 * n.x * n.z,
-            0,
-            -2 * n.y * n.x,
-            1 - 2 * n.y * n.y,
-            -2 * n.y * n.z,
-            0,
-            -2 * n.z * n.x,
-            -2 * n.z * n.y,
-            1 - 2 * n.z * n.z,
-            0,
-            -2 * planeDistance * n.x,
-            -2 * planeDistance * n.y,
-            -2 * planeDistance * n.z,
-            1,
-        ]));
-    }
-    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++)
-                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];
-        }
-        this.device.queue.writeBuffer(inst.skinMatrixBuffer, 0, transformedMatrices);
-    }
 }
 Engine.instance = null;
+Engine.MULTISAMPLE_COUNT = 4;