How to capture the very first frame?

[OndrejSpanel]

I would like to inspect a very first frame rendered by a web page, as it shows some rendering issues not shown in successive frames.

I am not sure if this currently is not possible, or the documentation is lacking (I do not see the Capture/Reload functionality described in http://www.realtimerendering.com/blog/debugging-webgl-with-spectorjs/) however I was to able to do this by clicking on the chrome extension button or Capture / Reload buttons in the extension.

If this is possible, could you describe how?

If this is currently not possible, could such functionality be added?

[Popov72]

It is possible by clicking on the "Reload" button:

it will refresh the page and capture the very first frame.

At least that's what happened when I tested it on the https://playground.babylonjs.com/ page.

Note: it captures a number of commands and not a frame but that should still be valuable

[OndrejSpanel]

I confirm reload does capture https://playground.babylonjs.com/ fine. When I try this with https://threejs.org/examples/webgl_geometry_cube and pressing "reload" though, nothing is captured, it just reloads the page. The same with any other three.js examples I have tried or with my three.js application.

When inspecting the DevTools console I can see an error repeated several times:

VM102:3 The provided value 'function(){var t=c.now,n=y.executeOriginFunction(e.spiedCommandRunningContext,e.spiedCommandName,arguments),i=c.now,r={name:e.spiedCommandName,arguments,result:n,startTime:t,endTime:i};return e.callback(e,r),n}' is not a valid enum value of type PredefinedColorSpace.
e.spy @

[OndrejSpanel]

I am not sure how much is the console error important. It is shown when capturing commands drawingBufferColorSpace and unpackColorSpace. The line showing the error is:

this.spiedCommandRunningContext[this.spiedCommandName] = this.overloadedCommand

Callstack of the error is:

e.spy	@	VM649:formatted:21864
e.spyFunction	@	VM649:formatted:25680
e.spyContext	@	VM649:formatted:25633
e.spy	@	VM649:formatted:25525
e.spyContext	@	VM649:formatted:28703
e.trigger	@	VM649:formatted:16643
t	@	VM649:formatted:25814
getContext	@	three.module.js:27142
WebGLRenderer	@	three.module.js:27182
init	@	webgl_geometry_cube:49
(anonymous)	@	webgl_geometry_cube:31

[sebavan]

This is fixed in master by d7c1910 but as not been deployed yet to the store.

[OndrejSpanel]

Could you please tell me: when the warning appears, does it prevent the capture, or should I look for other cause for that?

[sebavan]

nope it should not block the capture :-)