vtk.js: the Visualization Toolkit on the Web

A vtk.js rendering of a large-scale oceanic dataset with 5.2 million triangles.

Rendering three-dimensional (3D) meshes and volumetric datasets became possible on the web years ago with the introduction of WebGL. Since that time, several libraries have gained popularity by supporting 3D data rendering in the web browser. These libraries often focus on gaming; they provide little support for scientific visualization and data exploration. As leaders in scientific computing and as developers of the widely used Visualization Toolkit (VTK) and ParaView systems, we wanted to port core features of VTK, including data analysis and visualization algorithms, to the web. To do so, we created the Visualization Toolkit for JavaScript (vtk.js). Today, we are pleased to announce the 5.3.5 release of vtk.js.

For well over a year, vtk.js has been under development. It now offers a suite of useful capabilities for rendering data on the web, and it is fast and robust enough to support advanced visualization applications (e.g., GeometryViewer, OBJViewer, SceneExplorer and VolumeViewer). The toolkit retains the same concepts and architecture as the popular VTK C++ library, bridging the gap between web visualization and VTK data structures. With vtk.js, vtkPolyData, vtkImageData and other analysis data types can be rendered directly inside of a web browser. 

The common mesh representations that vtk.js can render include Point, Wireframe, Surface, and Surface with Edges. The toolkit also allows for advanced rendering features such as volume rendering. While these features work on WebGL 1, they can leverage WebGL 2, if available. In addition, the rendering engine can color data by fields associated with points and cells, and it can handle Not-a-Number (NaN) values, above and below range values as well as pre- and post-processing color interpolation. What is more, vtk.js supports data analysis algorithms such as Marching Cubes (for iso-contouring), along with a variety of common modeling and visualization filters.

Aside from data rendering, vtk.js offers data interaction through widgets. The below images show a widget that allows you to adjust the opacity transfer function.

Interactive volume rendering of a chest computed tomography (CT) scan (256 x 256 x 133 voxels) with vtk.js. The two screenshots show variations of the volume rendering based on changes to the opacity transfer function.

Since coding with vtk.js is much the same as implementing a VTK pipeline in C++ or Python, vtk.js is easy to learn and use in the web environment. The library is more than a basic port of VTK into JavaScript, however, as it adds convenience methods to build new classes with associated default values, readily generate set/get class properties, serialize objects to JavaScript Object Notation (JSON), create an instance from a JSON state and much more.

The vtk.js library is designed to work on a wide variety of platforms, ranging from powerful desktops to cell phones. While JavaScript may not always be associated with high performance, we have seen rendering rates of one billion triangles per second on a mid-range laptop (GTX 960M) with a 30-million triangle model. Likewise, with over one thousand actors, we have seen rates reach upwards of 15 frames per second.

Examples with Live Code

A set of examples with live code is available on kitware.github.io/vtk-js/examples. Some of these examples are full applications; you can use them as standalone HTML files on a desktop (no server required) to view and browse complex data. To get started, just drop your data into the application webpage.

For more details regarding supported formats, refer to the corresponding application descriptions (GeometryViewer, OBJViewer, SceneExplorer and VolumeViewer).

Textured mesh of a UH-60 Black Hawk helicopter rendered with vtk,js, loaded in the OBJViewer.
Rendering of vessel contours from a thermal-hydraulics simulation with vtk.js, loaded in the Paraview SceneExplorer.

Additional Resources

Documentation is available to help you build an application based on vtk.js using modern toolsets such as Webpack and Node Package Manager (npm).

We are actively developing vtk.js, so new features and capabilities will become available in the coming months. One potential addition is support for WebVR. Stay informed and follow our progress on our GitHub repository.

21 Responses to vtk.js: the Visualization Toolkit on the Web

  1. Max says:

    Really excited about this. Thank you guys

  2. Ravi Singi says:

    Awesome,we are super exited to use it. Is this compatible with C#/ASP.net mvc core?

  3. steven says:

    According to message above, so I can extend vtk.js classes by inheriting from the base classes? I were unable to do so in C# using ActiViz.

  4. Matt McCormick says:

    Here is an example that loads DICOM files with itk.js and visualizes them with vtk.js: https://kitware.github.io/itk-vtk-image-viewer/

  5. Jun Xiang says:

    do you have a function list comparing the difference between C++ VTK and Javascript VTK?

    Anyway, you really did great job!

  6. Jun Xiang says:

    And, do you have plan to do similar work on ITK? That would be great too!

  7. Matt McCormick says:

    Hi Jun,

    JavaScript VTK currently supports many of the visualization techniques found in VTK, and the coverage is growing. To get an idea of what is covered, check out the API docs:

    https://kitware.github.io/vtk-js/api/

    itk.js bridges JavaScript with ITK compiled to WebAssembly or fast JavaScript via Emscripten. The entire toolkit is supported. See:

    https://www.npmjs.com/package/itk

    The documentation is currently under development, and the API is still expected to changed. For an example application, see

    https://github.com/Kitware/itk-vtk-image-viewer

    We are currently also investigating the possibility of compiling VTK with Emscripten.

  8. Hi guys, I really would like to learn this, im a UI Designer with basic javascript knowledge, can someone tell me where to begin please? Wish there is a step by step tutorial for a total beginner like me. Thanks in advance.

  9. hi, I’m chinese.is it easy to combine vtk.js with three.js?

    • Sebastien Jourdain says:

      I’m not sure to know exactly how to do it. But I would think it is doable. Although, I don’t think it is strait forward as of right now.

      • lyl says:

        Are there any examples of unstructured meshes?

        • Sebastien Jourdain says:

          Rendering can only be performed with ImageData (Volume Rendering) and PolyData (Geometry Rendering). But we are working on bringing VTK-C++ filters into the web via WebAssembly. Once available it will be possible to process unstructured grid and render them via the extract surface filter.

  10. Lyrana D Hughes says:

    Came across this comment: Unstructured grid VTK XML files cannot yet be read in by vtk.js readers. Is that still true?

    • Sebastien says:

      Yes, only Polydata and ImageData can be used for rendering. Unstructured grid will eventually be supported using piece of VTK/C++ compiled into WebAssembly.

Questions or comments are always welcome!

X