vtk.js Documentation

vtk.js is a JavaScript (ES6) rewrite of the Visualization Toolkit (VTK), designed for 3D rendering in web environments using WebGL and WebGPU. It provides a rendering pipeline for ImageData and PolyData, pipeline infrastructure, and support for common file readers such as .obj, .stl, .vtp, and .vti.

While it is a subset of the original C++ VTK library, it provides the necessary infrastructure to define custom pipelines and filters. It can also be used in conjunction with remote VTK/ParaView servers to enable remote rendering or synchronized content by pushing geometry from a server to a local vtk.js RenderWindow.

The InteractorStyleManipulator class enables interactive manipulation of the scene's camera and viewpoint. It maps specific mouse and keyboard combinations to camera actions:

• Rotation: Left mouse button.
• Rolling: Shift + Left mouse button.
• Panning: Right mouse button.
• Zooming: Shift + Right mouse button.

This class signals the start and end of interactions by firing vtkCommand::StartInteractionEvent and vtkCommand::EndInteractionEvent respectively.

Developing and installing vtk.js requires the following dependencies:

• Node.js: Required for package management and running development scripts.
• Git: Required for cloning the repository and committing changes (only necessary for library development).

The Volume Mapper Light and Shadow example utilizes the following widgets:

1. vtkVolumeController: A standard widget used for volume interaction (also used in the VolumeViewer example).
2. Control Panel: A custom UI panel used to manipulate shadow and lighting parameters, including density normals, blending modes, illumination reach, sample distance, and anisotropy.

The vtkBoundingBox module provides a collection of lightweight, high-performance static functions to manipulate 3D axis-aligned bounding boxes. Bounding boxes are represented as a bounds[6] array (following the VTK standard: [xMin, xMax, yMin, yMax, zMin, zMax]).

Key characteristics:

• Lightweight: Uses static functions for speed.
• VTK Standard: Uses the 6-element array format for bounds.
• Automatic Adjustment: Functions like setMinPoint or setMaxPoint automatically adjust the opposing boundary if the new point would cause an invalid state (e.g., if min > max).

You can control how shapes behave relative to the line's direction and the camera.

Shape Direction

Shapes intended to act as arrows (such as cone, 4 points arrow head, 6 points arrow head, and triangle) will automatically follow the direction of the line.

Shape Rotation

Rotation behavior determines how shapes face the camera. This is configured via rotation modes:

• NONE: Only 2D shapes will rotate to face the camera.
• TRUE: Every shape will rotate to face the camera.
• FALSE: Shapes will not rotate.

The vtkInteractorStyleMPRSlice enables Multi-Planar Reformation (MPR) by driving the renderer camera using a volume, a slice normal, and camera clipping planes.

Important Constraints:

• This style does not manually compute image reslices; it performs MPR via the camera.
• Because this interactor drives the camera directly, you should not use the renderer camera for any other purposes while this style is active.
• It triggers the onModified event whenever a camera property changes.
• It inherits from vtkInteractorStyleManipulator and internally utilizes vtkMouseCameraTrackballRotateManipulator, vtkMouseCameraTrackballZoomManipulator, vtkMouseCameraTrackballPanManipulator, and vtkMouseRangeManipulator.

The vtkInteractorStyle class provides an event-driven interface to the rendering window. It acts as a base class for implementing motion control routines and handles interaction logic forwarded from the vtkRenderWindowInteractor (which manages platform-specific key, mouse, and timer events).

Developers can subclass vtkInteractorStyle to create custom interaction behaviors or override default mouse and key operations (such as trackball or joystick styles).

vtkInteractorStyle emits several events that can be monitored using an observer. Common events include:

• AnimationEvent
• MouseMoveEvent
• LeftButtonPressEvent / LeftButtonReleaseEvent
• MiddleButtonPressEvent / MiddleButtonReleaseEvent
• RightButtonPressEvent / RightButtonReleaseEvent
• KeyPressEvent
• KeyUpEvent