porting a C++ example to Emscripten

Hi,

upon running cmake -G Ninja for one of the C++ examples to the Emscripten folder, I get this error:

CMake Warning at CMakeLists.txt:17 (find_package):
  By not providing "FindVTK.cmake" in CMAKE_MODULE_PATH this project has
  asked CMake to find a package configuration file provided by "VTK", but
  CMake did not find one.

  Could not find a package configuration file provided by "VTK" with any of
  the following names:

    VTKConfig.cmake
    vtk-config.cmake

  Add the installation prefix of "VTK" to CMAKE_PREFIX_PATH or set "VTK_DIR"
  to a directory containing one of the above files.  If "VTK" provides a
  separate development package or SDK, be sure it has been installed.


Skipping example:
-- Configuring done
-- Generating done
-- Build files have been written to: /work/build-CylinderExample

hereā€™s the cmakelists:
cmake_minimum_required(VERSION 3.13)
project(Cone)
# -----------------------------------------------------------------------------
# EMSCRIPTEN only
# -----------------------------------------------------------------------------

if (NOT EMSCRIPTEN)
  message("Skipping example: This needs to run inside an Emscripten build environment")
  return ()
endif ()

# -----------------------------------------------------------------------------
# Handle VTK dependency
# -----------------------------------------------------------------------------

find_package(VTK
  COMPONENTS
FiltersSources      # VTK pipeline
InteractionStyle    # Mouse handling
RenderingOpenGL2    # For Rendering
RenderingUI         # For SDL2 Window
)

if (NOT VTK_FOUND)
  message("Skipping example: ${VTK_NOT_FOUND_MESSAGE}")
  return ()
endif ()

# -----------------------------------------------------------------------------
# WebAssembly build options
# -----------------------------------------------------------------------------

set(emscripten_options)
list(APPEND emscripten_options
  "--bind"
  "-g3"
  "SHELL:-s EXPORT_NAME=vtkApp"
  "SHELL:-s ALLOW_MEMORY_GROWTH=1"
  "SHELL:-s DEMANGLE_SUPPORT=1"
  "SHELL:-s EMULATE_FUNCTION_POINTER_CASTS=0"
  "SHELL:-s ERROR_ON_UNDEFINED_SYMBOLS=0"
  "SHELL:-s MODULARIZE=1"
  "SHELL:-s USE_PTHREADS=0"
  "SHELL:-s WASM=1"
)

# -----------------------------------------------------------------------------
# Build options
# -----------------------------------------------------------------------------

set(OPTIMIZE "BEST" CACHE STRING "Emscripten optimization")
set_property(CACHE OPTIMIZE PROPERTY
  STRINGS
NO_OPTIMIZATION       # -O0
LITTLE                # -O1
MORE                  # -O2
BEST                  # -O3
SMALL                 # -Os
SMALLEST              # -Oz
SMALLEST_WITH_CLOSURE # -Oz --closure 1
)

if(OPTIMIZE STREQUAL "NO_OPTIMIZATION")
  # Cone.js    659K
  # Cone.wasm  4.9M
  # time => 4 minutes 3 seconds
  list(APPEND emscripten_options
"-Oz"
  )
elseif(OPTIMIZE STREQUAL "LITTLE")
  # Cone.js    529K
  # Cone.wasm  5.9M
  list(APPEND emscripten_options
"-O1"
  )
elseif(OPTIMIZE STREQUAL "MORE")
  # Cone.js    529K
  # Cone.wasm  5.3M
  list(APPEND emscripten_options
"-O2"
  )
elseif(OPTIMIZE STREQUAL "BEST")
  # Cone.js    529K
  # Cone.wasm  4.9M
  # time => 4 minutes 7 seconds
  list(APPEND emscripten_options
"-O3"
  )
elseif(OPTIMIZE STREQUAL "SMALL")
  # Cone.js    529K
  # Cone.wasm  4.9M
  list(APPEND emscripten_options
"-Os"
  )
elseif(OPTIMIZE STREQUAL "SMALLEST")
  # Cone.js    659K
  # Cone.wasm  4.9M
  list(APPEND emscripten_options
"-Oz"
  )
