If you paid attention during the post-GDC news, you probably heard that Epic Games and Mozilla teamed up to get the Unreal Engine running in the browser, without plugins, in a matter of four days. The secret? Emscripten.
Alon Zakai has worked three years on Emscripten, and its an amazing piece of software.
Let’s take one of my previous samples, and port it to the browser. Ready?
Getting things set up was the hardest part. Fortunately, there was a great step-by-step tutorial that helped me get the pieces installed. I am using Windows, so I went through the Using Emscripten from Visual Studio 2010 tutorial. I went through the first portion for setup, and skipped the second part, since I didn’t need Visual Studio integration.
Really, that’s all. This is my original build script, but using “emcc” instead of my previous compiler, and the output has a “.js” extension (I also removed directory paths, since Git gists don’t support them).
The “-s” flag in emcc is used to pass settings. I set “FULL_ES2” to 1 (true) because my project was written for OpenGL ES 2.0, which is compatible with WebGL. The Emscripten default is to provide compatibility for desktops version of GL, that need some bootstrapping.
This project draws a simple triangle. There’s only one conditional at this level. In order to run the main loop properly, “emscripten_set_main_loop” emulates the constant pulse that a “while” loop usually provides.
In the SDLStage class, I changed the step() method to skip most of the normal event loop. That’s it. This compiles and runs in the browser.
The resulting output can be large. So far, the best way to handle the size is to enable gzip compression on your server. If you are using Apache, the easiest way to do this is with a basic .htaccess file in the same directory as the project, like this:
There are a lot of creative ways to use Emscripten, whether you build an entire project or only a library. Combined with the ability to target asm.js, there is a lot of potential to take web content to the next level.