From 9454c06e59bc2b3e5ffdfa1554b829e781f64d7d Mon Sep 17 00:00:00 2001 From: Marcin Jerzak Date: Wed, 6 Mar 2024 21:13:06 +0100 Subject: [PATCH] asd --- apps/playground/package.json | 2 +- .../instanced-sprite-bunny-mark/+page.svelte | 3 +-- .../routes/instanced-sprite-bunny-mark/demon.ts | 14 +++++++++++--- .../instanced-sprite-bunny-mark/mainBunnies.ts | 17 +++++++++++++---- .../instanced-sprite-bunny-mark/mainDemons.ts | 17 +++++++++++++---- 5 files changed, 39 insertions(+), 14 deletions(-) diff --git a/apps/playground/package.json b/apps/playground/package.json index 4afcac7..0c9ebfa 100644 --- a/apps/playground/package.json +++ b/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", diff --git a/apps/playground/src/routes/instanced-sprite-bunny-mark/+page.svelte b/apps/playground/src/routes/instanced-sprite-bunny-mark/+page.svelte index 039f84b..19d48ba 100644 --- a/apps/playground/src/routes/instanced-sprite-bunny-mark/+page.svelte +++ b/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; diff --git a/apps/playground/src/routes/instanced-sprite-bunny-mark/demon.ts b/apps/playground/src/routes/instanced-sprite-bunny-mark/demon.ts index 4b79ce7..5008be0 100644 --- a/apps/playground/src/routes/instanced-sprite-bunny-mark/demon.ts +++ b/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'); diff --git a/apps/playground/src/routes/instanced-sprite-bunny-mark/mainBunnies.ts b/apps/playground/src/routes/instanced-sprite-bunny-mark/mainBunnies.ts index 0ff6311..d4d1dfe 100644 --- a/apps/playground/src/routes/instanced-sprite-bunny-mark/mainBunnies.ts +++ b/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,9 +48,6 @@ 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); @@ -57,6 +55,13 @@ export const initBunBench = async (count = 100000) => { 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(); } }; diff --git a/apps/playground/src/routes/instanced-sprite-bunny-mark/mainDemons.ts b/apps/playground/src/routes/instanced-sprite-bunny-mark/mainDemons.ts index d4411e6..1fc1390 100644 --- a/apps/playground/src/routes/instanced-sprite-bunny-mark/mainDemons.ts +++ b/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,9 +42,6 @@ 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); @@ -51,6 +49,13 @@ export const initDemonBench = async (count = 100000) => { 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(); } };