# Trying to view vtu or vtk file in the web

**URL:** https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938
**Category:** Web
**Tags:** vtkinformation, vtkjs, file-formats
**Created:** [December 1, 2024, 3:10pm UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938 "2024-12-01T15:10:57Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![sridhar-mani](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sridhar-mani/32/9522_2.png) [@sridhar-mani](https://discourse.vtk.org/u/sridhar-mani)
#### Post date: [December 1, 2024, 3:10pm UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/1 "2024-12-01T15:10:57Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [December 1, 2024, 3:19pm UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/2 "2024-12-01T15:19:28Z")

</div>

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](https://kitware.github.io/vtk-wasm-demos/#/GeometryViewer?viewApi=webgl&url=https://data.kitware.com/api/v1/file/6285865d4acac99f429d979b/download&showControls=true&colorByArray=Normals&colorMapPreset=Warm)

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.

---

<div class="post-metadata">

### Author: ![sridhar-mani](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sridhar-mani/32/9522_2.png) [@sridhar-mani](https://discourse.vtk.org/u/sridhar-mani)
#### Post date: [December 1, 2024, 4:08pm UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/3 "2024-12-01T16:08:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [December 1, 2024, 4:49pm UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/4 "2024-12-01T16:49:56Z")

</div>

> [@sridhar-mani](#):
>
> so exactly where i should be using this and where is it in vtk js or itk.

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](https://webassembly.org/) 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](https://vtk.org/doc/nightly/html/classvtkUnstructuredGridReader.html) and [vtkXMLUnstructuredGridReader](https://vtk.org/doc/nightly/html/classvtkXMLUnstructuredGridReader.html). This example code  
[https://examples.vtk.org/site/Cxx/IO/ReadAllUnstructuredGridTypes/](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](https://github.com/Kitware/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](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.

---

<div class="post-metadata">

### Author: ![sridhar-mani](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sridhar-mani/32/9522_2.png) [@sridhar-mani](https://discourse.vtk.org/u/sridhar-mani)
#### Post date: [December 30, 2024, 11:40am UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/5 "2024-12-30T11:40:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [December 30, 2024, 3:19pm UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/6 "2024-12-30T15:19:15Z")

</div>

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](https://kitware.github.io/trame/) attractive because it allows building a scalable app and offers flexibility in switching between remote (server-side) or local (client-side) rendering.

---

<div class="post-metadata">

### Author: ![sridhar-mani](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sridhar-mani/32/9522_2.png) [@sridhar-mani](https://discourse.vtk.org/u/sridhar-mani)
#### Post date: [December 31, 2024, 4:40am UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/7 "2024-12-31T04:40:35Z")

</div>

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

[https://www.unpkg.com/@dicehub/vtk3d@0.0.121/vtk3d.wasm](https://www.unpkg.com/@dicehub/vtk3d@0.0.121/vtk3d.wasm)

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [December 31, 2024, 2:02pm UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/8 "2024-12-31T14:02:17Z")

</div>

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.](https://github.com/Kitware/trame-vtklocal) instead.

cc @Sebastien_Jourdain

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 31, 2024, 5:35pm UTC](https://discourse.vtk.org/t/trying-to-view-vtu-or-vtk-file-in-the-web/14938/9 "2024-12-31T17:35:00Z")

</div>

[This example](https://github.com/Kitware/trame-vtk3d/blob/master/examples/complex_viz/app.py) show how to load a VTU via wasm and vtk3d on the client side.

After that, you can use [trame-vtklocal](https://github.com/Kitware/trame-vtklocal/blob/master/examples/demo/widget.py) 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.
