Kitware / vtk-js

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

How to embed (multiple) render windows #107

Closed bilke closed 7 years ago

bilke commented 7 years ago

Is it possible to embed (multiple) vtk-js visualizations into a single web page? If yes, how to do that?

We would like to replace static images in the documentation of our simulation software with interactive vtk-js visualizations. See this page for an example.

jourdain commented 7 years ago

Definitely yes but you can have several approaches for what you are looking for.

First you can create several div container in the same page and bind a vtkOpenGLRenderWindow to each of them. Basically you will do this with a different container for each of your view. https://github.com/Kitware/vtk-js/blob/master/Sources/Rendering/Misc/FullScreenRenderWindow/index.js

But if you do that, you will have to deal with the full VTK pipeline setup (dataset, reader, mapper, actor, lookup table, renderer, renderWindow...)

Another approach could be to use the StandaloneSceneLoader within an iframe. In that case, you will have to use the ParaView scene exporter macro and make that export available so you could create a URL for each iframe like follow: StandaloneSceneLoader.html?fileURL=../pressure.vtkjs

But as of today, the Export macro does not capture the LookupTable information and the Web application does not handle the LookupTable information either. None of it is difficult to add but in either case, you will have to get your hand dirty. ;-)

Since you managed to get your dataset in vtk-js, the easier approach could be for you to create some kind of generic Web application that load a dataset, apply always the same LookupTable and take some arguments like the StandaloneSceneLoader do to choose where to load the data from and which array to color by. Then you use that same application several time across your documentation using iframe. Or better, you can always create a function that take all those arguments plus the container, so you could build several views within a single page.

bilke commented 7 years ago

Thanks a lot for your help. I will try out the approach you mentioned in the last paragraph and will link my solution back here once I have accomplished it.

jourdain commented 7 years ago

Sounds great, thanks!