elseif(OPTIMIZE STREQUAL "SMALLEST_WITH_CLOSURE")
  # Cone.js    659K
  # Cone.wasm  4.9M
  list(APPEND emscripten_options
"-Oz"
"SHELL:--closure 1"
  )
endif()

# -----------------------------------------------------------------------------
# Compile example code
# -----------------------------------------------------------------------------

add_executable(Cone Cone.cxx)

target_link_libraries(Cone
  PRIVATE
VTK::FiltersSources
VTK::InteractionStyle
VTK::RenderingOpenGL2
VTK::RenderingUI
)

target_compile_options(Cone
  PUBLIC
${emscripten_options}
)

target_link_options(Cone
  PUBLIC
${emscripten_options}
)

# -----------------------------------------------------------------------------
# VTK modules initialization
# -----------------------------------------------------------------------------

vtk_module_autoinit(
  TARGETS  Cone
  MODULES  ${VTK_LIBRARIES}
)

# -----------------------------------------------------------------------------
# Copy HTML to build directory
# -----------------------------------------------------------------------------

add_custom_command(
  TARGET Cone
  POST_BUILD
  COMMAND
${CMAKE_COMMAND} -E copy_if_different
  "${CMAKE_CURRENT_SOURCE_DIR}/index.html"
  $<TARGET_FILE_DIR:Cone>
)

As I get from the error, it should be something with the CMakeLists. Is there any points about it?

Did you look at the README?

Yes, Actually Iā€™ve been able to make Emscripten examples like Cone and MultiCone.
Now I wanted to take one of the C++ examples and make it the same way to WASM. So I took C++ example CylinderExample, replaced the cone.cxx code with the c++ code of example and just changed some parts like changing vtkRenderWindow to vtkSDL2OpenGLRenderWindow and kept the rest the rest the same.
Then I tried to make it the same way that I made cone example, and got this error.

I guess itā€™s conveniently possible to make c++ examples of the ā€œVTK examples websiteā€ to WASM by some minor changes. is this true? are there any considerations?
Thanks in advance

Saeed

Did you notice that line when building those examples?

1 Like

Thanks, Then by making I get this fatal error: ā€˜vtkNamedColors.hā€™ file not found
#include ā€œvtkNamedColors.hā€
is there something Iā€™m missing?

[root:/work/build-Cone] # cmake \
>   -G Ninja \
>   -DCMAKE_TOOLCHAIN_FILE=${CMAKE_TOOLCHAIN_FILE} \
>   -DVTK_DIR=/work/build-vtk-wasm \
>   -DOPTIMIZE=BEST \
>   /work/src/Examples/Emscripten/Cxx/Cone 

