babylonjs/spector.js

Explore and Troubleshoot your WebGL scenes with ease.

spector.js's Issues

Add image comparison to highlight new drawn portions on draw calls.

Add mdn links for commands

Textures Display

Display textures used as shader inputs.

better stacktraces support?

more like feature request, I guess - in firefox there are no stack traces, in chrome stack traces are present but not clickable.

Fix Capture without Early spies

Meaning if spector.spyCanvases has not been called, the RTT should still look reasonable.

Capture Main framebuffer with canvas

Error in r.getWebGlConstant, on frame capture

Chrome Extension version 0.0.10
When capturing a frame, I get the following error:

TypeError: Cannot read property 'name' of undefined
    at r.getWebGlConstant (<anonymous>:1:152159)
    at r.readTextureFromContext (<anonymous>:1:147254)
    at r.readUniformFromContext (<anonymous>:1:146917)
    at r.readFromContext (<anonymous>:1:140688)
    at r.e.readFromContextNoSideEffects (<anonymous>:1:111560)
    at r.e.onConsumeCommand (<anonymous>:1:109506)
    at t.captureState (<anonymous>:1:105345)
    at t.onCommand (<anonymous>:1:91481)
    at WebGLRenderingContext.drawElements (<anonymous>:1:94953)

Show function argument names on the right hand side?

When looking at a function call, like in

the right hand side reads

command Arguments

    0: 0
    1: 3
    2: 5126
    3: 0
    4: 24
    5: 12

It would be great if that read

command Arguments

    index: 0
    size: 3
    type: 5126
    normalized: 0
    stride: 24
    offset: 12

since it's easy to forget which parameter means what, so the second form would show that clearly (btw, the links to the spec in the API call is a great idea!)

Feature request: tagging specific code locations with strings

In some debug and performance tools for the GPU you can tag code with a label. That is, you might be entering, say, a blur pass and you want to know that's where you are when you see the dump of command in Spector.js. You make a debug call at that point, and Spector.js would display the label you've put as a string, e.g.

spector.label('GaussianBlur');

This code does nothing, but Spector.js would print out the label in the command stream shown in debug.

Anyway, there are obviously issues with the format above, since Spector instruments the code, but some way to add dummy code that Spector would use as labeling would be nice. Currently I'm finding I have to do things like count the number of clear commands encountered - ugh. I know about how you can label buffers, but that's different than labeling code locations. Buffers might get reused, a code location gives a specific execution location.

There might also be some WebGL command that I could use instead, some essentially no-operation API command that lets me pass in a string. That would be a kludge, but I'd be happy to use one, if anyone thinks of a way to do this.

Travis Build Failure on Missing File....

https://travis-ci.org/BabylonJS/Spector.js/builds/229372000?utm_source=slack&utm_medium=notification

OSX: Capture Crash on Chrome Canary Webgl 2

http://floooh.github.io/oryol/asmjs/Shapes.html

This requires a bit more information.

Add more Analysis

Analyse frames for redundant and unused commands.

Add Plugin Entry point and Metadata capabilities

Let 3d engines decorate their underlying WebGlObject to add additional custom information or actions.

Fix Shader Beautifier and Nested Loops

Babylon uber shader in Paralax (default sample)

would be nice if the Commands tab showed the amount of commands

Performance/Stability Improvments before final V1.0

Improve performances of both the capture and the display.

Problems with webGL2 in sketchfab

hi,
Just experienced a crash due to spector.js.

Try any scene with the flag ?webgl2=1 at the end, like:

https://sketchfab.com/models/4d9f1a93a4a04b08aec30a8f2f9c6fa2?webgl2=1

A nice crash appear in the screen when spector.js is on.

Triangles, Lines and Points count.

Any chance the extension could count the amount of triangles, lines and points drawn?

Enhance auto scroll behavior

Only auto scroll panels on selection if the elements are out of visual reach.

Add memory tracker.

Add memory tracker to help tracking down weblg objects leaks.

Fix UBO Value capture

Extension Support for Multi tabs to allow comparison

Number format

Format numbers according to their types.

Feature request: WebGL scene export to glTF

I do not know if it is feasible, however I think it is useful to be able to export WebGL scene in glTF format.

