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.



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 /exam… . 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).



Go to the Demo – 6.9MB


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.

Share this:

  • Click to email this to a friend (Opens in new window)
  • Click to print (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • 38Click to share on LinkedIn (Opens in new window)38
  • Click to share on Twitter (Opens in new window)
  • Click to share on Google+ (Opens in new window)
  • Click to share on Reddit (Opens in new window)