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.
Go to the demo – 1.5 MB

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.
Go to the demo – 6.9 MB
Rendering of vessel contours from a thermal-hydraulics simulation with vtk.js, loaded in the Paraview SceneExplorer.
Go to the demo – 9MB

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.

27 comments to vtk.js: the Visualization Toolkit on the Web

  1. 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.

      1. It looks very promising! Currently I use vtk to view DICOM files so I’m wondering if Vtk.js will support the DICOM file format in the future?

        1. They are several JavaScript libraries that can read DICOM. So web application could be build to read and visualize such data.
          Moreover, ITK can be compiled to WebAssembly or emscripten which means that you can also use ITK to decode various file format and render them using vtk.js…

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

    Anyway, you really did great job!

  3. 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.

  4. 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.

    1. I would start with either of the following guide:
      https://kitware.github.io/vtk-js/docs/intro_vtk_as_external_script.html
      https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html

      Here is another example live on codepen
      https://codepen.io/jourdain/pen/RQZWYa

      Then once you have the hang of it, you can learn more about VTK on its concepts and data-structures with our book (downloadable for free):
      https://www.vtk.org/vtk-textbook/

    1. 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.

        1. 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.

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

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

  6. Hello, Is it possible to visualize unstructured grid (.VTU) files using vtk.js now? If not, which application would you recommend to use to visualize such files?

    1. You can use ParaView or VTK to extract the outer skin and then render that in vtk.js. But if you want to have full VTK/ParaView capability in the Web, ParaViewWeb is the way to go.

  7. hi,
    I have some questions
    Windows vtk i can use 3d .tif data
    Now to display on the webpage
    How to display 3d .tif data using vtk.js,
    What format do I need to convert, is there a tool?
    Thanks in advance.

  8. Hello

    I have a question.

    How to display the coordinate points of SWC file on display of 3D. TIF data with vtk. JS

    Are there any relevant forums to discuss such issues?

  9. Hello

    I have a question.

    How to display the coordinate points of SWC file on display of 3D. TIF data with vtk. JS

Leave a Reply