Shaders

How Shaders Work?

A Shader's main purpose is to return four numbers ,i.e r,g,b,a (red,green,blue,alpha) for each pixel. It returns those four-color values, and that becomes the color of the pixel. Here alpha denotes the transparency.Also, there is a vertex shader that takes object coordinates and transforms them into clip coordinates so that you would get frustum view coordinates. It performs modelview and projective transformation on vertices. Optionally, it also works on calculating normals, binormals, bitangents or any other user required attributes.

Shader Programming

To learn about shader programming, Here we are going to use ShaderToy. Upon opening the new shader, you will see something like this:

Let's play with colors and see what happens!

If we want to change the color of the screen to complete green,we need to set r,g,b,a = 0,1,0,1. Upon setting this value, screen will look like this:

Here,vec4 is the data type, and fragCoord is holding the x and y coordinates value of the pixel. fragColor is the final output value of the pixel color.

Now, let's do something more interesting…

Let's change half of the screen to blue.

To ensure that half of the screen is red, we need to know how big our screen is. Unlike pixel location, screen size is not a built-in variable, and if something is not a built-in variable, you can send that information from CPU to GPU. Luckily, ShaderToy handles that for us.

Code is mentioned below:

Enough playing with colors. Now, if we want to do something impressive, our shader has to be able to take input from an image and alter it.ShaderToy takes care of that for us.

We need to map the current pixel our shader is on to the corresponding pixel on the texture.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 xy = fragCoord.xy / iResolution.xy;//Gradient
    vec4 texColor = texture(iChannel0,xy);
    fragColor = texColor;
}

Here, texture takes (x,y) coordinates and texture data as input and returns the color of the texture at that point as vec4. With this code above, we have our first image ready..

Now that you're pulling data from a texture correctly, you can manipulate and change it however you like. You can scale it or play around with its colors.

Check out this problem - Optimal Strategy For A Game

Frequently Asked Questions

What is a Shader?

A shader is mainly a program that runs in the graphics pipeline and tells the computer how to render each pixel.

How can we get Shaders?

There are many shader providers out there in the market. You can even create your own shader. There are many shading languages too, all with slight variations.

Shaders are divided according to what criteria?

There are two basic types of shaders. One is the pixel shader, in which the traits of a pixel are described, and a vertex shader is responsible for defining the position and color of a vertex.

Conclusion

In this article, We have discussed shaders,what shaders are to the games,how they work and how to program shaders.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available, interview puzzles, take a look at the interview experiences, and interview bundle for placement preparations.

We hope that this blog has helped you enhance your knowledge regarding puzzles, and if you liked this blog, check other links.

Do upvote our blog to help other ninjas grow.

Happy Coding!"