C++17 / WebAssembly OpenGL App template.

This project offers a light boilerplate to build cross-platform C++17 / WebAssembly OpenGL app using CMake, emscripten, and GLFW.

Building.

We will be using the command-line on Unix and Git Bash on Windows.

Quick start & run !

# [Optional] Retrieve system build dependencies with Synaptic.
# sudo apt install git build-essential cmake ninja-build python3

# Install and activate emsdk.
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
cd ..

# Clone the project with its submodule.
git clone --recurse-submodules -j4 https://github.com/tcoppex/gl-wasm-template
cd gl-wasm-template

# Compile for the web.
emcmake cmake . -B BUILD -G Ninja -DCMAKE_BUILD_TYPE=Release
cmake --build BUILD

# Serve the WebApp.
python3 ./tools/simple_server/main.py --serve ./bin/public

Requirements.

The Emscripten SDK should be installed and setup on your system. Others dependencies can be either retrieved via the package manager or as submodules.

The following table summarizes the project dependencies :

Dependency	Version	Description	Shipped	Required
Emscripten SDK	3.0.0	WebAssembly toolchains.	❌	✔️
CMake	3.10.2	Build tool.	❌	✔️
GLFW	3.3.6	Window manager library.	(:heavy_check_mark: )	✔️

(Version numbers described the development version and do not suggest a strict dependency).

Compilation.

First, retrieve the project and its submodules via the command-line by typing :

git clone --recurse-submodules -j4 https://github.com/tcoppex/gl-wasm-template
cd gl-wasm-template

Create a build directory :

mkdir BUILDs && cd BUILDs

Compile for desktop :

mkdir desktop && cd desktop
cmake ../.. -GNinja -DCMAKE_BUILD_TYPE=Release
cmake --build .
cd ..

Compile for the web (using emcmake before cmake) :

mkdir web && cd web
emcmake cmake ../.. -GNinja -DCMAKE_BUILD_TYPE=Release
cmake --build .
cd ..

Using alternatives CMake Generators.

On Unix, with Makefile.

cmake .. -DCMAKE_BUILD_TYPE=Release
make -j `nproc`

On Windows, with MSVC 15 for x64.

cmake ../.. -G "Visual Studio 15 2017 Win64" 
cmake --build . -- -config Release

Running the application.

You will find the desktop application in the bin/ directory and the web application in bin/public/.

WebAssembly applications need a proper server to run. For this you can either use http-server (when available) or the custom script provided in tools/simple_server :

python3 ../tools/simple_server/main.py --serve ../bin/public

TODO

• Better web / js pipeline.
• NPM package utilities (compiler / minifier / automatic server),
• Improved events handling,
• Advanced samples structures,
• Advanced front-end : React sample,
• Advanced back-end : server-side sample,
• native Android support ?

References

• https://emscripten.org/

License

This project is released under the MIT license.