Wasm experiment #63

pthom · 2019-12-13T23:55:15Z

Hi Sam,

Remark

This is the same message as the in the last PR, but inside a dedeicated PR, so that we can keep track of the history
Do not merge this PR now, it is not ready. However you can test it on your side, and may be help me on the problem I describe below.

If you like you can look at the current status here:
https://github.com/pthom/BabylonCpp/tree/wasm_experiment

I do not have time to detail all the changes now (there are a lot).

In this branch, you can do a build for emscripten like this:

cmake .. -DCMAKE_BUILD_TYPE=Debug -DBABYLON_WASM=ON \
-DCMAKE_TOOLCHAIN_FILE=/YOUR/PATH/TO/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake \
-GNinja -DUSE_CCACHE=ON

I added support for SDL2 instead of GLFW (since emscripten supports SDL natively and it is the recommended method by imgui for emscripten).

Status:

All the code compiles correctly to emscripten
Demos using SDL work (see target imgui_runner_demo_emscripten)
Demos using SDL and imgui Docking work (see target imgui_runner_babylon_demo_emscripten)
When running a 3D scene however there is a runtime error during shader compilation

How to test this:

Install emscripten's emsdk
Build with

cmake .. -DCMAKE_BUILD_TYPE=Debug -DBABYLON_WASM=ON \
-DCMAKE_TOOLCHAIN_FILE=/YOUR/PATH/TO/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake \
-GNinja -DUSE_CCACHE=ON

Run a web server:

cd src/
python3 -m http.server

Open a browser and navigate to:
http://localhost:8000/cmake-build-emscripten/build/bin

(replace "cmake-build-emscripten" by your build folder name)

The following demos will work: imgui_runner_babylon_demo_emscripten.htmland imgui_runner_demo_emscripten.html (they do not initialize a 3D scene)
The following demo will not work: BabylonRunStandalone.html

How to debug:

There is a source map, so in theory you should be able to add breakpoints. However in practice, this is fragile.
Based on my experience, two adices:

Always test the same code on a desktop version before trying wiht emscripten
Debugging by "printf / std:::cout" is time-consuming, but works: you will see that I (temporarily) added lots of debug messages

Analysis of the issue

Below is an extract of the stack trace. Can you help me on this?

I suspect an issue with OpenGL and/or glsl version. Here are some possible location where some adaptations could (should ?) be made for emscripten, as far as OpenGL and Glsl are concerned:

src/BabylonCpp/include/babylon/shaders/shadersinclude/glsl_version_3.h
RunnerEmscripten::Select_Gl_Version()
RunnerEmscripten::GlslVersion()

Stack trace that I have when running BabylonRunStandalone.html:

