# NIFTI file rendering blank, possibly camera or color levels?

**URL:** https://discourse.vtk.org/t/nifti-file-rendering-blank-possibly-camera-or-color-levels/6978
**Category:** Web
**Created:** [October 27, 2021, 12:15am UTC](https://discourse.vtk.org/t/nifti-file-rendering-blank-possibly-camera-or-color-levels/6978 "2021-10-27T00:15:40Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![anonymous\_iguana](https://discourse.vtk.org/user_avatar/discourse.vtk.org/anonymous_iguana/32/3997_2.png) [@anonymous\_iguana](https://discourse.vtk.org/u/anonymous_iguana)
#### Post date: [October 27, 2021, 12:15am UTC](https://discourse.vtk.org/t/nifti-file-rendering-blank-possibly-camera-or-color-levels/6978/1 "2021-10-27T00:15:40Z")

</div>

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:

```auto
  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](https://discourse.vtk.org/uploads/short-url/1QDfSvrFGThBG6ODZMeUGNFDpF0.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](https://discourse.vtk.org/uploads/short-url/4Gre8e9Fye8ZZGX0RytTKC8Zz5d.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!