Converting viewer from VTK to vtk.js

Hi, I have an application that renders volumes that the user can rotate, zoom, etc, with various rendering options. The source data are 8-bit images of cells (one per channel) from a microscope taken at different focus positions. For the purposes of this discussion, let’s say a typical dataset would consists of 3 channels of 2K x 2K pixel images, with 20 z planes. The application is written in C# with WPF using the Kitware VTK libraries.

I would like to create a similar viewer on a web page, and I would be interested in knowing how similar the vtk.js API is to the C# API. What potential roadblocks or complications might there be?

Thanks,
Jerry

Hi Jerry,

Are you doing volume rendering or just “geometry” via slice view?

If you are not doing volume rendering, you could possibly compiled a WebAssembly version using the C++ API of VTK and expose it inside a Web page using modern browsers.

Otherwise at a high level, vtk.js tend to have the same API as VTK but with sometime a subset of the VTK/C++ capability. Understanding more what your application is using would be important to see if we already have full coverage or if we would fall short in some area.

A quick test could be to see how well your data perform when loading it via ParaView Glance. Then from there we may have some room for improvement.
But right now in Glance we don’t have the multi-component rendering exposed. While itk-vtk-viewer does. (Both use vtk.js underneath)

HTH,

Seb

Hi Seb, thanks for your reply. Here is some more detail on what features are currently using.

We have two main modes for display, iso surface, volume rendering, and slice. For volume, we create a vtkVolume, for the isosurface we use vtkLODActor. Other classes we use are vtkAbstractVolumeMapper, vtkPolyDataMapper, vtkImageData. This list was compiled by doing a quick scan of the source code, but I could provide more description of the pipeline if needed.

This operates interactively - the vtk form of the data is generated on the fly as the user selects different sets of acquired pixel data.

The volume rendering is the most important functionality, but the other features would be nice to have also.

Thanks again,
Jerry

Hi Jerry,

So you are doing slice view, volume rendering and volume rendering + geometry for contour visualization.

Do you compute your contours dynamically?
When you say channels, is it a tuple3 and you plan to define each colorMap+opaciyFn individually for each channel? Or something else?

If that’s the case itk-vtk-viewer should give you a very good test bed for the rendering capability of vtk.js for slices and volumeRendering. That could allow you to validate that the performance and rendering quality is acceptable for what you are looking for. If that’s easier with you, there is also a version that run into Jupyter.

Regarding the contour, I’m not worried about the rendering part of it inside vtk.js but maybe for its computation. Doing it in JS might be a bit slow and some thinking may be required to pull that off. Using VTK/C++ WASM, creating a flying edges in JS or us a server.

@thewtex might have a better background also to guide you for what you are trying to do.

Thanks again for your further help. Here’s a little more specifics on which facilities of vtk we are using.

For creating the vtkVolume, depending on mode, we either use vtkFixedPointVolumeRayCastMapper, vtkVolumeTextureMapper3D, vtkVolumeTextureMapper2D, or vtkVolumeRayCastMapper/vtkVolumeRayCastCompositeFunction for the texture mapper. The input for the texture mapper is a vtkImageData object which holds the z plane images. The images are either 8, 16, or 32 bit images, which are the input to the texture mapper, in the form of a vtkImageData object. There is one texture mapper per channel (set of Z planes for a given wavelength). Each channel is rendered separately.

For doing isosurface, vtkMarchingCubes and vtkPolyDataMapper are used. vtkLODActor is also involved.

As the user interactively adjusts per-channel brightness, etc, things get re-rendered. So I think the answer to your question about dynamic computation is yes. We are not doing proof of concept at this stage of our development cycle, just assessing risk and complexity, but your advice on the itk-vtk-viewer when we get to that point will be very useful.

-Jerry

It sounds like all the functionality you want is available in itk.js / vtk.js, and can be demonstrated in itk-vtk-viewer.

Here is an example multi-component rendering:

https://kitware.github.io/itk-vtk-viewer/app/?fileToLoad=https://data.kitware.com/api/v1/file/5e84e8a82660cbefba7d70ea/download/first_instar_brain.mha

multi-component-optimized