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?

score 10 · Answer 1 · answered Jul 01 '13 at 07:51

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

This should be the accepted answer. I've console.log'd the $@#% out of a nasty shader error thanks to this. Thanks Abstract. — Daniel Cantarin, Mar 25 '18 at 02:43

score 4 · Answer 2 · answered Jul 01 '13 at 03:37

4

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

answered Jul 01 '13 at 03:37

Michael McGuire

3,770
2
29
28

score 3 · Answer 3 · answered Jul 01 '13 at 06:02

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.

answered Jul 01 '13 at 06:02

havarc

934
5
11

How to console.log in webgl shaders?

3 Answers3