Is it possible to debug GLSL code or print the variable values from within the glsl code while using it with webgl ? Do three.js or scene.js contain any such functionality?
Add a comment
|
3 Answers
Not really,
The way I usually debug GLSL is to output colors. So for example, given 2 shaders like
// vertex shader
uniform mat4 worldViewProjection;
uniform vec3 lightWorldPos;
uniform mat4 world;
uniform mat4 viewInverse;
uniform mat4 worldInverseTranspose;
attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
void main() {
v_texCoord = texCoord;
v_position = (worldViewProjection * position);
v_normal = (worldInverseTranspose * vec4(normal, 0)).xyz;
v_surfaceToLight = lightWorldPos - (world * position).xyz;
v_surfaceToView = (viewInverse[3] - (world * position)).xyz;
gl_Position = v_position;
}
// fragment-shader
precision highp float;
uniform vec4 colorMult;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
uniform sampler2D diffuseSampler;
uniform vec4 specular;
uniform sampler2D bumpSampler;
uniform float shininess;
uniform float specularFactor;
vec4 lit(float l ,float h, float m) {
return vec4(1.0,
max(l, 0.0),
(l > 0.0) ? pow(max(0.0, h), m) : 0.0,
1.0);
}
void main() {
vec4 diffuse = texture2D(diffuseSampler, v_texCoord) * colorMult;
vec3 normal = normalize(v_normal);
vec3 surfaceToLight = normalize(v_surfaceToLight);
vec3 surfaceToView = normalize(v_surfaceToView);
vec3 halfVector = normalize(surfaceToLight + surfaceToView);
vec4 litR = lit(dot(normal, surfaceToLight),
dot(normal, halfVector), shininess);
gl_FragColor = vec4((
vec4(1,1,1,1) * (diffuse * litR.y
+ specular * litR.z * specularFactor)).rgb,
diffuse.a);
}
If I didn't see something on the screen I'd first change the fragment shader to by just adding a line at the end
gl_FragColor = vec4(1,0,0,1); // draw red
If I started to see my geometry then I'd know the issue is probably in the fragment shader. I might check my normals by doing this
gl_FragColor = vec4(v_normal * 0.5 + 0.5, 1);
If the normals looked okay I might check the UV coords with
gl_FragColor = vec4(v_texCoord, 0, 1);
etc...
6 Comments
shinzou
What if the shader breaks when doing
gl_FragColor = vec4(v_normal * 0.5 + 0.5, 1);?What library are you using? Those errors mean your shader is not compiling or linking. Your library should (or you should) print the shaderInfoLog and programInfoLog with
gl.getShaderInfoLog and gl.getProgramInfoLog when your shaders fail to compile or your program fails to link. That will/should tell you where the error is in your shader. Here's one example of calling those functions
Stranger in the Q
Hi @gman , did you know something about webgl shaders debug in 2019? something changed after last activities in this question? thank you
|
There's an old project that compiles shaders to JS for debugging: https://github.com/burg/glsl-simulator
I'm making a TypeScript version that besides compiling GLSL, also adds operator overloading and swizzling to TypeScript: https://github.com/nelipuu/glslog
It's easy to test it at: https://codepen.io/Juha-J-rvi/pen/YzooeGJ
So you can include TypeScript code in a shader, like:
#ifdef TS
print('Hello, World!', abs(pos.xy) + 1);
#endif
The demo is running the same vertex shader on GPU and CPU, the latter of which also prints the logs. The canvas shows GPU output overlaid with wireframe from the CPU, so you can see how they match.
Comments
You can try WebGL-Inspector for this purpose.
1 Comment
Lev
Unfortunately, it debugs calls from Javascript, not actual GLSL.