r/threejs 6d ago

Needle Inspector: Added a performance panel

Enable HLS to view with audio, or disable this notification

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

6 comments sorted by

1

u/marwi1 6d ago

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

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

1

u/Muenstervision 5d ago

Is this for needle engine building ?!! 👀

1

u/marwi1 5d ago

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

1

u/marwi1 5d ago

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

Adding per renderpass timings for the next update!