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

Web
1

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:

Screenshot%20from%202019-07-26%2010-09-13
Screenshot from 2019-07-26 10-09-13.png804×804 1.85 KB

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:

Screenshot%20from%202019-07-26%2010-09-33
Screenshot from 2019-07-26 10-09-33.png805×799 113 KB

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

2

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

3

Hi Sebastien,

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

Cheers!

4

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

5

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