Fragment Shaders: An Introduction to Creative Coding in GLSL
An introduction to fragment shaders for creative coding: how GLSL thinks per pixel, distance functions, noise, and the projects I made with them.
Translated from the French. The original, Fragment Shaders : Guide d’introduction au creative coding en GLSL, is on my personal site.
I discovered GLSL a few years ago, looking for a way past the limits of p5.js and JavaScript for creative coding. What struck me immediately is that in a handful of lines you can drive millions of pixels in parallel, and reach effects that are hard to obtain any other way.
In p5.js or the JavaScript 2D API, you draw the way you would in a program like Paint, only with code. In GLSL the paradigm is radically different, because the code runs on every pixel. To draw a circle in p5.js you call circle with the coordinates of its centre and its radius, as in circle(50, 50, 25). In GLSL you compute the distance to the centre, then choose the colour depending on whether that distance is greater than the radius you want.
// The pixel's position, centred, with the height going from -0.5 to 0.5
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
// Distance to the centre
float d = length(uv);
// Determines the inside of the circle
float mask = step(d, 0.25);
// Colours
vec3 col = vec3(1. - mask);
fragColor = vec4(col, 1.0);Some of my own projects made with fragment shaders
The Source
The Source is an algorithmic project born of a year of collaboration with Matthieu Segret. It is written mostly in GLSL.
The Source (2023) · Camille Roux
Résilience
Résilience is likewise written mostly in GLSL, as fragment shaders. It leans on Signed Distance Functions, mathematical functions that see heavy use in GLSL, to draw isolines and hatching.
Résilience (2024) · Camille Roux
What is a fragment shader?
A fragment shader, sometimes called a pixel shader, is a program written in GLSL, a language close to C, that runs on the GPU to compute the colour and opacity of every pixel on screen. In the graphics pipeline it comes after the vertex shader: the geometry of your shapes is defined first, then the fragment shader determines how the result actually looks. Because it runs in parallel on the graphics card, it makes very high-performance real-time rendering possible, while leaving creativity unbounded.
Tutorials and guides to get started
The Book of Shaders
An interactive online guide, available in French, covering the basics: GLSL fundamentals, shapes, handling colour, Perlin noise, cellular noise and more.
The Book of Shaders · The Book of Shaders
An Introduction to Shader Art Coding (Kishimisu)
A short, playful video explaining the basics of fragment shaders. Fair warning: the video is short, but you will probably lose a good while afterwards playing with what you have just learned.
You can follow it up with this fine introduction to raymarching.
Three.js Journey
Three.js Journey is a very thorough tutorial on Three.js, the JavaScript library for 3D. Chapter 4 alone holds many hours of video on shaders.
Three.js Journey — Learn WebGL with Three.js · Three.js Journey
I used Three.js in my most recent project, where it saved me from coding everything from scratch to handle the hundreds of thousands of particles moving in real time.
💙💙💙
GM Shaders (Xor)
One of my favourite newsletters in creative coding, and a goldmine for anyone interested in shaders. The articles are sometimes technical, sometimes approachable. The subjects vary but stay consistently interesting: turbulence, signed distance fields, anti-aliasing, the different kinds of noise, tanh().
GM Shaders | Xor | Substack · GM Shaders
A few essential tools
ShaderToy
ShaderToy is a practical site for writing and sharing fragment shaders online. It is also an extraordinary collection of shaders posted by the community over the years, all of it readable and editable.
Shadertoy · Shadertoy
Twigl
In the spirit of ShaderToy but with a more modern interface, Twigl adds some interesting features: broadcasting for live coding, and Sound Shader for making sound with shaders, which is exactly what it sounds like.
twigl.app · twigl.app
Going further
Inigo Quilez’s blog
This site is not for beginners, but you will almost certainly end up needing it once you start playing with SDFs, raytracing, raymarching or fractals. A goldmine.
Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more · Inigo Quilez
WebGL2 Fundamentals
Technical documentation for mastering the WebGL2 context: buffers, VAO/VBO, textures, and integration into a <canvas>.
WebGL2 Fundamentals · WebGL2 Fundamentals
Conclusion
Fragment shaders in GLSL open an endless field for algorithmic art and for creative coding more broadly, pairing GPU performance with algorithmic invention. With these resources you should have everything you need to start, experiment and enjoy yourself.