VTK JS Image Slicing basics

kit · November 26, 2020, 3:19pm

Hi,

I was experimenting with the image slicing example

KitwareMedical/vtk.js-examples/blob/master/src/image-slicing.js

import vtkGenericRenderWindow from 'vtk.js/Sources/Rendering/Misc/GenericRenderWindow';

import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
import vtkPiecewiseFunction from 'vtk.js/Sources/Common/DataModel/PiecewiseFunction';
import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';
import vtkInteractorStyleImage from 'vtk.js/Sources/Interaction/Style/InteractorStyleImage';
import ImageConstants from 'vtk.js/Sources/Rendering/Core/ImageMapper/Constants';

const { SlicingMode } = ImageConstants;


// --- Set up our renderer ---

const container = document.querySelector('#container');

// We use the wrapper here to abstract out manual RenderWindow/Renderer/OpenGLRenderWindow setup
const genericRenderWindow = vtkGenericRenderWindow.newInstance();
genericRenderWindow.setContainer(container);

This file has been truncated. show original

which are really nice btw. But if I change

mapper.setSlicingMode(SlicingMode.Z)

to

mapper.setSlicingMode(SlicingMode.Y)

The rendered image disappears (no errors). I was expecting it to take the slices using a Y- orthogonal plane instead. What else do I need to change?

Forrest · November 30, 2020, 5:58pm

Hi Kit,

Have you updated your camera as well? The rendered slice respects world orientation, so showing a Y-slice when the camera is looking down the Z axis will “disappear” from the camera’s POV.

kit · December 3, 2020, 3:58pm

That was it. Thanks.

h4rry · December 30, 2024, 11:12pm

Hi, i’ve tried updating the camera by calling renderer.updateCamera(), but browser throws an error (activeCamera.render() is not a function)

Do I have to manually update the parameters (viewUp, directionOfProjection, etc) instead?

finetjul · December 31, 2024, 2:06pm

Indeed, renderer.updateCamera() seems to not apply for “regular” cameras (but remote cameras)…

I’m not sure to understand what you are trying to do…

h4rry · January 1, 2025, 1:28am

I’m switching between different slicing modes (X, Y, Z) within the image-slicing.js to view the volume from different planes (axial, sagittal or coronal).

If I change mapper.setSlicingMode(SlicingMode.Z) to mapper.setSlicingMode(SlicingMode.Y) or mapper.setSlicingMode(SlicingMode.X), the renderWindow just turns black. I know that I have to update the camera properties, just not sure which values to set for each slicing mode.

finetjul · January 2, 2025, 8:50am

Gotcha,

When you change slicing mode, your camera focal point does not change.
You only need to change the camera position.
It should be newCameraPosition = focalPoint + distance * newSlicingNormal. where distance could be the one before changing the slicing mode: distance = cameraPosition - focalPoint.