TSL: Introduce .toInspector(), .before() and node Viewer for Inspector

[sunag]

Related issue: #31869, #31919

Description

The PR introduces the API for individual node inspection and a viewer. The operation is quite simple, the developer just need to use the function node.toInspector(). There are two additional parameters in this function, one to add a custom name and the other to create a custom node visualization .toInspector( node, callback ).

const scenePass = pass( scene, camera ).toInspector();

const scenePassDepth = scenePass.getTextureNode( 'depth' ).toInspector( 'Depth', () => {

	// return linear-depth for the inspector
	return scenePass.getLinearDepthNode();

} );

Live

• backdrop water
• volumetric caustics
• post-processing ssgi

Summary

• CanvasTarget: Remove .samples ( move to Renderer )
• Node: Introduce before()
• TSL: Introduce .toInspector()
• ShadowNode: Add .toInspector()
• Inspector: Add Viewer for nodes
• Update examples

[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	587.02 162.04	587.96 162.29	+931 B +250 B
WebGPU Nodes	585.63 161.79	586.56 162.05	+931 B +253 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	656.48 177.54	657.38 177.78	+907 B +235 B
WebGPU Nodes	610.47 166.71	611.38 166.96	+907 B +252 B

[RenaudRohlinger]

Not sure why but the inspector never starts in dev and in this branch on my local or any rawcdn.githack links:

Or in some case it will start and inspects for a few frames but then stops after a few seconds. Here an example running for a solid minute:

44fps was a value from 30sec+ ago and my macbook pro for sure run the example at 120fps+:

[Makio64]

I just tested it and i dont have the fps / graph stats or anything in performance, the gui controller & nodes works.

macbook pro max M3

[GGAlanSmithee]

sorry if this comment is totally out of place, but it would be nice to be able to see the FPS at all times - ie. not hide the small top right reporter even when the inspector is opened

[sunag]

@RenaudRohlinger , @Makio64
I updated the links with the latest commits, could you detail your experience again?

but it would be nice to be able to see the FPS at all times - ie. not hide the small top right reporter even when the inspector is opened

I didn't do this because it seemed redundant since it's in performance as well, but now that there are new tabs it might make sense.

[Makio64]

@sunag still no fps showing / nothing in performance tabs.

[sunag]

Sorry, try these new links, I think git didn't update :|

• backdrop water
• volumetric caustics
• post-processing ssgi

[Makio64]

it works, 120fps and thats killing it ! Currently working for the weather meteo with lot of rendering for effects.. it will help a tons to debug & improve !

[RenaudRohlinger]

All good now!

[Mugen87]

How am I supposed to close the inspector on mobile devices?

It seems the - button is missing in the mobile view.