Posted by: Morten Nobel-Jørgensen | March 30, 2012

WebGL based 3D game engine – a master thesis about KickJS and WebGL


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.

About these ads

Responses

  1. Sounds very interresting and I hope I find the time to read your work! Thanks for sharing!

  2. [...] Nobel-Jørgensen created the KickJS game engine (mentioned here before); here’s his master’s thesis, which uses it as an [...]

  3. 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’.

    • 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.

  4. Hi Morten,

    Thank you for publication of your master thesis and great work you have done with KickJS. When I saw your thesis I just sit down and read it whole in one evening.
    I find your blog when searching some materials guideline for programmer who has some web development experience (javascript and mobile web-apps) very little C++ (beginner) and not at all about 3D graphics. I really want to start with some 3d game development as it seems more interesting and fun than corparate apps I used to work with.

    But I am confused as I wanted to start with webGL as my knowledge of JS can make it simpler to jump into topic, on the other side I saw last time NaCL and asm.js and got little impression that future web gaming will be done by native code as it always will have better performance and now add possibility to use engine and code that have been already done in C/C++. What is your opinion about it?
    And after reading your review about webgl book (‘webGL Up and running’) I realized that it it the best way to start with 3D graphics/webGL by little introduction and three.js and then see how as novice I want to go deeper in topic in way:
    JS+three.js –> JS+webgl –> C++ open GL (ES2) or eventually stay in JavaScript front-end development and reuse there webgl(three.js) for 3d graphics not necessesary in games. After looking on your work, it seems that for novice there is no need to worry about webgl performance for first game(s) and using kickJS will be good second step.
    Do you have any hint for somebody like me to start with it?

    Thank you in advance,

    BR,

    Andrew

    • Hi Andrew

      I guess the question is really what level of experience you are aiming for. The easy way to learn 3D graphics is to use an abstraction like KickJS or Three.js, since these will shield you from some of the complexities and hard part about 3D graphics and let you focus on gameplay or other parts of the application, but they might limit your understanding of the theory. Another path is to start with low-level stuff (WebGL or OpenGL).

      Finally a “Pure” WebGL book has just been released: “Webgl Programming Guide”, which seems to be a good introduction to the topic as well. I also recommend you take a look at the free Udacity course “Interactive 3D Graphics” https://www.udacity.com/course/cs291 (which uses Three.js).

      I suggest that you forget NaCL, ASM and Emscripten and instead play with WebGL (or OpenGL).

      Kind regards,
      Morten

  5. Hi,

    Thanks a lot for quick reply:)

    Best Regards,

    Andrew


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

Join 68 other followers

%d bloggers like this: