freeze frame bugfix

jerzakm · Feb 14, 2024 · db54522 · db54522
1 parent 74e697e
commit db54522
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 25 deletions.
diff --git a/.changeset/serious-berries-heal.md b/.changeset/serious-berries-heal.md
@@ -0,0 +1,5 @@
+---
+"@threejs-kit/instanced-sprite-mesh": patch
+---
+
+freeze frame bugfix
diff --git a/apps/playground/src/routes/instanced-sprite/AnimatedInstancedSprite.svelte b/apps/playground/src/routes/instanced-sprite/AnimatedInstancedSprite.svelte
@@ -129,9 +129,24 @@
 	$: {
 		if ($textureStore && mesh.material && !initialized && mesh) {
 			mesh.castShadow = true;
+
+			for (let i = 0; i < count; i++) {
+				// mesh.playmode.setAt(i, 'PAUSE');
+				// mesh.frame.setAt(i, 28);
+				mesh.frame.setAt(i, 7, 'death');
+			}
+
+			initialized = true;
 		}
 	}
 
+	window.addEventListener('keydown', () => {
+		mesh.frame.unsetAll();
+		for (let i = 0; i < count; i++) {
+			// mesh.frame.unsetAt(i);
+		}
+	});
+
 	let dirtyInstanceMatrix = false;
 
 	const tempMatrix = new Matrix4();
@@ -143,7 +158,7 @@
 	};
 
 	const setAnimation = (instanceId: number, animationId: SpriteAnimations) => {
-		mesh.play(animationId, true, 'REVERSE').at(instanceId);
+		mesh.play(animationId, true, 'FORWARD').at(instanceId);
 	};
 
 	setContext('instanced-sprite-ctx', {

diff --git a/apps/playground/src/routes/instanced-sprite/Scene.svelte b/apps/playground/src/routes/instanced-sprite/Scene.svelte
@@ -67,23 +67,23 @@
 	<PlayerUpdater />
 </AnimatedInstancedSprite> -->
 
-<!-- {#await spritesheet then { spritesheet, texture }}
+{#await spritesheet then { spritesheet, texture }}
 	<AnimatedInstancedSprite {spritesheet} {texture} fps={10} loop={true} {count}>
 		<FlyerUpdater />
 	</AnimatedInstancedSprite>
 {/await}
-
+<!-- 
 {#await flyerSpritesheet then { spritesheet, texture }}
 	<AnimatedInstancedSprite {spritesheet} {texture} fps={10} loop={true} count={count * 25}>
 		<FlyerUpdater />
 	</AnimatedInstancedSprite>
 {/await} -->
 
-{#await countdownSpritesheet then { spritesheet, texture }}
+<!-- {#await countdownSpritesheet then { spritesheet, texture }}
 	<AnimatedInstancedSprite {spritesheet} {texture} fps={1} loop={true} count={count * 25}>
 		<FlyerUpdater />
 	</AnimatedInstancedSprite>
-{/await}
+{/await} -->
 
 <Sky elevation={0.15} />
 <!-- <T.AmbientLight /> -->

diff --git a/packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts b/packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts
@@ -151,9 +151,16 @@ export class InstancedSpriteMesh<
           const frameMeta = this.spritesheet?.animations[animation][frameId][0];
           id = frameMeta;
         }
-
         this.compute.utils.updateFrameAt(instanceId, id);
       },
+      unsetAt: (instanceId: number) => {
+        this.compute.utils.updateFrameAt(instanceId, -10);
+      },
+      unsetAll: () => {
+        for (let id = 0; id < this.count; id++) {
+          this.compute.utils.updateFrameAt(id, -10);
+        }
+      },
     };
   }
 

diff --git a/packages/instanced-sprite-mesh/src/animationRunner.ts b/packages/instanced-sprite-mesh/src/animationRunner.ts
@@ -46,6 +46,15 @@ const animProgressCompute = /*glsl*/ `
 
     vec4 instructions = texture2D( instructionsTexture, uv);
 
+    // FREEZE FRAME - return to save calculations?
+    if(instructions.a >=10.){      
+      progressValue.r = instructions.a - 10.;
+      progressValue.a = instructions.x;
+      progressValue.g = progressValue.g;
+      gl_FragColor = progressValue;
+      return;
+    }
+
 
     progressValue.b = 0.;    
     
@@ -102,18 +111,15 @@ const animProgressCompute = /*glsl*/ `
     float frameId = floor(animLength * frameTimedId);
     float spritesheetFrameId = readData(frameId, 2.f + animationId, spritesheetData).r;
 
-    if(instructions.a >=10.){
-      spritesheetFrameId = instructions.a - 10.;
-    }
+    
     
     // Picked sprite frame that goes to material
     progressValue.r = spritesheetFrameId;
 
     progressValue.a = instructions.x;
     progressValue.g = frameTimedId;
 
-    gl_FragColor = progressValue;
-
+    gl_FragColor = progressValue;    
   }
 `;
 
@@ -230,15 +236,6 @@ export const initAnimationRunner = (
     const index = instanceId * 4;
     progressDataTexture.image.data[index + 3] = frameId + 10;
     needsUpdate = true;
-    needsClearFrameSet = true;
-  };
-
-  const clearFrameSet = () => {
-    for (let i = 0; i < instanceCount; i++) {
-      const index = i * 4;
-      progressDataTexture.image.data[index + 3] = 0;
-    }
-    needsUpdate = true;
   };
 
   const update = () => {
@@ -247,11 +244,6 @@ export const initAnimationRunner = (
       needsUpdate = false;
     }
     gpuCompute.compute();
-
-    if (needsClearFrameSet) {
-      clearFrameSet();
-      needsClearFrameSet = false;
-    }
   };
 
   // todo make this nicer after deciding on api