SDL-Emscripten-Sample

Sample on how to use SDL3 along with Vcpkg, CMake, Ninja and Emscripten

Dependencies

Ninja

Ninja is a small and fast build system focused on speed.
It is often used as the backend generator for CMake to significantly accelerate incremental builds.

CMake

CMake is a cross-platform build system generator.
It allows you to define your project configuration once and generate builds for different platforms and toolchains—including Emscripten.

Vcpkg

Vcpkg is a cross-platform C/C++ package manager.
It enables you to easily install and integrate libraries like SDL3 into your CMake project using vcpkg install and toolchain integration.

Emscripten

Emscripten is a toolchain for compiling C/C++ to WebAssembly or asm.js.
It provides an LLVM-based compiler (emcc) and ports of common libraries, allowing native applications—such as those using SDL3—to run in the browser.

SDL3

Building on Windows (Emscripten + SDL3 + CMake + Ninja + Vcpkg)

This guide explains how to build the SDL-Emscripten sample on Windows using PowerShell, C++, CMake, Ninja, Vcpkg, SDL3, and the Emscripten SDK (emsdk).

All file paths shown are examples. Replace them with the correct paths on your machine.

---

1. Enable PowerShell Script Execution

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

---

2. Install & Activate Emscripten

cd path/to/emsdk
./emsdk install latest
./emsdk activate latest
./emsdk_env.ps1

2.1 MSYS2

/ucrt64/etc/profile.d/emscripten.sh

---

3. Configure the Project With CMake for Emscripten

emcmake cmake -S . -B build-emscripten `
  -DVCPKG_CHAINLOAD_TOOLCHAIN_FILE="path/to/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake" `
  -DCMAKE_TOOLCHAIN_FILE="path/to/vcpkg/scripts/buildsystems/vcpkg.cmake" `
  -DVCPKG_TARGET_TRIPLET=wasm32-emscripten `
  -DCMAKE_BUILD_TYPE=Debug `
  -G Ninja

cmake -S . -B build -DCMAKE_TOOLCHAIN_FILE="/c/tools/vcpkg/vcpkg.cmake" -DVCPKG_TARGET_TRIPLET=x64-mingw-dynamic -DCMAKE_BUILD_TYPE=Debug -G "MinGW Makefiles"

cmake --build build -- -j

---

4. Build the Project

cd build-emscripten
ninja

---

5. Run the Build via Local HTTP Server

cd bin/Debug
python -m http.server 8000

Now open the following in your browser:

http://localhost:8000/

---