I work on a proof of concept for a CAE web application, and I am currently narrowing down the list of candidate technologies which I could use.
Here is a simplified workflow for the app:
interactive creation of a 3d geometry in the web browser (e.g. extrusion of a surface by dragging it with the mouse)
export of (a subset of) the geometry to a server
physical simulation of the design, server-side
export of simulation results back to the client
results visualization and manipulation in the browser
I am considering babylon.js for all the rendering and interactive work involved in step 1, and VTK.js for rendering and manipulating the results in step 5.
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.
Do you think it possible to take advantage of the data import and filtering capabilities offered by VTK.js, inside a babylon.js-centric GUI?
Or would you rather recommend using VTK.js exclusively, including for creating, manipulating and rendering the geometry in step 1?
Either way, could you give me a few hints for additional research and early prototyping?
I’m not sure about the interoperability between babylon and VTK.js, but if you just plan to create basic shape and extrude them, you should be able to do it with VTK.js. I’m not sure how much more complex it will be with VTK.js vs babylon.
Sorry for not being more helpful. Maybe someone else could provide more insight.
If my PoC is successful, down the road I will want to integrate non-trivial CAD functionalities.
I will continue my homework and start playing with both VTK.js and babylon.js to see what can be achieved.
I was tipped by one of the BJS devs about pixpipe.js, which seems to work in a fashion similar to VTK, but is detached from any visualization engine. I think that’s the concept that I am after. However, pixpipe is probably not the right option here due to its focus on medical imaging (e.g. no streamlines), and to the fact that it is pretty much a one-man venture. Still… cool project, which might help me understand how to connect the output of a VTK pipeline to BJS.
I’ve finally found some time for resuming my work on this project
My current track is to translate the data obtained at the end of a VTK.js pipeline (e.g. some streamlines) into the babylon.js ‘mesh’ format, so it can integrate nicely with the rest of the babylon.js library. If the performance penalty turns out to be too high, I will look into different solutions.
A babylon.js mesh is made of triangles exclusively. Each vertex can contain a position, a normal and a color. More details here.
To do the translation, I thought of using the information stored in vtkMapper objects, as the way I understand it, mappers represents the end of the visualization pipeline. Playing with variations of the vtk*Source creation examples, I have managed to extract vertex positions, normals, and polygon info with the mapper’s getInputData() function.
However, I see two issues already:
(Probably a minor concern) the scaling and positioning must be made on the source, as no actor will be used to correct this later on.
Not all polygons listed in a mapper are triangles (e.g. the base of a vtkConeSource).
I guess WebGL will eventually need to be fed with triangles regardless which of VTK.js or babylon.js will handle the rendering abstraction. If this is a correct statement, wouldn’t it make sense to try to access a lower-level dataset corresponding to the stuff to be rendered by WebGL? If so, do you have some suggestions for how to do that?
Or any other track worth investigating?
I could of course write a small routine that turns any polygon into a set of triangles, but my gut feeling is that I would probably be reinventing the wheel…
Thanks for reading! I’m looking forward to your input!
/JB
