merryvj / learning-shaders

Fragment shaders written by a GLSL beginner

Learning GLSL

This is an overview of my learning experience so far with learning about fragment shaders from complete 0...

Gallery of shaders made so far: https://merryvj.github.io/learning-shaders/

Phase 0: What is a shader?

At this point I didn’t know how GPUs worked and what shaders could even be used for. I just dimly knew they could be incorporated in some sort of audiovisual performance setup. Visual explanations like these were helpful:

• Shaders explained by a designer
• Playing with Hydra, an accessible coding environment that abstracts GLSL into easily understandable functions

Phase 1: How to think in shader logic?

Now that I know what shaders can do, how do I just draw something just like that? This is when tutorials that go over how techniques work together were useful:

• A basic overview by Inigo Quilez (legend) - this is where it all started to click for me
• “Shadertoy” live coding walkthroughs by the Art of Code youtube channel

Phase 2: Which shader techniques to use?

This is when resources like BookOfShaders started being useful. It’s like learning how the different tools in Photoshop work, and building a repertoire! I now had a "stickersheet" of functions I knew how to use and showcased my first 20 shaders here.

Phase 3: 3D time? Also pipelines...?

This is where I'm currently at, and feel like I've hit a wall scavenging for resources on scattered blogs (mainly Inigo Quilez). I've also begun incorporating shaders into other projects and testing the workflows (e.g. quite straightfoward for p5.js)