Building VTK-9 with Emscripten+GLES for rendering

I’m trying to port the excellent work that was done here on an old version of VTK to todays VTK while hoping it could make it to VTK 9.

Steps to reproduce

Getting the sources

Create and go into a working directory for that project

mkdir webassembly-work
cd webassembly-work

Clone VTK and fetch the proper WIP branch

git clone https://gitlab.kitware.com/vtk/vtk.git VTK
cd VTK
git submodule update --init --recursive

git fetch "git@gitlab.kitware.com:sebastien.jourdain/vtk.git" "web-assembly-rendering"
git checkout -b "sebastien.jourdain/vtk-web-assembly-rendering" FETCH_HEAD
git submodule update

Building inside emscripten docker image

Starting docker while mounting your working directory

cd /.../webassembly-work
docker run --rm --entrypoint /bin/bash -v $PWD:/work -it dockcross/web-wasm:20200119-1c10fb2

At that point your shell is running inside the docker image.

mkdir -p /work/VTK-build
cd /work/VTK-build

cmake -G Ninja                                      \
                                                    \
    -DCMAKE_CXX_FLAGS="-s USE_FREETYPE=1"           \
    -DCMAKE_BUILD_TYPE:STRING=Release               \
    -DBUILD_SHARED_LIBS:BOOL=OFF                    \
    -DCMAKE_TOOLCHAIN_FILE=${CMAKE_TOOLCHAIN_FILE}  \
                                                    \
    -DVTK_OPENGL_HAS_EGL=ON                         \
    -DVTK_OPENGL_USE_GLES=ON                        \
    -DVTK_BUILD_TESTING=OFF                         \
    -DVTK_GROUP_ENABLE_Qt=DONT_WANT                 \
                                                    \
    -DVTK_USE_SYSTEM_FREETYPE:BOOL=ON               \
    -DFREETYPE_INCLUDE_DIRS:PATH=include            \
    -DFREETYPE_LIBRARY:STRING=freetype              \
    -DH5_HAVE_GETPWUID:BOOL=OFF                     \
    -DVTK_NO_PLATFORM_SOCKETS:BOOL=ON               \
                                                    \
    -DVTK_ENABLE_LOGGING=OFF                        \
    -DVTK_ENABLE_WRAPPING=OFF                       \
    -DVTK_IOS_BUILD=OFF                             \
                                                    \
    -DVTK_MODULE_ENABLE_VTK_ChartsCore=DONT_WANT             \
    -DVTK_MODULE_ENABLE_VTK_FiltersParallel=DONT_WANT        \
    -DVTK_MODULE_ENABLE_VTK_IOH5part=DONT_WANT               \
    -DVTK_MODULE_ENABLE_VTK_RenderingContext2D=DONT_WANT     \
    -DVTK_MODULE_ENABLE_VTK_RenderingFreeType=DONT_WANT      \
    -DVTK_MODULE_ENABLE_VTK_RenderingGL2PSOpenGL2=DONT_WANT  \
    -DVTK_MODULE_ENABLE_VTK_RenderingOpenVR=DONT_WANT        \
    -DVTK_MODULE_ENABLE_VTK_RenderingParallel=DONT_WANT      \
    -DVTK_MODULE_ENABLE_VTK_ViewsContext2D=DONT_WANT         \
    -DVTK_MODULE_ENABLE_VTK_hdf5=DONT_WANT                   \
                                                    \
    -DVTK_MODULE_USE_EXTERNAL_VTK_freetype=ON       \
                                                    \
    -DOPENGL_egl_LIBRARY=/emsdk_portable/emscripten/tag-1.38.48/system/lib/pkgconfig/egl.pc         \
    -DOPENGL_gles2_LIBRARY=/emsdk_portable/emscripten/tag-1.38.48/system/lib/pkgconfig/glesv2.pc    \
    -DOPENGL_gles3_LIBRARY=/emsdk_portable/emscripten/tag-1.38.48/system/lib/pkgconfig/glesv2.pc    \
                                                    \
    ../VTK

This attempt was inspired from the example available here.

Error

While running the cmake command, I’m getting the following error and my guess is that we may need custom handling in VTK/CMake/FindOpenGL to handle the WebAssembly target. As we are getting the following error output.

[...]
-- Could NOT find OpenGL (missing: OpenGL)
CMake Error at CMake/vtkModule.cmake:4134 (message):
  Could not find the OpenGL external dependency.
Call Stack (most recent call first):
  CMake/vtkModule.cmake:4657 (vtk_module_find_package)
  Utilities/OpenGL/CMakeLists.txt:36 (vtk_module_third_party_external)

Any advice or suggestion would be great.

Thanks!

cc: @brad.king @ben.boeckel @thewtex

@Sebastien_Jourdain the DiceHub EGL rendering was built on additional patches for itk.js:

These also need to be ported to the latest VTK.

The error in CMake/vtkModule.cmake is occurring after a call it makes of this form:

find_package(OpenGL COMPONENTS OpenGL GLES3 EGL)

The CMake command line was given -DOPENGL_egl_LIBRARY=... and -DOPENGL_gles3_LIBRARY=... options that cover the EGL and GLES3 components, though the latter specifies glesv2.pc for GLES3. Nothing provides the OpenGL component. The /emsdk_portable/emscripten/tag-1.38.48/system/lib/pkgconfig/ directory does not contain any .pc file for the GLVND “OpenGL” component (or glesv3.pc).

Under emscripten what is supposed to provide the GLVND OpenGL component? Or, if it doesn’t exist, what is VTK supposed to do instead?

That’s why we use my branch that try to bring their contribution to the level of VTK/release.

Also EGL is not really used or working for them. I just filled that property to see if I could by-pass the OpenGL requirement.

Hey Brad,

My understanding (which might be wrong) is that as soon as I provide a GLES library, I don’t necessary need the OpenGL one (probably only true for iOS and Emscripten builds). It means that OpenGL is given to me by the GLES one while having a more limited API (The GL code should have some ifdef with GLES so slightly different path could be taken inside the GL code).

@ken-martin might be able to provide more context on that aspect.

Thanks Brad for looking into that,

Seb

gles is basically an opengl implementation. If we are using gles then that becomes our OpenGL if that helps

@Sebastien_Jourdain Please try https://gitlab.kitware.com/vtk/vtk/-/merge_requests/6751.

Let’s also open an issue to add Emscripten builds to CI.

1 Like

The issue for adding an emscripten builder is here: https://gitlab.kitware.com/vtk/vtk/-/issues/17856

Things are moving forward and we start having working examples inside FireFox.
If you want to learn more on how to build VTK for Emscripten and write some C++ application with rendering for Web client usage, please follow the VTK/Emscripten examples and README.