vtk9/Examples/Emscripten/Cxx

Building WebAssembly examples with rendering

This example aims to provide a base example on how to create an example using VTK for its rendering while running the code inside a browser using WebAssembly.

This example was contributed by Rostyslav Lyulinetskyy and Ilya Volkov from https://about.dicehub.com/.

Compiling VTK for Emscripten

mkdir -p work/build-vtk-wasm
cd work

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

Start docker inside that working directory

docker run --rm --entrypoint /bin/bash -v $PWD:/work -it dockcross/web-wasm:20200416-a6b6635

cd /work/build-vtk-wasm

cmake \
  -G Ninja \
  -DCMAKE_TOOLCHAIN_FILE=${CMAKE_TOOLCHAIN_FILE} \
  -DBUILD_SHARED_LIBS:BOOL=OFF \
  -DCMAKE_BUILD_TYPE:STRING=Release \
  -DVTK_ENABLE_LOGGING:BOOL=OFF \
  -DVTK_ENABLE_WRAPPING:BOOL=OFF \
  -DVTK_LEGACY_REMOVE:BOOL=ON \
  -DVTK_OPENGL_USE_GLES:BOOL=ON \
  -DVTK_USE_SDL2:BOOL=ON \
  -DVTK_NO_PLATFORM_SOCKETS:BOOL=ON \
  -DVTK_MODULE_ENABLE_VTK_hdf5:STRING=NO \
  /work/src

cmake --build .

Compiling all Emscripten examples

docker run --rm --entrypoint /bin/bash -v $PWD:/work -it dockcross/web-wasm:20200416-a6b6635

mkdir -p /work/build-examples-wasm
cd /work/build-examples-wasm

cmake \
  -G Ninja \
  -DCMAKE_TOOLCHAIN_FILE=${CMAKE_TOOLCHAIN_FILE} \
  -DVTK_DIR=/work/build-vtk-wasm \
  /work/src/Examples

cmake --build .

Serve and test generated code

cd work/build-examples-wasm/Emscripten/Cxx/
python3 -m http.server 8000

Open your browser to:

• http://localhost:8000/Cone
• http://localhost:8000/ConeFullScreen
• http://localhost:8000/MultiCone
• http://localhost:8000/WrappedMace