dev tools or any debugging API for webGL


I am new to webGL. It would be of great help if you could suggest some good dev tools or debugging API’s for webGL.

Thanks a lot in advance.

Well, mostly it’s about debugging JavaScript - for which there are quite a few tools. I like the built-in tools in the Chrome browser, they have a ton of handy features packed in there.

For debugging the graphics (and especially the shaders) then pretty much whatever tools you’d use to debug any desktop graphics ought to work in theory - things like PIX under Windows - or the nVidia shader debugger if you have an nVidia graphics card. However, those tools often require that you link your program (which in this case is the browser itself!) against a special library. You can get source code for Chrome and Firefox so it’s possible in theory…but to be honest, that’s likely to be an “adventurous” thing to do. I haven’t tried it.

Failing that - debugging shaders generally involves old-school debugging tricks like commenting out chunks of code and copying key variables into colors and sending them to the screen.

I try to start my shaders off super-simple and add features to them in small increments with very frequent testing. When the shader breaks, the odds are high that it was the last thing I did - which narrows the error down to just a few lines of code.

Sometimes it’s a difficult and frustrating process…but fortunately, shaders tend to be short programs without complex flow-control, so the “stare at the code until your eyes bleed” approach to debugging is what I mostly end up doing.

@steve: thanks for the guidance. That kinda helped a lot. :slight_smile: