# Vtk.js unstructured grid

**URL:** https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513
**Category:** Web
**Created:** [March 12, 2024, 10:35am UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513 "2024-03-12T10:35:10Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![antonskrebkov](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/a/cc9497/32.png) [@antonskrebkov](https://discourse.vtk.org/u/antonskrebkov)
#### Post date: [March 12, 2024, 10:35am UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/1 "2024-03-12T10:35:10Z")

</div>

Hello!

Can vtk.js render unstructured grid data independently (i.e., without relying on vtk python as a backend or another tools beyond the scope of vtk.js)?

If not, are there any plans to add this capability?

Thank you in advance.

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [March 12, 2024, 10:44am UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/2 "2024-03-12T10:44:54Z")

</div>

No, VTK.js does not support unstructured grid.  
There is no short term plan to add such capability.  
You might want to consider VTK.wasm instead.

---

<div class="post-metadata">

### Author: ![antonskrebkov](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/a/cc9497/32.png) [@antonskrebkov](https://discourse.vtk.org/u/antonskrebkov)
#### Post date: [March 14, 2024, 3:22pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/3 "2024-03-14T15:22:24Z")

</div>

Thanks for your reply!

Speaking of VTK.wasm, is it possible to somehow combine it on client side with vtk.js+react? Perhaps there are any examples?

And is the option you suggested better than using vtk.js+react as a frontend and vtk+python as a backend (the operation to turn unstructured data into structured data will take place on the server and then sent to vtk.js to display)?

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [March 14, 2024, 3:41pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/4 "2024-03-14T15:41:39Z")

</div>

> it possible to somehow combine it on client side with vtk.js+react? Perhaps there are any examples?

Yes. it is possible. [Using WebAssembly - VTK documentation](https://docs.vtk.org/en/latest/getting_started/using_webassembly.html)  
Examples are not React related.

> And is the option you suggested better than using vtk.js+react as a frontend and vtk+python as a backend (the operation to turn unstructured data into structured data will take place on the server and then sent to vtk.js to display)?

Use trame. Supporting unstructured data is built-in.

---

<div class="post-metadata">

### Author: ![LTMeyer](https://discourse.vtk.org/user_avatar/discourse.vtk.org/ltmeyer/32/8649_2.png) [@LTMeyer](https://discourse.vtk.org/u/LTMeyer)
#### Post date: [March 18, 2024, 10:33pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/5 "2024-03-18T22:33:16Z")

</div>

Hello, I am trying to address a similar problem (i.e. use `vtk.js` for the frontend and Python for the backend). I had in mind the example of `pyvista` and mesh visualization in a jupyter notebook using `trame`. I am trying to achieve something similar to [GitHub - pyvista/pyvista-fastapi-webapp: Demo FastAPI and Three.js application using PyVista](https://github.com/pyvista/pyvista-fastapi-webapp/tree/main) but to visualize data from an unstructured mesh interactively in a web application.

> Use trame. Supporting unstructured data is built-in.

Would you mind to explicit how to use `trame` in this case? I thought about using `trame` to generate a view of a mesh (typically unstructed grid stored as \*.vtu) to be rendered on the client side using `vtk.js`.  
I understood `trame` as a framework to build an entire web application with Python. Because the intended web application does more than the visualization with vtk, I don’t want to rely on `trame` for the whole application.

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [March 18, 2024, 10:54pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/6 "2024-03-18T22:54:40Z")

</div>

You can use trame “just” for the 3D view and not the web application. In such case, it is a simple iframe within your whole application

---

<div class="post-metadata">

### Author: ![LTMeyer](https://discourse.vtk.org/user_avatar/discourse.vtk.org/ltmeyer/32/8649_2.png) [@LTMeyer](https://discourse.vtk.org/u/LTMeyer)
#### Post date: [March 21, 2024, 9:01am UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/7 "2024-03-21T09:01:30Z")

</div>

Thank you for your answer. With the [js-trame](https://github.com/Kitware/trame-iframe/tree/master/examples/js-trame) example of `trame-iframe` was able to do what I wanted.

---

<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: [January 2, 2025, 3:27pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/8 "2025-01-02T15:27:39Z")

</div>

is iframe efficient

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [January 2, 2025, 4:03pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/9 "2025-01-02T16:03:02Z")

</div>

An iframe does not bring any performance impact when it comes to interactive visualization.

---

<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: [January 2, 2025, 5:49pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/10 "2025-01-02T17:49:55Z")

</div>

thanks for clarification

---

<div class="post-metadata">

### Author: ![Daniel\_Lopez](https://discourse.vtk.org/user_avatar/discourse.vtk.org/daniel_lopez/32/9690_2.png) [@Daniel\_Lopez](https://discourse.vtk.org/u/Daniel_Lopez)
#### Post date: [January 7, 2025, 8:39pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/11 "2025-01-07T20:39:00Z")

</div>

I’m trying to create a VSCode extension to visualize .vtu files. Since VSCode doesn’t support iframes (it uses its Webview API), I’m struggling to find a lightweight solution.

Trame with Python works, but it would either make the extension too heavy (bundling Python) or too complex (requiring a user setup). I also tried WebAssembly but ran into many errors, probably due to my inexperience with it.

Any ideas for a simpler approach?

---

<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: [January 7, 2025, 8:41pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/12 "2025-01-07T20:41:42Z")

</div>

Hello @Daniel_Lopez,

I agree that bundling python would make your extension heavyweight. What kind of errors did you run into? Please share relevant logs, code, github repo, etc…

---

<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: [January 8, 2025, 12:23pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/13 "2025-01-08T12:23:53Z")

</div>

refer the cfd-toolkit library from npm it works already. if you get any error you could ask me.

---

<div class="post-metadata">

### Author: ![Dani\_Lopez](https://discourse.vtk.org/user_avatar/discourse.vtk.org/dani_lopez/32/9695_2.png) [@Dani\_Lopez](https://discourse.vtk.org/u/Dani_Lopez)
#### Post date: [January 8, 2025, 9:21pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/14 "2025-01-08T21:21:42Z")

</div>

Hi @sridhar-mani,

Thanks for the reply. Your approach (similar to this [vtk.js](https://kitware.github.io/vtk-js/examples/XMLPolyDataWriter.html)) is turning a vtu into a “shell” using vtp writer is not enough for what I need, because you basically lost all the cells and just plot a shell. Thanks anyway. I think is what ITK.js also offer as a workaround.

@jaswantp

Thanks Jas, I’m preparing the files.

---

<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: [January 9, 2025, 9:31pm UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/15 "2025-01-09T21:31:26Z")

</div>

If you don’t want to build your own WASM app, you should be able to use vtk3d for what you aim to do.

---

<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: [January 21, 2025, 4:56am UTC](https://discourse.vtk.org/t/vtk-js-unstructured-grid/13513/17 "2025-01-21T04:56:11Z")

</div>

yeah agreed im also trying to build the wasm from various fork or use the already present wasm in docker but am getting build error while compiling the vtu reader for wasm. Mostly related to dependencies in the cpp files.
