# porting a C++ example to Emscripten

**URL:** <https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687>\
**Category:** Development\
**Created:** [November 19, 2020, 2:00pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687 "2020-11-19T14:00:55Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![SArbabi](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/b5ac83/32.png) [@SArbabi](https://discourse.vtk.org/u/SArbabi)\
**Post date:** [November 19, 2020, 2:00pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/1 "2020-11-19T14:00:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [November 19, 2020, 3:30pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/2 "2020-11-19T15:30:07Z")

</div>

Did you look at the [README](https://gitlab.kitware.com/vtk/vtk/-/tree/master/Examples/Emscripten/Cxx)?

---

<div class="post-metadata">

**Author:** ![SArbabi](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/b5ac83/32.png) [@SArbabi](https://discourse.vtk.org/u/SArbabi)\
**Post date:** [November 19, 2020, 5:16pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/3 "2020-11-19T17:16:36Z")

</div>

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](https://kitware.github.io/vtk-examples/site/Cxx/GeometricObjects/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

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [November 19, 2020, 6:06pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/4 "2020-11-19T18:06:29Z")

</div>

Did you notice [that line](https://gitlab.kitware.com/vtk/vtk/-/blob/master/Examples/Emscripten/Cxx/README.md#L55) when building those examples?

---

<div class="post-metadata">

**Author:** ![SArbabi](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/b5ac83/32.png) [@SArbabi](https://discourse.vtk.org/u/SArbabi)\
**Post date:** [November 19, 2020, 7:02pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/5 "2020-11-19T19:02:16Z")

</div>

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.
```

---

<div class="post-metadata">

**Author:** ![SArbabi](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/s/b5ac83/32.png) [@SArbabi](https://discourse.vtk.org/u/SArbabi)\
**Post date:** [November 19, 2020, 7:42pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/6 "2020-11-19T19:42:44Z")

</div>

Solved, I added CommonColor to the CMakeLists.  
Thanks.

---

<div class="post-metadata">

**Author:** ![Sohrab\_Azami](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sohrab_azami/32/1210_2.png) [@Sohrab\_Azami](https://discourse.vtk.org/u/Sohrab_Azami)\
**Post date:** [July 19, 2022, 7:23pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/7 "2022-07-19T19:23:05Z")

</div>

@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](https://discourse.itk.org/t/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

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [July 19, 2022, 11:58pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/8 "2022-07-19T23:58:37Z")

</div>

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](https://www.kitware.com/contact/) from us so we can prioritize your need accordingly.

---

<div class="post-metadata">

**Author:** ![Sohrab\_Azami](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sohrab_azami/32/1210_2.png) [@Sohrab\_Azami](https://discourse.vtk.org/u/Sohrab_Azami)\
**Post date:** [July 21, 2022, 6:23am UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/9 "2022-07-21T06:23:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 21, 2023, 10:08am UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/10 "2023-06-21T10:08:38Z")

</div>

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

```auto
python3 -m http.server 8000

```

The browser shows up like below  
 ![image](https://discourse.vtk.org/uploads/default/original/2X/4/4209a01cfe939710375f2aa7ce65c9935b308b7f.png)

Is there any issue ?

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [June 22, 2023, 1:19pm UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/11 "2023-06-22T13:19:51Z")

</div>

Did you click on “Add Cone” ?

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 23, 2023, 12:59am UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/12 "2023-06-23T00:59:01Z")

</div>

Hi Sebastien,  
Yes I did click on “Add Cone” button. Then the black box appear on the screen

---

<div class="post-metadata">

**Author:** ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)\
**Post date:** [June 23, 2023, 2:02am UTC](https://discourse.vtk.org/t/porting-a-c-example-to-emscripten/4687/13 "2023-06-23T02:02:19Z")

</div>

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?