How to console.log in webgl shaders?

Question

I'm trying to understand how to simulate console.log in webgl shaders which are written in GLSL. It's easy to get error messages but I can't get how to print custom messages.

Basically I want to print stuff in the browser's console:

<script id="shader-fs1" type="x-shader/x-fragment">
  void main(void) 
  { 
    //console.log doesn't work here since it's GLSL not javascript
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 
  } 
</script>

Any suggestions?

Answer 1

After compiling shader you can do something like:

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(shader));
}

And it will show you any error messages during compiling. GLSL cannot send data back to program in any other form but framebuffer/texture, so you can only check what's happening by inspecting output colors. WebGL inspector might me useful, as pointed by Michael, but not that much for shaders, but for general debugging of webGL apps

Answer 2

Not sure if that is possible, but you may want to check out the WebGL Inspector library for debugging purposes.

Answer 3

Currently there is no known way to output data from GLSL in WebGL except via it's purposed result (screen/image color). Unless you already do I would suggest you check out Learning WebGL, also kick.js might be useful to you.