diff --git a/.changeset/serious-berries-heal.md b/.changeset/serious-berries-heal.md
new file mode 100644
index 0000000..cf3e256
--- /dev/null
+++ 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
index 9908f97..563b772 100644
--- 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
index d1f57e7..34739d0 100644
--- a/apps/playground/src/routes/instanced-sprite/Scene.svelte
+++ b/apps/playground/src/routes/instanced-sprite/Scene.svelte
@@ -67,23 +67,23 @@
-->
-
-{#await countdownSpritesheet then { spritesheet, texture }}
+
diff --git a/packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts b/packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts
index 9c9d848..0535b7e 100644
--- 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
index 288eac1..efc5fc2 100644
--- 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,9 +111,7 @@ 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;
@@ -112,8 +119,7 @@ const animProgressCompute = /*glsl*/ `
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