Inspector: Commands Recorder

[RenaudRohlinger]

Description

Something I’ve been thinking about, it would be really cool if the Inspector could intercept all the commands happening inside the Renderer, so we could actually see what’s going on under the hood.

That kind of visibility could open up a lot of interesting possibilities in the future:

• Taking snapshots at specific points
• Manually stepping through commands one by one
• Better debugging and profiling tools

Basically, it’d be like having a “command timeline” for the renderer, which could make understanding and debugging rendering behavior much easier. Currently I've been using this one but handling this internally would a better solution IMO:

Curious what you think, does this sound like something that could fit into the Inspector?
/cc @sunag @Mugen87 @mrdoob

[sunag]

Following your idea, monitor backend calls would be easier to implement, since we don't have those tools yet, .

Similar to what the code below does, we could find out all the calls for creation of attributes, uinforms, draw, etc.

It would be a monitoring tool with a similar purpose but with greater abstraction; it should work on both backends.

three.js/src/renderers/webgpu/WebGPURenderer.js

Lines 7 to 18 in c745aee

	const debugHandler = {
	get: function ( target, name ) {
	// Add |update
	if ( /^(create|destroy)/.test( name ) ) log( 'WebGPUBackend.' + name );
	return target[ name ];
	}
	};

[Makio64]

Thats something ive been wanting to have forever ! It will also help so much to contribute to optimize the internal renderer!