reze-engine 0.8.4 → 0.9.1

package/dist/engine.js

@@ -24,17 +24,15 @@ export class Engine {
         this.lightData = new Float32Array(64);
         this.lightCount = 0;
         this.resizeObserver = null;
-        // Post-alpha eye: eyes write stencil, hair-over-eyes reads it for see-through bangs (MMD-style).
-        this.STENCIL_EYE_VALUE = 1;
         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._nextDefaultModelId = 0;
@@ -188,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: {
@@ -242,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 {
@@ -262,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,
@@ -279,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);
@@ -303,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;
           }
@@ -315,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;
@@ -334,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);
@@ -342,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;
@@ -353,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" } }, // 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 | 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, 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",
@@ -497,18 +491,30 @@ export class Engine {
             cullMode: "back",
             depthStencil: { format: "depth24plus-stencil8", depthWriteEnabled: true, depthCompare: "less-equal" },
         });
-        // Create bind group layout for outline pipelines
-        this.outlineBindGroupLayout = this.device.createBindGroupLayout({
-            label: "outline bind group layout",
+        // 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" } },
+            ],
+        });
+        // 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",
@@ -523,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,
@@ -545,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);
@@ -562,22 +570,17 @@ 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;
+          // Screen-stable edgeline: extrusion ∝ camera distance (same idea as MMD viewers / babylon-mmd-style scaling)
+          let camDist = max(length(camera.viewPos - worldPos), 0.25);
+          let refDist = 30.0;
+          let edgeScale = 0.03;
+          let expandedPos = worldPos + worldNormal * material.edgeSize * edgeScale * (camDist / refDist);
           output.position = camera.projection * camera.view * vec4f(expandedPos, 1.0);
           return output;
         }
 
         @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;
         }
       `,
         });
@@ -590,59 +593,14 @@ export class Engine {
             cullMode: "back",
             depthStencil: {
                 format: "depth24plus-stencil8",
-                depthWriteEnabled: true,
-                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",
+                // Don’t write outline into depth buffer — stops z-fighting / black cracks vs body (MMD-style; body depth stays authoritative)
                 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,
@@ -650,91 +608,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() {
@@ -788,10 +742,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
@@ -823,6 +791,24 @@ export class Engine {
         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({
@@ -954,9 +940,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);
     }
@@ -1024,11 +1007,8 @@ 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) {
@@ -1098,6 +1078,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,
@@ -1110,6 +1104,9 @@ export class Engine {
             drawCalls: [],
             shadowDrawCalls: [],
             shadowBindGroup,
+            mainPerInstanceBindGroup,
+            pickPerInstanceBindGroup,
+            pickDrawCalls: [],
             hiddenMaterials: new Set(),
             physics,
             vertexBufferNeedsUpdate: false,
@@ -1245,6 +1242,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;
@@ -1252,70 +1251,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],
@@ -1324,48 +1282,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);
     }
@@ -1412,17 +1364,6 @@ export class Engine {
             return null;
         }
     }
-    // Post-alpha eye: render eye draws; main pass writes stencil so hair-over-eyes can use it for see-through bangs.
-    renderEyes(pass, inst) {
-        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.hasGround || !this.groundVertexBuffer || !this.groundIndexBuffer || !this.groundDrawCall)
             return;
@@ -1432,149 +1373,91 @@ export class Engine {
         pass.setBindGroup(0, this.groundDrawCall.bindGroup);
         pass.drawIndexed(this.groundDrawCall.count, 1, this.groundDrawCall.firstIndex, 0, 0);
     }
-    // Post-alpha eye: hair-over-eyes uses stencil (from renderEyes) for 50% alpha; hair-over-non-eyes uses inverse stencil.
-    renderHair(pass, inst) {
-        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.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-            }
-        }
-    }
     performRaycast(screenX, screenY) {
         if (!this.onRaycast || this.modelInstances.size === 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;
+        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.pickDepthTexture.createView(),
+                depthClearValue: 1.0,
+                depthLoadOp: "clear",
+                depthStoreOp: "store",
+            },
+        });
+        pass.setPipeline(this.pickPipeline);
+        pass.setBindGroup(0, this.pickPerFrameBindGroup);
         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];
+            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 });
+    }
+    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;
+        }
+        // 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)
@@ -1622,9 +1505,21 @@ export class Engine {
         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);
@@ -1640,7 +1535,7 @@ export class Engine {
         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);
             }
         }
@@ -1649,20 +1544,24 @@ export class Engine {
         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.renderEyes(pass, inst);
         this.drawOutlines(pass, inst, false);
-        this.renderHair(pass, inst);
+        this.bindMainGroups(pass, inst);
         this.drawTransparent(pass, inst, this.modelPipeline);
         this.drawOutlines(pass, inst, true);
     }
@@ -1677,10 +1576,6 @@ export class Engine {
         this.cameraMatrixData[34] = cameraPos.z;
         this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData);
     }
-    updateRenderTarget() {
-        const colorAttachment = this.renderPassDescriptor.colorAttachments[0];
-        colorAttachment.resolveTarget = this.context.getCurrentTexture().createView();
-    }
     updateSkinMatrices() {
         this.forEachInstance((inst) => {
             const skinMatrices = inst.model.getSkinMatrices();
@@ -1689,10 +1584,12 @@ export class Engine {
     }
     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);
             }
         }