VTK.js - Using vtkImageReslice displaying black rectangle with ouput dimensionality set to 2

Hello!

I’m trying to use vtkImageReslice to display a CT in the axial orientation. I’m using the latest vtk.js with React and following the code from here.

The problem is that it displays a black rectangle:

This is the main code snippet:

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';

import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';
import vtkGenericRenderWindow from 'vtk.js/Sources/Rendering/Misc/GenericRenderWindow';
import vtkImageReslice from 'vtk.js/Sources/Imaging/Core/ImageReslice';

const styles = () => ({
  canvas: {
    width: '800px',
    height: '800px',
    position: 'relative',
    margin: '0',
    padding: '0',
    top: '0',
    left: '0',
    overflow: 'hidden',
  },
});

class ResliceExample extends Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
  }

  componentDidMount() {
    try {
      const { series } = this.props; // SERIES IS A vtkImageData created with convertItkToVtkImage

      // Render window
      const genericRenderWindow = vtkGenericRenderWindow.newInstance({
        background: [0.32, 0.34, 0.43],
      });
      genericRenderWindow.setContainer(this.containerRef.current);

      // Renderer
      const renderer = genericRenderWindow.getRenderer();

      // Reslice
      const imageReslice = vtkImageReslice.newInstance();
      imageReslice.setOutputDimensionality(2);
      imageReslice.setInputData(series);

      imageReslice.setBorder(true);
      imageReslice.setOutputScalarType('Uint16Array');
      imageReslice.setScalarScale(65535 / 255);
      imageReslice.setAutoCropOutput(true);

      // Mapper
      const resliceMapper = vtkImageMapper.newInstance();
      resliceMapper.setInputConnection(imageReslice.getOutputPort());
      resliceMapper.setKSlice(0);

      // Actor
      const resliceActor = vtkImageSlice.newInstance();
      resliceActor.setMapper(resliceMapper);
      resliceActor.getProperty().setColorLevel(65535 / 2);
      resliceActor.getProperty().setColorWindow(65535);
      renderer.addActor(resliceActor);

      renderer.getActiveCamera().setParallelProjection(true);
      renderer.resetCamera();

      // Render
      const renderWindow = genericRenderWindow.getRenderWindow();
      renderWindow.render();
    } catch(e) {
      console.log('Error: ', e);
    }
  }

  render() {
    const { classes } = this.props;
    return (
      <div
        className={classes.canvas}
        ref={this.containerRef}
      />
    );
  }
}

export default withStyles(styles)(ResliceExample);

If I just comment the line imageReslice.setOutputDimensionality(2) I can see a slice from the CT:

I guess I’m doing something wrong when trying to get a slice from the CT in 2D. Any help would be appreciated!

Thanks in advance
Antonio

Any specific reason to use the reslice filter while the mapper already has the role to extract a slice from the volumetric data?

Hi Sebastien,

Thanks for replying! Yes, I’m planning to obtain oblique slices.

Cheers!

@finetjul @agirault any idea since it is more along what you are doing with vtk.js?

Hello colleagues,

I found the cause of this. For output dimensionality = 2 I need to specify a translation to go inside the volume.

For example, to show the slice at the center of the volume in the Z direction, I added this code:

const center = series.getCenter();
const axes = mat4.create();
mat4.fromTranslation(axes, vec3.fromValues(center[0], center[1], center[2]));
imageReslice.setResliceAxes(axes);

To show a specific slice I would use series.indexToWorld() to convert the index to world coordinates and then use this value for the translation.

Hope this help somebody.

Cheers

1 Like