save progress from earlier idk

apps/playground/src/routes/instanced-sprite/AnimatedInstancedSprite.svelte

@@ -12,7 +12,6 @@
 		Matrix4,
 		MeshBasicMaterial,
 		NearestFilter,
-		PlaneGeometry,
 		RepeatWrapping,
 		type Texture,
 		type Vector3Tuple
@@ -26,33 +25,28 @@
 	import { useTexture } from '@threlte/extras';
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
-	import PreviewMaterial from './PreviewMaterial.svelte';
 
 	type $$Props = Required<AnimatedInstancedSpriteProps>;
 	type $$Events = AnimatedInstancedSpriteEvents;
 	type $$Slots = AnimatedInstancedSpriteSlots;
 
 	export let textureUrl: $$Props['textureUrl'];
 	export let dataUrl: $$Props['dataUrl'] = '';
-	// export let animation: $$Props['animation'] = ''
-	export let loop: $$Props['loop'] = true;
 	// export let autoplay: $$Props['autoplay'] = true;
 	export let count: $$Props['count'] = 1000;
 	export let fps: $$Props['fps'] = 15;
 	export let filter: $$Props['filter'] = 'nearest';
-	// export let alphaTest: $$Props['alphaTest'] = 0.1
-	// export let delay: $$Props['delay'] = 0
-	// export let transparent: $$Props['transparent'] = true
-	// export let flipX: $$Props['flipX'] = false
+	export let alphaTest: $$Props['alphaTest'] = 0.1;
+	export let transparent: $$Props['transparent'] = true;
 
 	export let texture: Texture | undefined = undefined;
 	export let spritesheet: SpritesheetFormat | undefined = undefined;
 
 	$: console.log({ spritesheet });
 
 	const baseMaterial = new MeshBasicMaterial({
-		transparent: true,
-		alphaTest: 0.01,
+		transparent: transparent,
+		alphaTest: alphaTest,
 		// needs to be double side for shading
 		side: DoubleSide
 	});
@@ -79,6 +73,9 @@
 		}
 	);
 
+	$: mesh.material.alphaTest = alphaTest;
+	$: mesh.material.transparent = transparent;
+
 	const textureStore = texture
 		? writable(texture)
 		: useTexture(textureUrl, {
@@ -113,16 +110,15 @@
 	const animationMap = writable<Map<SpriteAnimations, number>>(new Map());
 
 	watch(jsonStore, (rawSpritesheet) => {
-		// if (rawSpritesheet && !spritesheet) {
-		// 	const spritesheet = parseAseprite(rawSpritesheet);
-		// 	mesh.spritesheet = spritesheet;
-		// 	animationMap.set(mesh.animationMap);
-		// }
+		if (rawSpritesheet && !spritesheet) {
+			const spritesheet = parseAseprite(rawSpritesheet);
+			mesh.spritesheet = spritesheet;
+			animationMap.set(mesh.animationMap);
+		}
 
 		if (spritesheet) {
 			mesh.spritesheet = spritesheet;
 			animationMap.set(mesh.animationMap);
-			mesh.offset.randomizeAll();
 		}
 	});
 
@@ -136,19 +132,16 @@
 		}
 	}
 
-	// mesh.scale.set(2, 2, 2);
-
 	let dirtyInstanceMatrix = false;
 
 	const tempMatrix = new Matrix4();
+
 	const updatePosition = (id: number, position: Vector3Tuple) => {
 		tempMatrix.setPosition(...position);
 		mesh.setMatrixAt(id, tempMatrix);
 		dirtyInstanceMatrix = true;
 	};
 
-	const { clock } = useThrelte();
-
 	const setAnimation = (instanceId: number, animationId: SpriteAnimations) => {
 		mesh.animation.setAt(instanceId, animationId);
 	};
@@ -175,13 +168,6 @@
 	let j = 0;
 </script>
 
-<!-- <T.Mesh position.y={4}>
-	<T.PlaneGeometry args={[1, 1]} />
-	<PreviewMaterial
-		texture={mesh.compute.gpuCompute.getCurrentRenderTarget(mesh.compute.animationRunner).texture}
-	/>
-</T.Mesh> -->
-
 <T is={mesh} />
 
 <slot />

apps/playground/src/routes/instanced-sprite/AnimatedInstancedSprite.svelte.d.ts

