Building vtkITK Lib with Emscripten

I just read @matt.mccormick answer to @prashanth.dumpuri about building with Emscripten for beginners (Building ITK with emscripten - #5 by matt.mccormick) and it helped me a lot.

I am using insighttoolkit/itk-js in docker and it works great for both examples mentioned there (Hello World and Median filter test). I can build javascript (as well as wasm), run it with runPipelineNode and runPipelineBrowser.

Can I do the same with the content of vtkItk Library (Slicer/Libs/vtkITK at 08789e8f2224f89206b2d6a49d1d452d4e677994 · Slicer/Slicer · GitHub)? Is it possible to define CmakeLists.txt and a proper pipeline for vtkItkLevelTracingImageFilter in main function, so it can be converted to javascript?

I need to use vtkItkLevelTracingImageFilter to generate vtkPolyData. However, I do not know if I can convert vtkItk Library with Emscripten to js at all.
I did a small experiment : just added #include “vtkItkLevelTracingImageFilter.h” to MedianFilterTest.cxx code and then I had error as below

I will appreciate any help

shared:ERROR: '/emsdk_portable/fastcomp/fastcomp/bin/clang++ -target asmjs-unknown-emscripten -D__EMSCRIPTEN_major__=1 -D__EMSCRIPTEN_minor__=39 -D__EMSCRIPTEN_tiny__=10 -D_LIBCPP_ABI_VERSION=2 -Werror=implicit-function-declaration -Xclang -nostdsysteminc -Xclang -isystem/emsdk_portable/fastcomp/emscripten/system/include/libcxx -Xclang -isystem/emsdk_portable/fastcomp/emscripten/system/lib/libcxxabi/include -Xclang -isystem/emsdk_portable/fastcomp/emscripten/system/include/compat -Xclang -isystem/emsdk_portable/fastcomp/emscripten/system/include -Xclang -isystem/emsdk_portable/fastcomp/emscripten/system/include/libc -Xclang -isystem/emsdk_portable/fastcomp/emscripten/system/lib/libc/musl/arch/emscripten -Xclang -isystem/emsdk_portable/fastcomp/emscripten/system/local/include -Xclang -isystem/emsdk_portable/.data/cache/asmjs/include -DITK_IO_FACTORY_REGISTER_MANAGER -IITKFactoryRegistration -I/ITK/Modules/Filtering/Smoothing/include -I/ITK/Modules/Filtering/ImageFilterBase/include -I/ITK/Modules/Core/Transform/include -I/ITK-build/Modules/ThirdParty/Netlib -I/ITK/Modules/Numerics/Statistics/include -I/ITK/Modules/Core/ImageAdaptors/include -I/ITK/Modules/Core/ImageFunction/include -I/ITK/Modules/IO/ImageBase/include -I/ITK-build/Modules/IO/ImageBase -I/ITK-build/Modules/ThirdParty/VNL/src/vxl/core -I/ITK-build/Modules/ThirdParty/VNL/src/vxl/vcl -I/ITK-build/Modules/ThirdParty/VNL/src/vxl/v3p/netlib -I/ITK/Modules/ThirdParty/VNL/src/vxl/core -I/ITK/Modules/ThirdParty/KWIML/src -I/ITK-build/Modules/ThirdParty/KWIML/src -I/ITK-build/Modules/ThirdParty/Eigen3/src -I/ITK/Modules/Core/Common/include -I/ITK-build/Modules/Core/Common -I/ITKBridgeJavaScript-build/include -I/ITKBridgeJavaScript/include -isystem /ITK/Modules/ThirdParty/VNL/src/vxl/vcl -isystem /ITK/Modules/ThirdParty/VNL/src/vxl/v3p/netlib -isystem /ITK-build/Modules/ThirdParty/KWSys/src -isystem /ITK/Modules/ThirdParty/Eigen3/src/itkeigen/.. -isystem /ITK/Modules/ThirdParty/VNL/src/vxl/core/vnl/algo -isystem /ITK/Modules/ThirdParty/VNL/src/vxl/core/vnl -isystem /ITK-build/Modules/ThirdParty/VNL/src/vxl/core/vnl -std=c++11 -DNDEBUG -O2 -std=gnu++11 -MD -MT CMakeFiles/MedianFilterTest.dir/MedianFilterTest.cxx.o -MF CMakeFiles/MedianFilterTest.dir/MedianFilterTest.cxx.o.d -c -DEMSCRIPTEN -mllvm -disable-llvm-optzns ../MedianFilterTest.cxx -Xclang -disable-O0-optnone -Xclang -isystem/emsdk_portable/fastcomp/emscripten/system/include/SDL -c -o CMakeFiles/MedianFilterTest.dir/MedianFilterTest.cxx.o -emit-llvm' failed (1)
ninja: build stopped: subcommand failed.
1 Like

Hi @Andrzej_Marciniak ,

Thanks for sharing your success with itk.js!

Yes, it should be possible. A Docker image is provided with both ITK and VTK available, and if your CMakeList.txt contains find_package(ITK) or find_package(VTK), they will be found without any other steps required. To use this kitware/itk-js-vtk image, specify it via the itk-js CLI:

$ itk-js build --image kitware/itk-js-vtk:latest my/source/path

Also, note that recent versions of itk-js Docker images ship with support for SlicerExecutionModel CLI’s.

Thank you Matt! It is a very helpful answer!

1 Like

@Andrzej_Marciniak
Hi,
I am new to itk-wasm and itk.js. I want to use both in my application. i am trying NodeHelloWorld example from itk-wasm. this is what i have done:
if you read the example in the itk-wasm you would see after you do npx itk-wasm build the running docker downloads and calls itk-wasm/emscripten toolchain and build everything into web-build folder. at the last stage i have following code in index.js file:

const path = require(‘path’)
const runPipelineNode = require(‘itk/runPipelineNode’)

const pipelinePath = path.resolve(__dirname, ‘web-build’, ‘hello’)
runPipelineNode(pipelinePath)

and then i run [npx run index.js] i get the following error:

npx node .\index.js
node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module ‘itk/runPipelineNode’
Require stack:

  • E:\Projects\vs2019\react\ITK-JS\NodeHelloWorld_1\index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object. (E:\Projects\vs2019\react\ITK-JS\NodeHelloWorld_1\index.js:2:25)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions…js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) {
    code: ‘MODULE_NOT_FOUND’,
    requireStack: [ ‘E:\Projects\vs2019\react\ITK-JS\NodeHelloWorld_1\index.js’ ]

why it does not run the helloworld example in node.js? am i missing something here? should i import 'itk/runPipelineNode?

i appreciate if you send me these examples you shared with matt maccormic, I am basically image processing developer, and i need to work with web as well to build an application, so i need some median filter from itk or some segmentation or registration example.
I could not find itk.js repo? because i get forwarded to the itk-wasm?!

i apprecaite your help.
@sag
date: 2022-06-02

Hi,
I am sorry that I will not be able to help you much, but I haven’t been touching itk for over a year, and I do not remember details. Since the .js code generated by Emscripten was not meeting my performance requirements, I have decided to not use it (implement my own filters in js).

Moreover, I have never been using itk-wasm - I was just using itk v.“9.3.2”. According to what you wrote, it seems to me that you just do not have dependecies in node_modules. Please look at my package.json and package-lock.json files below - I had installed itk in node_modules with “runPipelineNode”. Maybe
npm i itk
would make it work?

As I wrote, I do not remember what exactly I was doing, but I made this short instruction for myself (below you will find files) so maybe this will help:

Compilation and running of pipelines with Emscripten

  1. Be sure that docker is running.

  2. Use Ubuntu or git bash

    cd ../WebstormProjects/nodehelloworld

  3. Prepare CMakeLists.txt file (see examples) and execute in Ubuntu bash:

    ./insighttoolkit-itk-js-latest web-build

  4. Prepare runPipelineNode (see index.js, medianTest.js) and execute for example:

npx node ./medianTest.js
or
npx node ./index.js
etc.

Links

Example of segmentation pipeline written ITK / C++ (see links inside):

package.json (328 Bytes)
package-lock.json (6.3 KB)

medianTest.js (199 Bytes)
MedianFilterTest.cxx (3.4 KB)

index.js (185 Bytes)
hello.cxx (98 Bytes)
CMakeLists.txt_old2 (562 Bytes)
CMakeLists.txt_old (235 Bytes)
insighttoolkit-itk-js-latest (5.7 KB)
CMakeLists.txt (468 Bytes)

I hope this will help, because really I am not an expert with this (i managed to compile a few simple examples, that’s all)
Good luck!

1 Like

@Andrzej_Marciniak ,

Hi,

I really appreciate your attention to my issue. your exaplanations are very nice and professional.
I could not get to download any of the sample code from the links though because of access limitation. If you could resolve that and send me the sample codes again i appreciate that.
I did manage to build ThresholdingAnImageUsingOtsu sample using itk-js build --image kitware/itk-js-vtk /source and i used the same cmake file as the windows/Linu/macos.
i have a problem passing parameters of images command line parameters from nodejs, BTW. I use WSL2/UBUNTU20.04.1 and it builds beautifully, eventhough not yet back to itk-wasm to check that as well.
My javascript is junior level and i am learing it. Do you know how to pass png images to the runPipelineNode(pipelinepath, [args array], testoutfile,testinputfile). how to pass in and out the images when calling webassembly module like HelloWorld.js, DO YOU PASS IT AS IMAGE.PNG.JSON, how to convert and image in javascript to jason and then pass it to c++ webassembly module and the convert it bakc to png?
or should we pass it as png? i have not seen much code related to these?why? i dont know.

I also want to develop in javascript my ITK/VTK pipeline, do you have any article or sample codes quick way to translate c++ pipeline to javascript pipeline, where are the libraries, it is so scattered here and there.

Thanks again
BR
@sag