three.js icon indicating copy to clipboard operation
three.js copied to clipboard

Inspector: Commands Recorder

Open RenaudRohlinger opened this issue 1 month ago • 2 comments

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: Image

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

RenaudRohlinger avatar Nov 28 '25 08:11 RenaudRohlinger

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.

https://github.com/mrdoob/three.js/blob/c745aee7c0b5297a986818235d2f2ffae029223c/src/renderers/webgpu/WebGPURenderer.js#L7-L18

sunag avatar Nov 28 '25 14:11 sunag

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

Makio64 avatar Dec 01 '25 00:12 Makio64