Introduction

Shaders are also a set of instructions, but the instructions are executed all at once for every single pixel on the screen. That means the code you write has to behave differently depending on the position of the pixel on the screen.

The program will work as a function that receives a position and returns a color, and when it's compiled it will run extraordinarily fast.

GLSL stands for openGL Shading Language, which is the specific standard of shader programs. There are other types of shaders depending on hardware and Operating Systems.

<aside> 💡 Because GLSL (OpenGL Shading Language) shaders compile and run on a variety of platforms, you will be able to apply what you learn here to any environment that uses OpenGL, OpenGL ES or WebGL.

</aside>

Basic Structure of a GLSL Shader Program

Shaders always begin with a version declaration, followed by a list of input and output variables, uniforms and its main function.

Each shader's entry point is at its main function where we process any input variables and output the results in its output variables.

Generally a shader look like this:

#version version_number

in type in_variable_name;
in type in_variable_name;
out type out_variable_name;

uniform type uniform_name;

void main() {
// process input(s) and do some weird graphics stuff ...// output processed stuff to output variable
	out_variable_name = weird_stuff_we_processed;
}

Input and Output to Shaders

GLSL defined the in and out keywords to have inputs and outputs on the individual shaders.

• Each shader can specify inputs and outputs using those keywords and wherever an output variable matches with an input variable of the next shader stage they're passed along.
• So if we want to send data from one shader to the other we'd have to declare an output in the sending shader and a similar input in the receiving shader. OpenGL will link those variables together and then it is possible to send data between shaders (this is done when linking a program object).

The vertex and fragment shaders differ a bit sometimes.

• The vertex shader differs in its input, each input variable is also known as a vertex attribute aka the layout set using vertex attribute pointer of that particular index. To define how the vertex data is organized we specify the input variables with location metadata so we can configure the vertex attributes on the CPU as layout (location = 0), the location can be 1, 2 if we provide other data such as color or texture co-ordinates as well and specified it's layout in vertex attribute.
  • There is a maximum number of vertex attributes we're allowed to declare limited by the hardware. OpenGL guarantees there are always at least 16, 4-component vertex attributes available, but some hardware may allow for more.
• The fragment shader requires a vec4 color output variable, since it needs to generate a final output color. If failed to specify an output color in the fragment shader, the color buffer output for those fragments will be undefined (which usually means OpenGL will render them either black or white).

Macros

Coordinates of Canvas