exception thrown: TypeError: Argument 2 of WebGL2RenderingContext.attachShader is not an object.,_glAttachShader@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.js:10441:13
BABYLON::GL::GLRenderingContext::attachShader(BABYLON::GL::IGLProgram*, BABYLON::GL::IGLShader*)@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[1111]:0x3c6ed
BABYLON::Engine::_createShaderProgram(std::__2::shared_ptr<BABYLON::GL::IGLShader> const&, std::__2::shared_ptr<BABYLON::GL::IGLShader> const&, BABYLON::GL::IGLRenderingContext*, std::__2::vector<std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> >, std::__2::allocator<std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > > > const&)@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[52801]:0xb723cf
BABYLON::Engine::createShaderProgram(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::GL::IGLRenderingContext*, std::__2::vector<std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> >, std::__2::allocator<std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > > > const&)@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[52814]:0xb74166
BABYLON::Effect::_prepareEffect()@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[70904]:0xe27f98
BABYLON::Effect::Effect(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::EffectCreationOptions&, BABYLON::Engine*)::$_0::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[71459]:0xe3f2e7
void std::__2::__invoke_void_return_wrapper<void>::__call<BABYLON::Effect::Effect(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::EffectCreationOptions&, BABYLON::Engine*)::$_0::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)&, std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&>(BABYLON::Effect::Effect(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::EffectCreationOptions&, BABYLON::Engine*)::$_0::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)&, std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[71455]:0xe3edae
std::__2::__function::__alloc_func<BABYLON::Effect::Effect(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::EffectCreationOptions&, BABYLON::Engine*)::$_0::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&), std::__2::allocator<BABYLON::Effect::Effect(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::EffectCreationOptions&, BABYLON::Engine*)::$_0::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)>, void (std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)>::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[71453]:0xe3ed13
void std::__2::__function::__policy_invoker<void (std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)>::__call_impl<std::__2::__function::__alloc_func<BABYLON::Effect::Effect(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::EffectCreationOptions&, BABYLON::Engine*)::$_0::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&), std::__2::allocator<BABYLON::Effect::Effect(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::EffectCreationOptions&, BABYLON::Engine*)::$_0::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)>, void (std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)> >(std::__2::__function::__policy_storage const*, std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[71441]:0xe3e8ec
std::__2::__function::__policy_func<void (std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)>::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[27336]:0x80e46e
std::__2::function<void (std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)>::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[27292]:0x80bb28
BABYLON::Effect::_processShaderConversion(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, bool, std::__2::function<void (std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)> const&)@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[70855]:0xe1f070
BABYLON::Effect::Effect(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&, BABYLON::EffectCreationOptions&, BABYLON::Engine*)::$_0::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const::'lambda'(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&)::operator()(std::__2::basic_string<char, std::__2::char_traits<char>, std::__2::allocator<char> > const&) const@http://localhost:8000/cmake-build-emscripten/build/bin/BabylonRunStandalone.wasm:wasm-function[71424]:0xe3e0bb

Concerning the rest of the changes, I'll make a more complete explanation later.
In summary:

Simplification of the CMakeListsss (lots of simplifications but there is still room for improvement):
- use glob_recurse
- Test are not run during build (this was causing issue during the build: how to solve an issue that causes the build to fail?)
Add SDL2
Add new project imgui_runner and imgui_runner_babylon: they can handle glfw, sdl and emscripten

Cheers!

(Note: did not correct code duplication in cmake files, but this should be done later)

* find_package(OpenGL REQUIRED) and ${OPENGL_LIBRARIES} cannot be used * glfw is disabled * BABYLON_BUILD_PLAYGROUND disabld * libraries are static for emscripten (not shared)

…_GLFW

…* part of the build Otherwise you canot debug tests, because the build fails!

…cripten debug)

Correct issue with emscripten : glGetQueryObjectuiv is supported but glGetQueryObjectiv

// With emscripten we will run an external loop, so that we need to keep a global variable std::unique_ptr<RunnerBabylon> gRunnerBabylon;

pthom added 30 commits December 12, 2019 15:03

BuildEnvironment.cmake: use CMAKE_CURRENT_LIST_DIR

c82a9ab

gitignore cmake-build-emscripten

55c5ca6

Main CMakeLists: add option BABYLON_WASM

4c48272

external/CMakeList: disable glfw / gtest if BABYLON_WASM

fbf8481

CMakeLists: BABYLON_DISABLE_INSTALL if BABYLON_WASM

15e2f8d

add WasmEnscriptenOptons.cmake

ffa1c95

OPTION_BUILD_TESTS_DEFAULT = OFF if BABYLON_WASM

0ab5ee4

(Note: did not correct code duplication in cmake files, but this should be done later)

Do not link glfw if BABYLON_WASM

db55aec

entitycomponentsystem/config.h: config for wasm

1aff70e

filesystem_unix: patch for wasm

180b949

inspectors: remove old code (now in imgui runner)

6bd51ef

Change emscripten detection mode

908d3ed

CMakeLists: simplification

4f41ccd

CMakeListsss: adaptations for emscripten

77d0137

* find_package(OpenGL REQUIRED) and ${OPENGL_LIBRARIES} cannot be used * glfw is disabled * BABYLON_BUILD_PLAYGROUND disabld * libraries are static for emscripten (not shared)

