With the introduction of WebGL Web browsers became capable of using hardware accelerated 3D graphics, which opened up the possibility of creating a wide range of applications including 3D games.
In this thesis I will investigate how a 3D game engine can be implemented in a browser using WebGL and JavaScript.
First I will take a look at the characteristics of JavaScript and JavaScript engines, by investigating some techniques and software patterns for writing high performance JavaScript, and then examine some of the challenges there are when comes to creating 3D games.
To get hands-on experience I have implemented KickJS – a WebGL based 3D game engine. KickJS is a shader-based engine with a range of built-in shaders. Using the KickJS engine I have also created a shader editor, a scene editor and several small 3D demos.
Finally I have benchmarked the raw performance of JavaScript and WebGL. I have approached this problem from two sides: First comparing JavaScript performance with C++ performance and then seeing how the rendering performance of KickJS compares with the Unity game engine.
In general I found that the JavaScript CPU performance is around 2-4 times slower than C++ based applications. Since much of the calculations are pushed to the GPU, this may not be an issue for small and medium sized games.
The availability of WebGL makes the WebGL browsers a very attractive platform. I expect many small and medium sized games to appear on the platform in the near future.
Download the full thesis here:
WebGL based game engine (PDF 5.3 MB)
A big thanks to Jacob Marner and Simon Mogensen from IO Interactive for their invaluable feedback.
Sounds very interresting and I hope I find the time to read your work! Thanks for sharing!
By: fraspi on April 3, 2012
at 15:20
[...] Nobel-Jørgensen created the KickJS game engine (mentioned here before); here’s his master’s thesis, which uses it as an [...]
By: WebGL around the net, 5 April 2012 | Learning WebGL on April 5, 2012
at 14:59
Great work! I could not tell if you already have handed it in or not? If you still have time you really should get someone to proof read it as there is a number of grammar issues.
I only skimmed over it briefly, but here is a few things you might want to look at:
2.2.4 Appears to have mismatch between heading and content. Heading talks about memory allocation while the actually text is partly about the OO qualities of JS.
2.2.4 When pushing an object on the stack the stack-pointer is actually decremented. The stack resides in the top adresses of memory and grows downwards.
3.10.5 Shouldn’t the criteria be “same shader and texture(s)”. Listing ‘shader’ and ‘material’ next to each other is a little confusing as a material is generally defined as as a set of textures and shaders.
5.2.3 There appear to be some mismatch between the graph and the text. The graph shows KickJs to be fastest?
On a more general note it would have been great with a deeper comparison of KickJS vs. NaCl as this is probably the closest ‘competitor’.
By: Michael R. Schmidt on April 10, 2012
at 11:04
Hi Michael. Thanks for your feedback. I’ll soon update the document with some of your suggestions. The thesis was handed in the first of March, but I’ll be happy update any bugs and corrections found
And yes – it might be a little short on info about NaCL.
By: Morten Nobel-Jørgensen on April 20, 2012
at 23:02