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

Hello!

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!
/JB

1 Like

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!
/JB

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

Frank

Thanks!

Have you had any progress with this? I am in a similar situation and evaluating options. I would be also interested in interfacing to paraview server. Vtk.js would be the natural choice in theory, but I have concerns about shifting to vtk.js entirely.

Not specifically on this aspect of my project, I’m afraid. (More on stepping up my game in the different technical bits involved in order to achieve the results I want, or at least move in that direction: C#/.NET, general front-end, Babylon.js … and hoping that meanwhile my knowledge of CAE doesn’t get completely outdated! After all, I saw this afternoon a LinkedIn post passing by titled “ANSYS goes open source”… But enough off-topic sarcasm :slight_smile: )

FWIW. I haven’t looked recently at the features available in VTK so I am probably not as up-to-date as you are. Their GitHub is alive, which is nice to see. Still pretty much a two-man show though. Meanwhile, I have seen some nice momentum with the Babylon.js development, and after playing a bit more seriously with the library (+ tooling), I am increasingly confident that it might be worth the extra effort of build a custom pre/post solution on top of BJS, especially if customization of the UI is an important factor. If time to market was my primary driver, I would probably take a closer look at VTK as the main library instead. But only if I was ready to get involved in the development and maintenance of VTK itself if needed.

Don’t hesitate to send me a PM if you want to discuss CAE in the browser, our projects, etc.

Thanks @jbl

It looks like we are using the same stack :slight_smile:

The big advantage of vtk.js is that it can leverage the infrastructure of paraview server out of the box, which for large/decomposed cases comes handy. Duplicating that won’t be trivial.
However, I agree with you that developing in Babylon.js is attractive (I have been using it so far and I am happy with it).