Shader basics: writing your first shader

Writing your first shader might seem daunting, but it doesn’t have to be. Here are some tips that can help you on this journey.

1. Start with pixel (fragment) shaders – they’re the easiest to iterate on. There are a lot of online shader editors (e.g., Shadertoy), and it is very satisfying as you can create amazing and complex-looking effects just using this one shader type.

2. Don’t worry about the shader language. Both GLSL and HLSL are solid choices with plenty of learning resources, examples, and tools readily available. They are also quite similar, and there are even transpilers between them.

3. Parallel programming can be tricky, especially since we, as programmers, are used to writing sequential code. Instead of trying to understand the whole program, focus on what happens during a single execution of the shader – typically, for one pixel.

4. Shaders rely on math, but they can also make math easier to grasp. Visualizing equations through graphics can turn abstract formulas into something intuitive — and even beautiful.

5. There aren’t many tools for debugging shaders, but you can still use techniques like assigning specific colors or printing numbers in shaders to understand what’s going on.

6. Shader languages are minimalistic – no dynamic allocations, no built-in random numbers or similar high-level structures. While this might feel limiting at first, learning shaders will elevate your programming skills to the next level.

7. Have a visual effect in mind? Break it down into small steps to implement it, e.g., start by drawing a circle, then animate it, then add more circles, and so on.

8. Materials are a superset of shaders. If you’ve worked with material editors, you already have a head start. You can often translate that knowledge into shader code. Also, you can examine the shader code generated from a material, e.g., in Unreal Engine, you can go to Window->Shader Code->HLSL Code to check your shader.

Best materials for learning shaders:

• Shadertoy

  – fantastic platform for real-time shader development. It also offers a vast library of shaders made by others
  



• The Book of Shaders

  – fantastic platform for real-time shader development. It also offers a vast library of shaders made by others
  



• Desmos

– a helpful tool to visualize and experiment with mathematical functions