WebGPURenderer: Introduce Inspector

[sunag]

Description

Inspector

This PR introduces a native inspector for Three.js that can monitor render calls, logs, parameters, and in the future memory usage and nodes as well, such as thumbnails of passes for example.

Since the Node System can feel like a black box, the goal is to show the rendering flow, as well as tips on what could be improved, without seeming intrusive.

There’s still plenty that can be improved, but it looks like we’re on the right track.

To insert the inspector, just add:

renderer.inspector = new Inspector();

The Inspector is added from addons, and since it is not included by default, performance should remain essentially the same.

New look

• A new GUI for parameters was also added for Inspector, initially trying to preserve the existing syntax.
• An example.css file was added in the hope of making the info look better to match the inspector.

Live

I added some error for the tests.

• compute particles snow
• post-processing ssgi
• compute birds

Toggle inspector panel button

Performance

Console

Parameters

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	338.24 79.14	338.24 79.14	+0 B +0 B
WebGPU	580.82 160.43	583.13 161.1	+2.31 kB +679 B
WebGPU Nodes	579.43 160.18	581.74 160.86	+2.31 kB +677 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	469.7 113.74	469.7 113.74	+0 B +0 B
WebGPU	650.35 175.97	652.5 176.58	+2.15 kB +612 B
WebGPU Nodes	604.47 165.15	606.61 165.76	+2.15 kB +606 B

[cmhhelgeson]

Looks nice!

I'm not sure if this is a bug but some of the frame times I'm getting between examples don't seem to correspond to the frame rate.

For instance, SSGI is running at ~20 FPS, with matching frame times of around 50-55 ms.

However, compute birds, which runs at arounds 20fps on low battery and closer to 60fps on battery, always displays a compute frame time around 3-5 ms.

[Mugen87]

This is really awesome! Everything looks so nice and clean! I especially like the new formatting of the example's description.

I love the idea of having a unified GUI for configuration and statistics. In this way, we don't need stats.js and lil-gui anymore.

[sunag]

I'm not sure if this is a bug but some of the frame times I'm getting between examples don't seem to correspond to the frame rate.

I made some fixes and improvements in the inspector, this part should be fine now. I’ll merge and add other improvements in other PRs.