Emscripten: Setup

Unfortunately nobody can be told about Emscripten. You have to use it for yourself - Moros1138

Linux: Arch and related distributions

[user@is_awesome ~]$ sudo pacman -Sy python3 git

Linux: Debian, Ubuntu, and related distributions**

[user@is_awesome ~]$ sudo apt update
[user@is_awesome ~]$ sudo apt install python3 git

At this point, regardless of distribution, we assume you have the required software installed.

Navigate to a directory where you want to keep the Emscripten SDK, for this example we will use ~/opt

[user@is_awesome ~]$ mkdir opt
[user@is_awesome ~]$ cd opt
[user@is_awesome opt]$ git clone https://github.com/emscripten/emsdk
[user@is_awesome opt]$ cd emsdk
[user@is_awesome emsdk]$ emsdk install latest
[user@is_awesome emsdk]$ emsdk activate latest

Every time you want to use Emscripten, you will be required to source the emsdk_env.sh like so:

[user@is_awesome ~]$ . ~/emsdk/emsdk_env.sh
Adding directories to PATH:
PATH += /home/user/opt/emsdk
PATH += /home/user/opt/emsdk/upstream/emscripten
PATH += /home/user/opt/emsdk/node/14.18.2_64bit/bin

Setting environment variables:
PATH = /home/user/opt/emsdk:/home/user/opt/emsdk/upstream/emscripten:/home/user/opt/emsdk/node/14.18.2_64bit/bin:/usr/local/bin:/usr/bin:/bin:/usr/local/sbin:/opt/cuda/bin:/opt/cuda/nsight_compute:/opt/cuda/nsight_systems/bin:/usr/lib/jvm/default/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl:/var/lib/snapd/snap/bin
EMSDK = /home/user/opt/emsdk
EM_CONFIG = /home/user/opt/emsdk/.emscripten
EMSDK_NODE = /home/user/opt/emsdk/node/14.18.2_64bit/bin/node

To ensure that you are set up and ready to use Emscription, run this as a test

[user@is_awesome ~]$ emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.14 (4343cbec72b7db283ea3bda1adc6cb1811ae9a73)
clang version 15.0.0 (https://github.com/llvm/llvm-project 7effcbda49ba32991b8955821b8fdbd4f8f303e2)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: /home/user/opt/emsdk/upstream/bin

MacOS

TODO: seeking MacOS user to provide documentation here.

Windows

Javidx9 made a video demonstrating how to install Emscripten on Windows. It was made for the olcPixelGameEngine, but Emscripten is Emscripten and those portions of the video are still relevant.

Emscripten: Usage

At this point, regardless of platform, we assume that you have an installed, activated, and working Emscripten environment

An in-depth explanation of the commands can be found here.

Run the following command:

embuilder build sdl2_mixer libpng zlib

Build with the following command:

em++ olcSoundWaveEngineExample.cpp -o olcSoundWaveEngineExample.html -sALLOW_MEMORY_GROWTH=1 -sMAX_WEBGL_VERSION=2 -sMIN_WEBGL_VERSION=2 -sUSE_LIBPNG=1 -sUSE_SDL_MIXER=2 -sLLD_REPORT_UNDEFINED  -std=c++17 --preload-file path/to/assets@assets

Test, with the following command:

emrun olcSoundWaveExample.html