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