fix(ImageMapper): label outlines with I/J slicing

Sources/Rendering/Core/ImageMapper/test/testImageLabelOutline.js

@@ -4,18 +4,21 @@ import 'vtk.js/Sources/Rendering/Misc/RenderingAPIs';
 
 import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
 import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';
+import { SlicingMode } from 'vtk.js/Sources/Rendering/Core/ImageMapper/Constants';
 import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
 import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow';
 import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
 import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
 import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
 import vtkPiecewiseFunction from 'vtk.js/Sources/Common/DataModel/PiecewiseFunction';
 
-import baseline from './testImageLabelOutline.png';
+import baselineI from './testImageLabelOutline_I.png';
+import baselineJ from './testImageLabelOutline_J.png';
+import baselineK from './testImageLabelOutline_K.png';
 
-test('Test ImageMapper', (t) => {
+test.onlyIfWebGL('Test ImageMapper label outline', (t) => {
   const gc = testUtils.createGarbageCollector(t);
-  t.ok('rendering', 'vtkImageMapper testImage');
+  t.ok('rendering', 'vtkImageMapper label outline');
 
   // Create some control UI
   const container = document.querySelector('body');
@@ -129,9 +132,9 @@ test('Test ImageMapper', (t) => {
   // Create a one slice vtkImageData that has four quadrants of different values
 
   const imageData = gc.registerResource(vtkImageData.newInstance());
-  const dims = [10, 10, 1];
+  const dims = [10, 10, 10];
   imageData.setSpacing(1, 1, 1);
-  imageData.setOrigin(0.1, 0.1, 0.1);
+  imageData.setOrigin(0, 0, 0);
   imageData.setDirection(1, 0, 0, 0, 1, 0, 0, 0, 1);
   imageData.setExtent(0, dims[0] - 1, 0, dims[1] - 1, 0, dims[2] - 1);
 
@@ -140,14 +143,16 @@ test('Test ImageMapper', (t) => {
   const values = new Uint8Array(dims[0] * dims[1] * dims[2]);
 
   let i = 0;
-  for (let y = 0; y < dims[1]; y++) {
-    for (let x = 0; x < dims[0]; x++, i++) {
-      if ((x < 3 && y < 3) || (x > 7 && y > 7)) {
-        values[i] = BACKGROUND;
-      } else if (x > 4 && x < 6 && y > 4 && y < 7) {
-        values[i] = LOW_VALUE;
-      } else {
-        values[i] = HIGH_VALUE;
+  for (let z = 0; z < dims[2]; z++) {
+    for (let y = 0; y < dims[1]; y++) {
+      for (let x = 0; x < dims[0]; x++, i++) {
+        if ((x < 3 && y < 3) || (x > 7 && y > 7)) {
+          values[i] = BACKGROUND;
+        } else if (x > 4 && x < 6 && y > 4 && y < 7) {
+          values[i] = LOW_VALUE;
+        } else {
+          values[i] = HIGH_VALUE;
+        }
       }
     }
   }
@@ -185,15 +190,68 @@ test('Test ImageMapper', (t) => {
   renderWindow.addView(glwindow);
   glwindow.setSize(400, 400);
 
-  glwindow.captureNextImage().then((image) => {
-    testUtils.compareImages(
-      image,
-      [baseline],
-      'Rendering/Core/ImageMapperLabelOutline',
-      t,
-      1,
-      gc.releaseResources
-    );
-  });
-  renderWindow.render();
+  function testWithSlicing(slicingMode, baseline) {
+    const PARAMS = {
+      I: {
+        mode: SlicingMode.I,
+        cameraPos: [1, 0, 0],
+        cameraDir: [1, 0, 0],
+        cameraUp: [0, 1, 0],
+        slice: 2,
+      },
+      J: {
+        mode: SlicingMode.J,
+        cameraPos: [0, 1, 0],
+        cameraDir: [0, 1, 0],
+        cameraUp: [0, 0, 1],
+        slice: 6,
+      },
+      K: {
+        mode: SlicingMode.K,
+        cameraPos: [0, 0, 1],
+        cameraDir: [0, 0, -1],
+        cameraUp: [0, 1, 0],
+        slice: 5,
+      },
+    };
+
+    const params = PARAMS[slicingMode];
+
+    return function testSlicingLabelOutline() {
+      t.comment(`testImageLabelOutline: ${slicingMode} slicing`);
+      const { promise, resolve } = Promise.withResolvers();
+
+      mapper.setSlicingMode(params.mode);
+      mapper.setSlice(params.slice);
+      labelMap.mapper.setSlicingMode(params.mode);
+      labelMap.mapper.setSlice(params.slice);
+
+      renderer.getActiveCamera().setPosition(...params.cameraPos);
+      renderer.getActiveCamera().setDirectionOfProjection(...params.cameraDir);
+      renderer.getActiveCamera().setViewUp(...params.cameraUp);
+      renderer.resetCamera();
+      renderer.resetCameraClippingRange();
+
+      glwindow.captureNextImage().then((image) => {
+        testUtils.compareImages(
+          image,
+          [baseline],
+          `Rendering/Core/ImageMapperLabelOutline_${slicingMode}`,
+          t,
+          1,
+          resolve
+        );
+      });
+
+      renderWindow.render();
+      return promise;
+    };
+  }
+
+  [
+    testWithSlicing('I', baselineI),
+    testWithSlicing('J', baselineJ),
+    testWithSlicing('K', baselineK),
+    gc.releaseResources,
+  ].reduce((cur, next) => cur.then(next), Promise.resolve());
 });

Sources/Rendering/OpenGL/ImageMapper/index.js

@@ -272,6 +272,7 @@ function vtkOpenGLImageMapper(publicAPI, model) {
           'uniform mat4 PCWCMatrix;',
           'uniform mat4 vWCtoIDX;',
           'uniform ivec3 imageDimensions;',
+          'uniform int sliceAxis;',
         ]
       ).result;
 
@@ -301,6 +302,11 @@ function vtkOpenGLImageMapper(publicAPI, model) {
           '  // half voxel fix for labelmapOutline',
           '  return (index + vec3(0.5)) / vec3(imageDimensions);',
           '}',
+          'vec2 getSliceCoords(vec3 coord, int axis) {',
+          '  if (axis == 0) return coord.yz;',
+          '  if (axis == 1) return coord.xz;',
+          '  if (axis == 2) return coord.xy;',
+          '}',
           '#endif',
         ]
       ).result;
@@ -359,7 +365,7 @@ function vtkOpenGLImageMapper(publicAPI, model) {
                 `
                 #ifdef vtkImageLabelOutlineOn
                   vec3 centerPosIS = fragCoordToIndexSpace(gl_FragCoord);
-                  float centerValue = texture2D(texture1, centerPosIS.xy).r;
+                  float centerValue = texture2D(texture1, getSliceCoords(centerPosIS, sliceAxis)).r;
                   bool pixelOnBorder = false;
                   vec3 tColor = texture2D(colorTexture1, vec2(centerValue * cscale0 + cshift0, 0.5)).rgb;
                   float scalarOpacity = texture2D(pwfTexture1, vec2(centerValue * pwfscale0 + pwfshift0, 0.5)).r;
@@ -383,7 +389,7 @@ function vtkOpenGLImageMapper(publicAPI, model) {
                         gl_FragCoord.y + float(j),
                         gl_FragCoord.z, gl_FragCoord.w);
                       vec3 neighborPosIS = fragCoordToIndexSpace(neighborPixelCoord);
-                      float value = texture2D(texture1, neighborPosIS.xy).r;
+                      float value = texture2D(texture1, getSliceCoords(neighborPosIS, sliceAxis)).r;
                       if (value != centerValue) {
                         pixelOnBorder = true;
                         break;
@@ -798,13 +804,20 @@ function vtkOpenGLImageMapper(publicAPI, model) {
       const worldToIndex = image.getWorldToIndex();
 
       const imageDimensions = image.getDimensions();
+      let sliceAxis = model.renderable.getClosestIJKAxis().ijkMode;
+
+      // SlicingMode.NONE equates to SlicingMode.K
+      if (sliceAxis === SlicingMode.NONE) {
+        sliceAxis = SlicingMode.K;
+      }
 
       program.setUniform3i(
         'imageDimensions',
         imageDimensions[0],
         imageDimensions[1],
-        1
+        imageDimensions[2]
       );
+      program.setUniformi('sliceAxis', sliceAxis);
 
       program.setUniformMatrix('vWCtoIDX', worldToIndex);
       const labelOutlineKeyMats = model.openGLCamera.getKeyMatrices(ren);