NIFTI file rendering blank, possibly camera or color levels?

Web
1

Hi there,

I’ve been trying to render a .nii file using ITK.js and VTK.js and so far I’ve only been able to come up with a blank black square…

I believe my file is being loaded (at least partially), as I am able to get the expected properties of the image (e.g. bounds, spacing, direction, etc) and they match the Paraview Glance tool’s values as far as I can tell. However, I can’t seem to find the camera properties/position in Glance, so I can’t check any of those values against mine. The tricky part is that the image is not centered anywhere near 0, 0, 0 but rather in the YZ plane (sagittal) and pretty far away…

Here’s a code snippet:

  const createViewerNifti = (res, renderer, renderWindow) => {
    const niftiReader = vtkITKImageReader.newInstance();
    niftiReader.setFileName("image_sag.nii");

    niftiReader
      .parseAsArrayBuffer(res)
      .then(() => {
        const data = niftiReader.getOutputData();
        console.log("nifti", data);
        const extent = data.getExtent();
        const spacing = data.getSpacing();

        const imageActorK = vtkImageSlice.newInstance();
        data.setOrigin([
          data.getBounds()[1],
          data.getBounds()[2],
          data.getBounds()[4],
        ]); // now origin matches what Glance has when you load this file

        const dataRange = data.getPointData().getScalars().getRange();
        // also the same as what glance seems to think the color level range is

        const imageMapperK = vtkImageMapper.newInstance();
        imageMapperK.setInputData(data);
        imageMapperK.setKSlice(1); // I'm not certain that this is the correct slicing direction
        imageActorK.setMapper(imageMapperK);

        imageActorK.getProperty().setColorLevel(dataRange[1] / 2); // this value is just in the middle of the range
        imageActorK.getProperty().setColorWindow(dataRange[1]); // this color window and level look okay in Glance
        imageActorK.getProperty().setOpacity(1);

        renderer.addActor(imageActorK);

        renderer.resetCamera();
        // renderer.resetCameraClippingRange();
        // renderer.getActiveCamera().setDirectionOfProjection(-1, 0, 0);
        // renderer.getActiveCamera().setPosition(-99, 8, 32); // this is the origin from Glance
        // renderer.getActiveCamera().setViewUp(0, 0, 1);
        // renderer.getActiveCamera().setDistance(100);
        // This is a collection of manipulations i've tried on the camera to try and see if any combinations of it will find the image. So far, no luck.

        renderWindow.render();
      })
      .catch((err) => console.error(err));

Here’s the .nii file I am attempting to load:
image_sag (1).nii (288.3 KB)

Here’s a .glance file you can load into Paraview Glance and see what I hope to see…
20211012_10-2-30.glance (1.3 KB)

I’m hoping maybe I’m missing something simple and just looking in the wrong direction? Or if you know how to extract the camera settings from the .glance file, I would be happy to try and replicate those and see if it can work in my app.

Thanks!