GLSL Shaders and the magic of graphical rendering.
GLSL shaders are a part of OpenGL which stands for Open Graphics Library. GLSL is the name OpenGL’s shader language, or the specific language used in programming shaders in OpenGL. In a nutshell, shaders are simple programs that modify how things are rendered to the screen. Shaders run directly on your graphics processing unit (GPU) and because of this, the programming language is limited to the kind of tasks that can be handled by a GPU. This causes shaders to have a limited instruction set, but have extremely high performance ratio when compared to other functions typically ran on a CPU.
The term “shaders” is somewhat miss used when describing what shaders actually do. You can use shaders for shading and object and the are often used for adding shadows, lighting, or reflections, but shaders can actually do much more. Below are a few examples of other tasks shaders can perform.
Transitions:
Outlining:
Texture Blending:
These kind of effects are possible with shaders because of how the GPU executes a shader program. At it’s core, a shader is a simple program run on every pixel rendered to the screen. By doing something like checking the input color of a pixel, we can manipulate that information in several ways. We can make it transparent, a color, or even a gradient between colors. The animation below shows how a simple monochrome (Black and White) mask texture can be used to determine the shape and order of a transition effect.
When using a pixel shader, each pixel can be tested for a value from 0 to 1. If we supply a time parameter with value of 0.5, we can program the shader to look at the pixel color of the monochrome mask. We can then take that value and compare it against our time parameter. Using the result of that of that comparison, we can either set the pixel color to the color of the original sprite, transparent, or even a different color all together. The time parameter can be increased or decreased each frame to cause the drawn image to animate as seen in the above example.
Shader code is somewhat similar to what a simple C program might look like. It is strongly typed, but it also has access to some unique variables like Vectors (vec2, vec3, vec4), Matrices (mat2, mat3, mat4), Textures (texture2D, texture3D), and Samplers (sampler2D, sampler3D). These variables are used for storing values like directional vectors, RGBA color, object transforms, color maps, or even transformation matrices. Commonly in GLSL, a pixel’s color is outputted in this format using a vec4: “vec4(Red, Green, Blue, Alpha);”. Below is some example code of the outline shader that was written for this blog.
Example Code:
Final Thoughts:
Shaders can be used for a large variety of visual tasks and effects, but it can also be somewhat limited in it’s ability to perform complex ones. In the future I am going to delve into shader programming as well as PBR (Physically based Rendering) techniques and effects.
Thank you for reading!
