how to read .vti files created from stack of 2d PNG Images and render it in vtk.js

Web
13

I just did what you were doing in Python and it seems to be working fine.

import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
import vtkXMLImageDataReader from 'vtk.js/Sources/IO/XML/XMLImageDataReader';
import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
  background: [0, 0, 0],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

const reader = vtkXMLImageDataReader.newInstance();
const actor = vtkVolume.newInstance();
const mapper = vtkVolumeMapper.newInstance();
const property = actor.getProperty();

mapper.setSampleDistance(1.5);
actor.setMapper(mapper);

property.setInterpolationTypeToLinear();
property.setIndependentComponents(false);
mapper.setBlendModeToComposite();

reader.setUrl(`${__BASE_PATH__}/data/test2.vti`).then(() => {
  reader.loadData().then(() => {
    const ds = reader.getOutputData();
    const scalars = ds.getPointData().getScalars();
    const size = scalars.getNumberOfTuples();
    const rawArray = scalars.getData();
    const targetTupleSize = 4;
    const rgba = new Uint8ClampedArray(size * targetTupleSize);
    for (let i = 0; i < size; i++) {
      const offsetSrc = i * 3;
      const offsetDst = i * targetTupleSize;
      const l =
        0.3 * rawArray[offsetSrc + 0] +
        0.59 * rawArray[offsetSrc + 1] +
        0.11 * rawArray[offsetSrc + 2];

      rgba[offsetDst + 0] = rawArray[offsetSrc + 0];
      rgba[offsetDst + 1] = rawArray[offsetSrc + 1];
      rgba[offsetDst + 2] = rawArray[offsetSrc + 2];
      rgba[offsetDst + 3] = l;
    }

    const newScalarWithLuminance = vtkDataArray.newInstance({
      name: 'rgba',
      values: rgba,
      numberOfComponents: targetTupleSize,
    });

    // Replace png RGB by RGBA with luminance
    ds.getPointData().setScalars(newScalarWithLuminance);

    mapper.setInputData(ds);
    renderer.addVolume(actor);
    renderer.resetCamera();
    renderWindow.render();
    console.log('ready...');
  });
});
1 Like