Vtk-js: Clip, slice, contour and streamline filters

[doczoidberg]

Is it possible to use clip, slice, contour and streamline filters with the current implementation? What will I have to do if not?

[wschroed]

We are working on contouring now. Would you be willing to test?

[doczoidberg]

I can try. Are the other filters also planned?

[jourdain]

They are planned but I don't think we have a concrete date for when they will be available.

[agirault]

Cutter was added.

[alfredomp]

Any news on contour creation capabilities?

[jourdain]

Contour is available on vtkImageData: https://kitware.github.io/vtk-js/examples/VolumeContour.html

[alfredomp]

Thank you @jourdain . I am also interested in manual 2D contours for region selection/annotation/segmentation, are there any demos or initiatives on this?

[jourdain]

They are some initiatives but it is mostly work in progress without a clear timeline.

[jourdain]

https://thewtex.github.io/VTKWebAssemblyExperiment/

[doczoidberg]

can you tell a bit more about the webassembly integration in vtkjs? what are the plans, what is the state?

[jourdain]

@thewtex do you mind providing more inputs?

The plan is to allow users to write a piece of library in C++ that expose VTK/C++ features/algo/readers. We would provide tools to build and bundle such external lib and allow users to integrate that lib in a JS application while using vtk.js as rendering engine.

[thewtex]

Currently,

• It is possible to quickly and simply build a VTK/C++ features/algo/readers to WebAssembly. See the instructions at the bottom of this page.
• This can be used to generate a vtkPolyData ASCII file ArrayBuffer that could be read in vtk.js (untested). Or generated itk.js itk/Image could be used in vtk.js with ITKHelper.

This is the most basic functionality. There are many improvements that could be made.

• Create a vtk.js wrapper that provides SetInputConnection, SetOutputConnection algorithm interface. With a few specifications of the pipeline to run and the types of the inputs and outputs, it could provide a simplified interface that works well with the current vtk.js pipelining infrastructure. Internally, it could take care of passing the data where it needs to go and executing the pipeline. @agirault has thought about this a bit.
• We can add better support in itk.js and vtk.js for passing their native types to JavaScript/WebAssembly.
• We can work towards making the VTK WebAssembly smaller, which is important for performance.
• We can do other performance optimizations.

We are currently looking for ways to fund these improvements.

[BotellaA]

Do you have any news about this workflow?

I looked at your examples, the C++ code defines a main entry. I do not see if it will be possible to use a WebAssembly algorithm directly on the vtk-js PolyData for instance. Do you plan on building a minimal example of such feature?

[thewtex]

@BotellaA yes, a minimal example is desirable, but there is no current timeline for this.

[anastasia-r]

I'm trying to figure out how to convert a .vtk file with an unstructured grid into something that vtk.js can visualize. Is there any tool for converting this to a POLYDATA or vtp file?

[jourdain]

You can use ParaView

1. Load your data
2. Apply filter "Extract Surface"
3. Save the result of the filter as vtp (append+zlib)

[anastasia-r]

OK, thanks. And is there a way to view the color scale with polydata/vtp or not?

[jourdain]

You can create an image using the lookupTable and then with some HTML elements you can make it as overlay the 3D view. We currently don't have anything inside the 3d view.

You can look at this for input on how to do it.

[anastasia-r]

Thanks for your help. Unfortunately when trying to run updateColorCanvas I get the error:
Attempting to lookup a value with no points in the function
Which makes me think my .vtp file is in the wrong format. Can Paraview be used to create .vti file folders?

[jourdain]

ParaView will build the proper format based on your selected data (vti, vtp, ...).

I think that just means that your lookup table is not available or properly created. I don't think your file is corrupted especially if it render just fine.

[thewtex]

I looked at your examples, the C++ code defines a main entry. I do not see if it will be possible to use a WebAssembly algorithm directly on the vtk-js PolyData for instance. Do you plan on building a minimal example of such feature?

We have a test / example for generating a vtk.js PolyData in a VTK C++ pipeline compiled to WebAssembly here:

https://github.com/InsightSoftwareConsortium/itk-js/tree/master/test/WriteVTKPolyDataPipeline

https://github.com/InsightSoftwareConsortium/itk-js/blob/26da85c0c66d3ca0a4657bfc535053757421537d/test/runPipelineNodeTest.js#L122-L152

[thewtex]

I'm trying to figure out how to convert a .vtk file with an unstructured grid into something that vtk.js can visualize. Is there any tool for converting this to a POLYDATA or vtp file?

A tracking issue for this is here:

https://github.com/InsightSoftwareConsortium/itk-js/issues/255

[jourdain]

In term of filtering here is the current status:

• slice
  
  
  
  • polydata > slice
  
  
  • imagedata > image mapper (slice along i,j,k)
  
  
  • image data > reslice cursor (camera driven)
  
  
• contour
  
  
  
  • imagedata > contour
  
  
• streamlines
  
  
  
  • imagedata > streamlines
  
  

For more complex setup, you will have to involve a server or leverage WebAssembly.

Closing for now as we are not planning to implement all of those algorithm in JS but rather enable them via WebAssembly. But we still don't have an estimate on such availability.