Complete capture programmatically?

[donmccurdy]

Hi! I've used SpectorJS often in interactive contexts where there's a running frameloop, and I click things in the UI to start a capture and reload the page. It's enormously useful!

Today I'm trying to debug failures in a testing scaffold with many WebGL contexts, and having trouble getting SpectorJS to capture events for the correct canvas during the test period. For various reasons I think I need to do this entirely programmatically — no clicking in the UI — and while I've been trying to follow the basic usage I'm having trouble getting results.

My code looks like this:

  const spector = new SPECTOR.Spector();

  const canvas = document.createElement('canvas');
  canvas.id = 'my-canvas';
  canvas.width = canvas.height = 1;
  document.body.appendChild(canvas);

  // <create webgl context>
  
  spector.displayUI();
  spector.startCapture(canvas);

  // <call gl.drawArrays> 

  spector.stopCapture();

Immediately I see this:

And a few seconds later it updates to:

The canvas I originally captured is listed in the dropdown, but doesn't appear to be selected, and no results are coming up. Am I doing this incorrectly, or is this something where a minimal reproducible example would be helpful?

Thanks!

[Popov72]

I don't know if that helps (I never used Spector programmatically myself):

https://github.com/BabylonJS/Spector.js#basic-usage

[sebavan]

Hey @donmccurdy, sorry for the late reply,

Can you try with:

spector.captureCanvas(renderCanvas, 100000); // 100000 is the max amount of commands to capture

and then

spector.stopCapture(); // this forces to end a capture before the end of the 10s timeout without reaching the max command count

as by default captureCanvas will wait for the next frame.

[donmccurdy]

Thanks @sebavan! I'm hitting some trouble there, but I think it's luma.gl and spector.js fighting over spying on the GL context, and not a spector.js issue as such... I'll try tracking down what's happening and report back if that's anything relevant to spector.js.

In the meantime I'm trying another workaround — if you visit https://deck.gl/examples/heatmap-layer and try to capture the "deckgl-overlay" canvas using the Spector Chrome extensions, do you know of a way to get real output? I'm seeing very limited output, probably just 1 frame, and since the canvas only redraws when the map pans, it doesn't have much:

If there's a way to select the canvas, reload the page, and capture the first X frames on reload, that would probably do it. Or to capture X seconds giving enough time to interactively pan the map.

[sebavan]

sure, you can select the canvas and at the bottom of the capture view select lets say 5000 commands and hit reload :-)

This would reload the page and capture the first 5000 gl call on this canvas. As they are not enough, it will wait 10s to timeout and display the result:

I ll close for now and lets reopen if needed

[donmccurdy]

Thanks @sebavan! Just to spell it out for future readers, the steps required here are:

1. select the canvas in the spector UI
2. increase ___ first commands to around 5000
3. press 'reload'