Integrating VTK.js filtering capabilities to a babylon-centric app?


First post here, from a new beginner in 3D rendering techniques… Bear with me :bear:

I work on a proof of concept for a web-based 3d design tool, and I am currently narrowing down the list of candidate technologies which I could use.

Here is a simplified workflow for the app:

  1. interactive creation of a 3d geometry in the web browser
  2. export of (a subset of) the geometry to a server
  3. physical simulation of the design, server-side
  4. export of simulation results back to the client
  5. results visualization and manipulation in the browser

I think babylon.js is a strong candidate for all the rendering and interactive work involved in step 1.

On the other hand, VTK.js seems to be the natural choice for rendering and manipulating the results in step 5. Like this, for example.

What I want to achieve is the integration of the simulation results to the user interface and 3d world created in step 1. I don’t want the user to feel that s/he is working with two different applications. Something like this, except interactive, and with the 3d world generated with code in step 1.

I guess one could also use VTK.js exclusively, including for rendering the geometry in step 1, similar to what is being done here and here (ParaView uses VTK under the hood).

But with interactivity in mind for step 1, with the latter approach I think I would have to stretch the typical use case for VTK.js quite a lot…

As for implementing my own data analysis filters to integrate simulation results to a babylon.js scene well… I’d rather not go down that road, but I guess that’d be one more option :slight_smile:

Any thoughts from the pros?

Thanks a bunch!

Hello and welcome!

The first advantage of BJS will be our community for sure :wink:

In the meantime, did you see this demo done with bjs: MRI Volume ?

1 Like

Thanks @Deltakosh !

Cool demo! :slight_smile:

Unfortunately the focus of pixpipe seems to be on medical imaging, and I think I would be missing a couple of important filters like the streamlines available in VTK.

Otherwise I think that’s exactly the concept I am looking for, except with vtk pipelines. The example you shared will probably help me understand how to translate a VTK output into something that can be handled by BJS.

Thanks again!

1 Like

Keep us posted!

Actually, the easiest thing to do for this purpose is to create an adaptor class to map vtkPolyData class to the data Babylon.js sending for rendering.

VTK is not perfect but its filtering architecture, tremendous mesh processing functions are great for engineering and medical processing.

Its rendering maybe not as fancy as B.js. So I strongly recommend bridge the two with a single mesh class. It will definitely add HUGE values to B.js