Developing a WebGL Game – Part 1

I think many will agree that you cant really know or understand a framework or library until you actually build something with it (note I don’t count WCF in this – that framework is just a pain in the ass).

Over the last few months I have been building & prototyping games with the WebGL library three.js. 

During the games development have found numerous forum posts asking how to accomplish various (simple-ish) tasks in three.js such as selecting an object with the mouse, move it from one position to another and collision detection. I can tell you how to do all this & have come across a few tips and tricks that I thought others might find useful so have decided to blog about the games development. 

In this first post I will be covering the background to my game so if you are after technical details come back next time..

Beginning three.js

One of my earliest WebGL experiments involved creating a simple car game & integrating the physics engine Physijs. 

It looked like this:


Yeah Forza probably isn’t in any danger..

In this example you can use the cop car to ram the green column (don’t do this – the police would be very upset) which then topples over depending on the speed it is hit at.

Integrating the physics library was surprisingly easy and it took care of much of the complexity albeit with the caveat that the occasional odd thing would happen and the vehicle would take off spiraling off into space.

One of the interesting things creating this little example gave me was an appreciation of the subtleties that go into game development. Making a game feel right is surprisingly hard. E.g with a car game you don’t want to feel if the car is floating above the surface & you want to make the acceleration feel like you are shifting up through gears etc etc.

Anyway I tired of this and started a new project to create a new game, and preferably one that I would actually finish developing.

Developing a game also seemed to be a good excuse to play with some technologies that don’t generally come up in paid employment that I wanted to work with such as:

  • WebGL & shaders
  • Advanced JS constructs
  • Possibly Angular for the UI of the game although I remain undecided on this
  • Something to keep game sessions in sync (currently SignalR)
  • Web workers
  • Audio API

What type of game to create?

During my childhood my favorite games were “god” or turn based strategy games (hmm not sure what that says about me) and two of my favorite were a game called Populous and another Lords of Chaos.

Below is a screenshot of Populous:



In populous you are a god in charge of the blue tribe who has the aim of destroying the red tribe (not sure why they hatted the red guys). This was accomplished through flattening the terrain which led to your tribe being able to build better villages & casting spells to destroy your opponent & their tribe.

The other game I enjoyed was Lords of Chaos. The basic premise is simple – you have to destroy the other wizard/player. Each turn you have a certain number of action points you can spend to walk around the randomly generated environment & cast spells and then your turn is over.



So I decided I wanted to build a game with aspects of both Populous & Lords of Chaos although it is developing into something else as I go along.

If you have stayed with me this far you are probably wondering what my game looks like at the moment.

Well er its not the prettiest thing:


Yeah it doesn’t look like too much but there is actually a lot of functionality here that has taken months to develop.

One of the things I did was prototype the tricky areas of functionality before putting anything together. For example in a turn based strategy game I am pretty sure that I will need to select stuff, move it around and detect when objects collide.

In the game you can do the following so far:

  • Move stuff around the environment
  • Generate maps from terrain files (well a terrain file consists of 2 arrays storing tile type, height)
  • Objects can only move a configurable distance
  • When selecting an object it shows the range they can move to (that’s the light grey highlight square in the pic above)
  • The white cube can attack the red cube – but only when its adjacent to it
  • Syncing of environment between sessions – e.g. so 2 people can play the game on different machines
  • The ability to move the viewport around in all directions

Next up I will be discussing project organization – JavaScript can get unmanageable pretty quick unless you are careful..