reze-engine 0.3.4 → 0.3.6

package/dist/player.js

@@ -1,5 +1,4 @@
-import { bezierInterpolate } from "./bezier-interpolate";
-import { Quat, Vec3 } from "./math";
+import { Quat, Vec3, bezierInterpolate } from "./math";
 import { VMDLoader } from "./vmd-loader";
 export class Player {
     constructor() {
@@ -7,15 +6,13 @@ export class Player {
         this.frames = [];
         this.boneTracks = new Map();
         this.morphTracks = new Map();
-        this.duration = 0;
+        this._duration = 0;
         // Playback state
         this.isPlaying = false;
         this.isPaused = false;
-        this.currentTime = 0;
+        this._currentTime = 0;
         // Timing
         this.startTime = 0; // Real-time when playback started
-        this.pausedTime = 0; // Accumulated paused duration
-        this.pauseStartTime = 0;
     }
     /**
      * Load VMD animation file
@@ -29,68 +26,45 @@ export class Player {
      * Process frames into tracks
      */
     processFrames() {
-        // Process bone frames
-        const allBoneKeyFrames = [];
-        for (const keyFrame of this.frames) {
-            for (const boneFrame of keyFrame.boneFrames) {
-                allBoneKeyFrames.push({
-                    boneFrame,
-                    time: keyFrame.time,
-                });
+        // Helper to group frames by name and sort by time
+        const groupFrames = (items) => {
+            const tracks = new Map();
+            for (const { item, name, time } of items) {
+                if (!tracks.has(name))
+                    tracks.set(name, []);
+                tracks.get(name).push({ item, time });
             }
-        }
-        const boneKeyFramesByBone = new Map();
-        for (const { boneFrame, time } of allBoneKeyFrames) {
-            if (!boneKeyFramesByBone.has(boneFrame.boneName)) {
-                boneKeyFramesByBone.set(boneFrame.boneName, []);
+            for (const keyFrames of tracks.values()) {
+                keyFrames.sort((a, b) => a.time - b.time);
             }
-            boneKeyFramesByBone.get(boneFrame.boneName).push({ boneFrame, time });
-        }
-        for (const keyFrames of boneKeyFramesByBone.values()) {
-            keyFrames.sort((a, b) => a.time - b.time);
-        }
-        // Process morph frames
-        const allMorphKeyFrames = [];
+            return tracks;
+        };
+        // Collect all bone and morph frames
+        const boneItems = [];
+        const morphItems = [];
         for (const keyFrame of this.frames) {
-            for (const morphFrame of keyFrame.morphFrames) {
-                allMorphKeyFrames.push({
-                    morphFrame,
-                    time: keyFrame.time,
-                });
-            }
-        }
-        const morphKeyFramesByMorph = new Map();
-        for (const { morphFrame, time } of allMorphKeyFrames) {
-            if (!morphKeyFramesByMorph.has(morphFrame.morphName)) {
-                morphKeyFramesByMorph.set(morphFrame.morphName, []);
+            for (const boneFrame of keyFrame.boneFrames) {
+                boneItems.push({ item: boneFrame, name: boneFrame.boneName, time: keyFrame.time });
             }
-            morphKeyFramesByMorph.get(morphFrame.morphName).push({ morphFrame, time });
-        }
-        for (const keyFrames of morphKeyFramesByMorph.values()) {
-            keyFrames.sort((a, b) => a.time - b.time);
-        }
-        // Store tracks
-        this.boneTracks = boneKeyFramesByBone;
-        this.morphTracks = morphKeyFramesByMorph;
-        // Calculate animation duration from max frame time
-        let maxFrameTime = 0;
-        for (const keyFrames of this.boneTracks.values()) {
-            if (keyFrames.length > 0) {
-                const lastTime = keyFrames[keyFrames.length - 1].time;
-                if (lastTime > maxFrameTime) {
-                    maxFrameTime = lastTime;
-                }
+            for (const morphFrame of keyFrame.morphFrames) {
+                morphItems.push({ item: morphFrame, name: morphFrame.morphName, time: keyFrame.time });
             }
         }
-        for (const keyFrames of this.morphTracks.values()) {
-            if (keyFrames.length > 0) {
-                const lastTime = keyFrames[keyFrames.length - 1].time;
-                if (lastTime > maxFrameTime) {
-                    maxFrameTime = lastTime;
-                }
-            }
+        // Transform to expected format
+        this.boneTracks = new Map();
+        for (const [name, frames] of groupFrames(boneItems).entries()) {
+            this.boneTracks.set(name, frames.map((f) => ({ boneFrame: f.item, time: f.time })));
         }
-        this.duration = maxFrameTime > 0 ? maxFrameTime : 0;
+        this.morphTracks = new Map();
+        for (const [name, frames] of groupFrames(morphItems).entries()) {
+            this.morphTracks.set(name, frames.map((f) => ({ morphFrame: f.item, time: f.time })));
+        }
+        // Calculate duration from all tracks
+        const allTracks = [...this.boneTracks.values(), ...this.morphTracks.values()];
+        this._duration = allTracks.reduce((max, keyFrames) => {
+            const lastTime = keyFrames[keyFrames.length - 1]?.time ?? 0;
+            return Math.max(max, lastTime);
+        }, 0);
     }
     /**
      * Start or resume playback
@@ -99,17 +73,8 @@ export class Player {
     play() {
         if (this.frames.length === 0)
             return;
-        if (this.isPaused) {
-            // Resume from paused position - don't adjust time, just continue from where we paused
-            this.isPaused = false;
-            // Adjust start time so current time calculation continues smoothly
-            this.startTime = performance.now() - this.currentTime * 1000;
-        }
-        else {
-            // Start from beginning or current seek position
-            this.startTime = performance.now() - this.currentTime * 1000;
-            this.pausedTime = 0;
-        }
+        this.isPaused = false;
+        this.startTime = performance.now() - this._currentTime * 1000;
         this.isPlaying = true;
     }
     /**
@@ -119,7 +84,6 @@ export class Player {
         if (!this.isPlaying || this.isPaused)
             return;
         this.isPaused = true;
-        this.pauseStartTime = performance.now();
     }
     /**
      * Stop playback and reset to beginning
@@ -127,20 +91,17 @@ export class Player {
     stop() {
         this.isPlaying = false;
         this.isPaused = false;
-        this.currentTime = 0;
+        this._currentTime = 0;
         this.startTime = 0;
-        this.pausedTime = 0;
     }
     /**
      * Seek to specific time
      */
     seek(time) {
-        const clampedTime = Math.max(0, Math.min(time, this.duration));
-        this.currentTime = clampedTime;
-        // Adjust start time if playing
+        const clampedTime = Math.max(0, Math.min(time, this._duration));
+        this._currentTime = clampedTime;
         if (this.isPlaying && !this.isPaused) {
             this.startTime = performance.now() - clampedTime * 1000;
-            this.pausedTime = 0;
         }
     }
     /**
@@ -153,18 +114,18 @@ export class Player {
         }
         // If paused, return current pose at paused time (no time update)
         if (this.isPaused) {
-            return this.getPoseAtTime(this.currentTime);
+            return this.getPoseAtTime(this._currentTime);
         }
         // Calculate current animation time
         const elapsedSeconds = (currentRealTime - this.startTime) / 1000;
-        this.currentTime = elapsedSeconds;
+        this._currentTime = elapsedSeconds;
         // Check if animation ended
-        if (this.currentTime >= this.duration) {
-            this.currentTime = this.duration;
+        if (this._currentTime >= this._duration) {
+            this._currentTime = this._duration;
             this.pause(); // Auto-pause at end
-            return this.getPoseAtTime(this.currentTime);
+            return this.getPoseAtTime(this._currentTime);
         }
-        return this.getPoseAtTime(this.currentTime);
+        return this.getPoseAtTime(this._currentTime);
     }
     /**
      * Get pose at specific time (pure function)
@@ -175,114 +136,61 @@ export class Player {
             boneTranslations: new Map(),
             morphWeights: new Map(),
         };
-        // Helper to find upper bound index (binary search)
-        const upperBoundFrameIndex = (time, keyFrames) => {
-            let left = 0;
-            let right = keyFrames.length;
+        // Generic binary search for upper bound
+        const upperBound = (time, keyFrames) => {
+            let left = 0, right = keyFrames.length;
             while (left < right) {
                 const mid = Math.floor((left + right) / 2);
-                if (keyFrames[mid].time <= time) {
+                if (keyFrames[mid].time <= time)
                     left = mid + 1;
-                }
-                else {
+                else
                     right = mid;
-                }
             }
             return left;
         };
-        // Process each bone track
+        // Process bone tracks
         for (const [boneName, keyFrames] of this.boneTracks.entries()) {
             if (keyFrames.length === 0)
                 continue;
-            // Clamp frame time to track range
-            const startTime = keyFrames[0].time;
-            const endTime = keyFrames[keyFrames.length - 1].time;
-            const clampedFrameTime = Math.max(startTime, Math.min(endTime, time));
-            const upperBoundIndex = upperBoundFrameIndex(clampedFrameTime, keyFrames);
-            const upperBoundIndexMinusOne = upperBoundIndex - 1;
-            if (upperBoundIndexMinusOne < 0)
+            const clampedTime = Math.max(keyFrames[0].time, Math.min(keyFrames[keyFrames.length - 1].time, time));
+            const idx = upperBound(clampedTime, keyFrames) - 1;
+            if (idx < 0)
                 continue;
-            const timeB = keyFrames[upperBoundIndex]?.time;
-            const boneFrameA = keyFrames[upperBoundIndexMinusOne].boneFrame;
-            if (timeB === undefined) {
-                // Last keyframe or beyond - use the last keyframe value
-                pose.boneRotations.set(boneName, boneFrameA.rotation);
-                pose.boneTranslations.set(boneName, boneFrameA.translation);
+            const frameA = keyFrames[idx].boneFrame;
+            const frameB = keyFrames[idx + 1]?.boneFrame;
+            if (!frameB) {
+                pose.boneRotations.set(boneName, frameA.rotation);
+                pose.boneTranslations.set(boneName, frameA.translation);
             }
             else {
-                // Interpolate between two keyframes
-                const timeA = keyFrames[upperBoundIndexMinusOne].time;
-                const boneFrameB = keyFrames[upperBoundIndex].boneFrame;
-                const gradient = (clampedFrameTime - timeA) / (timeB - timeA);
-                // Interpolate rotation using Bezier
-                const interp = boneFrameB.interpolation;
-                const rotWeight = bezierInterpolate(interp[0] / 127, // x1
-                interp[1] / 127, // x2
-                interp[2] / 127, // y1
-                interp[3] / 127, // y2
-                gradient);
-                const interpolatedRotation = Quat.slerp(boneFrameA.rotation, boneFrameB.rotation, rotWeight);
-                // Interpolate translation using Bezier (separate curves for X, Y, Z)
-                const xWeight = bezierInterpolate(interp[0] / 127, // X_x1
-                interp[8] / 127, // X_x2
-                interp[4] / 127, // X_y1
-                interp[12] / 127, // X_y2
-                gradient);
-                const yWeight = bezierInterpolate(interp[16] / 127, // Y_x1
-                interp[24] / 127, // Y_x2
-                interp[20] / 127, // Y_y1
-                interp[28] / 127, // Y_y2
-                gradient);
-                const zWeight = bezierInterpolate(interp[32] / 127, // Z_x1
-                interp[40] / 127, // Z_x2
-                interp[36] / 127, // Z_y1
-                interp[44] / 127, // Z_y2
-                gradient);
-                const interpolatedTranslation = new Vec3(boneFrameA.translation.x + (boneFrameB.translation.x - boneFrameA.translation.x) * xWeight, boneFrameA.translation.y + (boneFrameB.translation.y - boneFrameA.translation.y) * yWeight, boneFrameA.translation.z + (boneFrameB.translation.z - boneFrameA.translation.z) * zWeight);
-                pose.boneRotations.set(boneName, interpolatedRotation);
-                pose.boneTranslations.set(boneName, interpolatedTranslation);
+                const timeA = keyFrames[idx].time;
+                const timeB = keyFrames[idx + 1].time;
+                const gradient = (clampedTime - timeA) / (timeB - timeA);
+                const interp = frameB.interpolation;
+                pose.boneRotations.set(boneName, Quat.slerp(frameA.rotation, frameB.rotation, bezierInterpolate(interp[0] / 127, interp[1] / 127, interp[2] / 127, interp[3] / 127, gradient)));
+                const lerp = (a, b, w) => a + (b - a) * w;
+                const getWeight = (offset) => bezierInterpolate(interp[offset] / 127, interp[offset + 8] / 127, interp[offset + 4] / 127, interp[offset + 12] / 127, gradient);
+                pose.boneTranslations.set(boneName, new Vec3(lerp(frameA.translation.x, frameB.translation.x, getWeight(0)), lerp(frameA.translation.y, frameB.translation.y, getWeight(16)), lerp(frameA.translation.z, frameB.translation.z, getWeight(32))));
             }
         }
-        // Helper to find upper bound index for morph frames
-        const upperBoundMorphIndex = (time, keyFrames) => {
-            let left = 0;
-            let right = keyFrames.length;
-            while (left < right) {
-                const mid = Math.floor((left + right) / 2);
-                if (keyFrames[mid].time <= time) {
-                    left = mid + 1;
-                }
-                else {
-                    right = mid;
-                }
-            }
-            return left;
-        };
-        // Process each morph track
+        // Process morph tracks
         for (const [morphName, keyFrames] of this.morphTracks.entries()) {
             if (keyFrames.length === 0)
                 continue;
-            // Clamp frame time to track range
-            const startTime = keyFrames[0].time;
-            const endTime = keyFrames[keyFrames.length - 1].time;
-            const clampedFrameTime = Math.max(startTime, Math.min(endTime, time));
-            const upperBoundIndex = upperBoundMorphIndex(clampedFrameTime, keyFrames);
-            const upperBoundIndexMinusOne = upperBoundIndex - 1;
-            if (upperBoundIndexMinusOne < 0)
+            const clampedTime = Math.max(keyFrames[0].time, Math.min(keyFrames[keyFrames.length - 1].time, time));
+            const idx = upperBound(clampedTime, keyFrames) - 1;
+            if (idx < 0)
                 continue;
-            const timeB = keyFrames[upperBoundIndex]?.time;
-            const morphFrameA = keyFrames[upperBoundIndexMinusOne].morphFrame;
-            if (timeB === undefined) {
-                // Last keyframe or beyond - use the last keyframe value
-                pose.morphWeights.set(morphName, morphFrameA.weight);
+            const frameA = keyFrames[idx].morphFrame;
+            const frameB = keyFrames[idx + 1]?.morphFrame;
+            if (!frameB) {
+                pose.morphWeights.set(morphName, frameA.weight);
             }
             else {
-                // Linear interpolation between two keyframes
-                const timeA = keyFrames[upperBoundIndexMinusOne].time;
-                const morphFrameB = keyFrames[upperBoundIndex].morphFrame;
-                const gradient = (clampedFrameTime - timeA) / (timeB - timeA);
-                const interpolatedWeight = morphFrameA.weight + (morphFrameB.weight - morphFrameA.weight) * gradient;
-                pose.morphWeights.set(morphName, interpolatedWeight);
+                const timeA = keyFrames[idx].time;
+                const timeB = keyFrames[idx + 1].time;
+                const gradient = (clampedTime - timeA) / (timeB - timeA);
+                pose.morphWeights.set(morphName, frameA.weight + (frameB.weight - frameA.weight) * gradient);
             }
         }
         return pose;
@@ -292,33 +200,21 @@ export class Player {
      */
     getProgress() {
         return {
-            current: this.currentTime,
-            duration: this.duration,
-            percentage: this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0,
+            current: this._currentTime,
+            duration: this._duration,
+            percentage: this._duration > 0 ? (this._currentTime / this._duration) * 100 : 0,
         };
     }
-    /**
-     * Get current time
-     */
-    getCurrentTime() {
-        return this.currentTime;
+    get currentTime() {
+        return this._currentTime;
     }
-    /**
-     * Get animation duration
-     */
-    getDuration() {
-        return this.duration;
+    get duration() {
+        return this._duration;
     }
-    /**
-     * Check if playing
-     */
-    isPlayingState() {
+    get isPlayingState() {
         return this.isPlaying && !this.isPaused;
     }
-    /**
-     * Check if paused
-     */
-    isPausedState() {
+    get isPausedState() {
         return this.isPaused;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "reze-engine",
-    "version": "0.3.4",
+    "version": "0.3.6",
     "description": "A WebGPU-based MMD model renderer",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",

package/src/ammo-loader.ts

@@ -29,7 +29,3 @@ export async function loadAmmo(): Promise<AmmoInstance> {
 
   return ammoPromise
 }
-
-export function getAmmoInstance(): AmmoInstance | null {
-  return ammoInstance
-}

package/src/engine.ts

@@ -135,7 +135,6 @@ export class Engine {
 
   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
@@ -1317,8 +1316,8 @@ export class Engine {
   public playAnimation() {
     if (!this.hasAnimation || !this.currentModel) return
 
-    const wasPaused = this.player.isPausedState()
-    const wasPlaying = this.player.isPlayingState()
+    const wasPaused = this.player.isPausedState
+    const wasPlaying = this.player.isPlayingState
 
     // Only reset pose and physics if starting from beginning (not resuming)
     if (!wasPlaying && !wasPaused) {
@@ -1365,9 +1364,6 @@ export class Engine {
 
     // Start playback (or resume if paused)
     this.player.play()
-    if (this.animationStartTime === 0) {
-      this.animationStartTime = performance.now()
-    }
   }
 
   public stopAnimation() {
@@ -1659,23 +1655,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,33 +1671,22 @@ export class Engine {
         ],
       })
 
-      if (mat.isEye) {
+      const addDrawCall = (draws: DrawCall[]) => {
         if (indexCount > 0) {
-          this.eyeDraws.push({
-            count: indexCount,
-            firstIndex: currentIndexOffset,
-            bindGroup,
-          })
+          draws.push({ count: indexCount, firstIndex: currentIndexOffset, bindGroup })
         }
+      }
+
+      if (mat.isEye) {
+        addDrawCall(this.eyeDraws)
       } 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)
+          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}`,
@@ -1742,7 +1711,6 @@ export class Engine {
             firstIndex: currentIndexOffset,
             bindGroup: bindGroupOverEyes,
           })
-
           this.hairDrawsOverNonEyes.push({
             count: indexCount,
             firstIndex: currentIndexOffset,
@@ -1750,41 +1718,27 @@ export class Engine {
           })
         }
       } else if (isTransparent) {
-        if (indexCount > 0) {
-          this.transparentDraws.push({
-            count: indexCount,
-            firstIndex: currentIndexOffset,
-            bindGroup,
-          })
-        }
+        addDrawCall(this.transparentDraws)
       } else {
-        if (indexCount > 0) {
-          this.opaqueDraws.push({
-            count: indexCount,
-            firstIndex: currentIndexOffset,
-            bindGroup,
-          })
-        }
+        addDrawCall(this.opaqueDraws)
       }
 
       // 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 +1751,14 @@ 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 outlineDraws = mat.isEye
+            ? this.eyeOutlineDraws
+            : mat.isHair
+            ? this.hairOutlineDraws
+            : isTransparent
+            ? this.transparentOutlineDraws
+            : this.opaqueOutlineDraws
+          outlineDraws.push({ count: indexCount, firstIndex: currentIndexOffset, bindGroup: outlineBindGroup })
         }
       }
 
@@ -1829,6 +1766,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) {