[root:/work/build-Cone] 2s # cmake --build .
[1/2] Building CXX object CMakeFiles/Cone.dir/Cone.cxx.o
FAILED: CMakeFiles/Cone.dir/Cone.cxx.o
/emsdk_portable/emscripten/sdk/em++  -DGLEW_STATIC -DvtkRenderingCore_AUTOINIT_INCLUDE=\"/work/build-Cone/CMakeFiles/vtkModuleAutoInit_780e01f44c94c7648bee9e46e7d919c8.h\" -isystem /work/build-vtk-wasm/Filters/Sources -isystem /work/src/Filters/Sources -isystem /work/build-vtk-wasm/Common/DataModel -isystem /work/src/Common/DataModel -isystem /work/build-vtk-wasm/Common/Core -isystem /work/src/Common/Core -isystem /work/build-vtk-wasm/Utilities/KWIML -isystem /work/src/Utilities/KWIML -isystem /work/build-vtk-wasm/Utilities/KWSys -isystem /work/src/Utilities/KWSys -isystem /work/build-vtk-wasm/Common/Math -isystem /work/src/Common/Math -isystem /work/build-vtk-wasm/Common/Transforms -isystem /work/src/Common/Transforms -isystem /work/build-vtk-wasm/Common/ExecutionModel -isystem /work/src/Common/ExecutionModel -isystem /work/build-vtk-wasm/Interaction/Style -isystem /work/src/Interaction/Style -isystem /work/build-vtk-wasm/Rendering/Core -isystem /work/src/Rendering/Core -isystem /work/build-vtk-wasm/Filters/Core -isystem /work/src/Filters/Core -isystem /work/build-vtk-wasm/Common/Misc -isystem /work/src/Common/Misc -isystem /work/build-vtk-wasm/Rendering/OpenGL2 -isystem /work/src/Rendering/OpenGL2 -isystem /work/build-vtk-wasm/Filters/General -isystem /work/src/Filters/General -isystem /work/build-vtk-wasm/Rendering/UI -isystem /work/src/Rendering/UI -isystem /work/build-vtk-wasm/ThirdParty/glew/vtkglew -isystem /work/src/ThirdParty/glew/vtkglew -isystem /work/build-vtk-wasm/ThirdParty/glew -isystem /work/src/ThirdParty/glew -isystem /emsdk_portable/emscripten/sdk/system/include --bind -g3 -s EXPORT_NAME=vtkApp -s ALLOW_MEMORY_GROWTH=1 -s DEMANGLE_SUPPORT=1 -s EMULATE_FUNCTION_POINTER_CASTS=0 -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s MODULARIZE=1 -s USE_PTHREADS=0 -s WASM=1 -O3 -s FULL_ES3=1 -s MIN_WEBGL_VERSION=2 -s MAX_WEBGL_VERSION=2 -s USE_SDL=2 -std=gnu++11 -MD -MT CMakeFiles/Cone.dir/Cone.cxx.o -MF CMakeFiles/Cone.dir/Cone.cxx.o.d -o CMakeFiles/Cone.dir/Cone.cxx.o -c /work/src/Examples/Emscripten/Cxx/Cone/Cone.cxx
system_libs:INFO: retrieving port: sdl2 from https://github.com/emscripten-ports/SDL2/archive/version_18.zip
system_libs:INFO: unpacking port: sdl2
cache:INFO: generating port: libSDL2.bc... (this will be cached in "/emsdk_portable/.data/cache/asmjs/libSDL2.bc" for subsequent builds)
cache:INFO:  - ok
/work/src/Examples/Emscripten/Cxx/Cone/Cone.cxx:67:10: fatal error: 'vtkNamedColors.h' file not found
#include "vtkNamedColors.h"
         ^~~~~~~~~~~~~~~~~~
1 error generated.

Solved, I added CommonColor to the CMakeLists.
Thanks.

1 Like

@Sebastien_Jourdain,
Hi,

I have a problem with an example in ITK and I am trying to solve it. I have couple of questions. i know this is a vtk forum but i figured you know enough about emscripten so you could be problem solver for my problem.

under ITK discussion forum @sag you could search and find me.
following is the message titile i have created asking for help:

ITK 5.2, WASM, itk-wasm, itk-wasm/emscripten, build example common/add noise to Binary Image, yinyang

I have put up a lot of pictures there to explain my problem. basically I use ITK-WASM BUILD command in node.js to call itkwasm/emscripten toolchain docker to compile and build my project which is a simple adding noise to yinyang.png image. I have built my c++ code into webassembly module and can communicate with javascript with it using runPipelineNode(pipelinepath, args). I use the HelloWorld example of mat maccormic. problem is i can build it into HelloWorld.js but when i run it using npx node index.mjs module it crashes at the itk::ReadImage(ā€˜yinyang.pngā€™). I send also yinyang.json itk::ReadImage, but still it crashes.

I have account both on ITK & VTK forums.

Any Help appreciated

BR
@Sohrab_Azami

Sorry I havenā€™t played with wasm in a while. Your initial post is where you will have the most chance of answer.

If that issue is really pressing you can seek support from us so we can prioritize your need accordingly.

HI Sebastian,

Thank you very much for your reply. I will do that, i succeeded partially to build another example ThresholdingUsingBinaryImage example, now i am getting Numerics module link error. ZVNLā€¦ something. I will get help from support

BR

Hi All,
I successfully compile the examples in source code. However when I run

python3 -m http.server 8000

The browser shows up like below
image

Is there any issue ?

Did you click on ā€œAdd Coneā€ ?

Hi Sebastien,
Yes I did click on ā€œAdd Coneā€ button. Then the black box appear on the screen

Ok and I guess a change on the slider and a reset camera donā€™t help to make the cone show up within that black box?