The following is an image of the feature.

Shader Display Repeat issue of some sections.

Try capturing this for instance:
https://sketchfab.com/models/8715e3d219cb4a9a9c20e7e8b033ac0d

OSX: TypeError: Converting circular structure to JSON

I'm getting the following error when trying to inspect my deferred rendering demo http://marcinignac.com/experiments/deferred-rendering/demo/

Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at Array.spector.onCapture.add (<anonymous>:21:104)
    at e.trigger (<anonymous>:1:16800)
    at t.triggerCapture (<anonymous>:1:208884)
    at t.onFrameEnd (<anonymous>:1:208721)
    at e.trigger (<anonymous>:1:16800)
    at <anonymous>:1:88005

The display of arguments of drawElements is incorrect

I traced triangle drawing by Babylon.js with Spector.js.
However, I noticed that the arguments of drawElements function are not displayed properly.

void gl.drawElements(mode, count, type, offset);

I think that count and offset arguments should not be displayed as constants.

fails to capture anything that requires user interaction

I want to press red button, go back to my page and do stuff, then go back to spector and press stop button - much like in js profiler. instead I get a message saying to render stuff non-stop or gtfo.

TypeError: Array.prototype.slice called on null or undefined

Forgive me if Spector.js is not intended to work in any WebGL application including those which may not use WebGL correctly.

The Issue

While working on a WebGL2 project I kept getting a null/undefined reference exception here when hitting the record button in the Spector.js Chrome extension.

It seems the call to gl.getVertexAttrib is returning undefined.

A little background on the project

The goal of this project is to use the GPU to simulate the interaction between a collection of particles. Since the particles can interact with any other particle I have to use a combination of textures and VBOs to fetch the vertex attributes. For this reason the vertex positions are being stored in a texture and the rest are stored in the VBO since the position of the particles are the only relevant attributes to neighboring vertices. That means I have to setup a FBO as well as a transform feedback object to write the output of the simulation to both the VBO and the texture.

Here are the source files:
main.js
particlesim.vs
particlesim.fs

Despite calling gl.uniform1i(positionTexLoc, theirTex);
I get RENDER WARNING: there is no texture bound to the unit 0. Which I assume means the sampler in the vertex shader is not being set.

I predict this may be what is causing the error in Spector.js.

WebglConstant displays in Viewport and Scissor Command format.

https://twitter.com/mrdoob/status/872231440150286336

disableVertexAttribArray input interpreted incorrectly

It looks like the index parameter in calls to GL.disableVertexAttribArray(index) is incorrectly interpreted as an enum for GL.drawArrays primitive type. See the following screenshot:

which reads

disableVertexAttribArray: TRIANGLES
disableVertexAttribArray: TRIANGLE_STRIP

whereas it should read

disableVertexAttribArray: 4
disableVertexAttribArray: 5

Capture frame like WebGL Inspector does on loading

