Since the 1960s, computers have had graphic interfaces: mouse pointers, windows, icons, sidebars, all the things that are now common on home PCs. It hasn’t been until the last few decades that video games have pushed the limits of visual content on the computer. Video games have reshaped the computer from the inside out, and one particular piece of hardware is responsible for the leap: the graphics processing unit (GPU). Thanks to the GPU, you can enjoy realistic 3D worlds with incredible cinematographic effects on them. GPUs can be programmed, too: the small pieces of code that run on them are called ‘shaders’. An example of this is the GLSL Shaders mod pack for Minecraft.
The full article can be found in The MagPi 56 and was written by Patricio Gonzalez Vivo.
You'll need
Shaders are a dry, C-like computer language designed with the main purpose of rendering an image pixel by pixel without sacrificing performance. We can think of shaders as the computer language of light.
So how do shaders work? And how are they different from other computer languages? Graphics are quite hard for regular computer programs to process. Regular programs are written to be run on the CPU; they are designed to do one task after the other – like Python, for example, where the program follows a list of orders, one line at a time.
Processing a digital image requires assigning a colour to each pixel on the screen. Let’s say you have an old 800×600 monitor: that requires around 480,000 calculations. Now let’s say your image is actually an animation that needs to change 24 times per second to produce the illusion of movement. That is more than 11,520,000 calculations per second – enough calculations to freeze a CPU.
A better solution
That’s why engineers came up with a different way to process graphics on computers: they call it a GPU. You’ve probably heard it described as ‘the graphics card’. The main design difference is parallelization. The chip inside the GPU runs multiple tasks in parallel at the same time, each one independent from the others. In the first chapter of The Book of Shaders, you can find a more detailed explanation of this.
Learning how to program your own shaders is not simple, but it doesn’t need to be hard any more! You can find a program called glslViewer on the latest Raspbian distribution. This little program is made to view shaders and follow the examples in The Book of Shaders. This gentle step-by-step guide will walk you through learning about this abstract language of light. You can print a version of the book by following the instructions in this appendix chapter. You will need a web browser with WebGL to both view and print the book.
Live coding with glslViewer
Running directly from the command line, glslViewer is a flexible renderer for shaders that doesn’t require a windows manager.
To live-code a shader, you just need a text editor to do the coding and glslViewer will display the changes immediately. Let’s try it out!
Open a Terminal window and install glslViewer:
sudo apt-get install glslviewer
Next, open a new file call shader.frag in your favourite editor (like gedit, nano, vi, or Emacs):
nano shader.frag
…and write in the following code:
#ifdef GL_ES
precision mediump float;
#endif
void main() {
gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}
Save the file, exit the editor, and give it a try on glslViewer:
glslViewer shader.frag -l
You should see a magenta rectangle at the top-left corner of your screen. It’s not much, just a starting point.
Note: the -l is to open it in live-code mode; this will open it not in full-screen, so you can keep editing it. You can also change the position and size of the viewport by using -x, -y, -w, and -h.
Let’s push glslViewer to run in the background by pressing CTRL+Z. Once back in the Terminal, open your file again and you can keep editing!
nano shader.frag
By following along with the ‘Hello World’ chapter in The Book of Shaders, you can learn more about what’s happening here, and how to change your code to create more complex colours and animation. Once you have finished editing, you can close your editor and close glslViewer. For that, you need to bring it from the back to the foreground by typing fg into the Terminal, and then close it with the letter Q.
Playing examples
There is a Python script, supplied with glslViewer, that will help you to download and play the examples in the book. To do this, check out the examples below and you’ll be able to get shaders working on your Raspberry Pi in no time:
glslLoader https://thebookofshaders.com/10/ikeda-00.frag glslLoader https://thebookofshaders.com/10/ikeda-01.frag glslLoader https://thebookofshaders.com/10/ikeda-02.frag glslLoader https://thebookofshaders.com/10/ikeda-03.frag glslLoader https://thebookofshaders.com/10/ikeda-04.frag
