A Beginner’s Journey into Graphics Programming

One fateful night, I was scrolling through my YouTube feed when I came across an interesting Kishimisu channel video introducing me to the wild world of graphics programming. In the video, I saw a beautiful visual created with nothing but mathematical concepts and I got hooked. Here I was, lamenting my horrible hand-eye coordination and thinking I was doomed in art when I could have put all those years of learning linear algebra and calculus to good use. Here was an excuse to use maths for entertainment that I could get behind. So, I decided to see what happens in this strange world of drawing stuff on the screen.

To start my exploration, I thought it’d be great if I could reproduce the visual I saw in the Kishimisu video. In the video I watched, he made the visual on this amazing website called Shadertoy where a bunch of incredibly smart people make visualizations and share the code on how they made them. For reference, these are some of the visuals on the site that blew me away.

Now, you’d think that since I wanted to reproduce the visual I’d create a Shadertoy account and start coding away right? Well, that was my plan at the beginning. As I was in the process of staring at those visuals, I found myself wondering how the Shadertoy website worked. As such, I found myself entering much deeper waters.

From my research, I learnt about the magic of shaders. Now, what are shaders? As far as I understood, shaders are just programs that run on your graphics card which is one of the key gadgets that allows you to play all the new amazing games these days. Like any programming language, shaders can be written in various languages like OpenGL, DirectX, Vulkan or Metal. However, strangely enough, when it comes to websites, there seems to be only one language at its core which is called WebGL which is just a port of OpenGL.

In a wild twist of fate, as I was learning about WebGL, I learned that a new graphics API was released last year called WebGPU that is meant to succeed WebGL considering it was initially released in the early 2010s. This felt amazing as that means we are possibly at the cusp of a graphics revolution for the web. This means I can get an opportunity to experience a potentially new world-shaking technology regarding computer visuals on the web in real-time and experience the technology evolve with me.

So, I instantly pivoted and started to see if I could reproduce the initial visual not in WebGL on Shadertoy but in WebGPU using my hacky code. Below are some visuals I made using WebGPU.

Having played around with the new API I have to say I was greatly impressed so, I decided to make this a series where I talk about my learnings in graphics programming and hopefully I get to show you all more and more amazing visuals and also explanations of my learnings as I go on.