By

In 3D graphics, shaders are essentially programs that describe a behaviour about a pixel or vertex. Vertex shader runs for every vertex of the mesh, whereas a pixel shader runs for every pixel of the object.

You can think of pixel shaders as HTML5 canvas. You can manipulate the color of every specific pixel. In this blog, we will focus mainly on Pixel Shaders.

## The UV coordinates

Pixel shaders coordinate system is standard coordinates are normalized to fit in interval {0,1} so that the pixel shader could scale for any random texture, which is essentially a color map, i.e. it explains which pixel gets what color.

A pixel Shader can then take input of any texture irrespective of its size.

You can quickly write pixel shaders on SHADERTOY. You can focus on writing shaders as it handles the pipeline for you. You write the code in essentially GLSL; there are a few differences, but it’s nearly the same thing.

## Circle

Since this assumes no prior knowledge of writing shaders, I thought the first example should be explained thoroughly and built from scratch. If you have written shaders before or are familiar with the structure, here is the code

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Getting the uv coordinates
vec2 uv = fragCoord/iResolution.xy;

// This gives the length of uv
float dist = length(uv);

// Initializing col with black color
vec3 col = vec3(0.0,0.0,0.0);

// Starting an if block
{
col = vec3(1.0,1.0,1.0);    // Setting col to white
}

// this sets fragColor which is our retrun value
fragColor = vec4(col,1.0);
}


This is the basic structure.

• vec2, vec3, vec4 are just arrays of the float of sizes $$2$$,$$3$$, $$4$$, respectively.
• fragColor is the output color of the pixel of coordinate uv.
• length() is a function that returns the magnitude of the vector.
• iResolutionis called a constant buffer. This specific constant buffer is provided by default from shadertoy and gives the resolution of the used window. There are other constant buffers, too, e.g., iTime.

Logic is elementary; we set the col (a vec3) to have rgb values of black initially and update it to white if the dist (distance from the origin) is less than $$0.5$$.

Running this, you’ll see the circle is more like an ellipse is also not centred.

Hence we update the uv coordinates as such:

uv-=0.5;

To fix the ellipse issue, we change the distance as follows:

float dist = length(uv*iResolution.xy)/min(iResolution.x ,iResolution.y);

Final Result:

## Rectangle

How do we make a rectangle?

Just write a function that contains a few if statements like this.

Result:

One can also use Manhattan distance as our distance function like here. I just used some good old matrix transformation for rotating it. Result:

We can also use smooth steps.

A straightforward water shader is just using distortion. We can use a du/dv map and move it to create distortion. We can then add two or three maps to our uv values and mixed reflection and refraction textures to give a satisfying result.

Let’s try to make something more cartoonish.

Meet Voronoi Diagrams.

Voronoi diagrams are excellent. Essentially color of a specific point in a plane depends on its nearest point. This coloring divides the plane into multiple segments.

We can also generalise it to any metric possible, giving aesthetically pleasing results. You only need a set of points and a metric, and for that, there would exist a unique Voronoi diagram.

They are cool do check them out

So let’s make a Voronoi diagram and have the points move! Color it, and there is your cartoonish water shader.

I decided to use Fractal Brownian Motion on simplex noise for this. Then I added a gradient and have uv.y continuously decreasing, giving the illusion that the fire is moving upwards. Yeah, it’s certainly complicated, so let’s go over them one by one.

Noise is just a pseudo-random number generator where the output is differentiable.

Simplex noise is a type of noise, like Perlin noise. The function noise() in the fire shader generates this.

The Fractal Brownian Motion combines multiple steps of Simplex Noise (or another similar noise function), each with a different frequency and amplitude.

Here is the result left is simplex noise, and right is Fractal Brownian Motion.

We color this and we’re done.