Render volume feature not working as expected

makinox commented 1 year ago

Subject of the issue

Hello guys, I hope you are having a good day. I'm testing some CT and PT studies, but the colors do not seem to be ok. With the tool WindowLevelTool I realized that the contrast or saturation of the volume were not the problem

I'm sharing two series completely anonymized if you want to test this behavior: https://drive.google.com/file/d/1fkLx2A_yJX-6R8JM-U-1Ubg6M4mMVj6z/view?usp=share_link

My environment

SO: macOS 13.2.1
@cornerstonejs/core: 0.35.1
@cornerstonejs/streaming-image-volume-loader: 0.15.1
@cornerstonejs/tools: 0.52.1
@kitware/vtk.js: 26.9.1

Steps to reproduce

Follow basic volume example: https://www.cornerstonejs.org/docs/tutorials/basic-volume
Change the example study for one of these: https://drive.google.com/file/d/1fkLx2A_yJX-6R8JM-U-1Ubg6M4mMVj6z/view?usp=share_link
Render the volume

Expected behavior

should have similar colors like the cornerstone3d example

Actual behavior

The volume rendered presents wrong colors

https://user-images.githubusercontent.com/24579681/225364405-6c44d135-1bf0-4130-b344-3b535a557161.mov

Please let me know if you need additional information.

Ouwen commented 1 year ago

@sedghi I think this may be related to the cornerstone-wado-image-loader feature, I'm going to put in a fix for this based on our discussion which hopefully solves the above ^

sedghi commented 1 year ago

try the newest cornerstone-wado-image-loader published version

makinox commented 1 year ago

Similar result with:

"@cornerstonejs/core": "0.36.1",
"@cornerstonejs/streaming-image-volume-loader": "0.15.4",
"@cornerstonejs/tools": "0.54.1",
"@kitware/vtk.js": "26.9.4",

Screen Recording 2023-03-21 at 11 37 47 AM

sedghi commented 1 year ago

upgrade the cornerstone-wado-image-loader

makinox commented 1 year ago

Yeah, sorry for not clarifying that one, same result also with:

"cornerstone-wado-image-loader": "4.10.2",

sedghi commented 1 year ago

can you try latest core?

makinox commented 1 year ago

Same result with config:

    "@cornerstonejs/core": "0.36.2",
    "@cornerstonejs/streaming-image-volume-loader": "0.15.5",
    "@cornerstonejs/tools": "0.55.1",
    "@kitware/vtk.js": "26.9.5",
    "cornerstone-wado-image-loader": "4.10.2",

Steps:

Update package.json
Remove node_modules folder
Run installer yarn install

Preview Screen Recording 2023-03-22 at 10 57 33 AM

Maybe could be something wrong in the initialization process, here is the config file I'm using for the example:

import dicomParser from 'dicom-parser';
import * as cornerstone from '@cornerstonejs/core';
import * as cornerstoneTools from '@cornerstonejs/tools';
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';

window.cornerstone = cornerstone;
window.cornerstoneTools = cornerstoneTools;

export const initCornerstoneWADOImageLoader = () => {
  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
  cornerstoneWADOImageLoader.configure({
    useWebWorkers: true,
    decodeConfig: {
      convertFloatPixelDataToInt: false,
    },
  });

  let maxWebWorkers = 1;

  if (navigator.hardwareConcurrency) {
    maxWebWorkers = Math.min(navigator.hardwareConcurrency, 7);
  }

  const config = {
    maxWebWorkers,
    startWebWorkersOnDemand: false,
    taskConfiguration: {
      decodeTask: {
        initializeCodecsOnStartup: false,
        strict: false,
      },
    },
  };

  cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
};

declare global {
  interface Window {
    cornerstone: any;
    cornerstoneTools: any;
  }
}

sedghi commented 1 year ago

It is very strange, does it happen for stackViewport too?

makinox commented 1 year ago

Yes, it does. Testing with many studies, I have a feeling that could be the way the machines create the pixel data information because only a couple of studies have this behavior.

Stackviewport code

    const viewportInput = {
      viewportId: viewportId1,
      element: currentElement as HTMLDivElement,
      type: ViewportType.STACK,
    };

    const engine = new RenderingEngine(RENDER_ENGINE_ID);
    renderingEngine.current = engine;
    engine.enableElement(viewportInput);

    const viewport = engine.getViewport(viewportInput.viewportId);
    if (!('setStack' in viewport)) return;
    viewport.setStack(DEFAULT_IMAGE_IDS, 1);
    viewport.render();