Latest Emscripten 2.0.33 works well, except file loading. [solved]

[Jonathhhan]

It was possible to compile with the latest Emscripten, for that I had to recompile the OF libs (FreeImage or freetype for example) with the current Emscripten and made some other small changes like using c++17 and std filesystem instead of boost (boost had an undefined symbol).
I guess the issue now has to do with the glm qualifier glm::qualifier)0>&, this is the Java Script error message for the imageSubsectionExample (everything compiles fine):
imageSubsectionExample.html:1 emscripten_set_main_loop_timing: Cannot set timing mode for main loop since a main loop does not exist! Call emscripten_set_main_loop first to set one up. printErr @ imageSubsectionExample.html:1 imageSubsectionExample.html:1 Aborted(native code called abort()) printErr @ imageSubsectionExample.html:1 imageSubsectionExample.js:1 Uncaught RuntimeError: Aborted(native code called abort()) at abort (imageSubsectionExample.js:1:34496) at _abort (imageSubsectionExample.js:1:119651) at std::__2::__throw_failure(char const*) (imageSubsectionExample.wasm:0x362df2) at std::__2::__fs::filesystem::__canonical(std::__2::__fs::filesystem::path const&, std::__2::error_code*) (imageSubsectionExample.wasm:0x380f6f) at ofToDataPath(std::__2::__fs::filesystem::path const&, bool) (imageSubsectionExample.wasm:0x55a2d) at ofApp::setup() (imageSubsectionExample.wasm:0x22653) at ofNode::onParentOrientationChanged(glm::qua<float, (glm::qualifier)0>&) (imageSubsectionExample.wasm:0x4638a) at std::__2::__function::__func<std::__2::shared_ptr<of::priv::Function<ofKeyEventArgs, std::__2::recursive_mutex> > ofEvent<ofKeyEventArgs, std::__2::recursive_mutex>::make_function<ofMainLoop>(ofMainLoop*, void (ofMainLoop::*)(ofKeyEventArgs&), int)::'lambda'(void const*, ofKeyEventArgs&), std::__2::allocator<std::__2::shared_ptr<of::priv::Function<ofKeyEventArgs, std::__2::recursive_mutex> > ofEvent<ofKeyEventArgs, std::__2::recursive_mutex>::make_function<ofMainLoop>(ofMainLoop*, void (ofMainLoop::*)(ofKeyEventArgs&), int)::'lambda'(void const*, ofKeyEventArgs&)>, bool (void const*, ofKeyEventArgs&)>::operator()(void const*&&, ofKeyEventArgs&) (imageSubsectionExample.wasm:0x4c0d6) at ofEvent<ofHttpResponse, std::__2::recursive_mutex>::notify(ofHttpResponse&) (imageSubsectionExample.wasm:0x2a046) at ofCoreEvents::notifySetup() (imageSubsectionExample.wasm:0x4cb73)
Is there a way to solve whether the boost, the glm or the std filesystem issue, so that is possible to load data with OF and the latest Emscripten (everything else seems to work fine)?

[Jonathhhan]

This is the Java Script error message if I compile with boost (even if there is no file to load):

advanced3dExample.html:1 missing function: 
_ZNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEC1ERKS5_
printErr @ advanced3dExample.html:1
advanced3dExample.html:1 Aborted(-1)
printErr @ advanced3dExample.html:1
advanced3dExample.js:1 Uncaught RuntimeError: Aborted(-1)
    at abort (advanced3dExample.js:1:34320)
    at __ZNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEC1ERKS5_ (advanced3dExample.js:1:47694)
    at boost::filesystem::absolute(boost::filesystem::path const&, boost::filesystem::path const&) (advanced3dExample.wasm:0x9716b)
    at main (advanced3dExample.wasm:0x1c5b5)
    at advanced3dExample.js:1:35039
    at callMain (advanced3dExample.js:1:277462)
    at doRun (advanced3dExample.js:1:278046)
    at advanced3dExample.js:1:278201

