New VTK.js Tutorials

December 22, 2021
VTK.js

We are pleased to announce the release of two new VTK.js tutorials!

VTK.js is an open source, freely available JavaScript library for creating interactive, 3D, scientific visualization applications that run in your web browser. It is the 3D visualization foundation of a variety of research and commercial applications such as ParaView Glance and trame.

Both of these VTK.js development tutorials are presented as slides. They do require some VTK and/or VTK.js experience, but they are intended to be on the introductory side of the spectrum. Additionally, they cover topics that have not been covered in previously released VTK.js tutorials such as widgets, which provide tools for painting overlays, making length and angle measurements, and interacting with your data in a variety of new ways. Also, these tutorials heavily rely on interactive examples; so if you learn by tinkering with examples, then these tutorials are for you!

Tutorial 1: Introduction to VTK.js

In the first tutorial, we introduce VTK.js concepts and dive into some commonly encountered questions, such as coloring geometry and extending VTK.js classes to add custom functionality. This tutorial assumes some degree of VTK and VTK.js knowledge, so if you have never used VTK or VTK.js, then you may want to first check out our other more beginner-friendly tutorials or read the freely available VTK book online!

The first tutorial includes an example that shows how to create an interactive 3D colored cone in a few lines of javascript code.

Tutorial 2: Intro to VTK.js Widgets

In the second tutorial, we dive into using and developing VTK.js widgets. The VTK.js widgets architecture is vastly different from the architecture used for widgets in VTK, so this tutorial benefits both novice and expert VTK users alike. In this tutorial, we cover the basics of interaction, handling widget logic, and drawing the widget representations.

VTK.js allows for defining custom widgets, for example this ball widget is restricted to selecting points along the line.

More VTK.js Tutorials and Resources

If you are looking to learn more about VTK.js, or want to get access to more tutorials1, check out our other tutorials and the VTK.js documentation site.

Leave a Reply