Trying to view vtu or vtk file in the web

Web
, ,
1

I have been trying to view vtk or vtu file in web but unable to do so as only vtp seems to be supported.

2

Hello @sridhar-mani

vtk.js provides a subset of the functionality in VTK. If you really require to view vtu/vtk files on the web, you can try VTK.wasm which brings most of the features that are not in vtk.js to the web. The only downside is you will need to write some C++.

For example, you should be able to drop your vtu/vtk files at VTK WebAssembly demos

Right now, that demo app extracts the surface and displays a polydata. If your data is 3D volumes, you can use a C++ volume mapper instead of the polydata mapper.

3

so exactly where i should be using this and where is it in vtk js or itk. Because i’m really in deep waters between these 2. Both have same readers i cant get why? care to help me.

4

If I wasn’t clear before, afaik, the readers you’re looking for are not available in vtk.js and itk.

The readers for *.vtk and *.vtu files are in VTK which is a C++ library, different from vtk.js.

In case you haven’t heard about wasm. WebAssembly is a technology that lets web browsers natively execute C++ code (instead of JavaScript). Some VTK users choose this path to benefit from the performance and full functionality of the VTK C++ library in a web browser.

Coming back to your question, the relevant classes are vtkUnstructuredGridReader and vtkXMLUnstructuredGridReader. This example code
https://examples.vtk.org/site/Cxx/IO/ReadAllUnstructuredGridTypes/ shows how to use the reader and view it’s output in a renderer.

You have three potential paths:

  1. Forget about wasm and implement a vtk/vtu reader in vtk.js. You’d have to look at the C++ implementation for the readers and translate them to javascript.
  2. Leverage VTK C++/wasm through trame-vtklocal. This will involve writing mostly Python code and you will have to rethink your existing vtk.js application. There are a number of examples inside that repository.
  3. Leverage VTK C++/wasm directly. Again, there are many examples in https://gitlab.kitware.com/vtk/vtk/-/tree/master/Examples/Emscripten/Cxx?ref_type=heads. Review the code to understand how it is possible to instantiate C++ classes from JavaScript, then restructure it to use a vtu/vtk reader.