GLSL is programming language based of C programming language. But it is more efficient and customized compared to normal TOPs. Not saying TOPs are not good tool to start with TouchDesigner, knowing GLSL will add extra level of underdoing how computer graphic works.
Before we dive into GLSL, it would be helpful if we have basic programming skills, for instance, understanding of how FUNCTION works, how to declare VARIABLE. With those basic under standing of coding, let us get started to look at same basic GLSL coding structure in TouchDesigner.
Once we drop in a GLSL TOP in TouchDesigner, it comes with a TEXT DAT and INFO DAT. For any reason, we lose those windows, we can manually add INFO DAT and has its Operator targeted to GLSL TOP.
So far, we are ready to look at pre-defined pixel shader code in TEXT DAT. TouchDesigner altered shader a bit and we do not need to normalized coordinate manually.
vUV.st // vUV is normalized coordinate and provided by TouchDesigner I made a simple code visualizing coordinates utilizing Step() function.
// Example Pixel Shader
// uniform float exampleUniform;
out vec4 fragColor;
float myStep = step (0.4,vUV.s);
float myStep2 = step (0.4,vUV.t);
void main(){
vec4 color = vec4 (myStep,myStep2,.0,1.0);
fragColor = TDOutputSwizzle(color);
What we have there is really just a threshold which generates a point to differentiate four visualized section of the whole canvas. We hard coded that threshold with a float number 0.4 in line #6 and #7.
What if we want to animate the image and having this point moving diagonally. That comes with uniform.
In following code, I declare a uniform called point, hard coded float number 0.4 is replaced by point uniform. In the meantime, I added point as a vectors in GLSL parameter. With a bit python scripting, we will be able to archive the goal.
// Example Pixel Shader
// uniform float exampleUniform;
out vec4 fragColor;
float myStep = step (0.4,vUV.s);
float myStep2 = step (0.4,vUV.t);
void main(){
vec4 color = vec4 (myStep,myStep2,.0,1.0);
fragColor = TDOutputSwizzle(color);
}
Following resources are very helpful to get GLSL started in TouchDesigner: