reze-engine 0.3.5 → 0.3.7

package/src/engine.ts

@@ -2,8 +2,6 @@ import { Camera } from "./camera"
 import { Quat, Vec3 } from "./math"
 import { Model } from "./model"
 import { PmxLoader } from "./pmx-loader"
-import { Physics } from "./physics"
-import { AnimationPose, Player } from "./player"
 
 export type EngineOptions = {
   ambientColor?: Vec3
@@ -18,7 +16,19 @@ export interface EngineStats {
   frameTime: number // ms
 }
 
+type DrawCallType =
+  | "opaque"
+  | "eye"
+  | "hair-over-eyes"
+  | "hair-over-non-eyes"
+  | "transparent"
+  | "opaque-outline"
+  | "eye-outline"
+  | "hair-outline"
+  | "transparent-outline"
+
 interface DrawCall {
+  type: DrawCallType
   count: number
   firstIndex: number
   bindGroup: GPUBindGroup
@@ -54,17 +64,12 @@ export class Engine {
   private jointsBuffer!: GPUBuffer
   private weightsBuffer!: GPUBuffer
   private skinMatrixBuffer?: GPUBuffer
-  private worldMatrixBuffer?: GPUBuffer
   private inverseBindMatrixBuffer?: GPUBuffer
-  private skinMatrixComputePipeline?: GPUComputePipeline
-  private skinMatrixComputeBindGroup?: GPUBindGroup
-  private boneCountBuffer?: GPUBuffer
   private multisampleTexture!: GPUTexture
   private readonly sampleCount = 4
   private renderPassDescriptor!: GPURenderPassDescriptor
   // Constants
   private readonly STENCIL_EYE_VALUE = 1
-  private readonly COMPUTE_WORKGROUP_SIZE = 64
   private readonly BLOOM_DOWNSCALE_FACTOR = 2
 
   // Default values
@@ -106,20 +111,11 @@ export class Engine {
 
   private currentModel: Model | null = null
   private modelDir: string = ""
-  private physics: Physics | null = null
   private materialSampler!: GPUSampler
   private textureCache = new Map<string, GPUTexture>()
   private vertexBufferNeedsUpdate = false
-  // Draw lists
-  private opaqueDraws: DrawCall[] = []
-  private eyeDraws: DrawCall[] = []
-  private hairDrawsOverEyes: DrawCall[] = []
-  private hairDrawsOverNonEyes: DrawCall[] = []
-  private transparentDraws: DrawCall[] = []
-  private opaqueOutlineDraws: DrawCall[] = []
-  private eyeOutlineDraws: DrawCall[] = []
-  private hairOutlineDraws: DrawCall[] = []
-  private transparentOutlineDraws: DrawCall[] = []
+  // Unified draw call list
+  private drawCalls: DrawCall[] = []
 
   private lastFpsUpdate = performance.now()
   private framesSinceLastUpdate = 0
@@ -133,10 +129,6 @@ export class Engine {
   private animationFrameId: number | null = null
   private renderLoopCallback: (() => void) | null = null
 
-  private player: Player = new Player()
-  private hasAnimation = false // Set to true when loadAnimation is called
-  private animationStartTime: number = 0 // Track when animation first started (for A-pose prevention)
-
   constructor(canvas: HTMLCanvasElement, options?: EngineOptions) {
     this.canvas = canvas
     if (options) {
@@ -178,6 +170,37 @@ export class Engine {
     this.setupResize()
   }
 
+  private createRenderPipeline(config: {
+    label: string
+    layout: GPUPipelineLayout
+    shaderModule: GPUShaderModule
+    vertexBuffers: GPUVertexBufferLayout[]
+    fragmentTarget?: GPUColorTargetState
+    fragmentEntryPoint?: string
+    cullMode?: GPUCullMode
+    depthStencil?: GPUDepthStencilState
+    multisample?: GPUMultisampleState
+  }): GPURenderPipeline {
+    return this.device.createRenderPipeline({
+      label: config.label,
+      layout: config.layout,
+      vertex: {
+        module: config.shaderModule,
+        buffers: config.vertexBuffers,
+      },
+      fragment: config.fragmentTarget
+        ? {
+            module: config.shaderModule,
+            entryPoint: config.fragmentEntryPoint,
+            targets: [config.fragmentTarget],
+          }
+        : undefined,
+      primitive: { cullMode: config.cullMode ?? "none" },
+      depthStencil: config.depthStencil,
+      multisample: config.multisample ?? { count: this.sampleCount },
+    })
+  }
+
   private createPipelines() {
     this.materialSampler = this.device.createSampler({
       magFilter: "linear",
@@ -186,6 +209,78 @@ export class Engine {
       addressModeV: "repeat",
     })
 
+    // Shared vertex buffer layouts
+    const fullVertexBuffers: GPUVertexBufferLayout[] = [
+      {
+        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 }],
+      },
+    ]
+
+    const outlineVertexBuffers: GPUVertexBufferLayout[] = [
+      {
+        arrayStride: 8 * 4,
+        attributes: [
+          { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
+          { shaderLocation: 1, offset: 3 * 4, format: "float32x3" 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 }],
+      },
+    ]
+
+    const depthOnlyVertexBuffers: GPUVertexBufferLayout[] = [
+      {
+        arrayStride: 8 * 4,
+        attributes: [
+          { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
+          { shaderLocation: 1, offset: 3 * 4, format: "float32x3" 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 }],
+      },
+    ]
+
+    const standardBlend: GPUColorTargetState = {
+      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",
+        },
+      },
+    }
+
     const shaderModule = this.device.createShaderModule({
       label: "model shaders",
       code: /* wgsl */ `
@@ -302,59 +397,18 @@ export class Engine {
       bindGroupLayouts: [this.mainBindGroupLayout],
     })
 
-    this.modelPipeline = this.device.createRenderPipeline({
+    this.modelPipeline = this.createRenderPipeline({
       label: "model pipeline",
       layout: mainPipelineLayout,
-      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" },
+      shaderModule,
+      vertexBuffers: fullVertexBuffers,
+      fragmentTarget: standardBlend,
+      cullMode: "none",
       depthStencil: {
         format: "depth24plus-stencil8",
         depthWriteEnabled: true,
         depthCompare: "less-equal",
       },
-      multisample: {
-        count: this.sampleCount,
-      },
     })
 
     // Create bind group layout for outline pipelines
@@ -444,196 +498,58 @@ export class Engine {
       `,
     })
 
-    this.outlinePipeline = this.device.createRenderPipeline({
+    this.outlinePipeline = this.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,
-              },
-            ],
-          },
-          {
-            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",
-      },
+      shaderModule: outlineShaderModule,
+      vertexBuffers: outlineVertexBuffers,
+      fragmentTarget: standardBlend,
+      cullMode: "back",
       depthStencil: {
         format: "depth24plus-stencil8",
         depthWriteEnabled: true,
         depthCompare: "less-equal",
       },
-      multisample: {
-        count: this.sampleCount,
-      },
     })
 
     // Hair outline pipeline
-    this.hairOutlinePipeline = this.device.createRenderPipeline({
+    this.hairOutlinePipeline = this.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,
-              },
-            ],
-          },
-          {
-            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",
-      },
+      shaderModule: outlineShaderModule,
+      vertexBuffers: outlineVertexBuffers,
+      fragmentTarget: standardBlend,
+      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 (no stencil test needed)
-        depthBias: -0.0001, // Small negative bias to bring outline slightly closer for depth test
+        depthWriteEnabled: false,
+        depthCompare: "less-equal",
+        depthBias: -0.0001,
         depthBiasSlopeScale: 0.0,
         depthBiasClamp: 0.0,
       },
-      multisample: {
-        count: this.sampleCount,
-      },
     })
 
     // Eye overlay pipeline (renders after opaque, writes stencil)