I have scene where I am not animating, I would like spector to work in similar manner like WebGL inspector works i.e. on refreshing or loading of page, it captures frames and all webgl calls that were made as well as any color attachments that were used/generated. Is that possible? This tool looks great but it doesn't seems to work with my custom framework. My custom framework only draws static scenes (we don't animate), WebGL inspector (https://benvanik.github.io/WebGL-Inspector/) works as long as our code is webgl 1.0 , something similar to webgl inspector but with all features of spector will be great.

Feature request: programmatic control of Spector captures

I am often dealing with complex problems where a particular condition sets off a particular graphics bug or warning. I would love it if I could turn Spector's capture on and off as needed. That is, I might have

if ( cursor location over particular part ) { Spector.beginRecording(); }

possibly with optional arguments if you want to get fancy, and maybe

if ( Spector.isRecording() ) { Spector.endRecording(); }

If other words, some way to see if we're currently recording so that we could turn it off (or just allow Spector.endRecording() to be called and do nothing if not recording). You'd want to think this through, of course, e.g., what happens if two begins are hit, or no end method is encountered (I'm not quite sure what triggers "end of frame" currently).

Formatting bug.

glReadPixels: format and type incompatible with the current read framebuffer

I try to use Spector with WebGL2 MRT render. I have two framebuffers with 3 R8G8B8A8 attachements
When I started capture I will get errors
[.Offscreen-For-WebGL-0A503658]GL ERROR :GL_INVALID_OPERATION : glReadPixels: format and type incompatible with the current read framebuffer.
Is WebGL2 MRT supported?

Open Shader UX

Should be easy to see the shader from the draw call.

Deploy on extensions stores

Chrome/FF/Edge

An unnecessary trace log is output in the latest version of Spector.js

I discovered that unnecessary trace logs will appear in the latest version of Spector.js.
Relate: #35

OS / Browser : Windows 10 + Chrome 58 + Spector.js v0.2.1

How to reproduce the problem:

1. Install Spector.js from the Chrome Web Store.
   https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk
2. Please access the WebGL sample page with Chrome.
3. Start the Spector.js extension from the toolbar.
   
   Unnecessary trace log (glp -> [object Object]) seems to be outputted.
   

Support for compressed textures information and capture.

Tried capturing "After the Flood" demo: https://playcanv.as/e/p/44MRmJRU/ and some of the uniform samplers are not showing any details.

cc: @guycalledfrank for follow up

Please allow capturing of transient WebGL contexts starting upon page reload

There are unfortunately some feature detection libraries that are starting to query properties from the WebGL context, even though they don't intend to perform any rendering with it. Some functionality was recently added to SpectorJS to capture the command stream upon page reload, but this doesn't work unless SpectorJS notices that a canvas is actively being rendered to.

Here's a simple test case which it would be greatly appreciated if SpectorJS would work with:

<head>
<script>
function run() {
  var c = document.createElement('canvas');
  var gl = c.getContext('webgl');
  var ext = gl.getExtension('WEBGL_debug_renderer_info');
  var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
  document.getElementById('console').innerHTML = renderer;
  window._c = c;
}
</script>
</head>
<body onload="run()">
<div id="console">
</div>
</body>

In this case, the extension doesn't activate, even though it does see that a WebGL context is created; this can be seen by setting an Event Listener Breakpoint on the "Create canvas context" event and noticing that it stops inside SpectorJS's code.

It would be great if SpectorJS would activate at that point and allow capturing of the first context's commands upon page reload, so that we can see what these (usually heavily obfuscated) feature detection libraries are doing.

Thanks.

Framebuffer format limitations

Tried capturing "After the Flood" demo: https://playcanv.as/e/p/44MRmJRU/
Got this in console:
"glReadPixels: format and type incompatible with the current read framebuffer"
Unsurprisingly, no frame captures were produced. Demo uses R11G11B10 format for rendering.

Add Canvas Context 2D support

Capture none integer sized frame buffer.

Capturing this Babylon JS Playground for instance.

Display Mipped Texture uploaded with BufferView

Keyboard keys to navigate API call and canvas framebuffer lists?

When having clicked the keyboard focus to be on a API call, as follows:

It would be nice to be able to use keyboard Up and Down keys to navigate between adjacent API calls, and for example Ctrl-Up and Ctrl-Down to navigate to next/previous draw call.

Similarly, when clicking on the left hand side on a "Canvas frame buffer" icon, it would be nice to be able to use Up and Down keys to navigate between frame buffer states.

Currently Up and Down keys seem to always scroll the API call list view without moving the keyboard focus.

Keep draw calls properties on the right side when looking at shaders + add close button

Allow seeing several captures side by side

Captures are always open in the same tab. As a workaround I open the browser as a different user, capture whatever, and then open the .json captured previously.

Also, at least in linux with chromium-browser, I can't drag a file to the spector pop up (that's why I have to go to some webgl example to capture).

Highlights Draw calls in the Command list

Change the backgrouns colors for clear and draw commands in the command list.

Installing the Spector.js add-on in Firefox will cause the shader editor to stop working

I tried installing Spector.js add-on in Firefox.
https://addons.mozilla.org/en-US/firefox/addon/spector-js/
However, Spector.js works but Firefox's shader editor does not work.
Disabling Spector.js add-on will cause the shader editor to work.

OS / Browser : Windows 10 + Firefox 53.0.3 + Spector.js v0.1.2

Npm/Bower Deploy

Deploy on the different package managers