I have been trying to view vtk or vtu file in web but unable to do so as only vtp seems to be supported.
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.
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.
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:
- 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.
- 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.
- 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.
so basically,
1=> need to rewrite vtk in js for needed funcitons
2=>use vue js that comes with trame
3=>make own wasm for my needed funcitons
1 is very expensive to maintain.
I would advise evaluating either 2 or 3 depending upon your use case and level of comfortability with Python/C++. Btw, many people find the trame approach attractive because it allows building a scalable app and offers flexibility in switching between remote (server-side) or local (client-side) rendering.
Another quick question i found multiple wasm files of vtk and as im new to wasm not able to figure out how to use it. the vtk3d wasm is not running telling the expected size should be 8.4mb
That is specific to Dicehub. See GitHub - Kitware/trame-vtklocal: VTK Local Rendering using VTK/WASM to match server side rendering pipeline on the client side. instead.
This example show how to load a VTU via wasm and vtk3d on the client side.
After that, you can use trame-vtklocal to do the same but on the server side and let the client render it via wasm.
You just need to choose what you want to do and how.