Let us now explore the vtk.js library to see if the process of displaying particles can be simplified given that we are using VTK format input files.
Registering VTK components
As discussed in Part 3, we first need to register components that are specific to VTK. In our case, we need
Creating Vuex stores for VTK data
Once again, we repeat the process discussed in Part 3. We have discussed the Store in Part3, and in this case we create the files
VTKGraphicsModule.ts - similar to ThreeGraphicsModule.ts
VTKGraphicsState.ts - see below
VTKGraphicsGetters.ts - similar to the getters for the three.js Vuex store
VTKGraphicsMutations.ts - see below
VTKGraphicsActions.ts - similar to what we have seen before
The VTKGraphicsState.ts file now contains a list of actors, sources, and mappers. There is also a flag indicating that VTK actors have been created:
The VTKGraphicsMutations.ts file contains the following:
The VTK graphics panel
The VTK graphics panel is simpler in this case.
The graphics panel template is simpler mainly because each actor is associated with a single mapper and a single source in our implementation. Better options will, one hopes, become available after vtk.js reaches version 1.
The VTK renderer
We use a named slot for the template in the file VtkRenderer.vue:
The code for the renderer is slight more complicated in this case and we add an interactor to interact with the plot. The VtkRenderer.ts code is listed below.
The procedure used in this code is identical to that explained in the standard book on VTK. You will be able to access that book here.
The interactor allows only rotation and pan. For zoom capabilities, you will need to you a more capable interactor from the vtk.js library.
The VTK particles component
To draw the particles, we use the following code
This part of the code is identical to that used for the three.js particles.
Creating the particles
The particle axis data are in the form of angles between the ellipsoid axes and the world coordinate axes. These are converted directly into the appropriate rotation matrix. Sphere objects are then created at the origin, rotated, scaled, and translated to their actual positions. The sphere objects are then transformed into SphereBufferGeometry objects to make their manipulation slightly more efficient. Finally, a “material” shading model is added to make sure that the image displayed isn’t flat and a triangulated mesh is generated for each object.
Note that we did not rotate or scale the particles. To do that you will have to write your own code or wait until a more full-featured version of VTK is implemented by vtk.js.
I ran into several issues while trying to use vtk.js. The main ones were:
The vtk.js library needs to be transpiled using babel to avoid complaints about import statements in the webpack bundle.
All events are captured by the interactors used by vtk.js and it is difficult to use Vue’s event handling capabilities with this library.
Geometry transformations have not been implemented in vtk.js yet.
Unstructured grid VTK XML files cannot yet be read in by vtk.js readers.
The rendering process was much slower than that of three.js.
The main advantages of vtk.js were:
The familiar architecture and API which is similar to what we have done in scientific visualization for more than 20 years.
The easy application of interactors (which was not the case with Typescript, Vue, and three.js, and an interactor had to be written). We will discuss the three.js interactor in a future article.
A plot of the spheres produced by our code can be seen below.
If you have questions/comments/corrections, please contact banerjee at parresianz dot com dot zen (without the dot zen).