Viewing brick mesh in React VTK JS

Web
1

We are investigating using React/NextJS to build our finite element analysis pre/post-processor. We are currently using the React VTK library beta branch to visualize our mesh. Our current method is to render each component in the mesh as a GeometryRepresentation with PolyData inside. We pass in a list of nodes and then draw each side of the brick or tetrahedron within the component (see Component 1 - Part in pseudocode below).

<View>
    {/* Component 1 - Part */}
    <GeometryRepresentation property={{opacity, color, edgeVisibility, edgeColor}}>
        <PolyData points={[arrayOfNodes]} polys={[arrayOfNodeConnectivityToDrawSides]} />
    </GeometryRepresentation>
    {/* Component 2 - Tool */}
    <GeometryRepresentation>
        <PolyData />
    </GeometryRepresentation>
    {/* Component 3 - Breather */}
    <GeometryRepresentation>
        <PolyData />
    </GeometryRepresentation>
    {/* Component 4 - Vacuum Bag */}
    <GeometryRepresentation>
        <PolyData />
    </GeometryRepresentation>
</View>;

We have not implemented much of the functionality we plan to, including:

  1. Snap to certain orientations (XY/YZ/etc)
  2. Show orientation axes
  3. Add labels

We see some lagginess when we rotate the shape or change the opacity / color of certain components in large meshes. A couple of questions:

  1. Is this method viable? Is there a method which will yield better performance? It does not seem efficient to draw every side of the brick / tetrahedron individually?
  2. Is there a plan to merge the beta branch to master so we can install through NPM?
  3. Are we cutting ourselves off from certain functionality by using this method long term?
  4. Is there a method to read VTK data format directly so we don’t have to transform the dataset to pass the individual nodes and connectivity to draw the sides of the shapes?
  5. The next thing we’re trying to do is overlay simulation output data (e.g. temperature) along with a slider that will let us transition between different time steps and we want to make sure our rendering method is performant for many rerenders and larger meshes. Is there a different way to render our mesh that will yield better performance?

Thanks for any help you can provide!
Alex

2

  1. Having a few set of representation (<=100) should be fine speed wise. It will be interesting to see why it feels laggy. Wondering if react force the re-processing of the nested polydata.

  2. I think so, but I let @Forrest comment on that

  3. Maybe, but it truly depend on how complex your application may grow and if you will outgrow such declarative approach.

  4. You have the <Mesh /> object that may capture your polydata in a more compact way. Usually easier when using VTK on the server side.

  5. Using a WASM wrapper of VTK may provide more capabilities/performance but can be tricky to manage/handle.

HTH

3

Thanks for the quick response, Sebastien! I think it might just be the size of the mesh. We might need to do some optimization to only include the surface elements instead of building the entire 3d mesh all the way through. It’s a bit laggy on my Windows computer using native WebView for a mesh with 47,000 nodes. On Mac native WebView, it works great (it is a beefier computer). I am generally impressed with the performance, just figured there might be a better solve than what I’m doing now, but it sounds like this method using is the recommended method.

4

A couple of what I hope are quick questions:

  1. do you guys know how to add the orientation axes and camera position to the in vtk-react-js beta branch? I tried, but this didn’t work. I wondered if this isn’t implemented in the beta branch yet or if I’m doing something wrong.
<View showOrientationAxes={true}>
   {...}
</View>
  1. similar question - do you guys know how to set the camera orientation? I tried cameraPosition, cameraViewUp and camera but none of them are working.
<View cameraPosition={[0,1,0]} camera={[0,1,0]} cameraViewUp={[0,1,0]}>
    {...}
</View>
5

I was able to figure out the camera positioning using camera property (<View camera={{ position: [0,1,0] }} /> but I still can’t figure out showOrientationAxes. It is commented out here, so I’m wondering if it isn’t implemented yet.

6

The beta branch is a big change and maybe the orientation axis was not ported. But I will let @Forrest comment.

For the perf issue, it might be related to Windows and Angle. They are flags you can set on the browser to make things better. You may want to check on the vtk-js issue to see how to “fix” windows perf issue. (I just don’t know those on top of my head but saw some conversation on that topic)

7

Hi, the showOrientationAxes is not implemented yet. I’ll add that once I get the time to do so.

The beta branch is already published to NPM under the react-vtk-js@beta tag.

Long-term, the react-vtk-js project will be able to handle anything vtk.js can. The delay in implementation would be a function of availability of work to expose new vtk.js functionality through this project and ensuring that the API makes sense.

8

Hi Forest, Sebastien - thanks for your response! The React library is awesome and so easy to use, thank you for all your work on this and for the thoughtfulness in developing the API. The vtk.js examples are pretty verbose and seem like there’s a lot of gotchas, so I’m very grateful for this shortcut.

1 Like