GPU Shader Tutorial Logo
GPU Shader Tutorial
This tutorial is currently a work in progress. Content may be added, updated, or removed at any time.

FAQ

How can one contact you with regards to the website?

If you have anything you wish to say related to the website (feedback, issues, improvements, questions), feel free to open up an issue at the GitHub repository. For other things, my email is available on GitHub.

How can I run these GPU shader code snippets?

There are multiple GPU shader sandbox websites available, like Shadertoy where you can run these examples. Some modifications may be required to be made depending on which website you choose to use, but as long as the concepts taught are applied properly, you should see proper results.

There is an open issue to add links below the examples to shader sandbox websites to allow users to experiment with the code shown.

Why was GLSL chosen as the language to teach the concepts with?

The procedural nature and the syntax of the language make it easy to explain concepts efficiently. This also allows the concepts shown through the language to be translatable into other languages with relative ease, since the procedural nature of the code is very easy to convert into other programming language paradigms.

This may seem to go against goal of being language agnostic since only one language is used, but the tutorial focuses on the concepts shown within the code written in that language, which does allow the tutorial to be language agnostic.

However, there is an open issue to add in code snippets in other languages that are hidden by default, and can be viewed by clicking a link that reveals them. This is done in certain chapters (eg: transparency chapter) already.

How can I debug shader code?

Unlike normal software development, where one can use a debugger or even output data to cehck the behaviour of applications, shaders are not as easy to debug and fix with certain graphics APIs.

There are multiple tools available that can be attached to applications to provide some utilities to debug shaders, but a lot of debugging is still be based on trial and error.

If there is an obvious code error in the shader, like a syntax error, the shader compiler should be able to catch the bug and throw an error for you.

In other cases where the shader doesn't work as expected and the compiler throws no errors, restart development with shader code that you know works, and slowly build up line by line till it breaks.

A great WebGL utility for debugging, and one that can be used on this website. is Spector.js. It's available for Chrome and Firefox, and provides a great way to record and debug a frame render with a lot of useful information to go with it.

Another WebGL debugger that can be used on this website is WebGL Inspector. It isn't available on the Chrome Extensions Store, so it will require manual installation, but it does provide some functionality similar to Spector.js.

Do you have references for where one can learn about programming using graphics APIs in general, learning about graphics rendering itself, or learning about some ways to apply it?

The site where I personally first started learning about graphics API programming (OpenGL to be specific) was OpenGL Tutorial, which has been referenced multiple times in this website.

The OpenGL Red Handbook, as well as Learn OpenGL are other good sources for learning OpenGL and GLSL programming.

I currently do not have any sources for DirectX and HLSL programming, but I will update this section when I do find reliable ones.

To learn about the graphics rendering pipeline in a lot of detail, check out the blog series A trip through the Graphics Pipeline 2011, which is great.

There is a great course on Awwwards Academy called The fun process of creating lively interactive 3D scenes for the web that provides some great learning for creating interactive 3D scenes (as it says in the name). It is a paid course but a great one for those interested in learning more in that area. The course primarily teaches with WebGL, using the Three.js library.

Are all the materials shown on the website your own?

No, not all of the materials shown are owned by me. Some are sourced from other areas, which I do try to provide a link or reference to wherever they are used.

For materials that I cannot provide the reference alongside them, I've noted them down below.

If you find any material that is not owned by me and is not properly linked to the source, open an issue at the GitHub repository.