CODEWITHSUNDEEP
debuggingwebglopengl-es-2.0
Petteri H
Petteri H

Reputation: 12232

WebGL debug tools?

I am looking for WebGL debug and inspection tools - something like FireBug for WebGL.

Any recommendations?

Upvotes: 3

Views: 3434

Answers (4)

Kevin
Kevin

Reputation: 1195

I tried out WebGL Inspector, WebGL Insight, and Spector.js.

The first two seem to have the most features if you can get them working. Unfortunately, WebGL Inspector has issues with bundlers and I am using webpack. It has some installation caveats on the Github page to get it working with bundlers, but it's pretty sloppy.

Someone on the Reviews section for WebGL Insight says it might only work if your <canvas> is loaded from the start. Again, I tried moving my canvas creation to index.html as markup, but was unable to get it working.

Spector.js was the only one that worked for me out of the box. Its feature set is more minimal, but you can at least see the state for each frame and stack traces.

Upvotes: 0

Roman Kolesnikov
Roman Kolesnikov

Reputation: 12147

WebGL Inspector is a very good tool, but has many glitches in UI. I can also recommend Canvas debugger and Shader Editor inside FireFox debugger tools (they turned off by default and you should enable them in settings)

Upvotes: 0

Ben-G
Ben-G

Reputation: 5026

As mentioned above WebGL-Inspector is a tool, allowing you to analyze textures and buffers passed into shader programs. For low-level issues advanced tools are necessary which track driver API calls, memory consumption etc.

Depending on the used OS you can use OpenGL/DirectX Debuggers and attach them to your browser.

Upvotes: 0

Petteri H
Petteri H

Reputation: 12232

Just found WebGL Inspector. It claims to be an advanced WebGL debugging toolkit. I haven't personally tried it yet.

http://benvanik.github.com/WebGL-Inspector/

Upvotes: 5

Related Questions