Annotating the output command trail

[Robert Monfera]

Is there something like setMarker, with the following differences:

• it'd create a new dummy line as a header,
• it's a separate line, and wouldn't get repeated per command

Something like Apple's annotation, even though these extensions don't seem to be available in browsers. No need to form hierarchies, but it'd be useful to intersperse GL commands with arbitrary text headers, possibly in a distinct color or larger/thicker font.

It's possible to somewhat approximate it with using setMarker then cancelling it after the next GL call, or wrapping this into a utility function that does something noop-y in WebGL / WebGL2 like querying something

[Robert Monfera]

Here's an example for the workaround, wrapping, less than ideally, flush:

const spectorLog = (gl, text) => {
  if (window.spector) {
    window.spector.setMarker(text)
    gl.flush()
    window.spector.clearMarker()
  }
}

The disadvantage of the workaround is that it inflates the GL call count, which is shown rather helpfully
Another drawback is that the dummy WebGL method calls eat into the already quite low (for my current use case) API call count maximum of showing up to 5000 calls

[Robert Monfera]

Just noticed that the green highlight is apparently used for non-marked items, so now my headings and the preexisting green texts are indistinguishable (draw is my purported header):

[JannikGM]

Something like Apple's annotation, even though these extensions don't seem to be available in browsers.

Also see #170 and #171 for requests of features that have already been specified in a more vendor agnostic way.

Just noticed that the green highlight is apparently used for non-marked items

I believe the colors mark redundant state changes.

[sebavan]

I think I could add a new Section API to wrap calls in sections if you find it useful ? basically StartSection, EndSection and they would appear like a command with a special color code as well as being searchable ?

[Robert Monfera]

@JannikGM thanks for the feedback.

@sebavan that would be fantastic. A slight concern is that draw calls are currently highlighted very very saliently and it'd be hard to add styling for the section headers that are even more salient. So maybe the draw call backgrounds could be discontinued (in favor of text coloring) or made more subdued, so the sections can be told apart more easily.

Also, I haven't even considered a section end, as the beginning of a new section marks the end of the previous section, though it might be useful for some. So I don't feel strong either way

[JannikGM]

In other debuggers like apitrace, a debug-group can be collapsed and groups are collapsed by default. I believe that is a very useful feature and it should be easy to implement with HTML. It makes it possible to collapse numerous API interactions into high-level blocks.
If sections within sections are allowed, the output list becomes a tree and users could even recreate the call-stack for each API interaction.

[sebavan]

Let s go for this one instead: #172