And interestingly, if I compile with std filesystem and -O1 instead of -O3 the glm error is gone (which enables for example the polygonExample to work):

imageSubsectionExample.html:1 emscripten_set_main_loop_timing: Cannot set timing mode for main loop since a main loop does not exist! Call emscripten_set_main_loop first to set one up. printErr @ imageSubsectionExample.html:1 imageSubsectionExample.html:1 Aborted(native code called abort()) printErr @ imageSubsectionExample.html:1 imageSubsectionExample.js:201 Uncaught RuntimeError: Aborted(native code called abort()) at abort (imageSubsectionExample.js:1596:10) at _abort (imageSubsectionExample.js:5377:2) at void std::__2::__fs::filesystem::__throw_filesystem_error<std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> >&, std::__2::__fs::filesystem::path const&, std::__2::__fs::filesystem::path const&, std::__2::error_code const&>(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> >&, std::__2::__fs::filesystem::path const&, std::__2::__fs::filesystem::path const&, std::__2::error_code const&) (imageSubsectionExample.wasm:0x3d5671) at std::__2::__fs::filesystem::detail::(anonymous namespace)::ErrorHandler<std::__2::__fs::filesystem::path>::report(std::__2::error_code const&) const (imageSubsectionExample.wasm:0x3d561a) at std::__2::__fs::filesystem::__canonical(std::__2::__fs::filesystem::path const&, std::__2::error_code*) (imageSubsectionExample.wasm:0x3d54df) at ofToDataPath(std::__2::__fs::filesystem::path const&, bool) (imageSubsectionExample.wasm:0x4d9d7) at ofLoadImage(ofPixels_<unsigned char>&, std::__2::__fs::filesystem::path const&, ofImageLoadSettings const&) (imageSubsectionExample.wasm:0x10179) at ofImage_<unsigned char>::load(std::__2::__fs::filesystem::path const&, ofImageLoadSettings const&) (imageSubsectionExample.wasm:0x10a8c) at ofApp::setup() (imageSubsectionExample.wasm:0x9248) at ofBaseApp::setup(ofEventArgs&) (imageSubsectionExample.wasm:0x330e2)
So my question is: Is there is a way to make any of the filesystems work with this Emscripten version?

[Jonathhhan]

I comiled boost again, and now OF works with boost and Emscripten 2.0.33...
Can add what I changed exactly for that, but basically I recompiled the necessary OF libs with Apothecary Emscripten 2.0.33.
Edit: Also had to change some other stuff, but now it seems to work like the last versions...

[Jonathhhan]

Those are the additional changes (these changes need to be added, too: #6758):

library_html5video.js (remove type)

html5video_player_pixel_format: function(id){
    return allocate(intArrayFromString(VIDEO.players[id].pixelFormat), ALLOC_STACK);
},

html5video_grabber_pixel_format: function(id){
    return allocate(intArrayFromString(VIDEO.grabbers[id].pixelFormat), ALLOC_STACK);
},

index.html (keyevents)

<canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas>

library_html5.js(emsdk remove __ from getBoundingClientRect)

    #if !DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR
    if (Module['canvas']) {
      var rect = getBoundingClientRect(Module['canvas']);
      HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.canvasX / 4 }}}] = (e.clientX - rect.left) * (Module['canvas'].width / rect.width);
      HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.canvasY / 4 }}}] = (e.clientY - rect.top) * (Module['canvas'].height / rect.height);
    } else { // Canvas is not initialized, return 0.
      HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.canvasX / 4 }}}] = 0;
      HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.canvasY / 4 }}}] = 0;
    }
#endif
    var rect = getBoundingClientRect(target);
    HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.targetX / 4 }}}] = (e.clientX - rect.left) * (target.width / rect.width);
    HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.targetY / 4 }}}] = (e.clientY - rect.top) * (target.height / rect.height);

config.emscripten.default.make (add DYNCALLS=1 and BINARYEN_EXTRA_PASSES=--one-caller-inline-max-function-size=1)

