Rendering Large Amounts of Sprites with WebGL

Rendering a large amount of sprites and maintaining good performance is a difficult task but thankfully there are some good ways to manage it. I’m going to talk about one of the methods I use to render large amounts of sprites in WebGL.

Given that at the time of writing there is no native support for instancing in WebGL I have had to come up with a way to do this myself. I’m not going to claim that this is the most efficient way to do things and there may be better methods out there so I encourage you to go look and find one that works for you. This way fits my use-case perfectly, although I’m sure I’ll continue to refine it as I go along.


2D WebGL Boilerplate

For my first post I thought I would talk about a simple project I recently uploaded to GitHub (as in this very day) that I use all the time.

When I was starting out learning WebGL I scoured the internet for tutorials trying to learn the best practices and all kinds of tips and tricks, (I personally recommend the Mozilla Developer tutorials if you’re just starting out) and ended up rewriting the same starting code over and over again. I personally find this to be useful when first learning a language or framework as it helps solidify in my head what I am doing and why I am doing it. However once you’ve got the hang of things it can get very tedious to autonomously write out the same thing over and over again.