asd

apps/playground/package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.31",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev ",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

apps/playground/src/routes/instanced-sprite-bunny-mark/+page.svelte

@@ -4,7 +4,6 @@
 
 	import { page } from '$app/stores';
 	import { initBunBench } from './mainBunnies';
-	import { fly } from 'svelte/transition';
 
 	const url = $page.url;
 
@@ -80,7 +79,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
-		background-color: black;
+		background-color: rgba(0, 0, 0, 0.35);
 		color: #cccccc;
 		padding: 0.15rem 0.2rem;
 		position: fixed;

apps/playground/src/routes/instanced-sprite-bunny-mark/demon.ts

@@ -9,7 +9,7 @@ import {
 } from 'three';
 
 export const initDemons = async (renderer: WebGLRenderer, scene: Scene, count: number) => {
-	const { texture, spritesheet } = await createSpritesheet()
+	const { texture, spritesheet, geometry } = await createSpritesheet()
 		.add(
 			'/textures/sprites/cacodaemon.png',
 			{
@@ -24,7 +24,13 @@ export const initDemons = async (renderer: WebGLRenderer, scene: Scene, count: n
 				{ name: 'death', frameRange: [24, 31] }
 			]
 		)
-		.build();
+		.build({
+			makeSlimGeometry: true,
+			slimOptions: {
+				vertices: 4,
+				alphaThreshold: 0.01
+			}
+		});
 
 	const baseMaterial = new MeshBasicMaterial({
 		transparent: true,
@@ -34,7 +40,9 @@ export const initDemons = async (renderer: WebGLRenderer, scene: Scene, count: n
 		map: texture
 	});
 
-	const sprite = new InstancedSpriteMesh(baseMaterial, count, renderer);
+	const sprite = new InstancedSpriteMesh(baseMaterial, count, renderer, {
+		geometry
+	});
 
 	sprite.fps = 9;
 	sprite.playmode.setAll('FORWARD');

apps/playground/src/routes/instanced-sprite-bunny-mark/mainBunnies.ts

@@ -1,4 +1,5 @@
 import Stats from 'three/examples/jsm/libs/stats.module.js';
+import { ThreePerf } from 'three-perf';
 
 import {
 	AmbientLight,
@@ -47,16 +48,20 @@ export const initBunBench = async (count = 100000) => {
 
 	const bunnies = await initBunnies(renderer, scene, count);
 
-	sceneSetup();
-	animate();
-
 	function sceneSetup() {
 		const ambient = new AmbientLight('#ddddff', 1.19);
 		scene.add(ambient);
 	}
 
 	window.addEventListener('resize', onWindowResize);
 
+	const perf = new ThreePerf({
+		anchorX: 'left',
+		anchorY: 'bottom',
+		domElement: document.body, // or other canvas rendering wrapper
+		renderer: renderer // three js renderer instance you use for rendering
+	});
+
 	function onWindowResize() {
 		camera.left = 0;
 		camera.right = window.innerWidth;
@@ -69,16 +74,20 @@ export const initBunBench = async (count = 100000) => {
 		renderer.setSize(window.innerWidth, window.innerHeight);
 	}
 
+	sceneSetup();
+	animate();
+
 	function animate() {
 		requestAnimationFrame(animate);
 		stats.begin();
+		perf.begin();
 		// timer.update();
 		// const delta = timer.getDelta();
 		const delta = clock.getDelta();
 
 		bunnies.update(delta);
 		renderer.render(scene, camera);
-
+		perf.end();
 		stats.end();
 	}
 };

apps/playground/src/routes/instanced-sprite-bunny-mark/mainDemons.ts

@@ -1,4 +1,5 @@
 import Stats from 'three/examples/jsm/libs/stats.module.js';
+import { ThreePerf } from 'three-perf';
 
 import {
 	AmbientLight,
@@ -41,16 +42,20 @@ export const initDemonBench = async (count = 100000) => {
 
 	const demons = await initDemons(renderer, scene, count);
 
-	sceneSetup();
-	animate();
-
 	function sceneSetup() {
 		const ambient = new AmbientLight('#ddddff', 1.19);
 		scene.add(ambient);
 	}
 
 	window.addEventListener('resize', onWindowResize);
 
+	const perf = new ThreePerf({
+		anchorX: 'left',
+		anchorY: 'bottom',
+		domElement: document.body, // or other canvas rendering wrapper
+		renderer: renderer // three js renderer instance you use for rendering
+	});
+
 	function onWindowResize() {
 		camera.left = 0;
 		camera.right = window.innerWidth;
@@ -63,16 +68,20 @@ export const initDemonBench = async (count = 100000) => {
 		renderer.setSize(window.innerWidth, window.innerHeight);
 	}
 
+	sceneSetup();
+	animate();
+
 	function animate() {
 		requestAnimationFrame(animate);
 		stats.begin();
+		perf.begin();
 		// timer.update();
 		// const delta = timer.getDelta();
 		const delta = clock.getDelta();
 
 		demons.update(delta);
 		renderer.render(scene, camera);
-
+		perf.end();
 		stats.end();
 	}
 };