Building Magnum with Emscripten on Windows

~ 3 Minute Read.

At Vhite Rab­bit I’ve been us­ing Mag­num to build Em­scripten based web projects for quite a while. Since the Ocu­lus Rift con­strains me to Win­dows for de­vel­op­ment and some­times things are hard to set up there, I here­by share the way to com­pile Mag­num with Em­scripten on Win­dows that worked for us—may it be of use to you.

Set­ting Up Em­scripten

One of the Em­scripten main­tain­ers, juj, pro­vides a won­der­ful tool to get this done pain­less­ly: ems­dk (it has been added to the of­fi­cial em­scripten repos­i­to­ries since writ­ing of this blog post).

Just go ahead and clone the repos­i­to­ry. The last ver­sion this was test­ed with was 1.39.18, if you want the lat­est ver­sions, 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 down­load and in­stall em­scripten and all its de­pen­den­cies run the fol­low­ing com­mands:

emsdk udpate
emsdk install latest
emsdk activate latest

The last com­mand will set up your em­scripten en­vi­ron­ment that will be avail­able with emcmdprompt.bat. You will use that to run all cmake com­mands for com­pil­ing mag­num from.

Com­pil­ing Cor­rade for Desk­top

Since Mag­num us­es the corrade-rc tool pro­vid­ed by cor­rade, you will need to com­pile cor­rade for both desk­top and Em­scripten. I rec­om­mend do­ing this via vcp­kg, since that is eas­i­est on Win­dows:

vcpkg install corrade[core,rc]

Fi­nal­ly make sure to ei­ther make it avail­able on your path or set CORRADE_RC_EXECUTABLE in the fol­low­ing build steps.

Com­pil­ing Mag­num

I cre­at­ed a batch script for this, be­cause it is rather an­noy­ing to have to re­run all com­mands man­u­al­ly when you up­date mag­num and cor­rade—if you use mag­num-ex­tras, mag­num-plug­ins and mag­num-in­te­gra­tion, that’s five repos­i­to­ries!

First, make sure you cloned mag­num with sub­mod­ules, 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

Ob­vi­ous­ly on­ly clone what you need, if you don’t use Magnum::Ui for ex­am­ple, you will not need “mag­num-ex­tras”. You will need to have nin­ja on your path and then we’re ready to get com­pil­ing!

@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 ad­just those CMake vari­ables to your de­sire, build­ing ex­act­ly what you want from mag­num.

Build­ing Your Project

Build­ing your own project is not much dif­fer­ent from build­ing mag­num it­self. Cre­ate a build di­rec­to­ry and nav­i­gate to it in the emcmdprompt.bat. Then use some­thing like the fol­low­ing to con­fig­ure 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!

Writ­ten in 18 min­utes, ed­it­ed in 10 min­utes.