Mastering GLSL requires a great deal of attention and a sharp eye for detail. In this article, we will take a look at some common GLSL mistakes in TouchDesigner.
Let’s start with the basics. GLSL stands for OpenGL Shading Language and is a high-level programming environment. Its syntax is largely borrowed from C, and it allows you to create shaders that run on the GPU.
GLSL is no doubt one of the most powerful tools for visual programming, but since it derives from C, the learning curve can be steep and intimidating. I admit that, without a formal background in computer science, my first experiences with GLSL were quite a disaster. And there is still plenty of ground to cover.
GLSL can be frustrating for a simple reason: a single mistake will prevent anything from rendering at all. If you are not familiar with C-derived languages, running into errors will be a daily occurrence, and the frustration can build quickly. That’s why, more than ever, it’s important to start from the very basics and not be afraid to learn GLSL one brick at a time.
So, let’s take a look at some common errors.
Common GLSL Mistakes: Terminology
The first thing to do when approaching GLSL in TouchDesigner is to get familiar with the terminology. If, like me, you come from a creative or visual background and are not familiar with high-level programming syntax, terms like shaders, uniforms, and vectors may feel completely meaningless at first.
That is why building a clear understanding of what these terms mean is so important. It will help you minimise potential errors and feel more confident when working with GLSL in TouchDesigner.
Read more: GLSL terms you need to know for TouchDesigner
Don’t Declare Uniforms
A uniform is a variable that passes data from TouchDesigner to the shader, and its value remains constant throughout the entire execution.
One common mistake is forgetting to declare it in GLSL before the void main() function.
Here is a basic example. We create a vector in the dedicated parameters tab.
If we write the code without declaring it first, we will get an error.
However, if we declare the uniform before the void main() function, the code will run correctly.
Mismatching Integers and Floats
Numbers are, as we all know, the core building blocks of coding. In GLSL, it is very important to always specify the type of number you are working with. Let’s look at a simple example to illustrate this.
Suppose we want to shift the position of our lovely banana across the screen.
If we try to divide two integers to obtain a float, nothing will happen.
We need to explicitly declare our values as floats in order to get the correct result.
Loops and Conditionals
For those coming from a Python or other programming backgrounds, loops and conditionals are the bread and butter of coding. We can of course use conditionals in GLSL, but it is very important to understand how GLSL fundamentally works. Since we are operating on the GPU, the code runs in real time on every single pixel. This is why relying on complex conditional statements can put the entire system under strain.
A poorly structured or overly complex for or while loop can even lead to a Vulkan crash. Use them with care, and always make sure your logic is clean and well structured before running it. Your GPU will thank you.
Get Our 7 Core TouchDesigner Templates, FREE
We’re making our 7 core project file templates available – for free.
These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.
They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.
Copy and Paste from Shadertoy
Shadertoy is a goldmine for anyone who wants to truly learn GLSL. It is an online repository where users share their shaders, which you can explore in real time alongside the source code.
One common mistake (and I have been guilty of this myself) is telling yourself: “Well, I can just copy and paste the shader into TouchDesigner”. Bad idea. Let’s see a basic example.
So, if we basically copy and paste the code in TouchDesigner, we will get an error. That is why:
- First of all, in TouchDesigner we need to declare the output before the void main() function
- The void main() function does not require parameters
- Coordinates in GLSL in TouchDesigner are calculated with vec2 uv = vUV.st;
Here is a comparison between the Shadertoy original and the adapted GLSL script:
Wrap Up
Navigating the world of GLSL can be tricky and frustrating. It demands focus, attention, and a careful eye for detail, and of course a solid foundation of knowledge. But once you get acquainted with it, you will have such a powerful tool at your disposal that the only boundaries are the ones you set yourself.
As usual, the sky is the limit.
