Lets learn pixel shaders - Chap 2 - Basics

Comment
Important - To move forward open another tab in your browser and open the URL http://www.iquilezles.org/apps/shadertoy/, I will refer to this tab simply as 'Shader Toy'

Chapter 2 - Basics of pixel shader with 'Shader toy'

Let us write some code, switch to the shader toy and notice that the "Deform" shader is already loaded and is running by default. On the right side bottom you see the source code, and on the left is the rendered effect. Take some time to notice the various details/controls shown to you like

1) fps, time, play/pause button, restart button on top of render area (place where the effect is played).

2) Dimensions panel - Width and height of the render area on top it. You can change it if you want.

3) The textures passed to the pixel shader are given right to the width/height box. You can pass up to 4 textures and use them in the pixel shader. The texture used in deform shader is given in the box 'unit 0'. Copy paste that URL path in a new tab and check the texture for yourself, or you can just click this link.

4) Also you can check the other shaders by going through presets drop down list. Don't forget to click 'Load'. There are some cool effects which you have no idea how to create, but at the end of this series you will learn to make most of them.

5) Most important thing we need to notice is the compile button. It is given above the source code area along with 'help' button.

n00b note - Every time we write new code, we need to press the compile button to see new source code taking effect.





6) Now let us write some code. We will begin with a blank program. Copy paste the following code in the code window.


#ifdef GL_ES
precision highp float;
#endif
uniform float time;
uniform vec2 resolution;
uniform vec4 mouse;
uniform sampler2D tex0;
uniform sampler2D tex1;
void main(void)
{
}

--- Now hit the compile button and see the output on the left side ---

7) Beautiful isn't it !
It will be a blank screen. Basically for now we have not written any code. Being a programmer I'm sure  you can notice that main function is empty. If you don't know what main() function is, then stop reading right away, don't waste your time. Grab a good C or C++ book or tutorial.

8) Now let us write our first line. If you recap I said - "pixel shaders are programs that are run for every pixel on the screen and they can do one thing, set the pixel color". So let us do that now. Inside the void main function block write the following line
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
gl_FragColor is a built-in variable through which we can write the pixel color. vec4 is a custom data type just like int, float, bool etc. But vec4 is a vector of 4 float numbers. The numbers are the colors - R, G, B and A. So here we say R, G, B are zero and Alpha is one which works out to black color. Hit compile button and make sure it is not paused on the left side, you will see the screen turning black. Now try replacing that line with the following.
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
Click compile and run again, you get the idea? As the same program is running for each pixel on the rendering area, and what we are doing is just setting it to white, the whole screen looks white.

Now how do we make things interesting? Wait for next chapter :)

Lets learn pixel shaders! - New Series - Chapter 1

Comment
This is the beginning of a series of tutorials, about pixel shaders (aka fragment shaders) with WebGL. I will start by assuming you are someone who has "absolutely no experience in graphics programming", but you should know what pixels are, what their components are. And optionally if you have basic 3d texturing knowledge, it will help a lot, but again not compulsory.

Without more blah, blah, let us start learning fellow programmers!

without which I would have never even started this! All our tutorials will be explain with reference to that web app. You will need one of the latest browser to run it.

Chapter 1 - Pre-requisite (for the n00b graphics programmer)

Pixels (skip if you know)

Everything you see on your monitor is made of pixels. If you zoom into your computer monitor, basically it is made of basic blocks (usually square shaped) called pixels. But as they are very small and closely packed, you are not able to notice them. Every monitor doesn't have the same number of pixels.

Resolution (skip if you know)

It is (number of pixels lengthwise) x (number of pixels widthwise). For eg. iPhone 3GS has a resolution of 320 x 480 when you hold the phone in portrait mode. iPhone 4 / 4S has 960 x 640 as their resolution. A full HD (High Definition) monitor has 1920 x 1080 pixels. More the resolution, more is the image detail/clarity. Will you be able to show more details with a 10x10 grid of dots or a 100x100 grid of dots? Think about it.

Pixel components (skip if you know)

Each pixel can do only one thing - "They can display a color". A pixel has three basic components - R, G and B. They are the primary colors, and combining them in various ways, we can make thousands (or millions, in latest monitors) of other colors. Usually each color is represented with one byte (8 bits, so value range is 0 - 255). So put together for each pixel you will have total of 3 x 8 bits = 24 bits or 3 bytes of color information.

For eg.
black (R = 0, G = 0, B = 0)
white (R = 255, G = 255, B = 255)

Introducing Alpha (skip if you know)

Apart from R, G and B, there is another component for a pixel, its called Alpha. Alpha = Transparency. Often pixels can be overwritten on top of each other, when that happens they are "mixed" according to their alpha levels. So R, G, B and A are the components of a pixel, which takes 32 bits per pixel. Understand there are more ways to represent a pixel, its not always 32 bits, but it is the most advanced pixel format, and enables an individual pixel to represent the max number of colours.

So, what are pixel shaders ?

Now that you know what pixels are, pixel shaders are nothing but programs, very similar to a C program. Next paragraph is very important.
A pixel shader is run for every pixel, before getting displayed on the screen. So let us say we have 1920 x 1080 pixels for a full screen game, which is a total of 2073600 pixels, which means a pixel shader is run that many times! But that is okay because they are all run on the GPU, instead of the CPU (Graphics processing unit, a special hardware dedicated to graphics, present nowadays on almost all computers).


Now that we know the basics, let us get started with
1) what can be done in a pixel shader,
2) how it can be done and
3) what information we have access to in the next chapter !

Any doubts are welcome in the comments section.