@@ -1,121 +1,114 @@
-import type { Events, Props, Slots } from '@threlte/core'
-import { SvelteComponent } from 'svelte'
-import { Material } from 'three'
+import type { Events, Props, Slots } from '@threlte/core';
+import { SvelteComponent } from 'svelte';
+import { Material } from 'three';
 
 export type AnimatedInstancedSpriteProps = Props<Material> & {
-  /** Number of instances */
-  count: number
-
-  /** The URL of the spritesheet texture image. */
-  textureUrl: string
-
-  /** The URL of the spritesheet JSON. */
-  // dataUrl?: string
-
-  /** The current playing animation name. */
-  // animation?: string
-
-  /**
-   * Whether or not the current animation should loop.
-   *
-   * @default true
-   */
-  // loop?: boolean
-
-  /**
-   * Controls whether or not to automatically run an animation on load.
-   *
-   * @default true
-   */
-  // autoplay?: boolean
-
-  /**
-   * The desired frames per second of the animation
-   *
-   * This will override any frame durations specified in JSON
-   */
-  fps?: number
-
-  /**
-   * The texture filtering applied to the spritesheet.
-   *
-   * @default 'nearest'
-   */
-  filter?: 'nearest' | 'linear'
-
-  /**
-   * Sets the alpha value to be used when running an alpha test.
-   *
-   * @see https://threejs.org/docs/#api/en/materials/Material.alphaTest
-   *
-   * @default 0.1
-   */
-  // alphaTest?: number
-
-  /**
-   * Delay the start of the animation in ms.
-   *
-   * @default 0
-   */
-  // delay?: number
-
-  /**
-   * Whether or not the material should be transparent.
-   *
-   * @default true
-   */
-  // transparent?: boolean
-
-  /**
-   * Whether or not the Sprite should flip sides on the x-axis.
-   *
-   * @default false
-   */
-  // flipX?: boolean
-
-  /**
-   * The start frame of the current animation.
-   *
-   * @default 0
-   */
-  // startFrame?: number
-
-  /**
-   * The end frame of the current animation.
-   *
-   * @default rows * columns - 1
-   */
-  endFrame?: number
-
-  /**
-   * The total number of frames in the spritesheet.
-   */
-  totalFrames?: number
-
-  /**
-   * The number of rows in the spritesheet.
-   *
-   * @default 1
-   */
-  rows?: number
-
-  /**
-   * The number of columns in the spritesheet.
-   *
-   * @default 1
-   */
-  columns?: number
-
-  readonly play?: () => void
-  readonly pause?: () => void
-}
-
-export type AnimatedInstancedSpriteEvents = any
-
-export type AnimatedInstancedSpriteSlots = any
+	/** Number of instances */
+	count: number;
+
+	/** The URL of the spritesheet texture image. */
+	textureUrl: string;
+
+	/** The URL of the spritesheet JSON. */
+	// dataUrl?: string
+
+	/** The current playing animation name. */
+	// animation?: string
+
+	/**
+	 * Controls whether or not to automatically run an animation on load.
+	 *
+	 * @default true
+	 */
+	// autoplay?: boolean
+
+	/**
+	 * The desired frames per second of the animation
+	 *
+	 * This will override any frame durations specified in JSON
+	 */
+	fps?: number;
+
+	/**
+	 * The texture filtering applied to the spritesheet.
+	 *
+	 * @default 'nearest'
+	 */
+	filter?: 'nearest' | 'linear';
+
+	/**
+	 * Sets the alpha value to be used when running an alpha test.
+	 *
+	 * @see https://threejs.org/docs/#api/en/materials/Material.alphaTest
+	 *
+	 * @default 0.1
+	 */
+	// alphaTest?: number
+
+	/**
+	 * Delay the start of the animation in ms.
+	 *
+	 * @default 0
+	 */
+	// delay?: number
+
+	/**
+	 * Whether or not the material should be transparent.
+	 *
+	 * @default true
+	 */
+	// transparent?: boolean
+
+	/**
+	 * Whether or not the Sprite should flip sides on the x-axis.
+	 *
+	 * @default false
+	 */
+	// flipX?: boolean
+
+	/**
+	 * The start frame of the current animation.
+	 *
+	 * @default 0
+	 */
+	// startFrame?: number
+
+	/**
+	 * The end frame of the current animation.
+	 *
+	 * @default rows * columns - 1
+	 */
+	endFrame?: number;
+
+	/**
+	 * The total number of frames in the spritesheet.
+	 */
+	totalFrames?: number;
+
+	/**
+	 * The number of rows in the spritesheet.
+	 *
+	 * @default 1
+	 */
+	rows?: number;
+
+	/**
+	 * The number of columns in the spritesheet.
+	 *
+	 * @default 1
+	 */
+	columns?: number;
+
+	readonly play?: () => void;
+	readonly pause?: () => void;
+};
+
+export type AnimatedInstancedSpriteEvents = any;
+
+export type AnimatedInstancedSpriteSlots = any;
 
 export default class AnimatedInstancedSprite extends SvelteComponent<
-  AnimatedInstancedSpriteProps,
-  AnimatedInstancedSpriteEvents,
-  AnimatedInstancedSpriteSlots
+	AnimatedInstancedSpriteProps,
+	AnimatedInstancedSpriteEvents,
+	AnimatedInstancedSpriteSlots
 > {}

apps/playground/src/routes/instanced-sprite/PlayerUpdater.svelte

@@ -112,8 +112,6 @@
 		}
 	};
 
-	const { camera } = useThrelte();
-
 	useFrame((_, _delta) => {
 		if ($animationMap.size > 0) {
 			updateAgents(_delta);