Creating 3D games with WebGL and HTML5 APIs isn’t an easy task. It requires matrix manipulation, communicating with graphics hardware, and a good understanding of OpenGL ES (mobile version of OpenGL). To try and make these concepts easy to understand, I created a game tutorial in my new book for HTML5 In Action called Geometry Destroyer. By clicking on the image below, you can play it right now.
Geometry Destroyer is a classic space shooter style game, written with JavaScript, HTML5 APIs, and WebGL
The game allows you to move and interact in a 2d environment. But all the shapes (2d and 3d), are created with WebGL. Shooting elements on the screen uses a 2d collision system, that causes objects to explode into a massive amount of cube particles. One of the biggest difficulties to overcome with the game was memory management, as WebGL requires extra steps to remove shader and buffer data out of memory in a fast paced game setting. Normally JavaScript automatically removes data for garbage collection when there are no more references to it, WebGL makes this slightly complicated.
WebGL Context and 2D Context API don’t mix
I feel that the demo is a successful demonstration of what WebGL and JavaScript can accomplish for 3D in 2D. The biggest issue around blending the two is WebGL and Canvas can’t be used in the same <canvas> context, so the demo is completely written in WebGL, which is a slightly different approach than I would have liked. You can layer WebGL <canvas> context on top of a <canvas> 2D context, but I don’t recommend it. Reason being if you want to export your Canvas data to something like PhoneGap or Chrome’s app packager, it can cause issues. You’re better off using faux 3D (aka dirty 3D or fake 3D) if you want 3D graphics while using the Canvas 2D API.
WebGL Game Engine Tutorial
If you want to learn how to create this game you can pick up a copy of my book HTML5 in Action for step-by-step instructions. Its WebGL game engine tutorial teaches you how to roll everything from scratch with principles also applicable HTML5 Canvas API development. If you don’t want to pickup the book, you can always open up the game’s source in your browser and read through the vast amount of inline comments.