search

Kitware / vtk-js

Visualization Toolkit for the Web
https://kitware.github.io/vtk-js/
BSD 3-Clause "New" or "Revised" License
1.24k stars 378 forks source link

How to display unstructured grid on the frontend using vtk.js with Vue #2486

Open chiyandetaotie opened 2 years ago

chiyandetaotie commented 2 years ago

I want to display unstructured grid on the frontend using vtk.js with Vue. I didn't find the module to load unstructured grid using vtk.js, how can I display the unstructured grid? Are there any examples?

jourdain commented 2 years ago

Not exactly what you are asking for but you can look at that trame example which load an unstructured grid among other things and display it using vtk.js with a Vue.js component. The VtkLocalView allow the client to do the rendering rather than the server.

chiyandetaotie commented 2 years ago

Trame is writen by python and I think that it is a very complete framework . I want to develop front-end and back-end separation, using javascript to display unstructured grid on the frontend. Also, I would like to render the unstructured grids in the browser via a cloud service instead of only rendering locally. How can I do this, is there an example?

jourdain commented 2 years ago

Based on what you are describing, Trame could be a good fit for your needs.

kingyue737 commented 1 year ago

Is there any example of frontend and backend separation? I cannot find anything related to using Trame only as a server in the documentation. I also want to display the unstructured grid using Vue instead of writing UI in Python.

floryst commented 1 year ago

@jourdain can comment on using trame as just a server without the automatic client generation.

If you are using a python backend, you can look to using VTK-Python on your server to preprocess unstructured grids to polydata. vtk.GeometryFilter will convert from unstructured grids to polydata. The last step would be to properly serialize the polydata to send over to the client, and proper deserialization into a vtk.js polydata object.

jourdain commented 1 year ago

I don't have a full example of it but pieces between that VTK/ParaView Web server with vtk.js and Vue.js.

Then trame is actually using vue-vtk-js and settings attributes in that fashion where MODULE is either that file for VTK or that one for ParaView.

Since you won't use the UI but will still need the protocols, you will need to call

from trame.widgets import vtk as vtk_widgets

vtk_widgets.initialize(server)

Then you can also call that widget to figure out the view Id and so some operation on the server side.

HTH,

Seb

amserra commented 1 year ago

@jourdain can comment on using trame as just a server without the automatic client generation.

If you are using a python backend, you can look to using VTK-Python on your server to preprocess unstructured grids to polydata. vtk.GeometryFilter will convert from unstructured grids to polydata. The last step would be to properly serialize the polydata to send over to the client, and proper deserialization into a vtk.js polydata object.

Hi @floryst , could you provide an example?

floryst commented 1 year ago

I don't have a good example of the entire pipeline, but here are a few pointers: