Generic WebGL State Visualizer

[mrspeaker]

The WebGL State Visualizer tool is mind-blowing. I've used your site a lot over the years, and I thought I had a good grasp of WebGL - but the visualizer tool made everything so clear! It's really a brilliant idea, and fantastic execution.

Now as I'm writing webgl, I am thinking in terms of the tool... I'm annoyed I can't see the nice vertex array table, and links to buffers etc. Is there anyway this could be developed into a more generic standalone tool for any webgl code? Maybe a browser extension plugin or something?

Anyway, feel free to close this "issue" (I just noticed there is already this request anyway) - it's more just a note to say thank you for the great tool!

[greggman]

It would be a non-trivial amount of work to get it to be a dev tool. I don't really know how much work. To get it just working at all might take a week or 2 if lucky? To make it handle all of WebGL2 would probably take quite a while.

Some issues

• one it doesn't handle everything, only what it needed to display the state of the examples. For example it doesn't handle the large number of texture formats
• some things appear not possible, like debugging through transform feedback can crash chrome. Also not sure you can step through queries and syncs.
• it's currently designed to update the UI after every GL command. For debugging you'd just want to to either track state and then update the UI only when you actually pause your app or capture a frame, or you'd probably want it to query all the state rather than record it.

Anyway, yea, I do agree it would be nice but I don't think I have the time to put into it. In the meantime you can try using spector.js. It runs as both an extension or as a library you add in to your app. As a library it's more flexible

[YPOC]

The current state visualizer helps tremendously with understanding how WebGL2 works under the hood. However I find coding something up from scratch still very difficult. It would be so nice if you could input your own code into the state visualizer.

I understand it would be very difficult to visualize all possible states and instructions. The supplied examples all use a fairly limited set of instructions but they achieve a lot with them. Would it be possible to visualize your own code if it only used the same set of instructions already used in the examples? Maybe display a reason why visualization fails, so the user can choose another approach?

[greggman]

unfortunately it would be a lot of work. You'd need to convert this into an extension as there is no easy way to step through javascript from javascript. Further, there are a ton of unsupported features like the 50+ texture formats.

I'm sorry. I agree it would be nice but I don't have the time to do it. It would be 2 or 3 months of full time work I think.