Cracking the Code: How to Begin with GLSL Shader Programming

Shaders are one of the most fascinating and powerful tools in front-end development, opening up a world of creative possibilities. If you're looking to get started, knowing where to find the right resources is key. Let's take a look at some of the best places to dive into the world of shaders.

What is a shader?

Think of it like painting a canvas - not one thing at a time, but everything at once, still following a series of steps. That's how shaders work. Each pixel on your screen gets a colour based on its position, and the code you write decides what those colours should be.

Here's a simple shader example that paints the whole screen red - every pixel gets the same information. But you're not restricted to this! You can paint based on position, use a texture, or any other input. The possibilities are almost endless.

void main() {
  gl_FragColor = vec4(1., 0., 0., 1.);
}

Shaders are cool, but where can I learn them?

Finding good resources for learning GLSL shaders (especially GLSL shaders for the web) can be tricky. You're not alone in this - GLSL is not beginner friendly, and the language itself can make things even harder, especially when you're trying to debug.

But don't worry, we'll figure out how to overcome this first challenge together.

The Book of Shaders

To get started, I'd recommend reading The Book of Shaders. It's super well written and covers the basics of fragment shaders (the part where the painting happens). It includes examples, exercises and even a glossary (https://thebookofshaders.com/glossary) to help you remember all the important stuff.

The book will get you quite far, but keep in mind that not everything will be handed to you. Shaders are known to need a solid mathematical foundation, especially when it comes to writing more complex stuff.

Yuri Artiukh

Yuri, a creative developer from Ukraine, is definitely one of the top developers to follow if you're into creative coding. He has some great courses on Awwwards that are definitely worth checking out:

• Merging WebGL and HTML worlds

• Creating a simple portfolio website with WebGL and Barba.js

He also streams on YouTube, where he recreates website effects (including shaders) and shares the thought process while writing code.

Three.js Journey

If you're into 3D, Three.js Journey is a great choice. The instructor, Bruno Simon, explains things clearly and delivers top-notch content, which is why so many experienced developers recommend his course. Also, his course has a whole section on shaders, and it's amazing.

Dissecting websites

You'll probably end up on a website where you don't know the name of a shader effect or how to do it, so here are some tips:

Use the DevTools to read the GLSL code: this won't work all the time, but I've found websites where I learned things using it.

AI era: let's say you found this beautiful water effect where there's some cool white highlights from the water. Try to ask any AI model about it, it's definitely a time saver and can even provide code example for you to study.

Shadertoy: a website for sharing shaders, it can be really helpful if you're trying to learn about a new effect.

Graphtoy: a website for visualizing functions, it helps a lot when colors and numbers are not enough.

Useful links & Cool Websites

Here you'll find lots of cool stuff to get inspired by.

Anderson Mancini - Creative Developer & Three.js Expert (website)

Build fancy landing pages with React(-three-fiber) and Threejs (R3F course by Paul Henschel)

GLSL Shaders from Scratch | SimonDev (GLSL course by Simon)

Awwwards (always a cool reference for design trends, 3d and crazy stuff)

Cosmos (great for design inspiration)

Active Theory · Creative Digital Experiences (website)

Unseen Studio® – Brand, Digital & Motion (website)

Luis Bizarro - Creative Technologist (website)

Refraction, dispersion, and other shader light effects - Maxime Heckel's Blog (incredible blog post)

Aristide Benoist — Independent developer (website)

@AlexFisla (insane work here)

Chris Kalafatis - Multi-Disciplinary Designer (website)

Conclusion

Shaders can be tricky at first, but once you get the hang of them, they're one of the coolest things in front-end development. You can create just about anything you want, as long as you know how.