How to create a Web Assembly — WebGL project in C ?

As of now Web Assembly and WebGL allow to make tremendously efficient applications in the web. This is how Figma works under the hood.

We’ll learn how to create a simple Web Assembly - WebGL “Hello world” project in C.

The compiler : Emscripten

In order to compile our C code into Webassembly, we’ll need Emscripten. As of now it is the only compiler that implements the Webassembly standard.

First, download emsdk :

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

Then, install it and activate the virtual environment :

git pull
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

It’s important for the rest of this tutorial that you stay in the same shell to keep the virtual environment.

Running Emscripten test suite

Since Webassembly is a pretty new technology, there is not a lot of detailed documentation out there. The best way to start coding is to check out pieces of the Emscripten test suite.

First, you need to download Emscripten source code :

git clone git@github.com:emscripten-core/emscripten.git
cd emscripten

Install npm dependencies :

npm install

You can then run some tests in the test suite :

./tests/runner test_loop

Looking for WebGL tests

Emscripten has plenty of tests under the tests folder. We want to find one that can be used as a starting point for our WebGL project.

Let’s try to find WebGL related tests :

git grep test_webgl

We can see that a bunch of them are gathered in the tests/test_browser.py file. Looking closer at this file, we can see one of them is using another file named webgl2_draw_packed_triangle.c. This should be perfect as starter code for our project.

We can run this test using the following command :

./tests/runner browser.test_webgl2_packed_types

You should see your browser opens and shows a colored triangle indicated that WebGL is performing well on that test.

Setting up our Webassembly - WebGL project

First, create a project folder :

mkdir wasm-webgl-project

Take the file webgl2_draw_packed_triangle.c from emscripten test suite and copy it as main.cto your project folder.

cp emscripten/tests/webgl2_draw_packed_triangle.c wasm-webgl-project/main.c

Within emscripten/tests/test_browser.py, where the test we’re copying is performed, we should see command arguments that must be used to compile the code successfully :

self.btest(test_file('webgl2_draw_packed_triangle.c'), args=['-lGL', '-s', 'MAX_WEBGL_VERSION=2', '-s', 'GL_ASSERTIONS'], expected='0')

An Emscripten project is using the emcc command to compile source files. Let’s make a Makefile with the following content :

# Makefile
all:
  emcc -o index.html -lGL -s MAX_WEBGL_VERSION=2 -s GL_ASSERTIONS main.c

Be aware that in Makefile‘s we must use tabulations and not spaces for indentation. Note that we added the -o index.html command line argument, which tells Emscripten to generate an html file for us.

From now on, you should be able to compile your project :

make

This should output index.html index.js and index.wasm files.

Running our project in the browser

Now that the project has been compiled, we simply need to setup an HTTP server to see our code running. We can use python3 http module to do that :

python3 -m http.server

Then check out localhost:8000, you should see a Webassembly - WebGL powered colored triangle !

Further notes

Emscripten by default outputs a lot of debug utilities in the html file. If you want a production ready setup, you’ll certainly need to make the Javascript / HTML part yourself. See MDN documentation on Webassemlby Javascript API for that.

To learn OpenGL, and make more than a single colored triangle, you can follow this tutorial.