Skip to content

Volume ​

Introduction ​

vtk-js includes support for volume rendering using hardware GPU acceleration. The capabilities may change over time but as of this writing it includes support for :

  • multi-component data
  • at least 24 bits linear resolution
  • support for all native data types, 16 bit, float, etc
  • opacity transfer functions
  • color transfer functions
  • volume interpolation of nearest, fast linear and linear
  • automatic intermixing of opaque surfaces with volumes

Using volume rendering in vtk-js is very much like using it VTK is you are familiar with VTK. The main objects are :

  • RenderWindow/Renderer as usual
  • Volume - similar to Actor, holds the property and mapper
  • VolumeMapper - takes an ImageData as input
  • VolumeProperty - holds the opacity and color transfer functions
  • PiecewiseFunction - a piecewise interpolated function, good for opacity transfer functions
  • ColorTransferFunction - similar to PiecewiseFunction but support an RGB value at each point.

Usage ​

js
// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import 'vtk.js/Sources/Rendering/Profiles/Volume';

import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
import vtkHttpDataSetReader from '@kitware/vtk.js/IO/Core/HttpDataSetReader';

import vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';

const vol = vtkVolume.newInstance();
const mapper = vtkVolumeMapper.newInstance();
mapper.setSampleDistance(2.0);
vol.setMapper(mapper);

const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
reader.setUrl(`${__BASE_PATH__}/Data/volume/headsq.vti`).then(() => {
  reader.loadData().then(() => {
    // we wait until the data is loaded before adding
    // the volume to the renderer
    renderer.addVolume(actor);
    renderer.resetCamera();
    renderWindow.render();
  });
});

// create color and opacity transfer functions
const ctfun = vtkColorTransferFunction.newInstance();
ctfun.addRGBPoint(200.0, 1.0, 1.0, 1.0);
ctfun.addRGBPoint(2000.0, 0.0, 0.0, 0.0);

const ofun = vtkPiecewiseFunction.newInstance();
ofun.addPoint(200.0, 0.0);
ofun.addPoint(1200.0, 0.2);
ofun.addPoint(4000.0, 0.4);

vol.getProperty().setRGBTransferFunction(0, ctfun);
vol.getProperty().setScalarOpacity(0, ofun);
vol.getProperty().setScalarOpacityUnitDistance(0, 4.5);
vol.getProperty().setInterpolationTypeToFastLinear();

mapper.setInputConnection(reader.getOutputPort());

See Also ​

vtkColorTransferFunction vtkImageData vtkPiecewiseFunction vtkVolumeMapper vtkVolumeProperty

Methods ​

extend ​

Method use to decorate a given object (publicAPI+model) with vtkVolume characteristics.

ArgumentTypeRequiredDescription
publicAPIYesobject on which methods will be bounds (public)
modelYesobject on which data structure will be bounds (protected)
initialValuesIVolumeInitialValuesNo(default: {})

getMTime ​

Get the Modified Time which is a monotonic increasing integer global for all vtkObjects.

This allow to solve a question such as:

  • Is that object created/modified after another one?
  • Do I need to re-execute this filter, or not? ...

getMapper ​

Get the volume mapper

getRedrawMTime ​

Get the mtime of anything that would cause the rendered image to appear differently

getVolumes ​

For some exporters and other other operations we must be able to collect all the actors or volumes.

makeProperty ​

Create a new property suitable for use with this type of Actor.

ArgumentTypeRequiredDescription
initialValuesIVolumePropertyInitialValuesNo(default: {})

newInstance ​

Method use to create a new instance of vtkVolume

setMapper ​

Set the volume mapper

ArgumentTypeRequiredDescription
mappervtkVolumeMapperYes