LearnOpenGL

Debugging.html (30057B)

---

     <h1 id="content-title">Debugging</h1>
 <h1 id="content-url" style='display:none;'>In-Practice/Debugging</h1>
 <p>
   Graphics programming can be a lot of fun, but it can also be a large source of frustration whenever something isn't rendering just right, or perhaps not even rendering at all! Seeing as most of what we do involves manipulating pixels, it can be difficult to figure out the cause of error whenever something doesn't work the way it's supposed to. Debugging these kinds of <em>visual</em> errors is different than what you're used to when debugging errors on the CPU. We have no console to output text to, no breakpoints to set on GLSL code, and no way of easily checking the state of GPU execution.
 </p>
 
 <p>
   In this chapter we'll look into several techniques and tricks of debugging your OpenGL program. Debugging in OpenGL is not too difficult to do and getting a grasp of its techniques definitely pays out in the long run.
 </p>
 
 <h2>glGetError()</h2>
 <p>
   The moment you incorrectly use OpenGL (like configuring a buffer without first binding any) it will take notice and generate one or more user error flags behind the scenes. We can query these error flags using a function named <fun>glGetError</fun> that checks the error flag(s) set and returns an error value if OpenGL got misused:
 </p>
 
 <pre><code>
 GLenum glGetError();  
 </code></pre>
 
 <p>
   
   The moment <fun>glGetError</fun> is called, it returns either an error flag or no error at all. The error codes that <fun>glGetError</fun> can return are listed below:
 </p>
 
 <table>
   <tr>
     <th>Flag</th>
     <th>Code</th>
     <th>Description</th>
   </tr>
   <tr>
     <td><var>GL_NO_ERROR</var></td>
     <td>0</td>
     <td>No user error reported since the last call to <fun>glGetError</fun>.</td>
   </tr>  
   <tr>
     <td><var>GL_INVALID_ENUM</var></td>
     <td>1280</td>
     <td>Set when an enumeration parameter is not legal.</td>
   </tr>  
   <tr>
     <td><var>GL_INVALID_VALUE</var></td>
     <td>1281</td>
     <td>Set when a value parameter is not legal.</td>
   </tr>  
   <tr>
     <td><var>GL_INVALID_OPERATION</var></td>
     <td>1282</td>
     <td>Set when the state for a command is not legal for its given parameters.</td>
   </tr>  
   <tr>
     <td><var>GL_STACK_OVERFLOW</var></td>
     <td>1283</td>
     <td>Set when a stack pushing operation causes a stack overflow.</td>
   </tr>  
   <tr>
     <td><var>GL_STACK_UNDERFLOW</var></td>
     <td>1284</td>
     <td>Set when a stack popping operation occurs while the stack is at its lowest point.</td>
   </tr>  
   <tr>
     <td><var>GL_OUT_OF_MEMORY</var></td>
     <td>1285</td>
     <td>Set when a memory allocation operation cannot allocate (enough) memory.</td>
   </tr>  
   <tr>
     <td><var>GL_INVALID_FRAMEBUFFER_OPERATION</var></td>
     <td>1286</td>
     <td>Set when reading or writing to a framebuffer that is not complete.</td>
   </tr>  
 </table>
 
 <p>
   Within OpenGL's function documentation you can always find the error codes a function generates the moment it is incorrectly used. For instance, if you take a look at the documentation of <a href="http://docs.gl/gl3/glBindTextur%65" target="_blank"><function id='48'>glBindTexture</function></a> function, you can find all the user error codes it could generate under the <em>Errors</em> section.
 </p>
 
 <p>
   The moment an error flag is set, no other error flags will be reported. Furthermore, the moment <fun>glGetError</fun> is called it clears all error flags (or only one if on a distributed system, see note below). This means that if you call <fun>glGetError</fun> once at the end of each frame and it returns an error, you can't conclude this was the only error, and the source of the error could've been anywhere in the frame.
 </p>
 
 <note>
   Note that when OpenGL runs distributedly like frequently found on X11 systems, other user error codes can still be generated as long as they have different error codes. Calling <fun>glGetError</fun> then only resets one of the error code flags instead of all of them. Because of this, it is recommended to call <fun>glGetError</fun> inside a loop.
 </note>
 
 <pre><code>
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, tex);
 std::cout &lt;&lt; glGetError() &lt;&lt; std::endl; // returns 0 (no error)
   
 <function id='52'>glTexImage2D</function>(GL_TEXTURE_3D, 0, GL_RGB, 512, 512, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
 std::cout &lt;&lt; glGetError() &lt;&lt; std::endl; // returns 1280 (invalid enum)
   
 <function id='50'>glGenTextures</function>(-5, textures);
 std::cout &lt;&lt; glGetError() &lt;&lt; std::endl; // returns 1281 (invalid value)
   
 std::cout &lt;&lt; glGetError() &lt;&lt; std::endl; // returns 0 (no error)
 </code></pre>
 
 <p>
   The great thing about <fun>glGetError</fun> is that it makes it relatively easy to pinpoint where any error may be and to validate the proper use of OpenGL. Let's say you get a black screen and you have no idea what's causing it: is the framebuffer not properly set? Did I forget to bind a texture? By calling <fun>glGetError</fun> all over your codebase, you can quickly catch the first place an OpenGL error starts showing up. 
 </p>
 
 <p>
   By default <fun>glGetError</fun> only prints error numbers, which isn't easy to understand unless you've memorized the error codes. It often makes sense to write a small helper function to easily print out the error strings together with where the error check function was called: 
 </p>
 
 <pre><code>
 GLenum glCheckError_(const char *file, int line)
 {
     GLenum errorCode;
     while ((errorCode = glGetError()) != GL_NO_ERROR)
     {
         std::string error;
         switch (errorCode)
         {
             case GL_INVALID_ENUM:                  error = "INVALID_ENUM"; break;
             case GL_INVALID_VALUE:                 error = "INVALID_VALUE"; break;
             case GL_INVALID_OPERATION:             error = "INVALID_OPERATION"; break;
             case GL_STACK_OVERFLOW:                error = "STACK_OVERFLOW"; break;
             case GL_STACK_UNDERFLOW:               error = "STACK_UNDERFLOW"; break;
             case GL_OUT_OF_MEMORY:                 error = "OUT_OF_MEMORY"; break;
             case GL_INVALID_FRAMEBUFFER_OPERATION: error = "INVALID_FRAMEBUFFER_OPERATION"; break;
         }
         std::cout &lt;&lt; error &lt;&lt; " | " &lt;&lt; file &lt;&lt; " (" &lt;&lt; line &lt;&lt; ")" &lt;&lt; std::endl;
     }
     return errorCode;
 }
 #define glCheckError() glCheckError_(__FILE__, __LINE__) 
 </code></pre>
 
 <p>
   In case you're unaware of what the preprocessor directives <code>__FILE__</code> and <code>__LINE__</code> are: these variables get replaced during compile time with the respective file and line they were compiled in. If we decide to stick a large number of these <fun>glCheckError</fun> calls in our codebase it's helpful to more precisely know which <fun>glCheckError</fun> call returned the error.
 </p>
 
 <pre><code>
 <function id='32'>glBindBuffer</function>(GL_VERTEX_ARRAY, vbo);
 glCheckError(); 
 </code></pre>
 
 <p>
   This will give us the following output:
 </p>
 
 <img src="/img/in-practice/debugging_glgeterror.png" alt="Output of glGetError in OpenGL debugging."/>
 
 <p>
   <fun>glGetError</fun> doesn't help you too much as the information it returns is rather simple, but it does often help you catch typos or quickly pinpoint where in your code things went wrong; a simple but effective tool in your debugging toolkit.
 </p>
 
 
 <h2>Debug output</h2>
 <p>
   A less common, but more useful tool than <fun>glCheckError</fun> is an OpenGL extension called <def>debug output</def> that became part of core OpenGL since version 4.3. With the debug output extension, OpenGL itself will directly send an error or warning message to the user with a lot more details compared to <fun>glCheckError</fun>. Not only does it provide more information, it can also help you catch errors exactly where they occur by intelligently using a debugger.
 </p>
 
 <note>
   Debug output is core since OpenGL version 4.3, which means you'll find this functionality on any machine that runs OpenGL 4.3 or higher. If they're not available, its functionality can be queried from the <code>ARB_debug_output</code> or <code>AMD_debug_output</code> extension. Note that OS X does not seem to support debug output functionality (as gathered online).
 </note>
 
 <p>
   In order to start using debug output we have to request a debug output context from OpenGL at our initialization process. This process varies based on whatever windowing system you use; here we will discuss setting it up on GLFW, but you can find info on other systems in the additional resources at the end of the chapter.
 </p>
 
 <h3>Debug output in GLFW</h3>
 <p>
   Requesting a debug context in GLFW is surprisingly easy as all we have to do is pass a hint to GLFW that we'd like to have a debug output context. We have to do this before we call <fun><function id='20'>glfwCreateWindow</function></fun>:
 </p>
 
 <pre><code>
 <function id='18'>glfwWindowHint</function>(GLFW_OPENGL_DEBUG_CONTEXT, true);  
 </code></pre>
 
 <p>
   Once we've then initialized GLFW, we should have a debug context if we're using OpenGL version 4.3 or higher. If not, we have to take our chances and hope the system is still able to request a debug context. Otherwise we have to request debug output using its OpenGL extension(s). 
 </p>
 
 <note>
   Using OpenGL in debug context can be significantly slower compared to a non-debug context, so when working on optimizations or releasing your application you want to remove GLFW's debug request hint.
 </note>
   
 <p>
   To check if we successfully initialized a debug context we can query OpenGL:
 </p>
 
 <pre><code>
 int flags; glGetIntegerv(GL_CONTEXT_FLAGS, &flags);
 if (flags & GL_CONTEXT_FLAG_DEBUG_BIT)
 {
     // initialize debug output 
 }
 </code></pre>
 
 <p>
   The way debug output works is that we pass OpenGL an error logging function callback (similar to GLFW's input callbacks) and in the callback function we are free to process the OpenGL error data as we see fit; in our case we'll be displaying useful error data to the console. Below is the callback function prototype that OpenGL expects for debug output:
 </p>
 
 <pre><code>
 void APIENTRY glDebugOutput(GLenum source, GLenum type, unsigned int id, GLenum severity, 
                             GLsizei length, const char *message, const void *userParam);
 </code></pre>
   
 <p>
   Given the large set of data we have at our exposal, we can create a useful error printing tool like below:
 </p>
 
 <pre><code>
 void APIENTRY glDebugOutput(GLenum source, 
                             GLenum type, 
                             unsigned int id, 
                             GLenum severity, 
                             GLsizei length, 
                             const char *message, 
                             const void *userParam)
 {
     // ignore non-significant error/warning codes
     if(id == 131169 || id == 131185 || id == 131218 || id == 131204) return; 
 
     std::cout &lt;&lt; "---------------" &lt;&lt; std::endl;
     std::cout &lt;&lt; "Debug message (" &lt;&lt; id &lt;&lt; "): " &lt;&lt;  message &lt;&lt; std::endl;
 
     switch (source)
     {
         case GL_DEBUG_SOURCE_API:             std::cout &lt;&lt; "Source: API"; break;
         case GL_DEBUG_SOURCE_WINDOW_SYSTEM:   std::cout &lt;&lt; "Source: Window System"; break;
         case GL_DEBUG_SOURCE_SHADER_COMPILER: std::cout &lt;&lt; "Source: Shader Compiler"; break;
         case GL_DEBUG_SOURCE_THIRD_PARTY:     std::cout &lt;&lt; "Source: Third Party"; break;
         case GL_DEBUG_SOURCE_APPLICATION:     std::cout &lt;&lt; "Source: Application"; break;
         case GL_DEBUG_SOURCE_OTHER:           std::cout &lt;&lt; "Source: Other"; break;
     } std::cout &lt;&lt; std::endl;
 
     switch (type)
     {
         case GL_DEBUG_TYPE_ERROR:               std::cout &lt;&lt; "Type: Error"; break;
         case GL_DEBUG_TYPE_DEPRECATED_BEHAVIOR: std::cout &lt;&lt; "Type: Deprecated Behaviour"; break;
         case GL_DEBUG_TYPE_UNDEFINED_BEHAVIOR:  std::cout &lt;&lt; "Type: Undefined Behaviour"; break; 
         case GL_DEBUG_TYPE_PORTABILITY:         std::cout &lt;&lt; "Type: Portability"; break;
         case GL_DEBUG_TYPE_PERFORMANCE:         std::cout &lt;&lt; "Type: Performance"; break;
         case GL_DEBUG_TYPE_MARKER:              std::cout &lt;&lt; "Type: Marker"; break;
         case GL_DEBUG_TYPE_PUSH_GROUP:          std::cout &lt;&lt; "Type: Push Group"; break;
         case GL_DEBUG_TYPE_POP_GROUP:           std::cout &lt;&lt; "Type: Pop Group"; break;
         case GL_DEBUG_TYPE_OTHER:               std::cout &lt;&lt; "Type: Other"; break;
     } std::cout &lt;&lt; std::endl;
     
     switch (severity)
     {
         case GL_DEBUG_SEVERITY_HIGH:         std::cout &lt;&lt; "Severity: high"; break;
         case GL_DEBUG_SEVERITY_MEDIUM:       std::cout &lt;&lt; "Severity: medium"; break;
         case GL_DEBUG_SEVERITY_LOW:          std::cout &lt;&lt; "Severity: low"; break;
         case GL_DEBUG_SEVERITY_NOTIFICATION: std::cout &lt;&lt; "Severity: notification"; break;
     } std::cout &lt;&lt; std::endl;
     std::cout &lt;&lt; std::endl;
 }
 </code></pre>
 
 <p>
   Whenever debug output detects an OpenGL error, it will call this callback function and we'll be able to print out a large deal of information regarding the OpenGL error. Note that we ignore a few error codes that tend to not really display anything useful (like <code>131185</code> in NVidia drivers that tells us a buffer was successfully created).
 </p>
 
 <p>
   Now that we have the callback function it's time to initialize debug output:
 </p>
 
 <pre><code>
 if (flags & GL_CONTEXT_FLAG_DEBUG_BIT)
 {
     <function id='60'>glEnable</function>(GL_DEBUG_OUTPUT);
     <function id='60'>glEnable</function>(GL_DEBUG_OUTPUT_SYNCHRONOUS); 
     glDebugMessageCallback(glDebugOutput, nullptr);
     glDebugMessageControl(GL_DONT_CARE, GL_DONT_CARE, GL_DONT_CARE, 0, nullptr, GL_TRUE);
 } 
 </code></pre>
 
 <p>
   Here we tell OpenGL to enable debug output. The <code><function id='60'>glEnable</function>(GL_DEBUG_SYNCRHONOUS)</code> call tells OpenGL to directly call the callback function the moment an error occurred. 
 </p>
 
 <h3>Filter debug output</h3>
 <p>
   With <fun>glDebugMessageControl</fun> you can potentially filter the type(s) of errors you'd like to receive a message from. In our case we decided to not filter on any of the sources, types, or severity rates. If we wanted to only show messages from the OpenGL API, that are errors, and have a high severity, we'd configure it as follows: 
 </p>
 
 <pre><code>
 glDebugMessageControl(GL_DEBUG_SOURCE_API, 
                       GL_DEBUG_TYPE_ERROR, 
                       GL_DEBUG_SEVERITY_HIGH,
                       0, nullptr, GL_TRUE); 
 </code></pre>
 
 <p>
   Given our configuration, and assuming you have a context that supports debug output, every incorrect OpenGL command will now print a large bundle of useful data:
 </p>
 
 <img src="/img/in-practice/debugging_debug_output.png" alt="Output of OpenGL debug output on a text console."/>
   
 <h3>Backtracking the debug error source</h3>
 <p>
   Another great trick with debug output is that you can relatively easy figure out the exact line or call an error occurred. By setting a breakpoint in <fun>DebugOutput</fun> at a specific error type (or at the top of the function if you don't care), the debugger will catch the error thrown and you can move up the call stack to whatever function caused the message dispatch:
 </p>
   
   <img src="/img/in-practice/debugging_debug_output_breakpoint.png" alt="Setting a breaking and using the callstack in OpenGL to catch the line of an error with debug output."/>    
     
 <p>
   It requires some manual intervention, but if you roughly know what you're looking for it's incredibly useful to quickly determine which call causes an error.
 </p>
   
 <h3>Custom error output</h3>
 <p>
   Aside from reading messages, we can also push messages to the debug output system with <fun>glDebugMessageInsert</fun>:
 </p>
 
 <pre><code>
 glDebugMessageInsert(GL_DEBUG_SOURCE_APPLICATION, GL_DEBUG_TYPE_ERROR, 0,                       
                      GL_DEBUG_SEVERITY_MEDIUM, -1, "error message here"); 
 </code></pre>
 
 <p>
   This is especially useful if you're hooking into other application or OpenGL code that makes use of a debug output context. Other developers can quickly figure out any <em>reported</em> bug that occurs in your custom OpenGL code.
 </p>
     
 <p>
   In summary, debug output (if you can use it) is incredibly useful for quickly catching errors and is well worth the effort in setting up as it saves considerable development time. You can find a source code example <a href="/code_viewer_gh.php?code=src/7.in_practice/1.debugging/debugging.cpp" target="_blank">here</a> with both <fun>glGetError</fun> and debug output context configured; see if you can fix all the errors.
 </p>
 
 <h2>Debugging shader output</h2>
 <p>
   When it comes to GLSL, we unfortunately don't have access to a function like <fun>glGetError</fun> nor the ability to step through the shader code. When you end up with a black screen or the completely wrong visuals, it's often difficult to figure out if something's wrong with the shader code. Yes, we have the compilation error reports that report syntax errors, but catching the semantic errors is another beast.
 </p>
 
 <p>
   One frequently used trick to figure out what is wrong with a shader is to evaluate all the relevant variables in a shader program by sending them directly to the fragment shader's output channel. By outputting shader variables directly to the output color channels, we can convey interesting information by inspecting the visual results. For instance, let's say we want to check if a model has correct normal vectors. We can pass them (either transformed or untransformed) from the vertex shader to the fragment shader where we'd then output the normals as follows:
 </p>
 
 <pre><code>
 #version 330 core
 out vec4 FragColor;
 in vec3 Normal;
 [...]
   
 void main()
 {
     [...]
     FragColor.rgb = Normal;
     FragColor.a = 1.0f;
 }
 </code></pre>
 
 <p>
   By outputting a (non-color) variable to the output color channel like this we can quickly inspect if the variable is, as far as you can tell, displaying correct values. If, for instance, the visual result is completely black it is clear the normal vectors aren't correctly passed to the shaders; and when they are displayed it's relatively easy to check if they're (sort of) correct or not:
 </p>
 
 <img src="/img/in-practice/debugging_glsl_output.png" alt="The image of a 3D model with its normal vectors displayed as the fragment shader output in OpenGL for debugging"/>
   
 <p>
   From the visual results we can see the world-space normal vectors appear to be correct as the right sides of the backpack model is mostly colored red (which would mean the normals roughly point (correctly) towards the positive x axis). Similarly, the front side of the backpack is mostly colored towards the positive z axis (blue). 
 </p>
   
 <p>
   This approach can easily extend to any type of variable you'd like to test. Whenever you get stuck and suspect there's something wrong with your shaders, try displaying multiple variables and/or intermediate results to see at which part of the algorithm something's missing or seemingly incorrect.
 </p>
   
 <h2>OpenGL GLSL reference compiler</h2>
 <p>
   Each driver has its own quirks and tidbits; for instance, NVIDIA drivers are more flexible and tend to overlook some restrictions on the specification, while ATI/AMD drivers tend to better enforce the OpenGL specification (which is the better approach in my opinion). The result of this is that shaders on one machine may not work on the other due to driver differences. 
 </p>
   
 <p>
   With years of experience you'll eventually get to learn the minor differences between GPU vendors, but if you want to be sure your shader code runs on all kinds of machines you can directly check your shader code against the official specification using OpenGL's GLSL <a href="https://www.khronos.org/opengles/sdk/tools/Reference-Compiler/" target="_blank">reference compiler</a>. You can download the so called <def>GLSL lang validator</def> binaries from <a href="https://www.khronos.org/opengles/sdk/tools/Reference-Compiler/" target="_blank">here</a> or its complete source code from <a href="https://github.com/KhronosGroup/glslang" target="_blank">here</a>.
 </p>
   
 <p>
   Given the binary GLSL lang validator you can easily check your shader code by passing it as the binary's first argument. Keep in mind that the GLSL lang validator determines the type of shader by a list of fixed extensions:
 <p>
   
 <ul>
   <li><code>.vert</code>: vertex shader.</li>
   <li><code>.frag</code>: fragment shader.</li>
   <li><code>.geom</code>: geometry shader.</li>
   <li><code>.tesc</code>: tessellation control shader.</li>
   <li><code>.tese</code>: tessellation evaluation shader.</li>
   <li><code>.comp</code>: compute shader.</li>
 </ul>
   
 <p>
   Running the GLSL reference compiler is as simple as:
 </p>
   
 <pre><code>
 glsllangvalidator shaderFile.vert  
 </code></pre>
   
 <p>
   Note that if it detects no error, it returns no output. Testing the GLSL reference compiler on a broken vertex shader gives the following output:
 </p>
   
   <img src="/img/in-practice/debugging_glsl_reference_compiler.png" alt="Output of the GLSL reference compiler (GLSL lang validator) in OpenGL"/>
     
 <p>
   It won't show you the subtle differences between AMD, NVidia, or Intel GLSL compilers, nor will it help you completely bug proof your shaders, but it does at least help you to check your shaders against the direct GLSL specification. 
 </p>
 
 <h2>Framebuffer output</h2>
 <p>
   Another useful trick for your debugging toolkit is displaying a framebuffer's content(s) in some pre-defined region of your screen. You're likely to use  <a href="https://learnopengl.com/Advanced-OpenGL/Framebuffers" target="_blank">framebuffers</a> quite often and, as most of their magic happens behind the scenes, it's sometimes difficult to figure out what's going on. Displaying the content(s) of a framebuffer on your screen is a useful trick to quickly see if things look correct.
 </p>
 
 <note>
    Note that displaying the contents (attachments) of a framebuffer as explained here only works on texture attachments, not render buffer objects.
 </note>
   
 <p>
   Using a simple shader that only displays a texture, we can easily write a small helper function to quickly display any texture at the top-right of the screen:
 </p>
   
 <pre><code>
 // vertex shader
 #version 330 core
 layout (location = 0) in vec2 position;
 layout (location = 1) in vec2 texCoords;
 
 out vec2 TexCoords;
 
 void main()
 {
     gl_Position = vec4(position, 0.0f, 1.0f);
     TexCoords = texCoords;
 }
   
 // fragment shader
 #version 330 core
 out vec4 FragColor;
 in  vec2 TexCoords;
   
 uniform sampler2D fboAttachment;
   
 void main()
 {
     FragColor = texture(fboAttachment, TexCoords);
 } 
 </code></pre>
   
 <pre><code>  
 void DisplayFramebufferTexture(unsigned int textureID)
 {
     if (!notInitialized)
     {
         // initialize shader and vao w/ NDC vertex coordinates at top-right of the screen
         [...]
     }
   
     <function id='49'>glActiveTexture</function>(GL_TEXTURE0);  	
     <function id='28'>glUseProgram</function>(shaderDisplayFBOOutput);
         <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, textureID);
         <function id='27'>glBindVertexArray</function>(vaoDebugTexturedRect);
             <function id='1'>glDrawArrays</function>(GL_TRIANGLES, 0, 6);
         <function id='27'>glBindVertexArray</function>(0);
     <function id='28'>glUseProgram</function>(0);
 }
   
 int main()
 {
     [...]
     while (!<function id='14'>glfwWindowShouldClose</function>(window))
     {
         [...]
         DisplayFramebufferTexture(fboAttachment0);
         
         <function id='24'>glfwSwapBuffers</function>(window);
     }
 }  
 </code></pre>
 
 <p>
   This will give you a nice little window at the corner of your screen for debugging framebuffer output. Useful, for example, for determining if the normal vectors of the geometry pass in a deferred renderer look correct:
 </p>
   
   <img src="/img/in-practice/debugging_fbo_output.png" alt="Framebuffer attachment output to a texture for debugging purposes in OpenGL"/>
 
 <p>
   You can of course extend such a utility function to support rendering more than one texture. This is a quick and dirty way to get continuous feedback from whatever is in your framebuffer(s).
 </p>
 
 <h2>External debugging software</h2>
 <p>
   When all else fails there is still the option to use a 3rd party tool to help us in our debugging efforts. Third party applications often inject themselves in the OpenGL drivers and are able to intercept all kinds of OpenGL calls to give you a large array of interesting data. These tools can help you in all kinds of ways like: profiling OpenGL function usage, finding bottlenecks, inspecting buffer memory, and displaying textures and framebuffer attachments. When you're working on (large) production code, these kinds of tools can become invaluable in your development process.
 </p>
     
 <p>
     I've listed some of the more popular debugging tools here; try out several of them to see which fits your needs the best.
 </p>
     
 <!--<h3>gDebugger</h3>
 <p>
   gDebugger is a cross-platform and easy to use debugging tool for OpenGL applications. gDebugger sits alongside your running OpenGL application and provides a detailed overview of the running OpenGL state. You can pause the application at any moment to inspect the current state, texture memory and/or buffer usage. You can download gDebugger <a href="http://www.gremedy.com/" target="_blank">here</a>.
 </p>
     
 <p>
   Running gDebugger is as easy as opening the application, creating a new project and giving it the location and working directory of your OpenGL executable.
 </p>
     
     <img src="/img/in-practice/debugging_external_gdebugger.png" alt="Image of gDebugger running on an OpenGL application.">
 -->      
     
 <!--<h3>APItrace</h3>
 <p>
  <a href="https://github.com/apitrace/apitrace" target="_blank">APItrace</a>
 </p>-->
     
 <h3>RenderDoc</h3>
 <p>
   RenderDoc is a great (completely <a href="https://github.com/baldurk/renderdoc" target="_blank">open source</a>) standalone debugging tool. To start a capture, you specify the executable you'd like to capture and a working directory. The application then runs as usual, and whenever you want to inspect a particular frame, you let RenderDoc capture one or more frames at the executable's current state. Within the captured frame(s) you can view the pipeline state, all OpenGL commands, buffer storage, and textures in use.
 </p>
       
 <img src="/img/in-practice/debugging_external_renderdoc.png" alt="Image of RenderDoc running on an OpenGL application."/>
     
 <h3>CodeXL</h3>
 <p>
   <a href="https://gpuopen.com/compute-product/codexl/" target="_blank">CodeXL</a> is GPU debugging tool released as both a standalone tool and a Visual Studio plugin. CodeXL gives a good set of information and is great for profiling graphics applications. CodeXL also works on NVidia or Intel cards, but without support for OpenCL debugging.
 </p>
   
   <img src="/img/in-practice/debugging_external_codexl.png" alt="Image of CodeXL running on an OpenGL application."/>
     
 <p>
   I personally don't have much experience with CodeXL since I found RenderDoc easier to use, but I've included it anyways as it looks to be a pretty solid tool and developed by one of the larger GPU manufacturers.
 </p>
     
 <h3>NVIDIA Nsight</h3>
 <p>
   NVIDIA's popular <a href="https://developer.nvidia.com/nvidia-nsight-visual-studio-edition" target="_blank">Nsight</a> GPU debugging tool is not a standalone tool, but a plugin to either the Visual Studio IDE or the Eclipse IDE (NVIDIA now has a <a href="https://developer.nvidia.com/nsight-graphics" target="_blank">standalone version</a> as well). The Nsight plugin is an incredibly useful tool for graphics developers as it gives a large host of run-time statistics regarding GPU usage and the frame-by-frame GPU state. 
     </p>
     
 <p>
   The moment you start your application from within Visual Studio (or Eclipse), using Nsight's debugging or profiling commands, Nsight will run within the application itself. The great thing about Nsight is that it renders an overlay GUI system from within your application that you can use to gather all kinds of interesting information about your application, both at run-time and during frame-by-frame analysis. 
 </p>
   
   <img src="/img/in-practice/debugging_external_nsight.png" alt="Image of RenderDoc running on an OpenGL application."/>
     
 <p>
   Nsight is an incredibly useful tool, but it does come with one major drawback in that it only works on NVIDIA cards. If you are working on NVIDIA cards (and use Visual Studio) it's definitely worth a shot.
 </p>
 
 <p>
   I'm sure there's plenty of other debugging tools I've missed (some that come to mind are Valve's <a href="https://github.com/ValveSoftware/vogl" target="_blank">VOGL</a> and <a href="https://apitrace.github.io/" target="_blank">APItrace</a>), but I feel this list should already get you plenty of tools to experiment with. 
 </p>
 
 <h2>Additional resources</h2>
 <ul>
   <li><a href="http://retokoradi.com/2014/04/21/opengl-why-is-your-code-producing-a-black-window/" target="_blank">Why is your code producing a black window</a>: list of general causes by Reto Koradi of why your screen may not be producing any output.</li>
   <li><a href="https://vallentin.dev/2015/02/23/debugging-opengl" target="_blank">Debug Output in OpenGL</a>: an extensive debug output write-up by Vallentin with detailed information on setting up a debug context on multiple windowing systems.</li>
 </ul>       
 
     </div>
     
     <div id="hover">
         HI
     </div>
    <!-- 728x90/320x50 sticky footer -->
 <div id="waldo-tag-6196"></div>
 
    <div id="disqus_thread"></div>
 
     
 
 
 </div> <!-- container div -->
 
 
 </div> <!-- super container div -->
 </body>
 </html>