debug GLSL code in Js

Question

How do I find glsl(in WebGl) program errors and bugs? Because they won't send a message to the console.

Answer 1

Check the compile status and compiler log. I use the following to compile both vertex and fragment shaders for WebGL:
function loadShader(gl, program, src, type) {
let sid = gl.createShader(type);
gl.shaderSource(sid, src);
gl.compileShader(sid);
var compiled = gl.getShaderParameter(sid, gl.COMPILE_STATUS);
if (!compiled) {
console.log('Shader compiled successfully: ' + compiled);
var compilationLog = gl.getShaderInfoLog(sid);
console.log('Shader compiler log: ' + compilationLog);
}
gl.attachShader(program, sid);
}

Answer 2

The question-poster wrote, "Is there any way to display the glsl program variables in the console? Like cout in C++."
Response:
No. You can't print variables from the shader code like you can with cout in c++.
The closest I get to that is passing very simple geometry and uniforms to the shaders and converting those variables to pixel colours or vertex coordinates depending on which type of shader I'm troubleshooting.
There is discussion of a similar question at:
https://computergraphics.stackexchange.com/questions/96/how-can-i-debug-glsl-shaders/101
It mentions a tool called glslDevil which supports breakpoints but it isn't specialized for WebGL, is no longer maintained, and doesn't support recent versions of glsl. https://github.com/GLSL-Debugger/GLSL-Debugger is a fork of glslDevil but it wasn't updated in 3 years either. I never tried to use either of these and imagine isolating the shader from all the JavaScript that sets uniforms and attributes would be more effort than the benefit of using such a tool.

Answer 3

Is there any way to display the glsl program variables in the console? Like cout in C++.

Answer 4

Thank you very much for your response.