Vtk-js: Loading XML VTI images

[MHadavand]

I tried loading VTI volumes using vtkXMLImageDataReader API and got the following error from the VolumeMapper

'Cannot read property 'getNumberOfComponents: image.getPointData().getScalars().getNumberOfComponents();''

This is because the .getScalars() function returns null.

Here is the XML header I am using in the exported VTI volumes.

<?xml version="1.0"?> <VTKFile type="ImageData" version="0.1" byte_order="LittleEndian" header_type="UInt32" compressor="vtkZLibDataCompressor"> <ImageData WholeExtent="0 295 0 318 0 124" Origin="147925 250435 273.25" Spacing="10 10 0.5"> <Piece Extent="0 295 0 318 0 124" > <PointData> </PointData> <CellData Scalars="MudFractions"> <DataArray type="Float64" Name="MudFractions" format="appended" RangeMin="1.1368683772e-13" RangeMax="1" offset="0" /> </CellData> </Piece> </ImageData> <AppendedData encoding="base64"> Some Binary data </AppendedData> </VTKFile>
I think the file format and maybe using cell data is the problem because I can load the sample head.vti data from Kitware.

Thanks,

[jourdain]

Your field needs to be active (SetScalars) rather than simply AddArray. This should be fixed on the vtk.js side but it can easily be handle on your side too.

[MHadavand]

Could you elaborate on that? The main differences that I see between the format I used and the one from the braing.vti data are: 1) cell data instead of point data 2) Using the AppendedData tag to add the binary portion

Also, is it likely that you will add VTU support in future? For spatial data, unstructured grids are used frequently.

Thanks,

[jourdain]

You are right, the issue is that your data is located on cells rather than on points. To do volume rendering, you need point data.

I was wrong as I didn't read your message fully, it was not related to the active scalar.

vtk.js aims to focus on rendering and some light weight data processing. Unstructured grid implies processing such as clip/slice/contour to properly leverage the 3D cells. Those operations will be fairly slow in JS. The best way to handle them is either by relying on some server side processing using VTK/C++ and offload the rendering to vtk.js after running the geometry filter like VTK/C++ is doing internally before any geometry rendering. Or use VTK WebAssembly to get the C++ implementation available on the client side.

HTH

[jourdain]

Based on your background, it seems that you are looking for Geometry rendering, even for your vtkImageData. Like I said before, you need a GeometryFilter to render your data the way you want. Such filter is not too bad to implement for vtkImageData but definitely not easy for vtkUntructuredGrid.

[MHadavand]

I used Python to implement the geometry filter which is fast enough if the dataset is not very large.

The following sample code can be used to convert unstructured grid to xml poly data. Also, crop and slice can be done before loading data into vtk.js if an interactive application is not desired.

import vtk

def unstructured_grid2poly(input_file, output_file):
    reader = vtk.vtkXMLUnstructuredGridReader()
    reader.SetFileName(input_file)
    reader.Update()
    output = reader.GetOutput()

    geometry_filter = vtk.vtkGeometryFilter()
    geometry_filter.SetInputData(output)

    geometry_filter.Update()

    poly_out = geometry_filter.GetOutput()
    n_points = poly_out.GetNumberOfPoints()

    print('total number of poins {:g}'.format(n_points))

    plyWriter = vtk.vtkXMLPolyDataWriter()
    plyWriter.SetFileName(output_file)
    plyWriter.SetInputConnection(geometry_filter.GetOutputPort())
    plyWriter.Write()

[jourdain]

If this is still an issue, please re-open.