Should I learn to work with Shaders?

2026 Day 156. #TechDays.

Since I began my journey of learning front-end designing and development, I have been amazed with some of the animations I found on react-bits and 21stdev. These seemed so complex that I could not possibly hope to recreate them.

I went about learning the basics of TypeScript, Next.js, Shadcn, Tailwind, and GSAP. This took well over a year and then I found myself even more in awe of the animations I had seen. They seemed almost impossible to be created.

Photo by the blowup on Unsplash

Until I came across OGL, Shaders, and finally The Book of Shaders.

Suddenly things made a lot more sense to me. Shaders removed the complexity of creating and animating different objects. They are still complicated, it was just moved to Mathematics.

Shaders are programs that run on the GPU. When I first heard the name , it was very suggestive of the fact that shaders are just used for rendering materials and so on. On learning more I realised Shaders are

  1. Programs that run on the GPU over CPU. Parallel computing via matrix manipulation allows for faster responses and makes animation less heavy for the CPU.
  2. Can be used to create objects (lines, circles, cylinders, donuts, etc.), colour and animate them.
  3. Are used in Game Development, Web Development, Generative Art, and so on. A lot of the inspirations are from nature too, and that was very interesting to me.
  4. Require you to be good at Math. Since everything you draw, colour, and animate is via math, you should have an understanding of higher order math equations, AP/GP, infinite series, and such advanced math concepts.
  5. Are relatively inexpensive to run on the Desktop because of the GPU but can potentially cause heating issues on older phones (no GPU, low power CPU).

Here comes the money question, should one learn to work with Shaders?

Yes if,

  1. You want to get into generative designing for animated movies, CGI, games, web development, and other such creative coding fields. Think Tron 1982.
  2. You want to get into 3D designing and development. You might find yourself working with higher level libraries like Three.js but under the hood they too are using shaders.
  3. You want to design background animations, effects, motion design, etc. mathematically.
  4. You are not afraid of vectors, matrices, and advanced math.
  5. You are okay working with something on the lower level, optimised for the machine but harder to create for humans.

There are other use-cases but these were the most relevant to me as a web developer.

Shaders are incredibly useful and fun to work with. Some of the issues of working with them are

  1. There is little opportunity for debugging. It simply refuses to render anything if there is an issue with minimal reporting as to why.
  2. You will need to learn a new language (typically GLSL or something similar).
  3. Shaders is not the end game, once you understand the concept and can build animation with just shaders, you will need to work on higher level frameworks and softwares like Vulkan.
  4. Shaders work best with a GPU. This limits the number of devices you can see an optiimised performance on.
  5. Easy to get started with understanding the basics but hard to master and create exactl what you wanted to create.
  6. A lot of theory to learn, that is extremely relevant to understanding Shaders and is also important in the longer run.

I am learning to work with Shaders probably because of my early obsession with them. To work effectively I have employed this strategy

  1. Laid out the theory and the ideas behind what to use (shapes, fractals, noise, etc.) their mathematical equations and what effects do they have.
  2. Plan out the animation by myself, and execute it quickkly with LLMs. I have hd some successs but Iam still perfecting the prompt and my understanding of shaders to more accuraetely describe what I need.
  3. Fine tune the noise, colours, animation speeds etc. to my liking.

With some initial success, I am somewhat happy. There is still a long way to go and I cannot to be able to create entire designs on my own.

See you tomorrow.