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.
This shader, which is typically the last in the pipeline, instructs each fragment or pixel which colour it should be. It does this by setting a value for fragColor in the code’s main function. It’s where we’ll create our photo filters, animations, effects and so much more, by manipulating the colours of the pixels.
Vertex shaders handle the processing of individual vertices, which can be though 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. These are the focus of this tutorial.
Shaders can be used to create incredible effects in real time.