Background

In my last graphics article, I showed the relatively straightforward process of drawing a triangle on the screen. Whilst not perfect, practical, scalable, or all that interesting, I felt it important to help set the scene of what you can expect when working with the WebGPU API. From my experience, it's a relatively low-level API which means two things in practice.

1. It can be quite verbose when you want to do some simple things

2. It's surprisingly flexible and customizable owing to all the freedom it gives you.

So, why don't I think of a use case that seems more realistic and allows me to explore more of what WebGPU can do?

As should be apparent at this stage, I'm new to the world of graphics programming but, it has sunk its claws deep into me and I can't stop because it's just too much fun. Hence, I decided to go with the flow and learn how to make a Game Engine.

But why a Game Engine?

Gift, why would you make a game engine? Do you not know how hard that is? Have you not seen those horror stories about how long those things take? Who's even going to use the engine anyway?

Are all these valid questions? yes, they are. But, I remembered a video I watched by the YouTuber ThePrimeagen where he talked about the importance of taking the hard road sometimes even when there's no reason. I had also learnt about the Handmade Hero series by Casey Muratori where he made an entire game from scratch with no dependencies and that just looked fun. The nail in the coffin though was that I wanted to know if I could do it. I've heard the horror stories of it all and couldn't help diving into the fire to see if I'd come out the other side. So yeah, do I need to make a game engine? No. Do I want to make a game engine? Absolutely!!!!

How am I going to make it?

This was an interesting question to answer. I knew nothing about making a game engine and I didn't know anyone who did so Google was my friend.

The first question I had to answer was will my engine be for 2D or 3D games. From my initial runnings with Graphics Programming, I knew that the complexity increased exponentially when you moved from 2D to 3D so I humbled myself and decided I'd have to make a 2D engine for now.

This helped a bit but not much since I still didn't know where to start. My problem was extra interesting owing to WebGPU still being so new there didn't seem to be any resources out there that I could find for making a game engine using it so I had to use tangential resources to accomplish my goal.

Surprisingly, there are many good resources in different languages such as the Handmade Hero series which is wonderful when you're using C++ or the Coding a 2D Engine in Java series. Sadly, there were too many differences between these and my potential TypeScript-based implementation so I had to keep searching. Eventually, I found this wonderful book called "Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL". I mean, the title practically speaks for itself. It was also a bonus that it was written using WebGL which precedes WebGL2 which precedes WebGPU.

So yeah, I haven't finished making my engine and there's still a lot of stuff I need to work on but I feel I've made decent progress on it. You can find the code here and in the following graphics articles, I'll give rundowns on what all that code is doing and what I had to modify to get it working for the WebGPU API.