VTK.js v35 Release

We are pleased to announce the v35 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 v35 release, the VTK.js community has 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.

Features

In addition to bug fixes and general performance improvements, below are the highlights of a few cool new features that landed in version 35.

vtkThresholdPoints

vtkThresholdPoints is a filter that extracts points from a dataset that satisfy a threshold criterion. Try out the ThresholdPoints example.

I/O

Many new file formats have been added such as GLTF, IFC, PLY, TIFF, HDR, GCode. You can now save your meshes with OBJWriter.

Multi Image Volume Rendering

To support separate background images (MRI, CT) and segmentation images, the VolumeMapper and ImageResliceMapper now takes multiple input volumes. Each input volume gets its own 3D texture (sampler3D), so background and segmentation images can be uploaded independently on the GPU.

Previously, overlaying segmentation labels on a medical image required packing everything into a single multi-component vtkImageData. Adding or removing a labelmap no longer requires re-uploading the base image.

The quality of the rendering has been improved in the process by fixing subtle normal computation bugs that affected lighting and shading quality.

Try out the VolumeMapper example.

Text

vtkActor2D recent addition has permitted the support of 2D text (vtkTextActor) rendered in the VTK.js scene. vtkVectorText generates 3D text using custom fonts.Try out the TextActor example and the VectorText example.

vtkShrinkPolyData

Cells can be individually shrunk using the new vtkShrinkPolyData filter. Try out the ShrinkPolyData example.

TransformControlsWidget

A long awaited feature was the transform controls widget to translate, scale and rotate any arbitrary actor. Try out the TransformControlsWidget example.

vtkCleanPolyData

Degenerated meshes can be troublesome for processing and filtering, the vtkCleanPolyData filter can merge points within a tolerance and convert degenerated triangles into a line or a vertex. The vtkPointLocator and vtkMergePoints convenient classes were also added.

Try out the CleanPolyData example.

Reslice Labelmap Outline Rendering

The ImageResliceMapper renders an oblique 2D slice of a 3D image volume by reslicing it along an arbitrary plane. We added label outline rendering with configurable thickness and opacity in PR #3406

Try out the ImageResliceMapperLabelOutline example.

New example gallery

We have also migrated the project documentation to VitePress to make the docs faster, clearer, and easier to maintain going forward. The previous setup had started to slow us down—both in build times and in how quickly we could improve content. With VitePress, pages load significantly faster and the navigation is cleaner. For users, the result is a documentation site that’s easier to browse and search; for maintainers, it’s a simpler, more future-proof foundation that scales with the project. Kudos to daker for all his work on VitePress.

Have a look at the new examples gallery.

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.

• Picking: write to depth buffer for translucent pass when picking. This change fixes a picking issue with multiple translucent actors overlaid on top of each other.
• vtkRenderWindowInteractor: KeyPress, KeyDown and KeyUp events are now observed on the container and no longer on the document.
• vtkMapper: many properties have moved to vtkVolumeProperty.
• Bounds: split getBounds with computeBounds().

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. Special thanks to daker who largely contributed to vtk.js lately.

In addition to our customers, we would also like to acknowledge the funding sources that have helped contribute to vtk.js:

• NIH R01EB014955, R42NS086295, R01EB028283, and R01EB021396