How can I debug a GLSL shader on OS X?

Question

How can I debug an OpenGL shader? For example.:

void main(void)
{
    vec2 uv = gl_FragCoord.xy;
    gl_FragColor = vec4(uv,222,1);
}

Is there a way that I can find out what the uv value is?

Answer 1

Debugging a GLSL Shader

---

There is many way to debug a shader, most way are visual rather than outputting the full pixel data of the whole image.

Since shader run in a highly parallel way you can output a lot of visual data at once.

There is also some external application that can help you a lot in debugging glsl shader and also the whole rendering pipeline.

---

visual debugging

This is the simplest form of debugging while the hardest to understand the result. You just have to output the data you want to see to the screen, for example to know what are the value of the uv like you wanted.

You could do it like this :

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Output to screen
    fragColor = vec4(uv, 0.0 ,1.0);
}

In this picture you can see that you have a range from 0 to 1 for the normalized uv. the yellow color mean uv are vec2(1.0,1.0) and black mean vec2(0.0,0.0).

another exampler of visual debugging : (source : https://www.shadertoy.com/view/ts2yzK)

This one is from a raymarching project. there is two thing going one in this image, i debug the depth of the ray and also debug if there is a hit or not.

This image go to see what you have hit or not since white mean hit and black mean miss.

One the other hand this image is bad to display the depth of image. You can have hard time debugging images likes this because of two things :

• negative value who are render black
• value superior to 1.0 who are render white

Value like that lead us to the other type of debugging

---

external application

https://renderdoc.org/

Renderdoc is one of the best debugger out there. Yes there is many other but This one is free to use and has a very wide range of usage.

You can debug vertex glsl shader by seeing the before and after the shader. You can see every pixel of a fragment shader and there value.

You can also see how you data a stored on the GPU and many more things.

---

note for the end

While debugging, visual or not you have to know what you are looking for, you at least have a hit. Visual debugging is one of the hardest thing to debug since usually there is no way to perform you code step by step because of the high parallelism of shaders.

Many bugs are also because we forgot small things, like normalising a value, forgetting a minus sign and more small things.

To spot error and properly debug you have to be thorough and be patient.