-    this.eyePipeline = this.device.createRenderPipeline({
+    this.eyePipeline = this.createRenderPipeline({
       label: "eye overlay pipeline",
       layout: mainPipelineLayout,
-      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: "front" },
+      shaderModule,
+      vertexBuffers: fullVertexBuffers,
+      fragmentTarget: standardBlend,
+      cullMode: "front",
       depthStencil: {
         format: "depth24plus-stencil8",
-        depthWriteEnabled: true, // Write depth to occlude back of head
-        depthCompare: "less-equal", // More lenient to reduce precision conflicts
-        depthBias: -0.00005, // Reduced bias to minimize conflicts while still occluding back face
+        depthWriteEnabled: true,
+        depthCompare: "less-equal",
+        depthBias: -0.00005,
         depthBiasSlopeScale: 0.0,
         depthBiasClamp: 0.0,
         stencilFront: {
           compare: "always",
           failOp: "keep",
           depthFailOp: "keep",
-          passOp: "replace", // Write stencil value 1
+          passOp: "replace",
         },
         stencilBack: {
           compare: "always",
@@ -642,7 +558,6 @@ export class Engine {
           passOp: "replace",
         },
       },
-      multisample: { count: this.sampleCount },
     })
 
     // Depth-only shader for hair pre-pass (reduces overdraw by early depth rejection)
@@ -691,104 +606,42 @@ export class Engine {
     })
 
     // Hair depth pre-pass pipeline: depth-only with color writes disabled to eliminate overdraw
-    this.hairDepthPipeline = this.device.createRenderPipeline({
+    this.hairDepthPipeline = this.createRenderPipeline({
       label: "hair depth pre-pass",
       layout: mainPipelineLayout,
-      vertex: {
-        module: depthOnlyShaderModule,
-        buffers: [
-          {
-            arrayStride: 8 * 4,
-            attributes: [
-              { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
-              { shaderLocation: 1, offset: 3 * 4, format: "float32x3" 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: depthOnlyShaderModule,
-        entryPoint: "fs",
-        targets: [
-          {
-            format: this.presentationFormat,
-            writeMask: 0, // Disable all color writes - we only care about depth
-          },
-        ],
+      shaderModule: depthOnlyShaderModule,
+      vertexBuffers: depthOnlyVertexBuffers,
+      fragmentTarget: {
+        format: this.presentationFormat,
+        writeMask: 0,
       },
-      primitive: { cullMode: "front" },
+      fragmentEntryPoint: "fs",
+      cullMode: "front",
       depthStencil: {
         format: "depth24plus-stencil8",
         depthWriteEnabled: true,
-        depthCompare: "less-equal", // Match the color pass compare mode for consistency
+        depthCompare: "less-equal",
         depthBias: 0.0,
         depthBiasSlopeScale: 0.0,
         depthBiasClamp: 0.0,
       },
-      multisample: { count: this.sampleCount },
     })
 
     // Hair pipelines for rendering over eyes vs non-eyes (only differ in stencil compare mode)
     const createHairPipeline = (isOverEyes: boolean): GPURenderPipeline => {
-      return this.device.createRenderPipeline({
+      return this.createRenderPipeline({
         label: `hair pipeline (${isOverEyes ? "over eyes" : "over non-eyes"})`,
         layout: mainPipelineLayout,
-        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: "front" },
+        shaderModule,
+        vertexBuffers: fullVertexBuffers,
+        fragmentTarget: standardBlend,
+        cullMode: "front",
         depthStencil: {
           format: "depth24plus-stencil8",
-          depthWriteEnabled: false, // Don't write depth (already written in pre-pass)
-          depthCompare: "less-equal", // More lenient than "equal" to avoid precision issues with MSAA
+          depthWriteEnabled: false,
+          depthCompare: "less-equal",
           stencilFront: {
-            compare: isOverEyes ? "equal" : "not-equal", // Over eyes: stencil == 1, over non-eyes: stencil != 1
+            compare: isOverEyes ? "equal" : "not-equal",
             failOp: "keep",
             depthFailOp: "keep",
             passOp: "keep",
@@ -800,7 +653,6 @@ export class Engine {
             passOp: "keep",
           },
         },
-        multisample: { count: this.sampleCount },
       })
     }
 
@@ -808,46 +660,6 @@ export class Engine {
     this.hairPipelineOverNonEyes = createHairPipeline(false)
   }
 
-  // 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) // Must match COMPUTE_WORKGROUP_SIZE
-        fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
-          let boneIndex = globalId.x;
-          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,
-      },
-    })
-  }
-
   // Create bloom post-processing pipelines
   private createBloomPipelines() {
     // Bloom extraction shader (extracts bright areas)
@@ -1268,174 +1080,28 @@ export class Engine {
   }
 
   public async loadAnimation(url: string) {
-    await this.player.loadVmd(url)
-    this.hasAnimation = true
-
-    // Show first frame (time 0) immediately
-    if (this.currentModel) {
-      const initialPose = this.player.getPoseAtTime(0)
-      this.applyPose(initialPose)
-
-      // Reset bones without time 0 keyframes
-      const skeleton = this.currentModel.getSkeleton()
-      const bonesWithPose = new Set(initialPose.boneRotations.keys())
-      const bonesToReset: string[] = []
-      for (const bone of skeleton.bones) {
-        if (!bonesWithPose.has(bone.name)) {
-          bonesToReset.push(bone.name)
-        }
-      }
-
-      if (bonesToReset.length > 0) {
-        const identityQuat = new Quat(0, 0, 0, 1)
-        const identityQuats = new Array(bonesToReset.length).fill(identityQuat)
-        this.rotateBones(bonesToReset, identityQuats, 0)
-      }
-
-      // Update model pose and physics
-      this.currentModel.evaluatePose()
-
-      if (this.physics) {
-        const worldMats = this.currentModel.getBoneWorldMatrices()
-        this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices())
-
-        // Upload matrices immediately
-        this.device.queue.writeBuffer(
-          this.worldMatrixBuffer!,
-          0,
-          worldMats.buffer,
-          worldMats.byteOffset,
-          worldMats.byteLength
-        )
-        const encoder = this.device.createCommandEncoder()
-        this.computeSkinMatrices(encoder)
-        this.device.queue.submit([encoder.finish()])
-      }
-    }
+    if (!this.currentModel) return
+    await this.currentModel.loadVmd(url)
   }
 
   public playAnimation() {
-    if (!this.hasAnimation || !this.currentModel) return
-
-    const wasPaused = this.player.isPausedState()
-    const wasPlaying = this.player.isPlayingState()
-
-    // Only reset pose and physics if starting from beginning (not resuming)
-    if (!wasPlaying && !wasPaused) {
-      // Get initial pose at time 0
-      const initialPose = this.player.getPoseAtTime(0)
-      this.applyPose(initialPose)
-
-      // Reset bones without time 0 keyframes
-      const skeleton = this.currentModel.getSkeleton()
-      const bonesWithPose = new Set(initialPose.boneRotations.keys())
-      const bonesToReset: string[] = []
-      for (const bone of skeleton.bones) {
-        if (!bonesWithPose.has(bone.name)) {
-          bonesToReset.push(bone.name)
-        }
-      }
-
-      if (bonesToReset.length > 0) {
-        const identityQuat = new Quat(0, 0, 0, 1)
-        const identityQuats = new Array(bonesToReset.length).fill(identityQuat)
-        this.rotateBones(bonesToReset, identityQuats, 0)
-      }
-
-      // Reset physics immediately and upload matrices to prevent A-pose flash
-      if (this.physics) {
-        this.currentModel.evaluatePose()
-
-        const worldMats = this.currentModel.getBoneWorldMatrices()
-        this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices())
-
-        // Upload matrices immediately so next frame shows correct pose
-        this.device.queue.writeBuffer(
-          this.worldMatrixBuffer!,
-          0,
-          worldMats.buffer,
-          worldMats.byteOffset,
-          worldMats.byteLength
-        )
-        const encoder = this.device.createCommandEncoder()
-        this.computeSkinMatrices(encoder)
-        this.device.queue.submit([encoder.finish()])
-      }
-    }
-
-    // Start playback (or resume if paused)
-    this.player.play()
-    if (this.animationStartTime === 0) {
-      this.animationStartTime = performance.now()
-    }
+    this.currentModel?.playAnimation()
   }
 
   public stopAnimation() {
-    this.player.stop()
+    this.currentModel?.stopAnimation()
   }
 
   public pauseAnimation() {
-    this.player.pause()
+    this.currentModel?.pauseAnimation()
   }
 
   public seekAnimation(time: number) {
-    if (!this.currentModel || !this.hasAnimation) return
-
-    this.player.seek(time)
-
-    // Immediately apply pose at seeked time
-    const pose = this.player.getPoseAtTime(time)
-    this.applyPose(pose)
-
-    // Update model pose and physics
-    this.currentModel.evaluatePose()
-
-    if (this.physics) {
-      const worldMats = this.currentModel.getBoneWorldMatrices()
-      this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices())
-
-      // Upload matrices immediately
-      this.device.queue.writeBuffer(
-        this.worldMatrixBuffer!,
-        0,
-        worldMats.buffer,
-        worldMats.byteOffset,
-        worldMats.byteLength
-      )
-      const encoder = this.device.createCommandEncoder()
-      this.computeSkinMatrices(encoder)
-      this.device.queue.submit([encoder.finish()])
-    }
+    this.currentModel?.seekAnimation(time)
   }
 
   public getAnimationProgress() {
-    return this.player.getProgress()
-  }
-
-  /**
-   * Apply animation pose to model
-   */
-  private applyPose(pose: AnimationPose): void {
-    if (!this.currentModel) return
-
-    // Apply bone rotations
-    if (pose.boneRotations.size > 0) {
-      const boneNames = Array.from(pose.boneRotations.keys())
-      const rotations = Array.from(pose.boneRotations.values())
-      this.rotateBones(boneNames, rotations, 0)
-    }
-
-    // Apply bone translations
-    if (pose.boneTranslations.size > 0) {
-      const boneNames = Array.from(pose.boneTranslations.keys())
-      const translations = Array.from(pose.boneTranslations.values())
-      this.moveBones(boneNames, translations, 0)
-    }
-
-    // Apply morph weights
-    for (const [morphName, weight] of pose.morphWeights.entries()) {
-      this.setMorphWeight(morphName, weight, 0)
-    }
+    return this.currentModel?.getAnimationProgress() ?? { current: 0, duration: 0, percentage: 0 }
   }
 
   public getStats(): EngineStats {
@@ -1484,8 +1150,6 @@ export class Engine {
     this.modelDir = dir
 
     const model = await PmxLoader.load(path)
-
-    this.physics = new Physics(model.getRigidbodies(), model.getJoints())
     await this.setupModelBuffers(model)
   }
 
@@ -1559,13 +1223,7 @@ export class Engine {
     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,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
     })
 
     this.inverseBindMatrixBuffer = this.device.createBuffer({
@@ -1583,28 +1241,6 @@ export class Engine {
       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()
-
-    // Create compute bind group once (reused every frame)
-    this.skinMatrixComputeBindGroup = this.device.createBindGroup({
-      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 indices = model.getIndices()
     if (indices) {
       this.indexBuffer = this.device.createBuffer({
@@ -1638,15 +1274,7 @@ export class Engine {
       return texture
     }
 
-    this.opaqueDraws = []
-    this.eyeDraws = []
-    this.hairDrawsOverEyes = []
-    this.hairDrawsOverNonEyes = []
-    this.transparentDraws = []
-    this.opaqueOutlineDraws = []
-    this.eyeOutlineDraws = []
-    this.hairOutlineDraws = []
-    this.transparentOutlineDraws = []
+    this.drawCalls = []
     let currentIndexOffset = 0
 
     for (const mat of materials) {
@@ -1659,23 +1287,7 @@ export class Engine {
       const materialAlpha = mat.diffuse[3]
       const isTransparent = materialAlpha < 1.0 - Engine.TRANSPARENCY_EPSILON
 
-      // Create material uniform data
-      const materialUniformData = new Float32Array(8)
-      materialUniformData[0] = materialAlpha
-      materialUniformData[1] = 1.0 // alphaMultiplier: 1.0 for non-hair materials
-      materialUniformData[2] = this.rimLightIntensity
-      materialUniformData[3] = 0.0 // _padding1
-      materialUniformData[4] = 1.0 // rimColor.r
-      materialUniformData[5] = 1.0 // rimColor.g
-      materialUniformData[6] = 1.0 // rimColor.b
-      materialUniformData[7] = 0.0 // isOverEyes
-
-      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 materialUniformBuffer = this.createMaterialUniformBuffer(mat.name, materialAlpha, 0.0)
 
       // 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({
@@ -1691,100 +1303,70 @@ export class Engine {
         ],
       })
 
-      if (mat.isEye) {
-        if (indexCount > 0) {
-          this.eyeDraws.push({
-            count: indexCount,
-            firstIndex: currentIndexOffset,
-            bindGroup,
-          })
-        }
-      } else if (mat.isHair) {
-        // Hair materials: create separate bind groups for over-eyes vs over-non-eyes
-        const createHairBindGroup = (isOverEyes: boolean) => {
-          const uniformData = new Float32Array(8)
-          uniformData[0] = materialAlpha
-          uniformData[1] = 1.0 // alphaMultiplier (shader adjusts based on isOverEyes)
-          uniformData[2] = this.rimLightIntensity
-          uniformData[3] = 0.0 // _padding1
-          uniformData[4] = 1.0 // rimColor.rgb
-          uniformData[5] = 1.0
-          uniformData[6] = 1.0
-          uniformData[7] = isOverEyes ? 1.0 : 0.0 // isOverEyes
-
-          const buffer = this.device.createBuffer({
-            label: `material uniform (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
-            size: uniformData.byteLength,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-          })
-          this.device.queue.writeBuffer(buffer, 0, uniformData)
-
-          return this.device.createBindGroup({
-            label: `material bind group (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
-            layout: this.mainBindGroupLayout,
-            entries: [
-              { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-              { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-              { binding: 2, resource: diffuseTexture.createView() },
-              { binding: 3, resource: this.materialSampler },
-              { binding: 4, resource: { buffer: this.skinMatrixBuffer! } },
-              { binding: 5, resource: { buffer: buffer } },
-            ],
-          })
-        }
+      if (indexCount > 0) {
+        if (mat.isEye) {
+          this.drawCalls.push({ type: "eye", count: indexCount, firstIndex: currentIndexOffset, bindGroup })
+        } else if (mat.isHair) {
+          // Hair materials: create separate bind groups for over-eyes vs over-non-eyes
+          const createHairBindGroup = (isOverEyes: boolean) => {
+            const buffer = this.createMaterialUniformBuffer(
+              `${mat.name} (${isOverEyes ? "over eyes" : "over non-eyes"})`,
+              materialAlpha,
+              isOverEyes ? 1.0 : 0.0
+            )
+
+            return this.device.createBindGroup({
+              label: `material bind group (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
+              layout: this.mainBindGroupLayout,
+              entries: [
+                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                { binding: 2, resource: diffuseTexture.createView() },
+                { binding: 3, resource: this.materialSampler },
+                { binding: 4, resource: { buffer: this.skinMatrixBuffer! } },
+                { binding: 5, resource: { buffer: buffer } },
+              ],
+            })
+          }
 
-        const bindGroupOverEyes = createHairBindGroup(true)
-        const bindGroupOverNonEyes = createHairBindGroup(false)
+          const bindGroupOverEyes = createHairBindGroup(true)
+          const bindGroupOverNonEyes = createHairBindGroup(false)
 
-        if (indexCount > 0) {
-          this.hairDrawsOverEyes.push({
+          this.drawCalls.push({
+            type: "hair-over-eyes",
             count: indexCount,
             firstIndex: currentIndexOffset,
             bindGroup: bindGroupOverEyes,
           })
-
-          this.hairDrawsOverNonEyes.push({
+          this.drawCalls.push({
+            type: "hair-over-non-eyes",
             count: indexCount,
             firstIndex: currentIndexOffset,
             bindGroup: bindGroupOverNonEyes,
           })
-        }
-      } else if (isTransparent) {
-        if (indexCount > 0) {
-          this.transparentDraws.push({
-            count: indexCount,
-            firstIndex: currentIndexOffset,
-            bindGroup,
-          })
-        }
-      } else {
-        if (indexCount > 0) {
-          this.opaqueDraws.push({
-            count: indexCount,
-            firstIndex: currentIndexOffset,
-            bindGroup,
-          })
+        } else if (isTransparent) {
+          this.drawCalls.push({ type: "transparent", count: indexCount, firstIndex: currentIndexOffset, bindGroup })
+        } else {
+          this.drawCalls.push({ type: "opaque", count: indexCount, firstIndex: currentIndexOffset, bindGroup })
         }
       }
 
       // Edge flag is at bit 4 (0x10) in PMX format
       if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
-        const materialUniformData = new Float32Array(8)
-        materialUniformData[0] = mat.edgeColor[0] // edgeColor.r
-        materialUniformData[1] = mat.edgeColor[1] // edgeColor.g
-        materialUniformData[2] = mat.edgeColor[2] // edgeColor.b
-        materialUniformData[3] = mat.edgeColor[3] // edgeColor.a
-        materialUniformData[4] = mat.edgeSize
-        materialUniformData[5] = 0.0 // isOverEyes
-        materialUniformData[6] = 0.0
-        materialUniformData[7] = 0.0
-
-        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 materialUniformData = new Float32Array([
+          mat.edgeColor[0],
+          mat.edgeColor[1],
+          mat.edgeColor[2],
+          mat.edgeColor[3],
+          mat.edgeSize,
+          0,
+          0,
+          0,
+        ])
+        const materialUniformBuffer = this.createUniformBuffer(
+          `outline material uniform: ${mat.name}`,
+          materialUniformData
+        )
 
         const outlineBindGroup = this.device.createBindGroup({
           label: `outline bind group: ${mat.name}`,
@@ -1797,31 +1379,19 @@ export class Engine {
         })
 
         if (indexCount > 0) {
-          if (mat.isEye) {
-            this.eyeOutlineDraws.push({
-              count: indexCount,
-              firstIndex: currentIndexOffset,
-              bindGroup: outlineBindGroup,
-            })
-          } else if (mat.isHair) {
-            this.hairOutlineDraws.push({
-              count: indexCount,
-              firstIndex: currentIndexOffset,
-              bindGroup: outlineBindGroup,
-            })
-          } else if (isTransparent) {
-            this.transparentOutlineDraws.push({
-              count: indexCount,
-              firstIndex: currentIndexOffset,
-              bindGroup: outlineBindGroup,
-            })
-          } else {
-            this.opaqueOutlineDraws.push({
-              count: indexCount,
-              firstIndex: currentIndexOffset,
-              bindGroup: outlineBindGroup,
-            })
-          }
+          const outlineType: DrawCallType = mat.isEye
+            ? "eye-outline"
+            : mat.isHair
+            ? "hair-outline"
+            : isTransparent
+            ? "transparent-outline"
+            : "opaque-outline"
+          this.drawCalls.push({
+            type: outlineType,
+            count: indexCount,
+            firstIndex: currentIndexOffset,
+            bindGroup: outlineBindGroup,
+          })
         }
       }
 
@@ -1829,6 +1399,22 @@ export class Engine {
     }
   }
 
+  private createMaterialUniformBuffer(label: string, alpha: number, isOverEyes: number): GPUBuffer {
+    const data = new Float32Array(8)
+    data.set([alpha, 1.0, this.rimLightIntensity, 0.0, 1.0, 1.0, 1.0, isOverEyes])
+    return this.createUniformBuffer(`material uniform: ${label}`, data)
+  }
+
+  private createUniformBuffer(label: string, data: Float32Array | Uint32Array): GPUBuffer {
+    const buffer = this.device.createBuffer({
+      label,
+      size: data.byteLength,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    })
+    this.device.queue.writeBuffer(buffer, 0, data as ArrayBufferView<ArrayBuffer>)
+    return buffer
+  }
+
   private async createTextureFromPath(path: string): Promise<GPUTexture | null> {
     const cached = this.textureCache.get(path)
     if (cached) {
@@ -1867,51 +1453,54 @@ export class Engine {
   private renderEyes(pass: GPURenderPassEncoder) {
     pass.setPipeline(this.eyePipeline)
     pass.setStencilReference(this.STENCIL_EYE_VALUE)
-    for (const draw of this.eyeDraws) {
-      pass.setBindGroup(0, draw.bindGroup)
-      pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+    for (const draw of this.drawCalls) {
+      if (draw.type === "eye") {
+        pass.setBindGroup(0, draw.bindGroup)
+        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+      }
     }
   }
 
   // Helper: Render hair with post-alpha-eye effect (depth pre-pass + stencil-based shading + outlines)
   private renderHair(pass: GPURenderPassEncoder) {
     // Hair depth pre-pass (reduces overdraw via early depth rejection)
-    const hasHair = this.hairDrawsOverEyes.length > 0 || this.hairDrawsOverNonEyes.length > 0
+    const hasHair = this.drawCalls.some((d) => d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes")
     if (hasHair) {
       pass.setPipeline(this.hairDepthPipeline)
-      for (const draw of this.hairDrawsOverEyes) {
-        pass.setBindGroup(0, draw.bindGroup)
-        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
-      }
-      for (const draw of this.hairDrawsOverNonEyes) {
-        pass.setBindGroup(0, draw.bindGroup)
-        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+      for (const draw of this.drawCalls) {
+        if (draw.type === "hair-over-eyes" || draw.type === "hair-over-non-eyes") {
+          pass.setBindGroup(0, draw.bindGroup)
+          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+        }
       }
     }
 
     // Hair shading (split by stencil for transparency over eyes)
-    if (this.hairDrawsOverEyes.length > 0) {
+    const hairOverEyes = this.drawCalls.filter((d) => d.type === "hair-over-eyes")
+    if (hairOverEyes.length > 0) {
       pass.setPipeline(this.hairPipelineOverEyes)
       pass.setStencilReference(this.STENCIL_EYE_VALUE)
-      for (const draw of this.hairDrawsOverEyes) {
+      for (const draw of hairOverEyes) {
         pass.setBindGroup(0, draw.bindGroup)
         pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
       }
     }
 
-    if (this.hairDrawsOverNonEyes.length > 0) {
+    const hairOverNonEyes = this.drawCalls.filter((d) => d.type === "hair-over-non-eyes")
+    if (hairOverNonEyes.length > 0) {
       pass.setPipeline(this.hairPipelineOverNonEyes)
       pass.setStencilReference(this.STENCIL_EYE_VALUE)
-      for (const draw of this.hairDrawsOverNonEyes) {
+      for (const draw of hairOverNonEyes) {
         pass.setBindGroup(0, draw.bindGroup)
         pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
       }
     }
 
     // Hair outlines
-    if (this.hairOutlineDraws.length > 0) {
+    const hairOutlines = this.drawCalls.filter((d) => d.type === "hair-outline")
+    if (hairOutlines.length > 0) {
       pass.setPipeline(this.hairOutlinePipeline)
-      for (const draw of this.hairOutlineDraws) {
+      for (const draw of hairOutlines) {
         pass.setBindGroup(0, draw.bindGroup)
         pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
       }
@@ -1928,19 +1517,10 @@ export class Engine {
       this.updateCameraUniforms()
       this.updateRenderTarget()
 
-      // Animate VMD animation if playing
-      if (this.hasAnimation && this.currentModel) {
-        const pose = this.player.update(currentTime)
-        if (pose) {
-          this.applyPose(pose)
-        }
-      }
-
-      // Update model pose first (this may update morph weights via tweens)
-      // We need to do this before creating the encoder to ensure vertex buffer is ready
+      // Update model (handles tweens, animation, physics, IK, and skin matrices)
       if (this.currentModel) {
-        const hasActiveMorphTweens = this.currentModel.evaluatePose()
-        if (hasActiveMorphTweens) {
+        const verticesChanged = this.currentModel.update(deltaTime)
+        if (verticesChanged) {
           this.vertexBufferNeedsUpdate = true
         }
       }
@@ -1951,10 +1531,11 @@ export class Engine {
         this.vertexBufferNeedsUpdate = false
       }
 
-      // Use single encoder for both compute and render (reduces sync points)
-      const encoder = this.device.createCommandEncoder()
+      // Update skin matrices buffer
+      this.updateSkinMatrices()
 
-      this.updateModelPose(deltaTime, encoder)
+      // Use single encoder for render
+      const encoder = this.device.createCommandEncoder()
 
       const pass = encoder.beginRenderPass(this.renderPassDescriptor)
 
@@ -1966,9 +1547,11 @@ export class Engine {
 
         // Pass 1: Opaque
         pass.setPipeline(this.modelPipeline)
-        for (const draw of this.opaqueDraws) {
-          pass.setBindGroup(0, draw.bindGroup)
-          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+        for (const draw of this.drawCalls) {
+          if (draw.type === "opaque") {
+            pass.setBindGroup(0, draw.bindGroup)
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          }
         }
 
         // Pass 2: Eyes (writes stencil value for hair to test against)
@@ -1981,9 +1564,11 @@ export class Engine {
 
         // Pass 4: Transparent
         pass.setPipeline(this.modelPipeline)
-        for (const draw of this.transparentDraws) {
-          pass.setBindGroup(0, draw.bindGroup)
-          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+        for (const draw of this.drawCalls) {
+          if (draw.type === "transparent") {
+            pass.setBindGroup(0, draw.bindGroup)
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          }
         }
 
         this.drawOutlines(pass, true)
@@ -2119,42 +1704,27 @@ export class Engine {
     }
   }
 
-  private updateModelPose(deltaTime: number, encoder: GPUCommandEncoder) {
-    // Note: evaluatePose is called earlier in render() to update vertex buffer before encoder creation
-    // Here we just get the matrices and update physics/compute
-    const worldMats = this.currentModel!.getBoneWorldMatrices()
-
-    if (this.physics) {
-      this.physics.step(deltaTime, worldMats, this.currentModel!.getBoneInverseBindMatrices())
-    }
+  private updateSkinMatrices() {
+    if (!this.currentModel || !this.skinMatrixBuffer) return
 
+    const skinMatrices = this.currentModel.getSkinMatrices()
     this.device.queue.writeBuffer(
-      this.worldMatrixBuffer!,
+      this.skinMatrixBuffer,
       0,
-      worldMats.buffer,
-      worldMats.byteOffset,
-      worldMats.byteLength
+      skinMatrices.buffer,
+      skinMatrices.byteOffset,
+      skinMatrices.byteLength
     )
-    this.computeSkinMatrices(encoder)
-  }
-
-  private computeSkinMatrices(encoder: GPUCommandEncoder) {
-    const boneCount = this.currentModel!.getSkeleton().bones.length
-    const workgroupCount = Math.ceil(boneCount / this.COMPUTE_WORKGROUP_SIZE)
-
-    const pass = encoder.beginComputePass()
-    pass.setPipeline(this.skinMatrixComputePipeline!)
-    pass.setBindGroup(0, this.skinMatrixComputeBindGroup!)
-    pass.dispatchWorkgroups(workgroupCount)
-    pass.end()
   }
 
   private drawOutlines(pass: GPURenderPassEncoder, transparent: boolean) {
     pass.setPipeline(this.outlinePipeline)
-    const draws = transparent ? this.transparentOutlineDraws : this.opaqueOutlineDraws
-    for (const draw of draws) {
-      pass.setBindGroup(0, draw.bindGroup)
-      pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+    const outlineType: DrawCallType = transparent ? "transparent-outline" : "opaque-outline"
+    for (const draw of this.drawCalls) {
+      if (draw.type === outlineType) {
+        pass.setBindGroup(0, draw.bindGroup)
+        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+      }
     }
   }