Dvingo.GitHub.io

I've been delving into computer graphics and WebGL the past few months, as a way to solidify my knowledge I built an asteroids clone in JavaScript with the rendering done in WebGL. To deal with WebGL API boilerplate I used the twgl library. It also includes some 4x4 matrix and vec3 helpers that are needed to handle movement and physics. This was mainly a project to learn WebGL basics so I added some features to confirm my understanding, like global scaling and loading a 3d model of a plane from turbosquid.

Learning GPU graphics programming pairs well with learning 3d modelling as so many concepts overlap, like cameras, matrix transforms, coordinate systems, lighting and shading, materials, et cetera. I picked up some very basic blender skills to create the single asteroid model and the geometric plane model. Most of what I learned about Blender was from these wonderful lessons.

Although the physics of asteroids is pretty minimal, it can still be daunting if you haven't done it before. Luckily I found an amazing series on youtube by Keith Peters which can be found here. He covers a plethora of math concepts related to computer graphics and animation. I highly recommend them.

You may notice the collisions are a bit coarse, I am using axis aligned bounding boxes, as it is the simplest method to get something working, but doesn't provide the best results. As my focus for this project was on learning I was fine with this tradeoff.

The playable game is below, it's missing some polish to make it feel like an actual game, such as points and high scores and all that. Just the minimal set of features to be called asteroids.

You can find the source code on GitHub.