Jul 24 2018Building Magnum with Emscripten on Windows

~ 3 Minute Read.

At Vhite Rabbit I’ve been using Magnum to build Emscripten based web projects for quite a while. Since the Oculus Rift constrains me to Windows for development and sometimes things are hard to set up there, I hereby share the way to compile Magnum with Emscripten on Windows that worked for us---may it be of use to you.

Setting Up Emscripten

One of the Emscripten maintainers, juj, provides a wonderful tool to get this done painlessly: emsdk (it has been added to the official emscripten repositories since writing of this blog post).

Just go ahead and clone the repository. The last version this was tested with was 1.39.18, if you want the latest versions, just omit the --branch and --single-branch flags:

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

To download and install emscripten and all its dependencies run the following commands:

emsdk udpate
emsdk install latest
emsdk activate latest

The last command will set up your emscripten environment that will be available with emcmdprompt.bat. You will use that to run all cmake commands for compiling magnum from.

Compiling Corrade for Desktop

Since Magnum uses the corrade-rc tool provided by corrade, you will need to compile corrade for both desktop and Emscripten. I recommend doing this via vcpkg, since that is easiest on Windows:

vcpkg install corrade[core,rc]

Finally make sure to either make it available on your path or set CORRADE_RC_EXECUTABLE in the following build steps.

Compiling Magnum

I created a batch script for this, because it is rather annoying to have to rerun all commands manually when you update magnum and corrade---if you use magnum-extras, magnum-plugins and magnum-integration, that’s five repositories!

First, make sure you cloned magnum with submodules, though:

git clone --recurse-submodules git://github.com/mosra/corrade
git clone --recurse-submodules git://github.com/mosra/magnum
git clone --recurse-submodules git://github.com/mosra/magnum-plugins
git clone --recurse-submodules git://github.com/mosra/magnum-integration
git clone --recurse-submodules git://github.com/mosra/magnum-extras
git clone --recurse-submodules git://github.com/mosra/magnum-examples

Obviously only clone what you need, if you don’t use Magnum::Ui for example, you will not need “magnum-extras”. You will need to have ninja on your path and then we’re ready to get compiling!

@echo off
pushd

set BUILD_DIR=build-emc
if not exist "corrade\%BUILD_DIR%" mkdir corrade\%BUILD_DIR%
if not exist "magnum\%BUILD_DIR%" mkdir magnum\%BUILD_DIR%
if not exist "magnum-plugins\%BUILD_DIR%" mkdir magnum-plugins\%BUILD_DIR%
if not exist "magnum-extras\%BUILD_DIR%" mkdir magnum-extras\%BUILD_DIR%
if not exist "magnum-examples\%BUILD_DIR%" mkdir magnum-examples\%BUILD_DIR%

rem This is the path magnum example apps will be deployed to.
set "DEPLOY_PREFIX=%cd%\deploy"
if not exist "%DEPLOY_PREFIX%" mkdir "%DEPLOY_PREFIX%"

rem This converts the emscripten sdk path set in your environment by emcmdprompt and replaces all \ with /
set EMSCRIPTEN_PREFIX=%EMSDK:\=/%/upstream/emscripten

set CMAKE_CMD=cmake .. -GNinja -DCMAKE_PREFIX_PATH="%PREFIX_PATH%" -DCMAKE_INSTALL_PREFIX="%EMSCRIPTEN_PREFIX%/system" -DCMAKE_BUILD_TYPE=Debug -DCMAKE_TOOLCHAIN_FILE="../toolchains/generic/Emscripten-wasm.cmake" -DEMSCRIPTEN_PREFIX="%EMSCRIPTEN_PREFIX%"
set CMAKE_BUILD_CMD=cmake --build . --target install

cd corrade\%BUILD_DIR%
%CMAKE_CMD% -DWITH_TESTSUITE=ON -DBUILD_DEPRECATED=OFF
%CMAKE_BUILD_CMD%

cd ../../magnum\%BUILD_DIR%
%CMAKE_CMD% ^
    -DTARGET_GLES2=OFF ^
    -DWITH_EMSCRIPTENAPPLICATION=ON ^
    -DWITH_WINDOWLESSEGLAPPLICATION=ON ^
    -DWITH_OPENGLTESTER=ON ^
    -DWITH_SDL2APPLICATION=ON ^
    -DWITH_MESHTOOLS=ON ^
    -DWITH_PRIMITIVES=ON ^
    -DWITH_OBJIMPORTER=ON ^
    -DWITH_TGAIMPORTER=ON ^
    -DWITH_SHADERS=ON ^
    -DWITH_TEXT=ON ^
    -DWITH_AUDIO=ON ^
    -DWITH_WAVAUDIOIMPORTER=ON ^
    -DWITH_TEXTURETOOLS=ON
%CMAKE_BUILD_CMD%

cd ../../magnum-plugins\%BUILD_DIR%
%CMAKE_CMD% -DWITH_OPENGEXIMPORTER=ON -DWITH_STBTRUETYPEFONT=ON -DBUILD_DEPRECATED=OFF -DWITH_TINYGLTFIMPORTER=ON
%CMAKE_BUILD_CMD%

cd ../../magnum-extras\%BUILD_DIR%
%CMAKE_CMD% -DWITH_UI=ON -DWITH_UI_GALLERY=ON -DMAGNUM_DEPLOY_PREFIX="%DEPLOY_PREFIX%" -DBUILD_DEPRECATED=OFF
%CMAKE_BUILD_CMD%

cd ../../magnum-examples\%BUILD_DIR%
%CMAKE_CMD% ^
    -DWITH_AUDIO_EXAMPLE=ON ^
    -DWITH_TEXTUREDTRIANGLE_EXAMPLE=ON ^
    -DWITH_WEBVR_EXAMPLE=ON ^
    -DMAGNUM_DEPLOY_PREFIX="%DEPLOY_PREFIX%"
%CMAKE_BUILD_CMD%

popd

Be sure to adjust those CMake variables to your desire, building exactly what you want from magnum.

Building Your Project

Building your own project is not much different from building magnum itself. Create a build directory and navigate to it in the emcmdprompt.bat. Then use something like the following to configure your project.

set EMSCRIPTEN_PREFIX=%EMSDK:\=/%/upstream/emscripten

cmake .. -GNinja -DCMAKE_PREFIX_PATH="%PREFIX_PATH%" -DCMAKE_INSTALL_PREFIX="%EMSCRIPTEN_PREFIX%/system" -DCMAKE_BUILD_TYPE=Release -DCMAKE_TOOLCHAIN_FILE="../toolchains/generic/Emscripten-wasm.cmake" -DEMSCRIPTEN_PREFIX="%EMSCRIPTEN_PREFIX%"
cmake --build . --target install

Good luck!

Written in 18 minutes, edited in 10 minutes.