imgui_utils.cpp: dont define STB_IMPL with emscripten

4cce43c

external/CMakeLists: DBABYLON_IMGUI__WITH_SDL vs DBABYLON_IMGUI__WITH…

f356be3

…_GLFW

WIP reorganize imgui_runner mix sdl / glfw

88278ad

BabylonStudio: can start with an empty scene

1d19d07

external/CMakeList: add interface json_hpp

ec90b34

src/CMakelists: simplify

1bbe094

imgui_runner: separate sdl and glfw impl

9ae22c8

add BabylonStudio_Wasm project

2d98bec

WasmEmscriptenOptions.cmake: simplify

0d5963c

babylon_studio: can use different runner types

4a51d9d

BabylonStudio_Wasm: first candidate

f91d610

CMakeListssss: BUILD_SHARED_lIBS is handled a only one central location

cc41cdd

Temp patch / assets path for emscripten

d7895e0

CompileOptions.cmake: do not override CMAKE_CXX_FLAGS_DEBUG & co

303f68d

Add symlink BabylonStudio_Wasm.wasm.map (FIXME, for debug purpose)

4aec956

CMakeListssssss.txt; drastically simplify tests code / tests are *not…

ef33b38

…* part of the build Otherwise you canot debug tests, because the build fails!

pthom added 19 commits December 13, 2019 17:08

make sure glad is the only GL loader

62d1028

Correct emscripten link options

8952229

WasmEmscriptenoptions.cmake: handle release build

6ca31a1

gitignore cmake-build-emscripten_release

8eff531

Add BABYLON::assets_folder()

c6d2629

emscripten: SDL_GL_SetSwapInterval after set loop

d75c29b

fixup Add BABYLON::assets_folder()

b401006

Pass scene shared_ptr by const ref

174cea7

Wasm.cmake: add exceptions in debug build

f32d012

Debug emscripten: make copies of members std::function()

590c376

abstract_runner: debug logs

df7e8e3

babylon_studio.cpp: debug logs

51a6e5a

runner_babylon.cpp: debug logs + copy member function before capture

05ddf4c

runner_emscripten: select OpenGL 3.2 + glsl 300 es

4337f72

runner_babylon.cpp: missing include

92f8b57

emscripten: preload-file assets (huge ! fixme)

62146a5

Add symlink src/BabylonRunStandalone.wasm.map (Fixme, temp help / ems…

bb2890c

…cripten debug)

GLRenderingContext::getQueryParameterb

0f777ea

Correct issue with emscripten : glGetQueryObjectuiv is supported but glGetQueryObjectiv

RunnerBabylon Emscripten: keep global variable

7a4fb4c

// With emscripten we will run an external loop, so that we need to keep a global variable std::unique_ptr<RunnerBabylon> gRunnerBabylon;

pthom force-pushed the wasm_experiment branch from 3a5b2f9 to 7a4fb4c Compare December 14, 2019 01:58

pthom added 3 commits December 14, 2019 03:14

engine.cpp: add logs if vertex or fragment shader compil fails / Fixme

aafafaf

abstract_runner: correct conversions

e8fa872

link imgui_runnner with X11 if linux

e51eb11

pthom force-pushed the wasm_experiment branch from 1f2ce8b to e51eb11 Compare December 14, 2019 05:17

pthom added 3 commits December 14, 2019 06:32

logger.cpp: handle emscripten (fixme)

2ace412

engine.cpp: better log compil errors / return nullptr on error

a8a6168

glsl_version.h: correct version (300 es) for emscripten

6cd2aac

samdauwe changed the base branch from master to wasm_experiment December 14, 2019 08:39

samdauwe merged commit 4a42f74 into samdauwe:wasm_experiment Dec 14, 2019

pthom mentioned this pull request Dec 18, 2019

Compilation to WASM #2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wasm experiment #63

Wasm experiment #63

pthom commented Dec 13, 2019

Wasm experiment #63

Wasm experiment #63

Conversation

pthom commented Dec 13, 2019

Status:

How to test this:

How to debug:

Analysis of the issue