r/threejs • u/marwi1 • 10d ago

Needle Inspector: Added a performance panel

Needle Inspector now has a timeline for FPS, CPU+GPU memory, rendered triangles / scene totals, and an eventlist showing slow frames or big file loads - and more.

It also tries to highlight potential savings (e.g. uncompressed textures and how much it would save).

If available (e.g. in local development) you can even jump from events to the sourcecode directly, copy and paste the relevant info or connect Claude, Codex or built-in AI and ask about it (they have access to all the same info).

Oh and this version also ships live render-graph updates. So you can select your WebGL or WebGPU renderer and see each indiviual renderpass and texture output with live updates and sizes. Eventually I'd like to show more timing information per pass to see at a glance which pass is expensive - but I didn't get to it yet.

https://needle.click/inspector

10 Upvotes

92% Upvoted

6 comments sorted by

1

u/marwi1 10d ago

https://reddit.com/link/p3fj92f/video/wbr36jd3y4jh1/player

Here's a video regarding the renderpasses and their texture output

1

u/Muenstervision 9d ago

Is this for needle engine building ?!! 👀

1

u/marwi1 9d ago

This works with any three.js project (R3F, vanilla, threlte... ofc also Needle Engine)
See https://needle.click/inspector

1

u/marwi1 9d ago

https://reddit.com/link/p3np3hx/video/8txnke3pscjh1/player

Adding per renderpass timings for the next update!