3 months ago

Intro to GLSL shaders

Make state-of-the-art special visual effects and animations for your video games and projects

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:

Next, open a new file call shader.frag in your favourite editor (like gedit, nano, vi, or Emacs):

…and write in the following code:

Save the file, exit the editor, and give it a try on glslViewer:

You should see a magenta rectangle at the top-left corner of your screen. It’s not much, just a starting point.

The glslViewer will render on top of everything else

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!

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:

  • 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.
    +1