How to build a SDL3 application to WebAssembly

SDL Development
1

I use this manual to build:

Note. This manual works for Android. Except “Ninja” app that must be installed (and added to Path, I used one from Qt: C:\Qt\Tools\Ninja) and manually changing of CMake version in the build.gradle script.

I installed the latest emsdk for the current time:

"emsdk.bat" install latest
"emsdk.bat" activate latest

I completed this task:

  1. On Windows hosts, run config-web-win.bat via the emcmdprompt.bat cmd in the emsdk root directory

This is the result:

--   SDL_X11_XSHAPE              (Wanted: ON): OFF
--   SDL_XINPUT                  (Wanted: OFF): OFF
--
--  Build Shared Library: OFF
--  Build Static Library: ON
--  Build Static Library with Position Independent Code: OFF
--
-- If something was not detected, although the libraries
-- were installed, then make sure you have set the
-- CMAKE_C_FLAGS and CMAKE_PREFIX_PATH CMake variables correctly.
--
-- Configuring done (691.6s)
-- Generating done (0.3s)
-- Build files have been written to: E:/_Projects/SDL3/sdl3-sample/build/web

The next task is:

  1. After the build completes, use python3 -m http.server in the build directory to make the page accessible.

But the build directory looks like this:

image

This is the /build/web directory:

image

I have the http-server package to run the result but I don’t see the index.html. What to do next?

1 Like
2

I ran the mingw32-make command inside of the build/web directory:

[ 95%] Building C object SDL/CMakeFiles/SDL3-static.dir/src/thread/generic/SDL_sysrwlock.c.o
[ 96%] Building C object SDL/CMakeFiles/SDL3-static.dir/src/thread/generic/SDL_syssem.c.o
[ 96%] Building C object SDL/CMakeFiles/SDL3-static.dir/src/thread/generic/SDL_systhread.c.o
[ 97%] Building C object SDL/CMakeFiles/SDL3-static.dir/src/thread/generic/SDL_systls.c.o
[ 97%] Linking C static library libSDL3.a
[ 97%] Built target SDL3-static
[ 98%] Building CXX object CMakeFiles/sdl-min.dir/src/main.cpp.o
[100%] Linking CXX executable sdl-min.html
error: linker: Undefined symbol: emscripten_webgl_get_proc_address(). Please pass -sGL_ENABLE_GET_PROC_ADDRESS at link time to link in emscripten_webgl_get_proc_address().
Error: Aborting compilation due to previous errors
em++: error: 'C:/emsdk/node/16.20.0_64bit/bin/node.exe C:\emsdk\upstream\emscripten\src\compiler.mjs C:\Users\8OBSER~1\AppData\Local\Temp\tmpwt4pmkp5.json' failed (returned 1)
mingw32-make[2]: *** [CMakeFiles\sdl-min.dir\build.make:100: sdl-min.html] Error 1
mingw32-make[1]: *** [CMakeFiles\Makefile2:101: CMakeFiles/sdl-min.dir/all] Error 2
mingw32-make: *** [Makefile:90: all] Error 2
3

Only the sdl-min.wasm was generated but I didn’t find the sdl-min.html file. I don’t understand what the errors mean and how to solve them.

image

4

I created an issue/topic here (where the manual is located): How to build a SDL3 application to WebAssembly · Issue #3 · Ravbug/sdl3-sample · GitHub

5

Ravbug answered in the topic above and the problem was solved!

SDL3 works in the browser!

image

6

I have written a step by step guide: How to run SDL3 app on Web with WebAssembly on Windows