HTML5 Games in C++ with Emscripten - HTML5 Game Development Insights - page 286

When using --preload-file , Emscripten-compiled code uses XMLHttpRequest to download the embedded
filesystem image in advance of launching the game, but XMLHttpRequest doesn't work with file:// URLs. Thus,
a real HTTP server is needed to test the game. Python provides a simple HTTP server.
python -m SimpleHTTPServer
Since gamedata.vfs is over 100MB and Emscripten by default allocates 16 MiB for the application's
entire memory space, I also needed to increase the total memory size to 200 MiB with the emcc option
-s TOTAL_MEMORY=209715200 . I picked 200 MiB because 100 MiB is used for the game assets, and I surmised that
100 MiB was sufficient for all runtime allocations. If I turned out to be incorrect, the program would have told me
with an out-of-memory error.
Getting the Game to Run
As web pages are single-threaded and event-based, it's bad behavior for JavaScript to wait by spinning in a loop.
Thus, the default Emscripten implementation of the SDL_Delay function crashes if you call it on the main Emscripten
thread, so I removed it from Emscripten and replaced it with a function that does nothing. Instead, I could have also
simply removed all calls to SDL_Delay from AstroMenace's loading code. I will discuss the main loop in more depth
later in this chapter.
Now all the data files load but the application crashes with the disappointing OpenGL error shown in Listing 18-15.
Listing 18-15. Emscripten Legacy Emulation OpenGL Error
WebGL: getParameter: parameter: invalid enum value 0x821b @
http://localhost:8000/build/AstroMenace.js:5798
WebGL: getParameter: parameter: invalid enum value 0x821c @
http://localhost:8000/build/AstroMenace.js:5798
WebGL: getParameter: parameter: invalid enum value 0xd31 @
http://localhost:8000/build/AstroMenace.js:5798
WebGL: hint: invalid hint @ http://localhost:8000/build/AstroMenace.js:5954
WebGL: texImage2D: format does not match internalformat @
http://localhost:8000/build/AstroMenace.js:9603
uncaught exception: glMaterialfv: TODO
Emscripten's OpenGL legacy emulation layer does not currently implement glMaterialfv or glLightfv .
Instead, it throws an error with the message "TODO" whenever they are called. Thus, it's time to pull in a real OpenGL
emulation layer: Regal. The Regal project is available at https://github.com/p3/regal .
Integrating with OpenGL, Attempt #1: Regal
I ran into several gaps in Emscripten's legacy GL emulation support. First, glLightfv and glMaterialfv simply throw
an exception when called. Second, AstroMenace targets OpenGL 2.1 and GLSL 1.20, so its shaders start with #version 120.
Since WebGL is based on OpenGL ES 2.0 and GLSL 1.00, its shaders must be marked with #version 100.
Rather than deal with all of this myself, I decided to try integrating Regal, a legacy OpenGL emulation on top
of OpenGL ES 2. I turned off the -s LEGACY_GL_EMULATION option, and instead included Regal's source code from
within the build system. Then I spent several fruitless evenings attempting to get Regal to run. I ran into issues with
illegal asm.js function pointer casts, null GL function pointers, infinite loops, and too many JavaScript local variables
being generated when calling into the compiled Regal code. I was not able to clearly determine why Regal didn't
work, but I hope that in the near future the Emscripten implementation of LEGACY_GL_EMULATION is swapped out for