reze-engine 0.1.5 → 0.1.6

package/src/engine.ts

@@ -1,1136 +1,1826 @@
-import { Camera } from "./camera"
-import { Quat, Vec3 } from "./math"
-import { Model } from "./model"
-import { PmxLoader } from "./pmx-loader"
-import { Physics } from "./physics"
-
-export interface EngineStats {
-  fps: number
-  frameTime: number // ms
-  gpuMemory: number // MB (estimated total GPU memory)
-}
-
-export class Engine {
-  private canvas: HTMLCanvasElement
-  private device!: GPUDevice
-  private context!: GPUCanvasContext
-  private presentationFormat!: GPUTextureFormat
-  public camera!: Camera
-  private cameraUniformBuffer!: GPUBuffer
-  private cameraMatrixData = new Float32Array(36)
-  private lightUniformBuffer!: GPUBuffer
-  private lightData = new Float32Array(64)
-  private lightCount = 0
-  private vertexBuffer!: GPUBuffer
-  private vertexCount: number = 0
-  private indexBuffer?: GPUBuffer
-  private resizeObserver: ResizeObserver | null = null
-  private depthTexture!: GPUTexture
-  private pipeline!: GPURenderPipeline
-  private outlinePipeline!: GPURenderPipeline
-  private jointsBuffer!: GPUBuffer
-  private weightsBuffer!: GPUBuffer
-  private skinMatrixBuffer?: GPUBuffer
-  private worldMatrixBuffer?: GPUBuffer
-  private inverseBindMatrixBuffer?: GPUBuffer
-  private skinMatrixComputePipeline?: GPUComputePipeline
-  private boneCountBuffer?: GPUBuffer
-  private multisampleTexture!: GPUTexture
-  private readonly sampleCount = 4 // MSAA 4x
-  private renderPassDescriptor!: GPURenderPassDescriptor
-  private currentModel: Model | null = null
-  private modelDir: string = ""
-  private physics: Physics | null = null
-  private textureSampler!: GPUSampler
-  private textureCache = new Map<string, GPUTexture>()
-  private textureSizes = new Map<string, { width: number; height: number }>()
-
-  private lastFpsUpdate = performance.now()
-  private framesSinceLastUpdate = 0
-  private frameTimeSamples: number[] = []
-  private frameTimeSum: number = 0
-  private drawCallCount: number = 0
-  private lastFrameTime = performance.now()
-  private stats: EngineStats = {
-    fps: 0,
-    frameTime: 0,
-    gpuMemory: 0,
-  }
-  private animationFrameId: number | null = null
-  private renderLoopCallback: (() => void) | null = null
-
-  constructor(canvas: HTMLCanvasElement) {
-    this.canvas = canvas
-  }
-
-  // Step 1: Get WebGPU device and context
-  public async init() {
-    const adapter = await navigator.gpu?.requestAdapter()
-    const device = await adapter?.requestDevice()
-    if (!device) {
-      throw new Error("WebGPU is not supported in this browser.")
-    }
-    this.device = device
-
-    const context = this.canvas.getContext("webgpu")
-    if (!context) {
-      throw new Error("Failed to get WebGPU context.")
-    }
-    this.context = context
-
-    this.presentationFormat = navigator.gpu.getPreferredCanvasFormat()
-
-    this.context.configure({
-      device: this.device,
-      format: this.presentationFormat,
-      alphaMode: "premultiplied",
-    })
-
-    this.setupCamera()
-    this.setupLighting()
-    this.createPipelines()
-    this.setupResize()
-  }
-
-  // Step 2: Create shaders and render pipelines
-  private createPipelines() {
-    this.textureSampler = this.device.createSampler({
-      magFilter: "linear",
-      minFilter: "linear",
-      addressModeU: "repeat",
-      addressModeV: "repeat",
-    })
-
-    const shaderModule = this.device.createShaderModule({
-      label: "model shaders",
-      code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct Light {
-          direction: vec3f,
-          _padding1: f32,
-          color: vec3f,
-          intensity: f32,
-        };
-
-        struct LightUniforms {
-          ambient: f32,
-          lightCount: f32,
-          _padding1: f32,
-          _padding2: f32,
-          lights: array<Light, 4>,
-        };
-
-        struct MaterialUniforms {
-          alpha: f32,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-        };
-
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) normal: vec3f,
-          @location(1) uv: vec2f,
-          @location(2) worldPos: vec3f,
-        };
-
-        @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 toonTexture: texture_2d<f32>;
-        @group(0) @binding(6) var toonSampler: sampler;
-        @group(0) @binding(7) var<uniform> material: MaterialUniforms;
-
-        @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>
-        ) -> VertexOutput {
-          var output: VertexOutput;
-          let pos4 = vec4f(position, 1.0);
-          
-          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
-          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
-          var normalizedWeights: vec4f;
-          if (weightSum > 0.0001) {
-            normalizedWeights = weights0 / weightSum;
-          } else {
-            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
-          }
-          
-          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
-          var skinnedNrm = vec3f(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 r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
-            skinnedNrm += (r3 * normal) * w;
-          }
-          let worldPos = skinnedPos.xyz;
-          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
-          output.normal = normalize(skinnedNrm);
-          output.uv = uv;
-          output.worldPos = worldPos;
-          return output;
-        }
-
-        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
-          let n = normalize(input.normal);
-          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
-
-          var lightAccum = vec3f(light.ambient);
-          let numLights = u32(light.lightCount);
-          for (var i = 0u; i < numLights; i++) {
-            let l = -light.lights[i].direction;
-            let nDotL = max(dot(n, l), 0.0);
-            let toonUV = vec2f(nDotL, 0.5);
-            let toonFactor = textureSample(toonTexture, toonSampler, toonUV).rgb;
-            let radiance = light.lights[i].color * light.lights[i].intensity;
-            lightAccum += toonFactor * radiance * nDotL;
-          }
-          
-          let color = albedo * lightAccum;
-          let finalAlpha = material.alpha;
-          if (finalAlpha < 0.001) {
-            discard;
-          }
-          
-          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), finalAlpha);
-        }
-      `,
-    })
-
-    // Single pipeline for all materials with alpha blending
-    this.pipeline = this.device.createRenderPipeline({
-      label: "model pipeline",
-      layout: "auto",
-      vertex: {
-        module: shaderModule,
-        buffers: [
-          {
-            arrayStride: 8 * 4,
-            attributes: [
-              { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
-              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
-              { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
-            ],
-          },
-          {
-            arrayStride: 4 * 2,
-            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
-          },
-          {
-            arrayStride: 4,
-            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
-          },
-        ],
-      },
-      fragment: {
-        module: shaderModule,
-        targets: [
-          {
-            format: this.presentationFormat,
-            blend: {
-              color: {
-                srcFactor: "src-alpha",
-                dstFactor: "one-minus-src-alpha",
-                operation: "add",
-              },
-              alpha: {
-                srcFactor: "one",
-                dstFactor: "one-minus-src-alpha",
-                operation: "add",
-              },
-            },
-          },
-        ],
-      },
-      primitive: { cullMode: "none" },
-      depthStencil: {
-        format: "depth24plus",
-        depthWriteEnabled: true,
-        depthCompare: "less",
-      },
-      multisample: {
-        count: this.sampleCount,
-      },
-    })
-
-    const outlineShaderModule = this.device.createShaderModule({
-      label: "outline shaders",
-      code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct MaterialUniforms {
-          edgeColor: vec4f,
-          edgeSize: f32,
-          _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
-        };
-
-        @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>;
-
-        struct VertexOutput {
-          @builtin(position) position: vec4f,
-        };
-
-        @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>
-        ) -> VertexOutput {
-          var output: VertexOutput;
-          let pos4 = vec4f(position, 1.0);
-          
-          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
-          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
-          var normalizedWeights: vec4f;
-          if (weightSum > 0.0001) {
-            normalizedWeights = weights0 / weightSum;
-          } else {
-            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
-          }
-          
-          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
-          var skinnedNrm = vec3f(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 r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
-            skinnedNrm += (r3 * normal) * w;
-          }
-          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);
-          return output;
-        }
-
-        @fragment fn fs() -> @location(0) vec4f {
-          return material.edgeColor;
-        }
-      `,
-    })
-
-    this.outlinePipeline = this.device.createRenderPipeline({
-      label: "outline pipeline",
-      layout: "auto",
-      vertex: {
-        module: outlineShaderModule,
-        buffers: [
-          {
-            arrayStride: 8 * 4,
-            attributes: [
-              {
-                shaderLocation: 0,
-                offset: 0,
-                format: "float32x3" as GPUVertexFormat,
-              },
-              {
-                shaderLocation: 1,
-                offset: 3 * 4,
-                format: "float32x3" as GPUVertexFormat,
-              },
-              {
-                shaderLocation: 2,
-                offset: 6 * 4,
-                format: "float32x2" as GPUVertexFormat,
-              },
-            ],
-          },
-          {
-            arrayStride: 4 * 2,
-            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
-          },
-          {
-            arrayStride: 4,
-            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
-          },
-        ],
-      },
-      fragment: {
-        module: outlineShaderModule,
-        targets: [
-          {
-            format: this.presentationFormat,
-            blend: {
-              color: {
-                srcFactor: "src-alpha",
-                dstFactor: "one-minus-src-alpha",
-                operation: "add",
-              },
-              alpha: {
-                srcFactor: "one",
-                dstFactor: "one-minus-src-alpha",
-                operation: "add",
-              },
-            },
-          },
-        ],
-      },
-      primitive: {
-        cullMode: "back",
-      },
-      depthStencil: {
-        format: "depth24plus",
-        depthWriteEnabled: true,
-        depthCompare: "less",
-      },
-      multisample: {
-        count: this.sampleCount,
-      },
-    })
-  }
-
-  // Create compute shader for skin matrix computation
-  private createSkinMatrixComputePipeline() {
-    const computeShader = this.device.createShaderModule({
-      label: "skin matrix compute",
-      code: /* wgsl */ `
-        struct BoneCountUniform {
-          count: u32,
-          _padding1: u32,
-          _padding2: u32,
-          _padding3: u32,
-          _padding4: vec4<u32>,
-        };
-        
-        @group(0) @binding(0) var<uniform> boneCount: BoneCountUniform;
-        @group(0) @binding(1) var<storage, read> worldMatrices: array<mat4x4f>;
-        @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
-        @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
-        
-        @compute @workgroup_size(64)
-        fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
-          let boneIndex = globalId.x;
-          // Bounds check: we dispatch workgroups (64 threads each), so some threads may be out of range
-          if (boneIndex >= boneCount.count) {
-            return;
-          }
-          let worldMat = worldMatrices[boneIndex];
-          let invBindMat = inverseBindMatrices[boneIndex];
-          skinMatrices[boneIndex] = worldMat * invBindMat;
-        }
-      `,
-    })
-
-    this.skinMatrixComputePipeline = this.device.createComputePipeline({
-      label: "skin matrix compute pipeline",
-      layout: "auto",
-      compute: {
-        module: computeShader,
-      },
-    })
-  }
-
-  // Step 3: Setup canvas resize handling
-  private setupResize() {
-    this.resizeObserver = new ResizeObserver(() => this.handleResize())
-    this.resizeObserver.observe(this.canvas)
-    this.handleResize()
-  }
-
-  private handleResize() {
-    const displayWidth = this.canvas.clientWidth
-    const displayHeight = this.canvas.clientHeight
-
-    const dpr = window.devicePixelRatio || 1
-    const width = Math.floor(displayWidth * dpr)
-    const height = Math.floor(displayHeight * dpr)
-
-    if (!this.multisampleTexture || this.canvas.width !== width || this.canvas.height !== height) {
-      this.canvas.width = width
-      this.canvas.height = height
-
-      this.multisampleTexture = this.device.createTexture({
-        label: "multisample render target",
-        size: [width, height],
-        sampleCount: this.sampleCount,
-        format: this.presentationFormat,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-      })
-
-      this.depthTexture = this.device.createTexture({
-        label: "depth texture",
-        size: [width, height],
-        sampleCount: this.sampleCount,
-        format: "depth24plus",
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-      })
-
-      const depthTextureView = this.depthTexture.createView()
-
-      const colorAttachment: GPURenderPassColorAttachment =
-        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",
-            }
-
-      this.renderPassDescriptor = {
-        label: "renderPass",
-        colorAttachments: [colorAttachment],
-        depthStencilAttachment: {
-          view: depthTextureView,
-          depthClearValue: 1.0,
-          depthLoadOp: "clear",
-          depthStoreOp: "store",
-        },
-      }
-
-      this.camera.aspect = width / height
-    }
-  }
-
-  // Step 4: Create camera and uniform buffer
-  private setupCamera() {
-    this.cameraUniformBuffer = this.device.createBuffer({
-      label: "camera uniforms",
-      size: 40 * 4,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    })
-
-    this.camera = new Camera(Math.PI, Math.PI / 2.5, 26.6, new Vec3(0, 12.5, 0))
-
-    this.camera.aspect = this.canvas.width / this.canvas.height
-    this.camera.attachControl(this.canvas)
-  }
-
-  // Step 5: Create lighting buffers
-  private setupLighting() {
-    this.lightUniformBuffer = this.device.createBuffer({
-      label: "light uniforms",
-      size: 64 * 4,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    })
-
-    this.lightCount = 0
-
-    this.setAmbient(0.96)
-    this.addLight(new Vec3(-0.5, -0.8, 0.5).normalize(), new Vec3(1.0, 0.95, 0.9), 0.12)
-    this.addLight(new Vec3(0.7, -0.5, 0.3).normalize(), new Vec3(0.8, 0.85, 1.0), 0.1)
-    this.addLight(new Vec3(0.3, -0.5, -1.0).normalize(), new Vec3(0.9, 0.9, 1.0), 0.08)
-    this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData)
-  }
-
-  public addLight(direction: Vec3, color: Vec3, intensity: number = 1.0): boolean {
-    if (this.lightCount >= 4) return false
-
-    const normalized = direction.normalize()
-    const baseIndex = 4 + this.lightCount * 8
-    this.lightData[baseIndex] = normalized.x
-    this.lightData[baseIndex + 1] = normalized.y
-    this.lightData[baseIndex + 2] = normalized.z
-    this.lightData[baseIndex + 3] = 0
-    this.lightData[baseIndex + 4] = color.x
-    this.lightData[baseIndex + 5] = color.y
-    this.lightData[baseIndex + 6] = color.z
-    this.lightData[baseIndex + 7] = intensity
-
-    this.lightCount++
-    this.lightData[1] = this.lightCount
-    return true
-  }
-
-  public setAmbient(intensity: number) {
-    this.lightData[0] = intensity
-  }
-
-  public getStats(): EngineStats {
-    return { ...this.stats }
-  }
-
-  public runRenderLoop(callback?: () => void) {
-    this.renderLoopCallback = callback || null
-
-    const loop = () => {
-      this.render()
-
-      if (this.renderLoopCallback) {
-        this.renderLoopCallback()
-      }
-
-      this.animationFrameId = requestAnimationFrame(loop)
-    }
-
-    this.animationFrameId = requestAnimationFrame(loop)
-  }
-
-  public stopRenderLoop() {
-    if (this.animationFrameId !== null) {
-      cancelAnimationFrame(this.animationFrameId)
-      this.animationFrameId = null
-    }
-    this.renderLoopCallback = null
-  }
-
-  public dispose() {
-    this.stopRenderLoop()
-    if (this.camera) this.camera.detachControl()
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-      this.resizeObserver = null
-    }
-  }
-
-  // Step 6: Load PMX model file
-  public async loadModel(path: string) {
-    const pathParts = path.split("/")
-    pathParts.pop()
-    const dir = pathParts.join("/") + "/"
-    this.modelDir = dir
-
-    const model = await PmxLoader.load(path)
-    this.physics = new Physics(model.getRigidbodies(), model.getJoints())
-    await this.setupModelBuffers(model)
-  }
-
-  public rotateBones(bones: string[], rotations: Quat[], durationMs?: number) {
-    this.currentModel?.rotateBones(bones, rotations, durationMs)
-  }
-
-  // Step 7: Create vertex, index, and joint buffers
-  private async setupModelBuffers(model: Model) {
-    this.currentModel = model
-    const vertices = model.getVertices()
-    const skinning = model.getSkinning()
-    const skeleton = model.getSkeleton()
-
-    this.vertexBuffer = this.device.createBuffer({
-      label: "model vertex buffer",
-      size: vertices.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-    })
-    this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices)
-    this.vertexCount = model.getVertexCount()
-
-    this.jointsBuffer = this.device.createBuffer({
-      label: "joints buffer",
-      size: skinning.joints.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-    })
-    this.device.queue.writeBuffer(
-      this.jointsBuffer,
-      0,
-      skinning.joints.buffer,
-      skinning.joints.byteOffset,
-      skinning.joints.byteLength
-    )
-
-    this.weightsBuffer = this.device.createBuffer({
-      label: "weights buffer",
-      size: skinning.weights.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-    })
-    this.device.queue.writeBuffer(
-      this.weightsBuffer,
-      0,
-      skinning.weights.buffer,
-      skinning.weights.byteOffset,
-      skinning.weights.byteLength
-    )
-
-    const boneCount = skeleton.bones.length
-    const matrixSize = boneCount * 16 * 4
-
-    this.skinMatrixBuffer = this.device.createBuffer({
-      label: "skin matrices",
-      size: Math.max(256, matrixSize),
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX,
-    })
-
-    this.worldMatrixBuffer = this.device.createBuffer({
-      label: "world matrices",
-      size: Math.max(256, matrixSize),
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
-    })
-
-    this.inverseBindMatrixBuffer = this.device.createBuffer({
-      label: "inverse bind matrices",
-      size: Math.max(256, matrixSize),
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
-    })
-
-    const invBindMatrices = skeleton.inverseBindMatrices
-    this.device.queue.writeBuffer(
-      this.inverseBindMatrixBuffer,
-      0,
-      invBindMatrices.buffer,
-      invBindMatrices.byteOffset,
-      invBindMatrices.byteLength
-    )
-
-    this.boneCountBuffer = this.device.createBuffer({
-      label: "bone count uniform",
-      size: 32, // Minimum uniform buffer size is 32 bytes
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    })
-    const boneCountData = new Uint32Array(8) // 32 bytes total
-    boneCountData[0] = boneCount
-    this.device.queue.writeBuffer(this.boneCountBuffer, 0, boneCountData)
-
-    this.createSkinMatrixComputePipeline()
-
-    const indices = model.getIndices()
-    if (indices) {
-      this.indexBuffer = this.device.createBuffer({
-        label: "model index buffer",
-        size: indices.byteLength,
-        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-      })
-      this.device.queue.writeBuffer(this.indexBuffer, 0, indices)
-    } else {
-      throw new Error("Model has no index buffer")
-    }
-
-    await this.setupMaterials(model)
-  }
-
-  private materialDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
-  private outlineDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
-
-  // Step 8: Load textures and create material bind groups
-  private async setupMaterials(model: Model) {
-    const materials = model.getMaterials()
-    if (materials.length === 0) {
-      throw new Error("Model has no materials")
-    }
-
-    const textures = model.getTextures()
-
-    const loadTextureByIndex = async (texIndex: number): Promise<GPUTexture | null> => {
-      if (texIndex < 0 || texIndex >= textures.length) {
-        return null
-      }
-
-      const path = this.modelDir + textures[texIndex].path
-      const texture = await this.createTextureFromPath(path)
-      return texture
-    }
-
-    const loadToonTexture = async (toonTextureIndex: number): Promise<GPUTexture> => {
-      const texture = await loadTextureByIndex(toonTextureIndex)
-      if (texture) return texture
-
-      // Default toon texture fallback - cache it
-      const defaultToonPath = "__default_toon__"
-      const cached = this.textureCache.get(defaultToonPath)
-      if (cached) return cached
-
-      const defaultToonData = new Uint8Array(256 * 2 * 4)
-      for (let i = 0; i < 256; i++) {
-        const factor = i / 255.0
-        const gray = Math.floor(128 + factor * 127)
-        defaultToonData[i * 4] = gray
-        defaultToonData[i * 4 + 1] = gray
-        defaultToonData[i * 4 + 2] = gray
-        defaultToonData[i * 4 + 3] = 255
-        defaultToonData[(256 + i) * 4] = gray
-        defaultToonData[(256 + i) * 4 + 1] = gray
-        defaultToonData[(256 + i) * 4 + 2] = gray
-        defaultToonData[(256 + i) * 4 + 3] = 255
-      }
-      const defaultToonTexture = this.device.createTexture({
-        label: "default toon texture",
-        size: [256, 2],
-        format: "rgba8unorm",
-        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-      })
-      this.device.queue.writeTexture(
-        { texture: defaultToonTexture },
-        defaultToonData,
-        { bytesPerRow: 256 * 4 },
-        [256, 2]
-      )
-      this.textureCache.set(defaultToonPath, defaultToonTexture)
-      this.textureSizes.set(defaultToonPath, { width: 256, height: 2 })
-      return defaultToonTexture
-    }
-
-    this.materialDraws = []
-    this.outlineDraws = []
-    const outlineBindGroupLayout = this.outlinePipeline.getBindGroupLayout(0)
-    let runningFirstIndex = 0
-
-    for (const mat of materials) {
-      const matCount = mat.vertexCount | 0
-      if (matCount === 0) continue
-
-      const diffuseTexture = await loadTextureByIndex(mat.diffuseTextureIndex)
-      if (!diffuseTexture) throw new Error(`Material "${mat.name}" has no diffuse texture`)
-
-      const toonTexture = await loadToonTexture(mat.toonTextureIndex)
-
-      const materialAlpha = mat.diffuse[3]
-      const EPSILON = 0.001
-      const isTransparent = materialAlpha < 1.0 - EPSILON
-
-      const materialUniformData = new Float32Array(4)
-      materialUniformData[0] = materialAlpha
-      materialUniformData[1] = 0.0
-      materialUniformData[2] = 0.0
-      materialUniformData[3] = 0.0
-
-      const materialUniformBuffer = this.device.createBuffer({
-        label: `material uniform: ${mat.name}`,
-        size: materialUniformData.byteLength,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-      })
-      this.device.queue.writeBuffer(materialUniformBuffer, 0, materialUniformData)
-
-      const bindGroup = this.device.createBindGroup({
-        label: `material bind group: ${mat.name}`,
-        layout: this.pipeline.getBindGroupLayout(0),
-        entries: [
-          { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-          { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-          { binding: 2, resource: diffuseTexture.createView() },
-          { binding: 3, resource: this.textureSampler },
-          { binding: 4, resource: { buffer: this.skinMatrixBuffer! } },
-          { binding: 5, resource: toonTexture.createView() },
-          { binding: 6, resource: this.textureSampler },
-          { binding: 7, resource: { buffer: materialUniformBuffer } },
-        ],
-      })
-
-      // All materials use the same pipeline
-      this.materialDraws.push({
-        count: matCount,
-        firstIndex: runningFirstIndex,
-        bindGroup,
-        isTransparent,
-      })
-
-      // Outline for all materials (including transparent)
-      // Edge flag is at bit 4 (0x10) in PMX format, not bit 0 (0x01)
-      if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
-        const materialUniformData = new Float32Array(8)
-        materialUniformData[0] = mat.edgeColor[0]
-        materialUniformData[1] = mat.edgeColor[1]
-        materialUniformData[2] = mat.edgeColor[2]
-        materialUniformData[3] = mat.edgeColor[3]
-        materialUniformData[4] = mat.edgeSize
-
-        const materialUniformBuffer = this.device.createBuffer({
-          label: `outline material uniform: ${mat.name}`,
-          size: materialUniformData.byteLength,
-          usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        })
-        this.device.queue.writeBuffer(materialUniformBuffer, 0, materialUniformData)
-
-        const outlineBindGroup = this.device.createBindGroup({
-          label: `outline bind group: ${mat.name}`,
-          layout: outlineBindGroupLayout,
-          entries: [
-            { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-            { binding: 1, resource: { buffer: materialUniformBuffer } },
-            { binding: 2, resource: { buffer: this.skinMatrixBuffer! } },
-          ],
-        })
-
-        // All outlines use the same pipeline
-        this.outlineDraws.push({
-          count: matCount,
-          firstIndex: runningFirstIndex,
-          bindGroup: outlineBindGroup,
-          isTransparent,
-        })
-      }
-
-      runningFirstIndex += matCount
-    }
-  }
-
-  // Helper: Load texture from file path with optional max size limit
-  private async createTextureFromPath(path: string, maxSize: number = 2048): Promise<GPUTexture | null> {
-    const cached = this.textureCache.get(path)
-    if (cached) {
-      return cached
-    }
-
-    try {
-      const response = await fetch(path)
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-      }
-      let imageBitmap = await createImageBitmap(await response.blob(), {
-        premultiplyAlpha: "none",
-        colorSpaceConversion: "none",
-      })
-
-      // Downscale if texture is too large
-      let finalWidth = imageBitmap.width
-      let finalHeight = imageBitmap.height
-      if (finalWidth > maxSize || finalHeight > maxSize) {
-        const scale = Math.min(maxSize / finalWidth, maxSize / finalHeight)
-        finalWidth = Math.floor(finalWidth * scale)
-        finalHeight = Math.floor(finalHeight * scale)
-
-        // Create canvas to downscale
-        const canvas = new OffscreenCanvas(finalWidth, finalHeight)
-        const ctx = canvas.getContext("2d")
-        if (ctx) {
-          ctx.drawImage(imageBitmap, 0, 0, finalWidth, finalHeight)
-          imageBitmap = await createImageBitmap(canvas)
-        }
-      }
-
-      const texture = this.device.createTexture({
-        label: `texture: ${path}`,
-        size: [finalWidth, finalHeight],
-        format: "rgba8unorm",
-        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
-      })
-      this.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [finalWidth, finalHeight])
-
-      this.textureCache.set(path, texture)
-      this.textureSizes.set(path, { width: finalWidth, height: finalHeight })
-      return texture
-    } catch {
-      return null
-    }
-  }
-
-  // Step 9: Render one frame
-  public render() {
-    if (this.multisampleTexture && this.camera && this.device && this.currentModel) {
-      const currentTime = performance.now()
-      const deltaTime = this.lastFrameTime > 0 ? (currentTime - this.lastFrameTime) / 1000 : 0.016
-      this.lastFrameTime = currentTime
-
-      this.updateCameraUniforms()
-      this.updateRenderTarget()
-
-      this.updateModelPose(deltaTime)
-
-      const encoder = this.device.createCommandEncoder()
-      const pass = encoder.beginRenderPass(this.renderPassDescriptor)
-
-      pass.setVertexBuffer(0, this.vertexBuffer)
-      pass.setVertexBuffer(1, this.jointsBuffer)
-      pass.setVertexBuffer(2, this.weightsBuffer)
-      pass.setIndexBuffer(this.indexBuffer!, "uint32")
-
-      this.drawCallCount = 0
-      this.drawOutlines(pass, false)
-      this.drawModel(pass, false)
-      this.drawModel(pass, true)
-      this.drawOutlines(pass, true)
-
-      pass.end()
-      this.device.queue.submit([encoder.finish()])
-      this.updateStats(performance.now() - currentTime)
-    }
-  }
-
-  // Update camera uniform buffer each frame
-  private updateCameraUniforms() {
-    const viewMatrix = this.camera.getViewMatrix()
-    const projectionMatrix = this.camera.getProjectionMatrix()
-    const cameraPos = this.camera.getPosition()
-    this.cameraMatrixData.set(viewMatrix.values, 0)
-    this.cameraMatrixData.set(projectionMatrix.values, 16)
-    this.cameraMatrixData[32] = cameraPos.x
-    this.cameraMatrixData[33] = cameraPos.y
-    this.cameraMatrixData[34] = cameraPos.z
-    this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData)
-  }
-
-  // Update render target texture view
-  private updateRenderTarget() {
-    const colorAttachment = (this.renderPassDescriptor.colorAttachments as GPURenderPassColorAttachment[])[0]
-    if (this.sampleCount > 1) {
-      colorAttachment.resolveTarget = this.context.getCurrentTexture().createView()
-    } else {
-      colorAttachment.view = this.context.getCurrentTexture().createView()
-    }
-  }
-
-  // Update model pose and physics
-  private updateModelPose(deltaTime: number) {
-    this.currentModel!.evaluatePose()
-
-    // Upload world matrices to GPU
-    const worldMats = this.currentModel!.getBoneWorldMatrices()
-    this.device.queue.writeBuffer(
-      this.worldMatrixBuffer!,
-      0,
-      worldMats.buffer,
-      worldMats.byteOffset,
-      worldMats.byteLength
-    )
-
-    if (this.physics) {
-      this.physics.step(deltaTime, worldMats, this.currentModel!.getBoneInverseBindMatrices())
-      // Re-upload world matrices after physics (physics may have updated bones)
-      this.device.queue.writeBuffer(
-        this.worldMatrixBuffer!,
-        0,
-        worldMats.buffer,
-        worldMats.byteOffset,
-        worldMats.byteLength
-      )
-    }
-
-    // Compute skin matrices on GPU
-    this.computeSkinMatrices()
-  }
-
-  // Compute skin matrices on GPU
-  private computeSkinMatrices() {
-    const boneCount = this.currentModel!.getSkeleton().bones.length
-    const workgroupSize = 64
-    // Dispatch exactly enough threads for all bones (no bounds check needed)
-    const workgroupCount = Math.ceil(boneCount / workgroupSize)
-
-    // Update bone count uniform
-    const boneCountData = new Uint32Array(8) // 32 bytes total
-    boneCountData[0] = boneCount
-    this.device.queue.writeBuffer(this.boneCountBuffer!, 0, boneCountData)
-
-    const bindGroup = this.device.createBindGroup({
-      label: "skin matrix compute bind group",
-      layout: this.skinMatrixComputePipeline!.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.boneCountBuffer! } },
-        { binding: 1, resource: { buffer: this.worldMatrixBuffer! } },
-        { binding: 2, resource: { buffer: this.inverseBindMatrixBuffer! } },
-        { binding: 3, resource: { buffer: this.skinMatrixBuffer! } },
-      ],
-    })
-
-    const encoder = this.device.createCommandEncoder()
-    const pass = encoder.beginComputePass()
-    pass.setPipeline(this.skinMatrixComputePipeline!)
-    pass.setBindGroup(0, bindGroup)
-    pass.dispatchWorkgroups(workgroupCount)
-    pass.end()
-    this.device.queue.submit([encoder.finish()])
-  }
-
-  // Draw outlines (opaque or transparent)
-  private drawOutlines(pass: GPURenderPassEncoder, transparent: boolean) {
-    if (this.outlineDraws.length === 0) return
-    pass.setPipeline(this.outlinePipeline)
-    for (const draw of this.outlineDraws) {
-      if (draw.count > 0 && draw.isTransparent === transparent) {
-        pass.setBindGroup(0, draw.bindGroup)
-        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
-      }
-    }
-  }
-
-  // Draw model materials (opaque or transparent)
-  private drawModel(pass: GPURenderPassEncoder, transparent: boolean) {
-    pass.setPipeline(this.pipeline)
-    for (const draw of this.materialDraws) {
-      if (draw.count > 0 && draw.isTransparent === transparent) {
-        pass.setBindGroup(0, draw.bindGroup)
-        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
-        this.drawCallCount++
-      }
-    }
-  }
-
-  private updateStats(frameTime: number) {
-    const maxSamples = 60
-    this.frameTimeSamples.push(frameTime)
-    this.frameTimeSum += frameTime
-    if (this.frameTimeSamples.length > maxSamples) {
-      const removed = this.frameTimeSamples.shift()!
-      this.frameTimeSum -= removed
-    }
-    const avgFrameTime = this.frameTimeSum / this.frameTimeSamples.length
-    this.stats.frameTime = Math.round(avgFrameTime * 100) / 100
-
-    const now = performance.now()
-    this.framesSinceLastUpdate++
-    const elapsed = now - this.lastFpsUpdate
-
-    if (elapsed >= 1000) {
-      this.stats.fps = Math.round((this.framesSinceLastUpdate / elapsed) * 1000)
-      this.framesSinceLastUpdate = 0
-      this.lastFpsUpdate = now
-    }
-
-    // Calculate GPU memory: textures + buffers + render targets
-    let textureMemoryBytes = 0
-    for (const [path, size] of this.textureSizes.entries()) {
-      if (this.textureCache.has(path)) {
-        textureMemoryBytes += size.width * size.height * 4 // RGBA8 = 4 bytes per pixel
-      }
-    }
-
-    let bufferMemoryBytes = 0
-    if (this.vertexBuffer) {
-      const vertices = this.currentModel?.getVertices()
-      if (vertices) bufferMemoryBytes += vertices.byteLength
-    }
-    if (this.indexBuffer) {
-      const indices = this.currentModel?.getIndices()
-      if (indices) bufferMemoryBytes += indices.byteLength
-    }
-    if (this.jointsBuffer) {
-      const skinning = this.currentModel?.getSkinning()
-      if (skinning) bufferMemoryBytes += skinning.joints.byteLength
-    }
-    if (this.weightsBuffer) {
-      const skinning = this.currentModel?.getSkinning()
-      if (skinning) bufferMemoryBytes += skinning.weights.byteLength
-    }
-    if (this.skinMatrixBuffer) {
-      const skeleton = this.currentModel?.getSkeleton()
-      if (skeleton) bufferMemoryBytes += Math.max(256, skeleton.bones.length * 16 * 4)
-    }
-    bufferMemoryBytes += 40 * 4 // cameraUniformBuffer
-    bufferMemoryBytes += 64 * 4 // lightUniformBuffer
-    bufferMemoryBytes += this.materialDraws.length * 4 // Material uniform buffers
-
-    let renderTargetMemoryBytes = 0
-    if (this.multisampleTexture) {
-      const width = this.canvas.width
-      const height = this.canvas.height
-      renderTargetMemoryBytes += width * height * 4 * this.sampleCount // multisample color
-      renderTargetMemoryBytes += width * height * 4 // depth
-    }
-
-    const totalGPUMemoryBytes = textureMemoryBytes + bufferMemoryBytes + renderTargetMemoryBytes
-    this.stats.gpuMemory = Math.round((totalGPUMemoryBytes / 1024 / 1024) * 100) / 100
-  }
-}
+import { Camera } from "./camera"
+import { Quat, Vec3 } from "./math"
+import { Model } from "./model"
+import { PmxLoader } from "./pmx-loader"
+import { Physics } from "./physics"
+
+export interface EngineStats {
+  fps: number
+  frameTime: number // ms
+  gpuMemory: number // MB (estimated total GPU memory)
+}
+
+export class Engine {
+  private canvas: HTMLCanvasElement
+  private device!: GPUDevice
+  private context!: GPUCanvasContext
+  private presentationFormat!: GPUTextureFormat
+  public camera!: Camera
+  private cameraUniformBuffer!: GPUBuffer
+  private cameraMatrixData = new Float32Array(36)
+  private lightUniformBuffer!: GPUBuffer
+  private lightData = new Float32Array(64)
+  private lightCount = 0
+  private vertexBuffer!: GPUBuffer
+  private vertexCount: number = 0
+  private indexBuffer?: GPUBuffer
+  private resizeObserver: ResizeObserver | null = null
+  private depthTexture!: GPUTexture
+  private pipeline!: GPURenderPipeline
+  private outlinePipeline!: GPURenderPipeline
+  private hairOutlinePipeline!: GPURenderPipeline
+  private hairOutlineOverEyesPipeline!: GPURenderPipeline
+  private hairMultiplyPipeline!: GPURenderPipeline
+  private hairOpaquePipeline!: GPURenderPipeline
+  private eyePipeline!: GPURenderPipeline
+  private hairBindGroupLayout!: GPUBindGroupLayout
+  private outlineBindGroupLayout!: GPUBindGroupLayout
+  private jointsBuffer!: GPUBuffer
+  private weightsBuffer!: GPUBuffer
+  private skinMatrixBuffer?: GPUBuffer
+  private worldMatrixBuffer?: GPUBuffer
+  private inverseBindMatrixBuffer?: GPUBuffer
+  private skinMatrixComputePipeline?: GPUComputePipeline
+  private boneCountBuffer?: GPUBuffer
+  private multisampleTexture!: GPUTexture
+  private readonly sampleCount = 4 // MSAA 4x
+  private renderPassDescriptor!: GPURenderPassDescriptor
+  private currentModel: Model | null = null
+  private modelDir: string = ""
+  private physics: Physics | null = null
+  private textureSampler!: GPUSampler
+  private textureCache = new Map<string, GPUTexture>()
+  private textureSizes = new Map<string, { width: number; height: number }>()
+
+  private lastFpsUpdate = performance.now()
+  private framesSinceLastUpdate = 0
+  private frameTimeSamples: number[] = []
+  private frameTimeSum: number = 0
+  private drawCallCount: number = 0
+  private lastFrameTime = performance.now()
+  private stats: EngineStats = {
+    fps: 0,
+    frameTime: 0,
+    gpuMemory: 0,
+  }
+  private animationFrameId: number | null = null
+  private renderLoopCallback: (() => void) | null = null
+
+  constructor(canvas: HTMLCanvasElement) {
+    this.canvas = canvas
+  }
+
+  // Step 1: Get WebGPU device and context
+  public async init() {
+    const adapter = await navigator.gpu?.requestAdapter()
+    const device = await adapter?.requestDevice()
+    if (!device) {
+      throw new Error("WebGPU is not supported in this browser.")
+    }
+    this.device = device
+
+    const context = this.canvas.getContext("webgpu")
+    if (!context) {
+      throw new Error("Failed to get WebGPU context.")
+    }
+    this.context = context
+
+    this.presentationFormat = navigator.gpu.getPreferredCanvasFormat()
+
+    this.context.configure({
+      device: this.device,
+      format: this.presentationFormat,
+      alphaMode: "premultiplied",
+    })
+
+    this.setupCamera()
+    this.setupLighting()
+    this.createPipelines()
+    this.setupResize()
+  }
+
+  // Step 2: Create shaders and render pipelines
+  private createPipelines() {
+    this.textureSampler = this.device.createSampler({
+      magFilter: "linear",
+      minFilter: "linear",
+      addressModeU: "repeat",
+      addressModeV: "repeat",
+    })
+
+    const shaderModule = this.device.createShaderModule({
+      label: "model shaders",
+      code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct Light {
+          direction: vec3f,
+          _padding1: f32,
+          color: vec3f,
+          intensity: f32,
+        };
+
+        struct LightUniforms {
+          ambient: f32,
+          lightCount: f32,
+          _padding1: f32,
+          _padding2: f32,
+          lights: array<Light, 4>,
+        };
+
+        struct MaterialUniforms {
+          alpha: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+        };
+
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) normal: vec3f,
+          @location(1) uv: vec2f,
+          @location(2) worldPos: vec3f,
+        };
+
+        @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 toonTexture: texture_2d<f32>;
+        @group(0) @binding(6) var toonSampler: sampler;
+        @group(0) @binding(7) var<uniform> material: MaterialUniforms;
+
+        @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>
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          let pos4 = vec4f(position, 1.0);
+          
+          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(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 r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          output.normal = normalize(skinnedNrm);
+          output.uv = uv;
+          output.worldPos = worldPos;
+          return output;
+        }
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let n = normalize(input.normal);
+          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
+
+          var lightAccum = vec3f(light.ambient);
+          let numLights = u32(light.lightCount);
+          for (var i = 0u; i < numLights; i++) {
+            let l = -light.lights[i].direction;
+            let nDotL = max(dot(n, l), 0.0);
+            let toonUV = vec2f(nDotL, 0.5);
+            let toonFactor = textureSample(toonTexture, toonSampler, toonUV).rgb;
+            let radiance = light.lights[i].color * light.lights[i].intensity;
+            lightAccum += toonFactor * radiance * nDotL;
+          }
+          
+          let color = albedo * lightAccum;
+          let finalAlpha = material.alpha;
+          if (finalAlpha < 0.001) {
+            discard;
+          }
+          
+          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), finalAlpha);
+        }
+      `,
+    })
+
+    // Create a separate shader for hair-over-eyes that outputs pre-multiplied color for darkening effect
+    const hairMultiplyShaderModule = this.device.createShaderModule({
+      label: "hair multiply shaders",
+      code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct Light {
+          direction: vec3f,
+          _padding1: f32,
+          color: vec3f,
+          intensity: f32,
+        };
+
+        struct LightUniforms {
+          ambient: f32,
+          lightCount: f32,
+          _padding1: f32,
+          _padding2: f32,
+          lights: array<Light, 4>,
+        };
+
+        struct MaterialUniforms {
+          alpha: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+        };
+
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) normal: vec3f,
+          @location(1) uv: vec2f,
+          @location(2) worldPos: vec3f,
+        };
+
+        @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 toonTexture: texture_2d<f32>;
+        @group(0) @binding(6) var toonSampler: sampler;
+        @group(0) @binding(7) var<uniform> material: MaterialUniforms;
+
+        @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>
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          let pos4 = vec4f(position, 1.0);
+          
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(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 r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          output.normal = normalize(skinnedNrm);
+          output.uv = uv;
+          output.worldPos = worldPos;
+          return output;
+        }
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let n = normalize(input.normal);
+          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
+
+          var lightAccum = vec3f(light.ambient);
+          let numLights = u32(light.lightCount);
+          for (var i = 0u; i < numLights; i++) {
+            let l = -light.lights[i].direction;
+            let nDotL = max(dot(n, l), 0.0);
+            let toonUV = vec2f(nDotL, 0.5);
+            let toonFactor = textureSample(toonTexture, toonSampler, toonUV).rgb;
+            let radiance = light.lights[i].color * light.lights[i].intensity;
+            lightAccum += toonFactor * radiance * nDotL;
+          }
+          
+          let color = albedo * lightAccum;
+          let finalAlpha = material.alpha;
+          if (finalAlpha < 0.001) {
+            discard;
+          }
+          
+          // For hair-over-eyes effect: simple half-transparent overlay
+          // Use 60% opacity to create a semi-transparent hair color overlay
+          let overlayAlpha = finalAlpha * 0.6;
+          
+          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), overlayAlpha);
+        }
+      `,
+    })
+
+    // Create explicit bind group layout for all pipelines using the main shader
+    // This ensures compatibility across all pipelines (main, eye, hair multiply, hair opaque)
+    this.hairBindGroupLayout = this.device.createBindGroupLayout({
+      label: "shared material 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, texture: {} }, // toonTexture
+        { binding: 6, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // toonSampler
+        { binding: 7, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
+      ],
+    })
+
+    const sharedPipelineLayout = this.device.createPipelineLayout({
+      label: "shared pipeline layout",
+      bindGroupLayouts: [this.hairBindGroupLayout],
+    })
+
+    // Single pipeline for all materials with alpha blending
+    this.pipeline = this.device.createRenderPipeline({
+      label: "model pipeline",
+      layout: sharedPipelineLayout,
+      vertex: {
+        module: shaderModule,
+        buffers: [
+          {
+            arrayStride: 8 * 4,
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      fragment: {
+        module: shaderModule,
+        targets: [
+          {
+            format: this.presentationFormat,
+            blend: {
+              color: {
+                srcFactor: "src-alpha",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+            },
+          },
+        ],
+      },
+      primitive: { cullMode: "none" },
+      depthStencil: {
+        format: "depth24plus-stencil8",
+        depthWriteEnabled: true,
+        depthCompare: "less",
+      },
+      multisample: {
+        count: this.sampleCount,
+      },
+    })
+
+    // Create bind group layout for outline pipelines
+    this.outlineBindGroupLayout = this.device.createBindGroupLayout({
+      label: "outline 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
+      ],
+    })
+
+    const outlinePipelineLayout = this.device.createPipelineLayout({
+      label: "outline pipeline layout",
+      bindGroupLayouts: [this.outlineBindGroupLayout],
+    })
+
+    const outlineShaderModule = this.device.createShaderModule({
+      label: "outline shaders",
+      code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct MaterialUniforms {
+          edgeColor: vec4f,
+          edgeSize: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+        };
+
+        @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>;
+
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+        };
+
+        @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>
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          let pos4 = vec4f(position, 1.0);
+          
+          // Normalize weights to ensure they sum to 1.0 (handles floating-point precision issues)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          var normalizedWeights: vec4f;
+          if (weightSum > 0.0001) {
+            normalizedWeights = weights0 / weightSum;
+          } else {
+            normalizedWeights = vec4f(1.0, 0.0, 0.0, 0.0);
+          }
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(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 r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          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);
+          return output;
+        }
+
+        @fragment fn fs() -> @location(0) vec4f {
+          return material.edgeColor;
+        }
+      `,
+    })
+
+    this.outlinePipeline = this.device.createRenderPipeline({
+      label: "outline pipeline",
+      layout: outlinePipelineLayout,
+      vertex: {
+        module: outlineShaderModule,
+        buffers: [
+          {
+            arrayStride: 8 * 4,
+            attributes: [
+              {
+                shaderLocation: 0,
+                offset: 0,
+                format: "float32x3" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 1,
+                offset: 3 * 4,
+                format: "float32x3" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 2,
+                offset: 6 * 4,
+                format: "float32x2" as GPUVertexFormat,
+              },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      fragment: {
+        module: outlineShaderModule,
+        targets: [
+          {
+            format: this.presentationFormat,
+            blend: {
+              color: {
+                srcFactor: "src-alpha",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+            },
+          },
+        ],
+      },
+      primitive: {
+        cullMode: "back",
+      },
+      depthStencil: {
+        format: "depth24plus-stencil8",
+        depthWriteEnabled: true,
+        depthCompare: "less",
+      },
+      multisample: {
+        count: this.sampleCount,
+      },
+    })
+
+    // Hair outline pipeline: draws hair outlines over non-eyes (stencil != 1)
+    // Drawn after hair geometry, so depth testing ensures outlines only appear where hair exists
+    this.hairOutlinePipeline = this.device.createRenderPipeline({
+      label: "hair outline pipeline",
+      layout: outlinePipelineLayout,
+      vertex: {
+        module: outlineShaderModule,
+        buffers: [
+          {
+            arrayStride: 8 * 4,
+            attributes: [
+              {
+                shaderLocation: 0,
+                offset: 0,
+                format: "float32x3" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 1,
+                offset: 3 * 4,
+                format: "float32x3" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 2,
+                offset: 6 * 4,
+                format: "float32x2" as GPUVertexFormat,
+              },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      fragment: {
+        module: outlineShaderModule,
+        targets: [
+          {
+            format: this.presentationFormat,
+            blend: {
+              color: {
+                srcFactor: "src-alpha",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+            },
+          },
+        ],
+      },
+      primitive: {
+        cullMode: "back",
+      },
+      depthStencil: {
+        format: "depth24plus-stencil8",
+        depthWriteEnabled: false, // Don't write depth - let hair geometry control depth
+        depthCompare: "less-equal", // Only draw where hair depth exists
+        stencilFront: {
+          compare: "not-equal", // Only render where stencil != 1 (not over eyes)
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "keep",
+        },
+        stencilBack: {
+          compare: "not-equal",
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "keep",
+        },
+      },
+      multisample: {
+        count: this.sampleCount,
+      },
+    })
+
+    // Hair outline pipeline for over eyes: draws where stencil == 1, but only where hair depth exists
+    // Uses depth compare "equal" with a small bias to only appear where hair geometry exists
+    this.hairOutlineOverEyesPipeline = this.device.createRenderPipeline({
+      label: "hair outline over eyes pipeline",
+      layout: outlinePipelineLayout,
+      vertex: {
+        module: outlineShaderModule,
+        buffers: [
+          {
+            arrayStride: 8 * 4,
+            attributes: [
+              {
+                shaderLocation: 0,
+                offset: 0,
+                format: "float32x3" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 1,
+                offset: 3 * 4,
+                format: "float32x3" as GPUVertexFormat,
+              },
+              {
+                shaderLocation: 2,
+                offset: 6 * 4,
+                format: "float32x2" as GPUVertexFormat,
+              },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      fragment: {
+        module: outlineShaderModule,
+        targets: [
+          {
+            format: this.presentationFormat,
+            blend: {
+              color: {
+                srcFactor: "src-alpha",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+            },
+          },
+        ],
+      },
+      primitive: {
+        cullMode: "back",
+      },
+      depthStencil: {
+        format: "depth24plus-stencil8",
+        depthWriteEnabled: false, // Don't write depth
+
+        depthCompare: "less-equal", // Draw where outline depth <= existing depth (hair depth)
+        depthBias: -0.0001, // Small negative bias to bring outline slightly closer for depth test
+        depthBiasSlopeScale: 0.0,
+        depthBiasClamp: 0.0,
+        stencilFront: {
+          compare: "equal", // Only render where stencil == 1 (over eyes)
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "keep",
+        },
+        stencilBack: {
+          compare: "equal",
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "keep",
+        },
+      },
+      multisample: {
+        count: this.sampleCount,
+      },
+    })
+
+    // Hair pipeline with multiplicative blending (for hair over eyes)
+    this.hairMultiplyPipeline = this.device.createRenderPipeline({
+      label: "hair multiply pipeline",
+      layout: sharedPipelineLayout,
+      vertex: {
+        module: hairMultiplyShaderModule,
+        buffers: [
+          {
+            arrayStride: 8 * 4,
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      fragment: {
+        module: hairMultiplyShaderModule,
+        targets: [
+          {
+            format: this.presentationFormat,
+            blend: {
+              color: {
+                // Simple half-transparent overlay effect
+                // Blend: hairColor * overlayAlpha + eyeColor * (1 - overlayAlpha)
+                srcFactor: "src-alpha",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+            },
+          },
+        ],
+      },
+      primitive: { cullMode: "none" },
+      depthStencil: {
+        format: "depth24plus-stencil8",
+        depthWriteEnabled: true, // Write depth so outlines can test against it
+        depthCompare: "less",
+        stencilFront: {
+          compare: "equal", // Only render where stencil == 1
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "keep",
+        },
+        stencilBack: {
+          compare: "equal",
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "keep",
+        },
+      },
+      multisample: { count: this.sampleCount },
+    })
+
+    // Hair pipeline for opaque rendering (hair over non-eyes)
+    this.hairOpaquePipeline = this.device.createRenderPipeline({
+      label: "hair opaque pipeline",
+      layout: sharedPipelineLayout,
+      vertex: {
+        module: shaderModule,
+        buffers: [
+          {
+            arrayStride: 8 * 4,
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      fragment: {
+        module: shaderModule,
+        targets: [
+          {
+            format: this.presentationFormat,
+            blend: {
+              color: {
+                srcFactor: "src-alpha",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+            },
+          },
+        ],
+      },
+      primitive: { cullMode: "none" },
+      depthStencil: {
+        format: "depth24plus-stencil8",
+        depthWriteEnabled: true,
+        depthCompare: "less",
+        stencilFront: {
+          compare: "not-equal", // Only render where stencil != 1
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "keep",
+        },
+        stencilBack: {
+          compare: "not-equal",
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "keep",
+        },
+      },
+      multisample: { count: this.sampleCount },
+    })
+
+    // Eye overlay pipeline (renders after opaque, writes stencil)
+    this.eyePipeline = this.device.createRenderPipeline({
+      label: "eye overlay pipeline",
+      layout: sharedPipelineLayout,
+      vertex: {
+        module: shaderModule,
+        buffers: [
+          {
+            arrayStride: 8 * 4,
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
+              { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
+            ],
+          },
+          {
+            arrayStride: 4 * 2,
+            attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" as GPUVertexFormat }],
+          },
+          {
+            arrayStride: 4,
+            attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" as GPUVertexFormat }],
+          },
+        ],
+      },
+      fragment: {
+        module: shaderModule,
+        targets: [
+          {
+            format: this.presentationFormat,
+            blend: {
+              color: {
+                srcFactor: "src-alpha",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+            },
+          },
+        ],
+      },
+      primitive: { cullMode: "none" },
+      depthStencil: {
+        format: "depth24plus-stencil8",
+        depthWriteEnabled: false, // Don't write depth
+        depthCompare: "less", // Respect existing depth
+        stencilFront: {
+          compare: "always",
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "replace", // Write stencil value 1
+        },
+        stencilBack: {
+          compare: "always",
+          failOp: "keep",
+          depthFailOp: "keep",
+          passOp: "replace",
+        },
+      },
+      multisample: { count: this.sampleCount },
+    })
+  }
+
+  // Create compute shader for skin matrix computation
+  private createSkinMatrixComputePipeline() {
+    const computeShader = this.device.createShaderModule({
+      label: "skin matrix compute",
+      code: /* wgsl */ `
+        struct BoneCountUniform {
+          count: u32,
+          _padding1: u32,
+          _padding2: u32,
+          _padding3: u32,
+          _padding4: vec4<u32>,
+        };
+        
+        @group(0) @binding(0) var<uniform> boneCount: BoneCountUniform;
+        @group(0) @binding(1) var<storage, read> worldMatrices: array<mat4x4f>;
+        @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
+        @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
+        
+        @compute @workgroup_size(64)
+        fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
+          let boneIndex = globalId.x;
+          // Bounds check: we dispatch workgroups (64 threads each), so some threads may be out of range
+          if (boneIndex >= boneCount.count) {
+            return;
+          }
+          let worldMat = worldMatrices[boneIndex];
+          let invBindMat = inverseBindMatrices[boneIndex];
+          skinMatrices[boneIndex] = worldMat * invBindMat;
+        }
+      `,
+    })
+
+    this.skinMatrixComputePipeline = this.device.createComputePipeline({
+      label: "skin matrix compute pipeline",
+      layout: "auto",
+      compute: {
+        module: computeShader,
+      },
+    })
+  }
+
+  // Step 3: Setup canvas resize handling
+  private setupResize() {
+    this.resizeObserver = new ResizeObserver(() => this.handleResize())
+    this.resizeObserver.observe(this.canvas)
+    this.handleResize()
+  }
+
+  private handleResize() {
+    const displayWidth = this.canvas.clientWidth
+    const displayHeight = this.canvas.clientHeight
+
+    const dpr = window.devicePixelRatio || 1
+    const width = Math.floor(displayWidth * dpr)
+    const height = Math.floor(displayHeight * dpr)
+
+    if (!this.multisampleTexture || this.canvas.width !== width || this.canvas.height !== height) {
+      this.canvas.width = width
+      this.canvas.height = height
+
+      this.multisampleTexture = this.device.createTexture({
+        label: "multisample render target",
+        size: [width, height],
+        sampleCount: this.sampleCount,
+        format: this.presentationFormat,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+      })
+
+      this.depthTexture = this.device.createTexture({
+        label: "depth texture",
+        size: [width, height],
+        sampleCount: this.sampleCount,
+        format: "depth24plus-stencil8",
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+      })
+
+      const depthTextureView = this.depthTexture.createView()
+
+      const colorAttachment: GPURenderPassColorAttachment =
+        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",
+            }
+
+      this.renderPassDescriptor = {
+        label: "renderPass",
+        colorAttachments: [colorAttachment],
+        depthStencilAttachment: {
+          view: depthTextureView,
+          depthClearValue: 1.0,
+          depthLoadOp: "clear",
+          depthStoreOp: "store",
+          stencilClearValue: 0, // New: clear stencil to 0
+          stencilLoadOp: "clear", // New: clear stencil each frame
+          stencilStoreOp: "store", // New: store stencil
+        },
+      }
+
+      this.camera.aspect = width / height
+    }
+  }
+
+  // Step 4: Create camera and uniform buffer
+  private setupCamera() {
+    this.cameraUniformBuffer = this.device.createBuffer({
+      label: "camera uniforms",
+      size: 40 * 4,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+
+    this.camera = new Camera(Math.PI, Math.PI / 2.5, 26.6, new Vec3(0, 12.5, 0))
+
+    this.camera.aspect = this.canvas.width / this.canvas.height
+    this.camera.attachControl(this.canvas)
+  }
+
+  // Step 5: Create lighting buffers
+  private setupLighting() {
+    this.lightUniformBuffer = this.device.createBuffer({
+      label: "light uniforms",
+      size: 64 * 4,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+
+    this.lightCount = 0
+
+    this.setAmbient(0.96)
+    this.addLight(new Vec3(-0.5, -0.8, 0.5).normalize(), new Vec3(1.0, 0.95, 0.9), 0.12)
+    this.addLight(new Vec3(0.7, -0.5, 0.3).normalize(), new Vec3(0.8, 0.85, 1.0), 0.1)
+    this.addLight(new Vec3(0.3, -0.5, -1.0).normalize(), new Vec3(0.9, 0.9, 1.0), 0.08)
+    this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData)
+  }
+
+  public addLight(direction: Vec3, color: Vec3, intensity: number = 1.0): boolean {
+    if (this.lightCount >= 4) return false
+
+    const normalized = direction.normalize()
+    const baseIndex = 4 + this.lightCount * 8
+    this.lightData[baseIndex] = normalized.x
+    this.lightData[baseIndex + 1] = normalized.y
+    this.lightData[baseIndex + 2] = normalized.z
+    this.lightData[baseIndex + 3] = 0
+    this.lightData[baseIndex + 4] = color.x
+    this.lightData[baseIndex + 5] = color.y
+    this.lightData[baseIndex + 6] = color.z
+    this.lightData[baseIndex + 7] = intensity
+
+    this.lightCount++
+    this.lightData[1] = this.lightCount
+    return true
+  }
+
+  public setAmbient(intensity: number) {
+    this.lightData[0] = intensity
+  }
+
+  public getStats(): EngineStats {
+    return { ...this.stats }
+  }
+
+  public runRenderLoop(callback?: () => void) {
+    this.renderLoopCallback = callback || null
+
+    const loop = () => {
+      this.render()
+
+      if (this.renderLoopCallback) {
+        this.renderLoopCallback()
+      }
+
+      this.animationFrameId = requestAnimationFrame(loop)
+    }
+
+    this.animationFrameId = requestAnimationFrame(loop)
+  }
+
+  public stopRenderLoop() {
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId)
+      this.animationFrameId = null
+    }
+    this.renderLoopCallback = null
+  }
+
+  public dispose() {
+    this.stopRenderLoop()
+    if (this.camera) this.camera.detachControl()
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+  }
+
+  // Step 6: Load PMX model file
+  public async loadModel(path: string) {
+    const pathParts = path.split("/")
+    pathParts.pop()
+    const dir = pathParts.join("/") + "/"
+    this.modelDir = dir
+
+    const model = await PmxLoader.load(path)
+    this.physics = new Physics(model.getRigidbodies(), model.getJoints())
+    await this.setupModelBuffers(model)
+  }
+
+  public rotateBones(bones: string[], rotations: Quat[], durationMs?: number) {
+    this.currentModel?.rotateBones(bones, rotations, durationMs)
+  }
+
+  // Step 7: Create vertex, index, and joint buffers
+  private async setupModelBuffers(model: Model) {
+    this.currentModel = model
+    const vertices = model.getVertices()
+    const skinning = model.getSkinning()
+    const skeleton = model.getSkeleton()
+
+    this.vertexBuffer = this.device.createBuffer({
+      label: "model vertex buffer",
+      size: vertices.byteLength,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    })
+    this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices)
+    this.vertexCount = model.getVertexCount()
+
+    this.jointsBuffer = this.device.createBuffer({
+      label: "joints buffer",
+      size: skinning.joints.byteLength,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    })
+    this.device.queue.writeBuffer(
+      this.jointsBuffer,
+      0,
+      skinning.joints.buffer,
+      skinning.joints.byteOffset,
+      skinning.joints.byteLength
+    )
+
+    this.weightsBuffer = this.device.createBuffer({
+      label: "weights buffer",
+      size: skinning.weights.byteLength,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    })
+    this.device.queue.writeBuffer(
+      this.weightsBuffer,
+      0,
+      skinning.weights.buffer,
+      skinning.weights.byteOffset,
+      skinning.weights.byteLength
+    )
+
+    const boneCount = skeleton.bones.length
+    const matrixSize = boneCount * 16 * 4
+
+    this.skinMatrixBuffer = this.device.createBuffer({
+      label: "skin matrices",
+      size: Math.max(256, matrixSize),
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX,
+    })
+
+    this.worldMatrixBuffer = this.device.createBuffer({
+      label: "world matrices",
+      size: Math.max(256, matrixSize),
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    })
+
+    this.inverseBindMatrixBuffer = this.device.createBuffer({
+      label: "inverse bind matrices",
+      size: Math.max(256, matrixSize),
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    })
+
+    const invBindMatrices = skeleton.inverseBindMatrices
+    this.device.queue.writeBuffer(
+      this.inverseBindMatrixBuffer,
+      0,
+      invBindMatrices.buffer,
+      invBindMatrices.byteOffset,
+      invBindMatrices.byteLength
+    )
+
+    this.boneCountBuffer = this.device.createBuffer({
+      label: "bone count uniform",
+      size: 32, // Minimum uniform buffer size is 32 bytes
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+    const boneCountData = new Uint32Array(8) // 32 bytes total
+    boneCountData[0] = boneCount
+    this.device.queue.writeBuffer(this.boneCountBuffer, 0, boneCountData)
+
+    this.createSkinMatrixComputePipeline()
+
+    const indices = model.getIndices()
+    if (indices) {
+      this.indexBuffer = this.device.createBuffer({
+        label: "model index buffer",
+        size: indices.byteLength,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+      })
+      this.device.queue.writeBuffer(this.indexBuffer, 0, indices)
+    } else {
+      throw new Error("Model has no index buffer")
+    }
+
+    await this.setupMaterials(model)
+  }
+
+  private opaqueNonEyeNonHairDraws: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
+  private eyeDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
+  private hairDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
+  private transparentNonEyeNonHairDraws: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
+  private opaqueNonEyeNonHairOutlineDraws: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
+  private eyeOutlineDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
+  private hairOutlineDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] =
+    []
+  private transparentNonEyeNonHairOutlineDraws: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
+
+  // Step 8: Load textures and create material bind groups
+  private async setupMaterials(model: Model) {
+    const materials = model.getMaterials()
+    if (materials.length === 0) {
+      throw new Error("Model has no materials")
+    }
+
+    const textures = model.getTextures()
+
+    const loadTextureByIndex = async (texIndex: number): Promise<GPUTexture | null> => {
+      if (texIndex < 0 || texIndex >= textures.length) {
+        return null
+      }
+
+      const path = this.modelDir + textures[texIndex].path
+      const texture = await this.createTextureFromPath(path)
+      return texture
+    }
+
+    const loadToonTexture = async (toonTextureIndex: number): Promise<GPUTexture> => {
+      const texture = await loadTextureByIndex(toonTextureIndex)
+      if (texture) return texture
+
+      // Default toon texture fallback - cache it
+      const defaultToonPath = "__default_toon__"
+      const cached = this.textureCache.get(defaultToonPath)
+      if (cached) return cached
+
+      const defaultToonData = new Uint8Array(256 * 2 * 4)
+      for (let i = 0; i < 256; i++) {
+        const factor = i / 255.0
+        const gray = Math.floor(128 + factor * 127)
+        defaultToonData[i * 4] = gray
+        defaultToonData[i * 4 + 1] = gray
+        defaultToonData[i * 4 + 2] = gray
+        defaultToonData[i * 4 + 3] = 255
+        defaultToonData[(256 + i) * 4] = gray
+        defaultToonData[(256 + i) * 4 + 1] = gray
+        defaultToonData[(256 + i) * 4 + 2] = gray
+        defaultToonData[(256 + i) * 4 + 3] = 255
+      }
+      const defaultToonTexture = this.device.createTexture({
+        label: "default toon texture",
+        size: [256, 2],
+        format: "rgba8unorm",
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+      })
+      this.device.queue.writeTexture(
+        { texture: defaultToonTexture },
+        defaultToonData,
+        { bytesPerRow: 256 * 4 },
+        [256, 2]
+      )
+      this.textureCache.set(defaultToonPath, defaultToonTexture)
+      this.textureSizes.set(defaultToonPath, { width: 256, height: 2 })
+      return defaultToonTexture
+    }
+
+    this.opaqueNonEyeNonHairDraws = []
+    this.eyeDraws = []
+    this.hairDraws = []
+    this.transparentNonEyeNonHairDraws = []
+    this.opaqueNonEyeNonHairOutlineDraws = []
+    this.eyeOutlineDraws = []
+    this.hairOutlineDraws = []
+    this.transparentNonEyeNonHairOutlineDraws = []
+    let runningFirstIndex = 0
+
+    for (const mat of materials) {
+      const matCount = mat.vertexCount | 0
+      if (matCount === 0) continue
+
+      const diffuseTexture = await loadTextureByIndex(mat.diffuseTextureIndex)
+      if (!diffuseTexture) throw new Error(`Material "${mat.name}" has no diffuse texture`)
+
+      const toonTexture = await loadToonTexture(mat.toonTextureIndex)
+
+      const materialAlpha = mat.diffuse[3]
+      const EPSILON = 0.001
+      const isTransparent = materialAlpha < 1.0 - EPSILON
+
+      const materialUniformData = new Float32Array(4)
+      materialUniformData[0] = materialAlpha
+      materialUniformData[1] = 0.0
+      materialUniformData[2] = 0.0
+      materialUniformData[3] = 0.0
+
+      const materialUniformBuffer = this.device.createBuffer({
+        label: `material uniform: ${mat.name}`,
+        size: materialUniformData.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      })
+      this.device.queue.writeBuffer(materialUniformBuffer, 0, materialUniformData)
+
+      // Create bind groups using the shared bind group layout
+      // All pipelines (main, eye, hair multiply, hair opaque) use the same shader and layout
+      const bindGroup = this.device.createBindGroup({
+        label: `material bind group: ${mat.name}`,
+        layout: this.hairBindGroupLayout,
+        entries: [
+          { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+          { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+          { binding: 2, resource: diffuseTexture.createView() },
+          { binding: 3, resource: this.textureSampler },
+          { binding: 4, resource: { buffer: this.skinMatrixBuffer! } },
+          { binding: 5, resource: toonTexture.createView() },
+          { binding: 6, resource: this.textureSampler },
+          { binding: 7, resource: { buffer: materialUniformBuffer } },
+        ],
+      })
+
+      // Classify materials into appropriate draw lists
+      if (mat.isEye) {
+        this.eyeDraws.push({
+          count: matCount,
+          firstIndex: runningFirstIndex,
+          bindGroup,
+          isTransparent,
+        })
+      } else if (mat.isHair) {
+        this.hairDraws.push({
+          count: matCount,
+          firstIndex: runningFirstIndex,
+          bindGroup,
+          isTransparent,
+        })
+      } else if (isTransparent) {
+        this.transparentNonEyeNonHairDraws.push({
+          count: matCount,
+          firstIndex: runningFirstIndex,
+          bindGroup,
+          isTransparent,
+        })
+      } else {
+        this.opaqueNonEyeNonHairDraws.push({
+          count: matCount,
+          firstIndex: runningFirstIndex,
+          bindGroup,
+          isTransparent,
+        })
+      }
+
+      // Outline for all materials (including transparent)
+      // Edge flag is at bit 4 (0x10) in PMX format, not bit 0 (0x01)
+      if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
+        const materialUniformData = new Float32Array(8)
+        materialUniformData[0] = mat.edgeColor[0]
+        materialUniformData[1] = mat.edgeColor[1]
+        materialUniformData[2] = mat.edgeColor[2]
+        materialUniformData[3] = mat.edgeColor[3]
+        materialUniformData[4] = mat.edgeSize
+
+        const materialUniformBuffer = this.device.createBuffer({
+          label: `outline material uniform: ${mat.name}`,
+          size: materialUniformData.byteLength,
+          usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        })
+        this.device.queue.writeBuffer(materialUniformBuffer, 0, materialUniformData)
+
+        const outlineBindGroup = this.device.createBindGroup({
+          label: `outline bind group: ${mat.name}`,
+          layout: this.outlineBindGroupLayout,
+          entries: [
+            { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+            { binding: 1, resource: { buffer: materialUniformBuffer } },
+            { binding: 2, resource: { buffer: this.skinMatrixBuffer! } },
+          ],
+        })
+
+        // Classify outlines into appropriate draw lists
+        if (mat.isEye) {
+          this.eyeOutlineDraws.push({
+            count: matCount,
+            firstIndex: runningFirstIndex,
+            bindGroup: outlineBindGroup,
+            isTransparent,
+          })
+        } else if (mat.isHair) {
+          this.hairOutlineDraws.push({
+            count: matCount,
+            firstIndex: runningFirstIndex,
+            bindGroup: outlineBindGroup,
+            isTransparent,
+          })
+        } else if (isTransparent) {
+          this.transparentNonEyeNonHairOutlineDraws.push({
+            count: matCount,
+            firstIndex: runningFirstIndex,
+            bindGroup: outlineBindGroup,
+            isTransparent,
+          })
+        } else {
+          this.opaqueNonEyeNonHairOutlineDraws.push({
+            count: matCount,
+            firstIndex: runningFirstIndex,
+            bindGroup: outlineBindGroup,
+            isTransparent,
+          })
+        }
+      }
+
+      runningFirstIndex += matCount
+    }
+  }
+
+  // Helper: Load texture from file path with optional max size limit
+  private async createTextureFromPath(path: string, maxSize: number = 2048): Promise<GPUTexture | null> {
+    const cached = this.textureCache.get(path)
+    if (cached) {
+      return cached
+    }
+
+    try {
+      const response = await fetch(path)
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+      let imageBitmap = await createImageBitmap(await response.blob(), {
+        premultiplyAlpha: "none",
+        colorSpaceConversion: "none",
+      })
+
+      // Downscale if texture is too large
+      let finalWidth = imageBitmap.width
+      let finalHeight = imageBitmap.height
+      if (finalWidth > maxSize || finalHeight > maxSize) {
+        const scale = Math.min(maxSize / finalWidth, maxSize / finalHeight)
+        finalWidth = Math.floor(finalWidth * scale)
+        finalHeight = Math.floor(finalHeight * scale)
+
+        // Create canvas to downscale
+        const canvas = new OffscreenCanvas(finalWidth, finalHeight)
+        const ctx = canvas.getContext("2d")
+        if (ctx) {
+          ctx.drawImage(imageBitmap, 0, 0, finalWidth, finalHeight)
+          imageBitmap = await createImageBitmap(canvas)
+        }
+      }
+
+      const texture = this.device.createTexture({
+        label: `texture: ${path}`,
+        size: [finalWidth, finalHeight],
+        format: "rgba8unorm",
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      })
+      this.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [finalWidth, finalHeight])
+
+      this.textureCache.set(path, texture)
+      this.textureSizes.set(path, { width: finalWidth, height: finalHeight })
+      return texture
+    } catch {
+      return null
+    }
+  }
+
+  // Step 9: Render one frame
+  public render() {
+    if (this.multisampleTexture && this.camera && this.device && this.currentModel) {
+      const currentTime = performance.now()
+      const deltaTime = this.lastFrameTime > 0 ? (currentTime - this.lastFrameTime) / 1000 : 0.016
+      this.lastFrameTime = currentTime
+
+      this.updateCameraUniforms()
+      this.updateRenderTarget()
+
+      this.updateModelPose(deltaTime)
+
+      const encoder = this.device.createCommandEncoder()
+      const pass = encoder.beginRenderPass(this.renderPassDescriptor)
+
+      pass.setVertexBuffer(0, this.vertexBuffer)
+      pass.setVertexBuffer(1, this.jointsBuffer)
+      pass.setVertexBuffer(2, this.weightsBuffer)
+      pass.setIndexBuffer(this.indexBuffer!, "uint32")
+
+      this.drawCallCount = 0
+
+      // === PASS 1: Opaque non-eye, non-hair (face, body, etc) ===
+      this.drawOutlines(pass, false) // Opaque outlines
+      pass.setPipeline(this.pipeline)
+      for (const draw of this.opaqueNonEyeNonHairDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          this.drawCallCount++
+        }
+      }
+
+      // === PASS 2: Eyes (writes stencil = 1) ===
+      pass.setPipeline(this.eyePipeline)
+      pass.setStencilReference(1) // Set stencil reference value to 1
+      for (const draw of this.eyeDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          this.drawCallCount++
+        }
+      }
+
+      // === PASS 3a: Hair over eyes (stencil == 1, multiply blend) ===
+      // Draw hair geometry first to establish depth
+      pass.setPipeline(this.hairMultiplyPipeline)
+      pass.setStencilReference(1) // Check against stencil value 1
+      for (const draw of this.hairDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          this.drawCallCount++
+        }
+      }
+
+      // === PASS 3a.5: Hair outlines over eyes (stencil == 1, depth test to only draw near hair) ===
+      // Use depth compare "less-equal" with the hair depth to only draw outline where hair exists
+      // The outline is expanded outward, so we need to ensure it only appears near the hair edge
+      pass.setPipeline(this.hairOutlineOverEyesPipeline)
+      pass.setStencilReference(1) // Check against stencil value 1 (with equal test)
+      for (const draw of this.hairOutlineDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+        }
+      }
+
+      // === PASS 3b: Hair over non-eyes (stencil != 1, opaque) ===
+      pass.setPipeline(this.hairOpaquePipeline)
+      pass.setStencilReference(1) // Check against stencil value 1 (with not-equal test)
+      for (const draw of this.hairDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          this.drawCallCount++
+        }
+      }
+
+      // === PASS 3b.5: Hair outlines over non-eyes (stencil != 1) ===
+      // Draw hair outlines after hair geometry, so they only appear where hair exists
+      pass.setPipeline(this.hairOutlinePipeline)
+      pass.setStencilReference(1) // Check against stencil value 1 (with not-equal test)
+      for (const draw of this.hairOutlineDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+        }
+      }
+
+      // === PASS 4: Transparent non-eye, non-hair ===
+      pass.setPipeline(this.pipeline)
+      for (const draw of this.transparentNonEyeNonHairDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          this.drawCallCount++
+        }
+      }
+
+      this.drawOutlines(pass, true) // Transparent outlines
+
+      pass.end()
+      this.device.queue.submit([encoder.finish()])
+      this.updateStats(performance.now() - currentTime)
+    }
+  }
+
+  // Update camera uniform buffer each frame
+  private updateCameraUniforms() {
+    const viewMatrix = this.camera.getViewMatrix()
+    const projectionMatrix = this.camera.getProjectionMatrix()
+    const cameraPos = this.camera.getPosition()
+    this.cameraMatrixData.set(viewMatrix.values, 0)
+    this.cameraMatrixData.set(projectionMatrix.values, 16)
+    this.cameraMatrixData[32] = cameraPos.x
+    this.cameraMatrixData[33] = cameraPos.y
+    this.cameraMatrixData[34] = cameraPos.z
+    this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData)
+  }
+
+  // Update render target texture view
+  private updateRenderTarget() {
+    const colorAttachment = (this.renderPassDescriptor.colorAttachments as GPURenderPassColorAttachment[])[0]
+    if (this.sampleCount > 1) {
+      colorAttachment.resolveTarget = this.context.getCurrentTexture().createView()
+    } else {
+      colorAttachment.view = this.context.getCurrentTexture().createView()
+    }
+  }
+
+  // Update model pose and physics
+  private updateModelPose(deltaTime: number) {
+    this.currentModel!.evaluatePose()
+
+    // Upload world matrices to GPU
+    const worldMats = this.currentModel!.getBoneWorldMatrices()
+    this.device.queue.writeBuffer(
+      this.worldMatrixBuffer!,
+      0,
+      worldMats.buffer,
+      worldMats.byteOffset,
+      worldMats.byteLength
+    )
+
+    if (this.physics) {
+      this.physics.step(deltaTime, worldMats, this.currentModel!.getBoneInverseBindMatrices())
+      // Re-upload world matrices after physics (physics may have updated bones)
+      this.device.queue.writeBuffer(
+        this.worldMatrixBuffer!,
+        0,
+        worldMats.buffer,
+        worldMats.byteOffset,
+        worldMats.byteLength
+      )
+    }
+
+    // Compute skin matrices on GPU
+    this.computeSkinMatrices()
+  }
+
+  // Compute skin matrices on GPU
+  private computeSkinMatrices() {
+    const boneCount = this.currentModel!.getSkeleton().bones.length
+    const workgroupSize = 64
+    // Dispatch exactly enough threads for all bones (no bounds check needed)
+    const workgroupCount = Math.ceil(boneCount / workgroupSize)
+
+    // Update bone count uniform
+    const boneCountData = new Uint32Array(8) // 32 bytes total
+    boneCountData[0] = boneCount
+    this.device.queue.writeBuffer(this.boneCountBuffer!, 0, boneCountData)
+
+    const bindGroup = this.device.createBindGroup({
+      label: "skin matrix compute bind group",
+      layout: this.skinMatrixComputePipeline!.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: this.boneCountBuffer! } },
+        { binding: 1, resource: { buffer: this.worldMatrixBuffer! } },
+        { binding: 2, resource: { buffer: this.inverseBindMatrixBuffer! } },
+        { binding: 3, resource: { buffer: this.skinMatrixBuffer! } },
+      ],
+    })
+
+    const encoder = this.device.createCommandEncoder()
+    const pass = encoder.beginComputePass()
+    pass.setPipeline(this.skinMatrixComputePipeline!)
+    pass.setBindGroup(0, bindGroup)
+    pass.dispatchWorkgroups(workgroupCount)
+    pass.end()
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  // Draw outlines (opaque or transparent)
+  private drawOutlines(pass: GPURenderPassEncoder, transparent: boolean) {
+    pass.setPipeline(this.outlinePipeline)
+    if (transparent) {
+      // Draw transparent outlines (if any)
+      for (const draw of this.transparentNonEyeNonHairOutlineDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+        }
+      }
+    } else {
+      // Draw opaque outlines before main geometry
+      for (const draw of this.opaqueNonEyeNonHairOutlineDraws) {
+        if (draw.count > 0) {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+        }
+      }
+    }
+  }
+
+  private updateStats(frameTime: number) {
+    const maxSamples = 60
+    this.frameTimeSamples.push(frameTime)
+    this.frameTimeSum += frameTime
+    if (this.frameTimeSamples.length > maxSamples) {
+      const removed = this.frameTimeSamples.shift()!
+      this.frameTimeSum -= removed
+    }
+    const avgFrameTime = this.frameTimeSum / this.frameTimeSamples.length
+    this.stats.frameTime = Math.round(avgFrameTime * 100) / 100
+
+    const now = performance.now()
+    this.framesSinceLastUpdate++
+    const elapsed = now - this.lastFpsUpdate
+
+    if (elapsed >= 1000) {
+      this.stats.fps = Math.round((this.framesSinceLastUpdate / elapsed) * 1000)
+      this.framesSinceLastUpdate = 0
+      this.lastFpsUpdate = now
+    }
+
+    // Calculate GPU memory: textures + buffers + render targets
+    let textureMemoryBytes = 0
+    for (const [path, size] of this.textureSizes.entries()) {
+      if (this.textureCache.has(path)) {
+        textureMemoryBytes += size.width * size.height * 4 // RGBA8 = 4 bytes per pixel
+      }
+    }
+
+    let bufferMemoryBytes = 0
+    if (this.vertexBuffer) {
+      const vertices = this.currentModel?.getVertices()
+      if (vertices) bufferMemoryBytes += vertices.byteLength
+    }
+    if (this.indexBuffer) {
+      const indices = this.currentModel?.getIndices()
+      if (indices) bufferMemoryBytes += indices.byteLength
+    }
+    if (this.jointsBuffer) {
+      const skinning = this.currentModel?.getSkinning()
+      if (skinning) bufferMemoryBytes += skinning.joints.byteLength
+    }
+    if (this.weightsBuffer) {
+      const skinning = this.currentModel?.getSkinning()
+      if (skinning) bufferMemoryBytes += skinning.weights.byteLength
+    }
+    if (this.skinMatrixBuffer) {
+      const skeleton = this.currentModel?.getSkeleton()
+      if (skeleton) bufferMemoryBytes += Math.max(256, skeleton.bones.length * 16 * 4)
+    }
+    bufferMemoryBytes += 40 * 4 // cameraUniformBuffer
+    bufferMemoryBytes += 64 * 4 // lightUniformBuffer
+    const totalMaterialDraws =
+      this.opaqueNonEyeNonHairDraws.length +
+      this.eyeDraws.length +
+      this.hairDraws.length +
+      this.transparentNonEyeNonHairDraws.length
+    bufferMemoryBytes += totalMaterialDraws * 4 // Material uniform buffers
+
+    let renderTargetMemoryBytes = 0
+    if (this.multisampleTexture) {
+      const width = this.canvas.width
+      const height = this.canvas.height
+      renderTargetMemoryBytes += width * height * 4 * this.sampleCount // multisample color
+      renderTargetMemoryBytes += width * height * 4 // depth
+    }
+
+    const totalGPUMemoryBytes = textureMemoryBytes + bufferMemoryBytes + renderTargetMemoryBytes
+    this.stats.gpuMemory = Math.round((totalGPUMemoryBytes / 1024 / 1024) * 100) / 100
+  }
+}