vtkjs example showing a random image

showimage.js

/*
// using npm
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';
*/

// using https://unpkg.com/vtk.js
const vtkFullScreenRenderWindow = vtk.Rendering.Misc.vtkFullScreenRenderWindow;
const vtkImageData = vtk.Common.DataModel.vtkImageData;
const vtkDataArray = vtk.Common.Core.vtkDataArray;
const vtkMapper = vtk.Rendering.Core.vtkMapper;
const vtkImageMapper = vtk.Rendering.Core.vtkImageMapper;
const vtkActor = vtk.Rendering.Core.vtkActor;
const vtkColorTransferFunction = vtk.Rendering.Core.vtkColorTransferFunction;
const vtkImageSlice = vtk.Rendering.Core.vtkImageSlice;

// Create the renderer and get the render window
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
    background: [0, 0, 0],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

// Create the image data
const imageData = vtkImageData.newInstance();
const scalarArray = vtkDataArray.newInstance({
    numberOfComponents: 1,
    values: new Uint8Array([  // Example data array
        0, 255, 127, 0,
        255, 0, 127, 255,
        127, 0, 255, 127,
        0, 127, 255, 0
    ])
});

// Define the image dimensions
const dimensions = [4, 4, 1];  // Width, Height, Depth
imageData.setDimensions(...dimensions);
imageData.getPointData().setScalars(scalarArray);

// Create a color map
const colorTransferFunction = vtkColorTransferFunction.newInstance();
colorTransferFunction.addRGBPoint(0, 0.0, 0.0, 1.0);    // Blue for 0 value
colorTransferFunction.addRGBPoint(127, 0.0, 1.0, 0.0);  // Green for 127 value
colorTransferFunction.addRGBPoint(255, 1.0, 0.0, 0.0);  // Red for 255 value

// Create the image mapper and actor
const imageMapper = vtkImageMapper.newInstance();
imageMapper.setInputData(imageData);

const imageSlice = vtkImageSlice.newInstance();
imageSlice.setMapper(imageMapper);

// Apply the color map to the actor's property
imageSlice.getProperty().setRGBTransferFunction(0, colorTransferFunction);

// Add the actor to the renderer and render
renderer.addActor(imageSlice);
renderer.resetCamera();
renderWindow.render();

ShowImage.vue

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

// Without this import, it will fail with "renNode is undefined"
// If Geometry is used as a profile, you won't see anything on the screen, but no error.
// Thank you harry for helping me finding the issue:
// https://discourse.vtk.org/t/error-in-vtkgenericrenderwindow-for-vtk-js/15154
import "@kitware/vtk.js/Rendering/Profiles/Volume";

import vtkGenericRenderWindow from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
import vtkImageData from "@kitware/vtk.js/Common/DataModel/ImageData";
import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray";
import vtkImageMapper from "@kitware/vtk.js/Rendering/Core/ImageMapper";
import vtkImageSlice from "@kitware/vtk.js/Rendering/Core/ImageSlice";
import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";

// VTK elements
const vtkContainer = ref(null);
const context = ref(null);

onMounted(() => {
  if (!context.value && vtkContainer.value) {
    const genericRenderWindow = vtkGenericRenderWindow.newInstance({
      background: [0.9, 0.5, 0.5],
    });
    genericRenderWindow.setContainer(vtkContainer.value);

    const renderWindow = genericRenderWindow.getRenderWindow();
    const renderer = genericRenderWindow.getRenderer();

    // Create the image data
    const imageData = vtkImageData.newInstance();
    const scalarArray = vtkDataArray.newInstance({
      numberOfComponents: 1,
      values: new Uint8Array([
        // Example data array
        0, 255, 127, 0, 255, 0, 127, 255, 127, 0, 255, 127, 0, 127, 255, 0,
      ]),
    });

    // Define the image dimensions
    const dimensions = [4, 4, 1]; // Width, Height, Depth
    imageData.setDimensions(...dimensions);
    imageData.getPointData().setScalars(scalarArray);

    // Create a color map
    const colorTransferFunction = vtkColorTransferFunction.newInstance();
    colorTransferFunction.addRGBPoint(0, 0.0, 0.0, 1.0); // Blue for 0 value
    colorTransferFunction.addRGBPoint(127, 0.0, 1.0, 0.0); // Green for 127 value
    colorTransferFunction.addRGBPoint(255, 1.0, 0.0, 0.0); // Red for 255 value

    // Create the image mapper and actor
    const imageMapper = vtkImageMapper.newInstance();
    imageMapper.setInputData(imageData);

    const imageSlice = vtkImageSlice.newInstance();
    imageSlice.setMapper(imageMapper);

    // Apply the color map to the actor's property
    imageSlice.getProperty().setRGBTransferFunction(0, colorTransferFunction);

    // Add the actor to the renderer and render
    renderer.addActor(imageSlice);
    renderer.resetCamera();
    renderWindow.render();

    context.value = {
      genericRenderWindow,
      renderWindow,
      renderer,
      imageData,
      scalarArray,
      dimensions,
      colorTransferFunction,
      imageMapper,
      imageSlice,
    };
  }
});

onBeforeUnmount(() => {
  if (context.value) {
    const { genericRenderWindow } = context.value;
    genericRenderWindow.delete();
    context.value = null;
  }
});
</script>

<template>
  <div>
    <div ref="vtkContainer" class="vtk-container"></div>
  </div>
</template>

<style>
.vtk-container {
  width: 100%;
  height: 100vh; /* Adjust as needed */
}
</style>