I’ve always loved making games, ever since I can remember I’ve written pen and paper games, made up board games, wrote my own rules for miniature based games. A few years back I got into making video games.

This started with a game engine known as Game Maker a 2d engine by mark Overmars, which is now distributed by Yoyo Games. After several months playing around I got restless and wanted to play in the 3D world. I quickly shifted over to 3D Gamestudio a fairly powerful engine by Conitec Datasystems. I stuck with 3DGS for about a year, becoming fairly competent with the engine, which was largely BSP based, in the manner of the old Unreal Tournament and Quake style games. I released lots of the levels I built back to the community, and had a blast getting involved with other peoples projects.

After getting a job as a web developer in early 2008 I ran out of free time. If I wasn’t working, I was commuting (4-5 hours a day), and if I wasn’t doing that I was researching everything I needed to know to be at the top of my game. 18 months ago I got bored of the agency life and went freelance, opening up more time to work on personal projects. At the same time HTML5 started really picking up steam, specifically canvas and it’s 2D Graphics API. I spent a few weeks learning the basics of canvas, and how 2D engines worked, whilst building up my own. This lead to a few client projects developing games, and although they ended up using regular HTML, shifting tags around with JS/CSS I was hooked.

Fast forward to now. WebGL is coming on in leaps and bounds, and I want to play. I’ve seen a fair few demo’s around, but they’re largely just messing with shaders for wacky effects. I plan to build an engine and tool-set for games creation, and post the details and explanations as I go. Hopefully you’ll follow me along for the ride, and we’ll all learn a few things along the way!

First lets cover a few questions you may have.

What is WebGL?

WebGL is a JavaScript API for rendering interactive 3D graphics and 2D graphics, without using plug-ins, in any supporting browser. WebGL is based upon OpenGL ES 2.0, and the specification is maintained by the non-profit technology consortium Khronos Group. For more information please see the WebGL entry on Wikipedia

Requirements

Before we begin you’ll need a few things.

• A web server

  This can either be you’re own hosted solution (I use Server Grove, but any should do, just bare in mind that 3d assets will take up a lot of space. Or a web server running on your machine, if you are on PC I’d suggest WAMP, Mac’s have a web server built in, follow the advice on Apples knowledge base to access it.

• A text editor

  An editor as simple as notepad is perfect for this. However full IDE’s offer the best mix of ease of use and help in the form of code highlighting and assistance. There are 100′s of editors out there, so find one that suits you. I tend to use either Aptana or Sublime. Bear in mind that Wordpad, MS Word and other editors tailored for writing documents are not a viable choice, and should not be used.

• A WebGL enabled browser

  Ideally the latest Chrome or Firefox, however Opera and Safari do have working implementations but they are disabled by default.

• The code (optional)

  If you don’t wish to code along, feel free to download the source code from github.