We are pleased to announce the v30 release of VTK.js!

VTK.js provides interactive visualizations running in your web browser for 2D, 3D, and higher-dimensional scientific data, including point clouds acquired as LiDAR data, surface models that represent molecular structures, and AR/VR environments that incorporate volume renderings of medical images.  It is freely available as open-source software for academic and commercial use. As an implementation of the Visualization Toolkit (VTK) in an ESM JavaScript library, it also leverages WebGL, WebGPU, and WebXR to support a wide variety of visualization algorithms and data structures.

For this v30 release, we have developed a ton of cool new features to further power up your web-based visualizations.  These features build upon the many capabilities added during our previous VTK.js release and provide a wide range of new capabilities.

New Features

Below are the highlights of a few cool new features that landed in version 30.

Custom Volume Component Color Mixing

The volume mapper now supports custom shader code for blending multiple components together in a volume. Currently, there are two blending presets available:

• colorize, which combines the color of one channel with the opacity of another; and
• additive, which sums the colors and opacities of both channels.

If those blending presets are insufficient, custom shader code can be provided for custom blending scenarios.

Curviplanar Reformatting

The new curviplanar reformatting mapper allows for 2D slicing of a volume along an arbitrary 1D curve. In the example shown above, the volume is resliced to keep the aorta as a straight line, deforming the rest of the image around it.

Try out the ImageCPRMapper example.

GPU-Accelerated Image Reslicing

The new ImageResliceMapper allows for arbitrary planar image reslicing, now on the GPU! This provides a much faster reslicing experience than what one would normally find on a CPU.

Try out the ImageResliceMapper example.

Shared Render Window Contexts

One major limitation of WebGL is the maximum allowed number of WebGL contexts. The often-mentioned solution to this limitation is to restructure your VTK.js pipelines to use multiple renderers in a single render window. With the new changes to nestable render windows, multiple vtkRenderWindow instances can now render to a single WebGL context, effectively eliminating the previous cap on the number of WebGL contexts while sharing GPU memory between render windows.

Try out the ManyRenderWindows example.

Seed Point Widget & Actor-Based Picking Manipulator

There are two new features in vtk.js widgets: the seed point widget and the actor picking manipulator. The seed point widget can be used to place landmarks in the scene, while the actor picking manipulator can constrain widget interaction to the surface of a mesh.

Try out the SeedWidget example, which includes a demonstration of the actor picking manipulator.

WebXR HoloLens Interaction

HoloLens interaction is now supported! Recent changes have improved vtk.js’ handling of interaction with head-mounted displays, with most of the work focusing on the HoloLens.

Breaking Changes

If you are looking to upgrade to v30, be aware that there are a few breaking changes. You can see a list of those changes in our breaking changes document.

1. vtkManipulator.handleEvent has a new function signature. New code must change from const coords = manipulator.handleEvent(...) to const { worldCoords } = manipulator.handleEvent(...).
2. SVG widgets have been fully removed as of v29.
3. Several ResliceCursorWidget API changes are no longer backwards-compatible in v30.

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 its help forums.

If you would like to complement vtk.js’s visualization with analysis or pre-processing of your data, consider itk-wasm. itk-wasm provides simple, efficient support for spatial processing pipelines in WebAssembly. Data can be transferred with the vtk.js ITKHelper.

If you are looking for a server-side solution to perform data processing and visualization consider using trame. Trame lets you create your application in plain Python which can then leverage VTK/ParaView with vtk.js. If you want to learn more and explore dozens of examples, go to trame website. 

Want to see VTK.js used in a medical viewer? Check out VolView, a drag-and-drop DICOM viewer for the web! Features include cinematic volume rendering, DICOM reading without any external server setup, annotations, and much more.

• 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 regular (or on-demand) VTK.js day-long onsite or remote training. 
• Trame general information available on the website

Funding and Acknowledgements

We would like to thank all the external supporters and contributors who helped improve vtk.js. Here is the list of contributors since the last vtk.js release post.

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

• NIH R01EB014955, R42NS086295, R01EB028283, and R01EB021396