Experimenting with Emscripten

Let’s start the year with a bang!

No, I was not planning on adding support for Emscripten so soon, but I woke up on Saturday morning with that idea in my mind. I was assuming that the process to take a Crimild demo and make it run on a web browser would take me several weekends, but it turned out to be a lot easier.

So, here’s a–

Wait. I see it in your face. You don’t believe me, right? Take a look at THIS WORKING DEMO then.

Screen Shot 2018-01-07 at 1.36.25 PM

 

Keep in mind that it might take a while to load. Also, try rotating the model by dragging the left mouse button. You can use the WASD keys too, but you need to click on the frame first in order to give it focus.

The source code for this demo is already available at Github. It’s using a branch of the latest Crimild version just to make sure I’m not breaking anything else. I intent to merge this code with the main one once I’m confident enough.

Now, where were we? Oh yes: “So, here’s a postmortem”

First things first

The first step was the obvious one: install Emscripten in my computer. The official website has a todo list that is very clear and easy to follow. And I already had NodeJS on my computer so the whole process was quite simple.

After the installation, I made sure the most basic examples, like the Hello World one, were all working. And with my environment correctly configured, I moved on to write the first demo

Dumping a scene

I wanted to start with something simple. Create a scene (a similar one as in the Triangle example), and dump it to the standard output. That’s it. No simulation, no rendering. Just to make sure Crimild’s core module would build and work correctly.

In order to setup the project, I used the official toolchain for CMake also provided by the same Emscripten installation. That was the key to make the process a lot simpler.

The project’s CMakeLists.txt only needed to specify the location of Crimild sources, making sure that only the core classes would be included in the final Makefile. I used the same macros for building apps as in the example projects.

Then, compiled the whole thing and ran it using node.

There was no need to change anything in the code.

At all.

Moving on.

The GLFW affair

I wanted to render something on the screen next, but it wouldn’t be that easy this time.

First, I had to enable the modules that I needed from Crimild. I knew that Emscripten has built-in support for OpenGL ES and GLFW, that was all I needed.

I had to make some changes in Crimild’s CMake files in order to detect wether or not we’re building for Emscripting. That way we’ll use one version of the libraries or the other. For example, although Crimild has a reference to the GLFW project sources, we need to use the one provided by Emscripten in the end. Therefore, I had to make sure I was using the appropriated ones at linking time (which was not the case for the first couple of hours until I figure it out).

Several “undefined symbols” later, I managed to organize Crimild’s CMake files in a way that can be reused for any platform.

I also had to add some extra flags in the code, specially for handling cases like where to locate the OpenGL header files. In addition, I implemented the required methods to declare the main loop function that will be called each frame.

At that point, I started running the demo using a simple index.html page that only contained the canvas and the loading code for the demo.

S**t got real

With a triangle spinning on the screen, the next step was to actually load an animated model.

I didn’t even try to build the Import module, because I knew that Assimp may became a problem, so I took the easy way out: loading a model already saved as a binary stream.

It took me a while to figure out how to work with Emscripten internal file system, and the fact that, as with any other web project, I eventually had to ran an instance of an HTTP server (the SimpleHTTPServer from python, if you’re curious) in order to publish not only the code, but also de data files.

The result was the working demo you have seen above.

Not only was the character walking on the screen, but all the keyboard and mouse interactions worked as well. I wasn’t expecting that.

Closing comments

Like I said, integrating Emscripten was a lot easier than I originally though. And it works like a charm!

At the time of this writing, I still need to enable other modules, like scripting, but I’m pretty confident that it will be just as easy (specially because Lua is already written in ANSI C/C++). Audio support is still to be added as well.

Based on the results so far, I’m considering making a web version of The P.U.R.G.E Protocol as soon as I have the chance.

Who knows. Maybe my next project would be a web based one 😉

See you next time!

Hernan

 

 

 

Advertisements

3 thoughts on “Experimenting with Emscripten

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s