Introduction

Jupyter - VTK bridge

import vtk
from vtkdatawidgets.vtk_binding import VtkJupyterBridge

First we set up our bridge object:

bridge = VtkJupyterBridge()

This object is a VTK sink (algorithm with 1 input, 0 outputs), that translates the input data to a jupyter widget representation on RequestData (i.e. when .Update() is called).

Let’s set up some placeholder VTK source (a simple sphere in this case), and set it as the input of our bridge:

sphere = vtk.vtkSphereSource()
bridge.SetInputConnection(sphere.GetOutputPort())
bridge.Update()

C:\cleanconda\envs\vtk\lib\site-packages\ipydatawidgets\ndarray\serializers.py:62: UserWarning: Cannot serialize (u)int64 data, Javascript does not support it. Casting to (u)int32.
  warnings.warn('Cannot serialize (u)int64 data, Javascript does not support it. '

At the .Update() call, the data is serialized and sent to the browser. There we can use it however we want. For now, let us visualize it using a simple vtk.js based rendering. This will set up a similar bridge in the browser: from widgets to a vtk.js data source (0 inputs, 1 output):

from vtkdatawidgets import VtkRenderer
renderer = VtkRenderer(dataset=bridge.widget, background=(0.5, 0, 0), size=(600, 400))
renderer

The VtkRenderer object is a standard Jupyter widget that we connect up to the widget side of the bridge (bridge.widget). It does not understand native VTK objects.

Being a widget, the VtkRenderer is an interactive object. Setting its properties are immediately reflected in the frontend:

import ipywidgets
picker = ipywidgets.ColorPicker(value='darkred')
ipywidgets.jslink((picker, 'value'), (renderer, 'background'))
picker

Similarly, we can create a new bridge (this time from a cone source), and set that as the input of the renderer:

cone = vtk.vtkConeSource()
bridge2 = VtkJupyterBridge()
bridge2.SetInputConnection(cone.GetOutputPort())
bridge2.Update()
renderer.dataset = bridge2.widget

Or, we can simply change the input of the current bridge:

bridge2.SetInputConnection(sphere.GetOutputPort())
bridge2.Update()

Notice that nothing will happen until you call Update() on the bridge, as VTK only produces the data on request.

bridge2.SetInputConnection(cone.GetOutputPort())

bridge2.Update()

In the future, there will likely be support for front-end driven update calls, but for now this is unsupported.

Further notes:

Note that VTK.js currently only supports: - PolyData - ImageData

So if you need to transform any inputs you have to those formats before passing it to the bridge.