Texture inspector for webgl

[Martin]

Hi,
I'm looking for a (chrome) developer tool to show the contents of a specific texture object.

The idea is to select a certain variable in dev tools, if it is a texture object the pixels of the texture will be shown in a separate panel.

I know there is spector.js and similar webgl tools, however I feel most of the time I just want to debug js code and see contents of a texture. Right now i'm dumping the texture to a canvas using my own js-debug-tools which i call from the console. Biggest problem here is that - when hanging in a breakpoint - sometimes the debug-canvas will not be appended to the dom immediately.

Can anyone relate here or has similar use case? Would a "texture inspector" be possible as chrome tool extension?

kind regards,
Martin

[Kai Ninomiya]

As a quick hack, perhaps you can display the image in the dev tools console by using canvas.toBlob() or .toDataURL() and displaying the resulting image in the dev tools console.

-Kai (he/they)

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/007d69c5-ec9a-45c2-9f64-9789254fe559n%40googlegroups.com.

[Martin]

Thanks Kai for this idea. I think the image can be dumped the dev tool console even if the javascript thread is in a breakpoint, right?

I've found another solution in the meantime: the inspected app has now a webworker which maintains a websocket to a small server component which forwards images to a separate inspector browser window.

This works really nice for me: i can dump textures when the main thread is pausing in a breakpoint and I can even monitor texture changes in realtime. 

regards, Martin

[Kai Ninomiya]

On Fri, Nov 26, 2021 at 5:11 AM 'Martin' via WebGL Dev List <webgl-d...@googlegroups.com> wrote:

Thanks Kai for this idea. I think the image can be dumped the dev tool console even if the javascript thread is in a breakpoint, right?

I believe so! Would be interesting to hear if the idea actually works!

 

To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/0234621a-ab01-4515-ac43-30b69e4bc745n%40googlegroups.com.

[Ken Russell]

Hi Martin,

This is a neat idea! If there's anything that can be separated out into a standalone library or tool it would be great if you'd publish it.

Thanks,

-Ken

To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/0234621a-ab01-4515-ac43-30b69e4bc745n%40googlegroups.com.

[Martin]

Hi,

I've just tried the quickhack console approach proposed by Kai, this works for me - even when pausing in breakpoints.

The difficulty I see in writing a texture inspector plugin for dev tools is the context cannot be accessed by only having a texture object. There is no back reference to the context object. 

So there is probably code instrumentation or injecting a script which intercepts gl calls. 

kind regards, Martin

[Jaume Sánchez]

Long time ago -so it's not really maintained- I made this library for threejs https://github.com/spite/THREE.FBOHelper to inspect FBOS (demo: https://www.clicktorelease.com/code/THREE.FBOHelper/#512)

The idea could work similarly for any WebGL context, really.

And I think https://github.com/spite/ShaderEditorExtension supported textures somehow, but syncing texture memory with DevTools panel was pretty slow. Maybe it's changed since then.

If you want the most simple way, there are Custom Formatters for DevTools (demo here: https://www.clicktorelease.com/tools/augmented-console/v2/), which is a slightly more sophisticated way to implement what Kai suggested.

To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/CANxMeyCBLEakF5u3p7F_BzEu61fvFfiURnicyxG%2BKEt_Z40qcQ%40mail.gmail.com.