Understanding Graphic Shaders
GLSL (OpenGL Shading Language) shaders compile and run on a wide range of platforms. You can apply what you learn to any environment that uses OpenGL, OpenGL ES or WebGL. This means you can use this knowledge for websites, Three.js, iOS games, interactive installations, Unity, openFrameworks, Processing and many others.
The graphics pipeline
Multiple shaders work together in the graphics pipeline. Some are programmable, some are locked to the hardware. We’re most interested in two shaders in the pipeline – vertex shaders and fragment shaders. These are the core of the OpenGL Shading Language and the WebGL graphics pipeline.
Vertex shaders handle the processing of individual vertices, which can be thought of as points on the triangles that form a mesh. Vertex shaders are used to transform the attributes of vertices from their original space to the display space. This includes attributes such as colour, texture, position and direction.
This shader, which is typically the last in the pipeline, instructs each fragment or pixel as to what colour it should be. It manages to achieve this by setting a value for fragColor in the code’s main function. It’s where we’ll be creating our photo filters, animations, effects and so much more, by carefully manipulating the colours of the pixels.