Trying to learn the basic of shaders in 24hours

First of all, I'd like to share with you the experience I had with shader, I promise it won't be long, here it is: None

I always was fascinated by how people can make stunning shader and was like hmmm, I wonder if I can learn the basic of it, in this post I'll show you what I did and learned throughout my experiments

First hour

So the first day I started by googling how to make shaders, and oh boy I was not ready for this, I found a bunch of link containing Math.
I decided to find the basic explanation of a shader to start, I learned that the Shader was handled by the GPU, and it was divided in two part:

• Fragment shaders
• Vertex shaders

Youtube

Then I found this Youtube Playlist, the person in this video is explaining really well through examples

In the first video he covers different tools to allow us a live preview of the shader itself, here the tool I used for this:

• VScode
• GLSL-canvas
• GLSL-Linter

The basic structure of a simple shader

basicaly the structure of the code looks like C
Here is the basic structure for a red color

void main(){
    vec3 color = vec3(0.3, 0.5, 0.3 );
    gl_FragColor = vec4(color,1);
}

Here we define a Vector3 with 3 value corresponding to the RGB channels, Then we defined a gl_FragColor wich is the final color output with a Vector4 since we have color with RGB, the fourth Vector is for the Alpha

Progress was made

I quickly tried to play with value and got different colors, but I wanted to go way more further than that, I continued on the series and learned the Uniforms wich is a way to pass a data from the CPU into the GPU
GLSL have some existing Uniforms like:

uniform vec2 u_resolution;  // Canvas size (width,height)
uniform vec2 u_mouse;       // mouse position in screen pixels
uniform float u_time;       // Time in seconds since load

My first shape

You have to know that in the opposite of canvas, 3d stuff, p5.js and more, Shader don't have a prebuilt shape system
So I had to create a function that returns a Float for the shape, here is how you can create a circle in GLSL:

uniform vec2 u_resolution;

float circleShape(vec2 position, float radius){
    return step(radius, length(position - vec2(0.5)));
}

void main(){
 vec2 position = gl_FragCoord.xy / u_resolution;

 vec3 color = vec3(0.8392, 0.1608, 0.1608);
 float circle = circleShape(position, 0.2);

 color = vec3(circle);
 gl_FragColor = vec4(color,1.0 );  
}

Okay let me cut that in multiple part for you
first we have the function to return a float for the circle

float circleShape(vec2 position, float radius){
    return step(radius, length(position - vec2(0.5)));
}

Then we have this weird vec2 position wich correspond basicaly to the canvas size

vec2 position = gl_FragCoord.xy / u_resolution;

and then we assign the vec3 of the circle into color

Sin Cos

In this video i've learned how to use a new uniform wich is time, and then applied that to a sin() and cos() functions, to get smooth movement during time

vec2 translate = vec2(0.0, cos(u_time / 2.0));

Water colors

In this video, I've learn the for loop, how to use it with a shape like this:

for(int n = 1; n < 25; n++){
        float i = float(n);
        coord += vec2(0.7 / i *  sin(i* coord.y + u_time + 0.3 * i) + 0.8, 0.4 / i * sin(coord.x + u_time +0.3 * i) + 1.6 );
    }

Light

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x,u_resolution.y );
    coord.x += sin(u_time) + cos(u_time * 2.1);
    coord.y -= cos(u_time) - sin(u_time * 1.6);
    float color = 0.0;

    color += 0.1 * (abs(sin(u_time)) + 0.1) / length(coord);

    gl_FragColor = vec4(vec3(color, color, color),1.0);
}

And that's pretty much what I've learned so far, I learned that Math was really important and that I was not so good at it 😅, but this challenge allowed me to discover something new, I think I could redo it another time with another subject.

Thank you for ready until here, I hope you liked my story and if you want to challenge yourself to create / learn something in 24hours and document your jouney, I'd love to see it

Have a nice day ! 👋

Creativity is like a dream, you can do anything with your mind, and if you don't suck at math 😅