VTK.js v24 Release Notes

We are pleased to announce the release of VTK.js version 24! Since our last blog post for version 16, we have developed a ton of cool new features to further power-up your web-based visualizations.

For those unfamiliar with VTK.js, it is a freely available, open source rendering library made for scientific visualization on the web. It is an implementation of the Visualization Toolkit (VTK) in an ES6 JavaScript library which can be integrated into any web application. The toolkit leverages WebGL and supports a wide variety of visualization algorithms including scalar, vector, tensor, texture, and volumetric methods. You can find more information about VTK.js at the bottom of this post.

New Features

Below are a few of the most notable changes that have made it into VTK.js from v16 to v24.

1. VTK.js now has an ES Module build, published at @kitware/vtk.js, which means no more webpack-specific configuration. To learn more about how to use this, check out the ES6 docs. We will continue to support the vtk.js package, as it still provides our UMD build for use in non-transpiled codebases.
2. Order-independent transparency for geometry is now supported! Depth peeling and OIT have been a long-requested feature, so we are excited to finally bring proper geometry transparency to VTK.js. To try this out, open this GeometryViewer demo and play with the slider.

3. The ScalarBarActor has now been added to VTK.js. This provides a colormap legend for translating colors to values. You can see this in action in the above video. To try this out, open this GeometryViewer demo, select a coloring array that is not “Solid Color”, and the ScalarBarActor will show up.
4. A CubeAxesActor has been added, allowing you to visualize the size of elements in your scene in a similar fashion to 3D graph ticks. (Example link)

5. WebXR is now supported as a rendering target. View your datasets in virtual or augmented reality! Because this is ongoing work against an ongoing standard, more work is underway to bring interactivity and more. If you want to read more about WebXR support in VTK.js, be sure to check out the WebXR blogpost.

6. 2D actors are now supported! 2D actors will render on top of everything else, and are effectively projected either on the camera near plane or far plane based on user preference. This will allow the creation of widgets and informational displays that are more 2D than 3D. (Example link)

7. Thick line support! No more mimicking thick lines with cylinders or oriented rectangles. To try this out, check out the Actor2D example, and select the “wireframe” representation.

8. Added vector field visualization using Line Integral Convolution on the GPU (example).

9. Images and volumes are rendered in the ITK/DICOM manner. Previously, image pixels (in VTK parlance, point data) were rendered such that a 10×10 image spanned 9×9 world units. This is due to how point data is interpreted, where a 1×1 image of points means a single point in 3D space, rather than a single rectangular pixel. With the new changes, pixels are rendered as rectangles centered on their respective origins, meaning that a 10×10 image of points now renders as a 10×10 image in 3D space. This also applies to the VolumeMapper and 3D images. To learn more about the motivation behind this change, please refer to the associated GitHub issue.
   

10. Add a timestep-based animation handler, and the corresponding proxy, to load animated .vtkjs files with the HttpSceneLoader.
11. Need collision detection? VTK.js now has support for detecting collisions with oriented bounding box (OBB) trees! (example)
12. WebGPU support is constantly improving.
13. Added a vtkPolyDataNormals filter to compute normals on points in polydata geometries.
14. VTK.js has upgraded its ITK bridge with new itk-wasm interop code. And as a new addition, you can now load meshes and geometry from itk-wasm! (example)
15. Improved Typescript definitions! We are constantly improving Typescript support to provide type support for all components in VTK.js.

You can find the entire change-log for all VTK.js releases on our github page, as well as the list of all breaking changes.

Deprecations

Some deprecations are in order as well, in order to reduce cruft and improve maintainability.

1. Old-style widgets are now deprecated. If you were using any of the widgets in Sources/Interaction/Widgets folder, then it’s time to move on over to the new widgets, located in Sources/Widgets. You can learn more about the new widgets in the Widgets documentation.
2. SVG representations are now discouraged in the core VTK.js codebase due to complexity. VTK.js is a 3D library, and drawing 2D widget representations are now the responsibility of the application layer. More information will be provided on migration in a future major release, but for now you can see our SVG widget deprecation notice.

Learning more about VTK.js

If you want to learn more about VTK.js or get help, we have you covered. Below is a list of links to help you navigate VTK.js and the help forums.

• For general info, visit the VTK.js website.
• To browse the source code, visit our Github repo.
• Found a bug? Have a feature request? Drop them in our issue tracker.
• To ask questions on how to integrate VTK.js into your projects, stop by the VTK Discourse web section.
• You can find a complete list of VTK.js examples on our example page.
• For an example application built using VTK.js, check out ParaView Glance.
• We provide regularly (or on demand) VTK.js day long remote training. 

Funding and Acknowledgements

We would like to thank all of the external contributors who helped improve VTK.js. Here is the list of contributors since the last VTK.js release post. In particular, we would like to acknowledge the following contributors:

• OHIF, for contributing to the half-voxel ImageMapper and VolumeMapper rendering changes. Furthermore, OHIF recently released a beta version of their Cornerstone 3D library, which uses VTK.js as the rendering engine! You can check them out at cornerstonejs.org.
• @daker, for constantly helping to improve the Typescript definitions.

We would also like to acknowledge the funding sources that have helped contribute to VTK.js:

• NIH R01EB014955, R42NS086295, R01EB028283, and R01EB021396
• Sirona Medical