Different color for hierarchy levels

[mvaligursky]

I'd love to have different colors for different levels in the debug markers to make it more obvious. Currently we use 3 levels and this would make it easier to read.

I also wonder if there is a way to avoid these lines being added:

[brendan-duncan]

Colors are a tricky thing to get right, but I'll see what I can do to improve the readability of nested groups.

[brendan-duncan]

The renderpass groups are useful when you don't have a debug group for each render pass, but I agree they aren't very useful when they are 1:1 with debug groups. I can see if I can reduce their usage in these situations.

[mvaligursky]

Fantastic tool by the way, very happy to find it!

[mvaligursky]

The renderpass groups are useful when you don't have a debug group for each render pass, but I agree they aren't very useful when they are 1:1 with debug groups. I can see if I can reduce their usage in these situations.

If they'd show up only at the start of the RenderPass that would be ok, but they seem to show up inside each 'start' debug marker as well, and that is very redundant.

[brendan-duncan]

I've been playing around with the styling, alternating debug group background colors. I took out the renderpass group headers that were always put into debug groups.

The grouping of commands by render pass and debug group gets really complicated when there are multiple command encoders, particularly when their commands are interleaved. It might be better to organize the commands in their WebGPU queue timeline order, rather than the order they were called. Maybe an experiment for another day.

[mvaligursky]

Hi that looks much better, but I'd be keen to have those a very different colors, not just shades of gray. Something like this (but in a hierarchy format as you have it currently):

So you'd know that top level (render pass) is always red, next level (a layer for me) always green or similar, and individual draw calls are always blue or similar. Easy to scan.

[brendan-duncan]

With your rainbow colors. I'll play around with it a bit more later, I still haven't decided myself if this is useful or obnoxious, but with consistent ordering of debug groups it does make identifying the groups simpler.

[mvaligursky]

Hah yeah this is really colorful :) I changed the way I use the groups now to have less levels (only 3), so it'd be less crazy .. but I see your concern too. Maybe less colorful but not just shades of gray? :)

[brendan-duncan]

I think desaturating the colors a bit helps. Still going to play with the colors some more. Maybe try desaturated and devalued, so the colors are a little bit darker.

[brendan-duncan]

Added some shadows to help separate the groups

[mvaligursky]

Honestly? It looks great, and much easier to read compared to the initial screenshot. Thanks!

[Twinklebear]

I like the look here too, though agree a bit more desaturated/devaluated would probably help it not be as visually "strong"

[brendan-duncan]

I submitted the store version update for review. It also has some fixes for uniform/storage buffer views.

[brendan-duncan]

I think the colors aren't quite as strong in the real devtools page. I think maybe the Windows snapshot screen capture doesn't like my monitor being in HDR mode.

[brendan-duncan]

The updates are on the chrome store version now.