PLATFORM_LDFLAGS = -Wl,--gc-sections --preload-file bin/data@data --emrun -s DYNCALLS=1 -s MAX_WEBGL_VERSION=2 -s WEBGL2_BACKWARDS_COMPATIBILITY_EMULATION=1 -s BINARYEN_EXTRA_PASSES=--one-caller-inline-max-function-size=1

[roymacdonald]

hey @Jonathhhan Thanks for all this.
Can you push to your OF fork all this changes so it is easier to check it and not having to go through all this issue and manually changing stuff.?

[Jonathhhan]

@roymacdonald yes, of course. I will do that the next days.

[roymacdonald]

after installing emscripten 2.0.33 I cant compile as it complains the following:

error: undefined symbol: _ZN24ofxEmscriptenSoundStreamC1Ev (referenced by top-level compiled C/C++ code)
error: undefined symbol: tessDeleteTess (referenced by top-level compiled C/C++ code)
error: undefined symbol: tessNewTess (referenced by top-level compiled C/C++ code)

@Jonathhhan
it is not seeing ofxEmscriptenSoundStream. did you add it somewhere? the other errors are for tess2.
thanks

[roymacdonald]

I was able to get it to compile. I mostly needed to recompile the core lib dependencies.

[Jonathhhan]

@roymacdonald thats nice. It would be great if you can help me to get the ofxPd examples to run with Emscripten (for using it with AudioWorklets). ofxPd works for me as part of ofxOfelia with Emscripten and standalone, but somehow not with Emscripten without ofxOfelia...

[roymacdonald]

Sure, no problem.
Let me get it to run the window properly. Did you manage to get GLES 2 shaders to work? I have not. I am modifying ofxAppEmscriptenWindow to make it work properly based on some examples that emscripten has.
once I get that to work it my guess is that it shouldnt be much trouble to get audio to work as I know very well how audio works within OF.

[Jonathhhan]

Yes, GLES2 is working now (my example https://gameoflife3d.handmadeproductions.de/ actually uses shaders for the grid). I think its part of my changes.
#6758

changing this:

EGLint contextAttribs[] = { EGL_CONTEXT_MAJOR_VERSION, 3, EGL_NONE, EGL_NONE };
std::vector attribList =
{
EGL_RED_SIZE, EGL_DONT_CARE,
EGL_GREEN_SIZE, EGL_DONT_CARE,
EGL_BLUE_SIZE, EGL_DONT_CARE,
EGL_ALPHA_SIZE, EGL_DONT_CARE,
EGL_DEPTH_SIZE, EGL_DONT_CARE,
EGL_STENCIL_SIZE, EGL_DONT_CARE,
EGL_SAMPLE_BUFFERS, EGL_DONT_CARE,
EGL_RENDERABLE_TYPE, EGL_OPENGL_ES3_BIT_KHR,
EGL_NONE
};

in https://github.com/Jonathhhan/openFrameworks/blob/master/addons/ofxEmscripten/src/ofxAppEmscriptenWindow.cpp and adding the flag -s USE_WEBGL2=1 to config.emscripten.default.mk enables webgl2 without editing any Emscripten file (in addition I use -s WEBGL2_BACKWARDS_COMPATIBILITY_EMULATION=1 for backwards compatibility with webgl1 https://emscripten.org/docs/optimizing/Optimizing-WebGL.html).

[Jonathhhan]

For AudioWorklets and SharedArraybuffer all used libs (for most things boost is enough) and also OF need to be compiled with -s USE_PTHREAD=1 or multi thread support. The pthread compiled libs work also if pthread isnt used.

[roymacdonald]

@Jonathhhan I tried out your changes and cloned your OF repo, but it was not working. Maybe I missed something.
Although I got it to work by changing a lot of other things and making it rely more on the emscripten functions. Maybe I messed up something when trying to get it to compile. I will go back and start over now that I have the necesary libs compiled and working. I will let you know how it goes. c
cheers