home > blog >

Starting with shaders

— 7 min read

In the past weeks, I've been asked by a few people on social media about how I got started with shaders.

I was replying to each one of them, but at some point, I thought maybe writing in regards to the topic would be more useful the next time somebody asks me.

Besides, if someone looking into learning shaders finds this blog post randomly on the web, I'll be happy to shed some light on them.

Before I point you to the resources that have helped me, I thought I'd give you a small background on how I even got interested in learning GLSL shaders.

If you prefer to skip my story, go to the resources directly.

What sparked my interest in shaders?

I first heard of WebGL several years ago when I started going to JS events, and by listening to some talks in local meetups. I had no idea what they were talking about, nor I was that savvy with JS. I'd forget about it after I'd heard of it, even when it looked amazing what they would say one could do with such technology.

I discovered the world of WebGL and Canvas API in the summer of 2019. I've been learning ES6 for a year and a half, on/off, at this point. I participated as one of the artists for JSConf EU in Berlin, by creating an art piece with pure HTML & CSS for an installation in the shape of a multi-screen mural.

When I saw what the artists working with such JS-based technologies were doing, it blew my mind! I started asking my new developer friends how they managed to do that [and spying on them too]. I started following more digital artists, creative coders and creative developers on social media, researching articles about the topic, watching video tutorials... I was hooked.

I finally understood the bridge between art + tech. I've known it for years, but it felt like something so far away from my reach, I could have not ever even considered searching on how one does that in the past. For the first time, I wasn't lost on the way, since I now could write and understand some JS.

Now, not all art + tech work is done entirely with JS. There're other programming languages in the field, like Phyton, C#, and other C related languages. But, so far, my current interests focus on JS and shaders.

How I got started with shaders?

[preface] There are probably 100x more resources on the web about how to get started with shaders. I am sharing here the links to resources that have helped me to learn shaders. This doesn't mean it's the best or only way to do it. Every person learns differently. What worked for me, might not work for you. Take this list of recommendations with a grain of salt.

A developer friend — @fgnass sent me the link to The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe back in November 2019, as I asked about learning more of Perlin noise.

That first time that I browsed the online book, I understood nothing. You see, shaders employ GLSL and not the JS language. It's a C-style language, and so I had to grasp my head around this new language slowly.

Only a couple of months before that I started exploring WebGL with p5JS and ThreeJS. Learned that shaders could be used as a material in meshes with ThreeJS.

I came back to the book of shaders and found some good book tips.

One book recommended there — WebGl: Up And Running helped me understand how WebGL was born and what GLSL shaders are. It also gave me a solid ground to understand more of the 3D world, specifically done with the ThreeJS library. The code examples presented in the book are outdated, but still, I found it helpful, especially if one is also interested in working with shaders in 3D on the web.

The Mozilla documentation about GLSL Shaders has also helped me understand what shaders are and how to work with both, vertex and fragment, shaders.

I've taken all the courses by Matt DesLauriers at Frontend Masters. The canvas and WebGL course talks a bit about shaders, but the advanced WebGL and shaders course goes more in-depth on the shaders topic and how to use them with ThreeJS.

Two YouTube channels have helped me with shader tips and understanding some of the math needed to create them:

I've been taking several online workshops organized by CODAME and taught by @CharStiles to learn to do visuals with shaders.

I browse on/off Shadertoy, which is an online platform/community to share shader code. I read and try to learn from the code others post. There are some pretty sick shader designs there, that when I see the math, I honestly don't think I'll ever be into that level, but that's ok.

I consult the Khronos wiki on/off. It explains the language shaders are based on, the shader stages, type of variables and general knowledge on GLSL.

I started the hashtag #anydayshaders on Twitter and Instagram to create a challenge for myself, as I learn shaders, without the pressure of most challenges. You can read about it here.

Alex Trost made a wonderful write-up with explanatory graphics in his Newsletter, Frontend Horse. He explained shaders for beginners from his point-of-view after interviewing me in late July 2020.

Once I was curious about more advanced shader techniques, I found an extraordinary read by Jamie Wong — Ray Marching and Signed Distance Functions, which gave me the aha moment to begin understanding ray marching.

At the end of 2020, @MAKIO135 created a creative coding resource, including a section dedicated to GLSL shaders. He pointed out many tips I've already shared here, but there are other recommendations as well as code samples of his shader work.

I made my way through Bruno Simon's recent Three.js course released in early 2021. There's a whole chapter going thoroughly on coding shaders with inspiring examples. He explains practical ways to code fragment and vertex shaders while using ThreeJS.

As I continue learning shaders, if I find any other resources which I find useful I'll add them and update this post.