Quakeboy'z Dev Arena

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 UR...

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! Thanks to  http://www.iquilezles.org/apps/shadertoy/ 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 ar...