Intro to vtk.js

Presented by Forrest Li

​

Scope of this introduction

• What is vtk.js
• How best to consume vtk.js in your projects
• Hello World Cone: explanation of architecture
• Coloring: how to color geometry
• Extending vtk.js classes and functionality

What is vtk.js

• WebGL/WebGPU-based�2D/3D visualization library
• Rewrite-from-scratch of VTK C++
• Emphasis on�interactive visualization

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

​

Consuming vtk.js

• npm install @kitware/vtk.js
• Packages:

@kitware/vtk.js

​

• ES module package
• Requires an ESM aware bundler for use
• Targets ES5 browsers

​

vtk.js

​

• Includes UMD library and sources
• Source usage requires build rules for glsl, js, css, and workers
• UMD library can be used within script tag

When in doubt and using a bundler, use @kitware/vtk.js

Consuming vtk.js

• All components are located in “modules”
• vtk.js/Common: contains data model classes and core utilities
• vtk.js/Filters: contains filters for transforming or creating data
• vtk.js/Interaction: interactivity code
• vtk.js/IO: reading/writing file types
• vtk.js/Rendering: all rendering components, including WebGL and WebGPU
• Components are imported individually
• Ex:�import vtkRenderWindow from “@kitware/vtk.js/Rendering/Core/RenderWindow”

Hello World, Cone!

hello-world-cone example

Architecture: Rendering

• These imports perform necessary initialization
• Registers WebGL and WebGPU backends
• Registers various profile classes
• Some of the available profiles
• All: all profiles
• Geometry: profile for rendering just geometry
• Volume: profile for rendering just volumes
• Glyph: profile for rendering glyphs

Architecture: Rendering

Architecture: Rendering

RenderWindow

Renderer

Renderer

• RenderWindows can have many Renderers
• Can have multiple RenderWindows on a webpage
• Each one has its own WebGL context

Architecture: Rendering

RenderWindow

Renderer

Renderer

• Rendering components are “abstract”
• WebGL or WebGPU implementations do the actual rendering

WebGL / WebGPU

Canvas context and

element

Architecture: Interaction

• Interaction handled by the render window interactor
• Listens for mouse, keyboard, and touch events on the canvas

WebGL / WebGPU

Canvas context and

element

User interaction

vtkRenderWindowInteractor

Architecture: Interaction

• Interactor
• Primary interface for handling interactions in vtk.js
• InteractorStyle
• Interaction class that translates interactions into meaningful scene changes

​

Example interaction styles

• InteractorStyleTrackballCamera
• Rotates the camera around the focal point
• InteractorStyleImage
• Slices through a 3D image
• Windowing and leveling

Architecture: Sources and Filters

• Sources generate data given some input parameters
• e.g. Cone, Sphere, Cylinder

​

​

​

​

• Filters transform input data and produce transformed output
• e.g. blur, decimate, cut

Cone data

Transformed data

Original data

Architecture: Sources and Filters

Filter input/output

• sets the filter’s inputs/outputs
• setInputData(data, port = 0)
• getOutputData(port = 0)

​

Filter connections

• Links multiple filters together
• Requesting data at the end will trigger pipeline
• setInputConnection(conn, port = 0)
• getOutputPort(port = 0)

Architecture: Actors and Mappers

Architecture: Actors and Mappers

• Mappers handle conversion of data into WebGL / WebGPU primitives
• Actors represent a scene object, and are added to Renderers

Architecture: Properties

• Properties control various aspects of an actor’s rendering
• Lighting: diffuse, ambient, specular, etc.
• Opacity, culling, representation, etc.

Architecture: Data types

• ConeSource outputs vtkPolyData
• Components:
• Points/Vertices
• Lines
• Triangle Strips
• Polygons

Architecture: PolyData

• PolyData is composed of points and cells
• Points are coordinates in physical space
• Cells are collections of points that define a�topology
• e.g. lines, triangles, polygons, tetrahedra

Architecture: PolyData

Try it out with the cone!

• cone.getPoints().getData()
• Every 3 tuple is a coordinate
• cone.getPolys().getData()
• Format: one polygon is defined as�[N, v₁, v₂, …, v_N], where N is the number of points�and v_i refers to the i-th coordinate in the points array
• More info in the VTK book online

Architecture: Other data types

• ImageData represents structured data on a grid
• Orientation
• Origin
• Spacing
• Extent
• ImageData can be rendered as slices or volumes

Architecture: Summary

data

Filter

Mapper

Mapper

RenderWindow

Renderer

Actor

Actor

Data Processing

Visualization

Property

Property

Interaction

Coloring Geometry

cone-colored example

Coloring Geometry

• Things to play with:
• Toggling “interpolate” argument����
• Toggling the mapper’s scalar mode

Coloring Geometry: Point Data

• Need to define what to color
• Here, we associate scalar values to every point on the cone
• numPoints is equal to 7 for our cone
• PointData contains Data Arrays that associate values with points
• Can associate scalars, vectors, normals, and more

Coloring Geometry: Cell Data

• Here, we associate scalar values to every cell (aka face) on the cone
• numCells is equal to 7 for our cone
• CellData contains Data Arrays that associate values with cells
• Can associate scalars, vectors, normals, and more

Coloring Geometry: Color Transfer Function

• The Color Transfer Function maps values (e.g. scalars) to RGB colors
• Current map:
• 0.0 -> blue-ish color
• 0.5 -> green-ish color
• 1.0 -> red-ish color
• Can handle various edge cases
• Values below and above the mapping range
• [0.0, 1.0] in this case
• NaN colors

Coloring Geometry: Color Transfer Function

• Must associate color transfer function with mapper
• Interpolate scalars before mapping: whether to interpolate point values before mapping to colors
• UseLookupTableScalarRange: sets lookup table’s mapping range based on mapper’s scalar range

Coloring Geometry: Summary

• Mappers have Lookup Tables
• One type of Lookup Table is a Color Transfer Function
• A Color Transfer Function maps values to RGB colors
• How geometry is colored depends on the mapper’s scalar mode

Extending vtk.js functionality

• vtk.js classes are closure-based classes
• Classical object inheritance with mixins
• Extending functionality via subclasses

​

Example filter class: sandbox link

vtk.js Class Structure

• Methods and constructor
• Default property values
• Object construction
• newInstance

Methods and Constructor

• Defines class name and adds it�to the class hierarchy
• Superclass is accessed via the�original publicAPI object
• Defines public methods
• requestData is special: it’s used for handling�inputs/outputs for filters
• Runs any init code on instantiation

Methods and Constructor

• Overriding methods simply overwrites�method names on publicAPI
• Use superClass to access original�implementation

Object Construction

• Default values for class�properties
• extend function applies mixins�to construct the class object
• Here, we build out the VTK�object API, and then apply our�filter’s constructor

Object Construction: macros

• Macros are mixins that add�functionality to objects
• obj: adds base VTK methods
• setGet: adds setters and getters
• setGetArray: setters/getters for�arrays
• algo: adds methods to treat the�object as a filter
• Check out Sources/macros.js�for a full listing

newInstance

• Defines a newInstance method�that will construct a new object
• Must be exported to allow�users to construct your object

Extending existing functionality

• To extend existing functionality, skip macro.obj()
• Import the target class and call vtkClass.extend() instead

​

macro.obj(publicAPI, model)

vtkConeSource.extend(publicAPI, model)

End of introduction