Hello everyone,
I am using the clipping features of VTK.js to clip the desired view of the volume rendering screen.
It works very well for microscope image data as the image has an origin (0, 0, 0), however the same below code does not work for MRI brain images even though I manually set setOrign to (0, 0, 0). I was wondering why it shows microscope and CT scan datasets but why the viewer does not show the image although it renders MRI brain images, only shows a black screen.
As can be seen here:
However, if I put universal min and max value as shown in example (vtk.js) el.setAttribute('min', ((-sizeX) + img_origin_X)); el.setAttribute('max', img_origin_X); then it shows all types of image but the slider is not in the range of image width and height. However, when I control it by passing the command like ((-sizeX) + img_origin_X) then I can’t visualize brain MRI data. So weird.
And the second problem is when I load data and then press render then the viewer shows the black screen even though I pass the values, it will start to show the image after I slide the clipping plane slider. How to solve this one?
volume_imageData[i].setOrigin(0.0, 0.0, 0.0)
image_origin = volume_imageData[i].getOrigin();
image_center = volume_imageData[i].getCenter();
console.log('image_origin', image_origin);
console.log('image_center', image_center);
img_origin_X = image_origin[0];
img_origin_Y = image_origin[1];
img_origin_Z = image_origin[2];
const extent = volume_imageData[i].getExtent();
const spacing = volume_imageData[i].getSpacing();
const sizeX = extent[1] * spacing[0];
const sizeY = extent[3] * spacing[1];
const sizeZ = extent[5] * spacing[2];
console.log(extent, "extent");
console.log(spacing, "spacing");
console.log(sizeX, "sizeX");
console.log(sizeY, "sizeY");
const clipPlaneX = vtkPlane.newInstance();
const clipPlaneX_inv = vtkPlane.newInstance();
const clipPlaneZ = vtkPlane.newInstance();
const clipPlaneZ_inv = vtkPlane.newInstance();
const clipPlaneY = vtkPlane.newInstance();
const clipPlaneY_inv = vtkPlane.newInstance();
let clipPlane1Position = 0;
let clipPlane2Position = 0;
const clipPlaneNormalX = [1, 0, 0]; // X min
const clipPlaneNormalX_inv = [-1, 0, 0]; // X max
const clipPlaneNormalZ = [0, 0, 1]; // Z min
const clipPlaneNormalZ_inv = [0, 0, -1]; // Z max
const clipPlaneNormalY = [0, 1, 0]; // Y min
const clipPlaneNormalY_inv = [0, -1, 0]; // Y max
// Need to be same for all clipPlane
clipPlane1Position = sizeX/ 4;;
clipPlane2Position = sizeY/ 2;
const clipPlaneOriginX = [clipPlane1Position * clipPlaneNormalX[0], clipPlane1Position * clipPlaneNormalX[1], clipPlane1Position * clipPlaneNormalX[2], ];
const clipPlaneOriginX_inv = [clipPlane1Position * clipPlaneNormalX_inv[0], clipPlane1Position * clipPlaneNormalX_inv[1], clipPlane1Position * clipPlaneNormalX_inv[2], ];
const clipPlaneOriginZ = [clipPlane2Position * clipPlaneNormalZ[0], clipPlane2Position * clipPlaneNormalZ[1], clipPlane2Position * clipPlaneNormalZ[2], ];
const clipPlaneOriginZ_inv = [clipPlane2Position * clipPlaneNormalZ_inv[0], clipPlane2Position * clipPlaneNormalZ_inv[1], clipPlane2Position * clipPlaneNormalZ_inv[2], ];
const clipPlaneOriginY = [clipPlane1Position * clipPlaneNormalY[0], clipPlane1Position * clipPlaneNormalY[1], clipPlane1Position * clipPlaneNormalY[2], ];
const clipPlaneOriginY_inv = [clipPlane1Position * clipPlaneNormalY_inv[0],clipPlane1Position * clipPlaneNormalY_inv[1],clipPlane1Position * clipPlaneNormalY_inv[2], ];
console.log(clipPlaneOriginX, "clipPlaneOriginX");
console.log(clipPlaneOriginX_inv, "clipPlaneOriginX_inv");
console.log(clipPlaneOriginY, "clipPlaneOriginY");
console.log(clipPlaneOriginY_inv, "clipPlaneOriginY_inv");
console.log(clipPlaneOriginZ, "clipPlaneOriginZ");
console.log(clipPlaneOriginZ_inv, "clipPlaneOriginZ_inv");
clipPlaneX.setNormal(clipPlaneNormalX);
clipPlaneX.setOrigin(clipPlaneOriginX);
clipPlaneX_inv.setNormal(clipPlaneNormalX_inv);
clipPlaneX_inv.setOrigin(clipPlaneOriginX_inv);
clipPlaneY.setNormal(clipPlaneNormalY);
clipPlaneY.setOrigin(clipPlaneOriginY);
clipPlaneY_inv.setNormal(clipPlaneNormalY_inv);
clipPlaneY_inv.setOrigin(clipPlaneOriginY_inv);
clipPlaneZ.setNormal(clipPlaneNormalZ);
clipPlaneZ.setOrigin(clipPlaneOriginZ);
clipPlaneZ_inv.setNormal(clipPlaneNormalZ_inv);
clipPlaneZ_inv.setOrigin(clipPlaneOriginZ_inv);
volumeMapper.setInputData(volume_imageData[i]);
volumeMapper.addClippingPlane(clipPlaneX);
volumeMapper.addClippingPlane(clipPlaneX_inv);
volumeMapper.addClippingPlane(clipPlaneY);
volumeMapper.addClippingPlane(clipPlaneY_inv);
volumeMapper.addClippingPlane(clipPlaneZ);
volumeMapper.addClippingPlane(clipPlaneZ_inv);
// volumeMapper.setSampleDistance(0.4);
volumeMapper.setMaximumSamplesPerRay(true);
volumeMapper.setAutoAdjustSampleDistances(true);
let el = document.querySelector('.planePositionX');
el.setAttribute('min', ((-sizeX) + img_origin_X));
el.setAttribute('max', img_origin_X);
el.setAttribute('value', ((-sizeX) + img_origin_X));
el = document.querySelector('.planePositionX_inv');
el.setAttribute('min', img_origin_X);
el.setAttribute('max', (sizeX + img_origin_X));
el.setAttribute('value', img_origin_X);
el = document.querySelector('.planePositionY');
el.setAttribute('min', ((-sizeY) + img_origin_Y));
el.setAttribute('max', img_origin_Y);
el.setAttribute('value', ((-sizeY) + img_origin_Y));
el = document.querySelector('.planePositionY_inv');
el.setAttribute('min', img_origin_Y);
el.setAttribute('max', (sizeY + img_origin_Y));
el.setAttribute('value', img_origin_Y);
el = document.querySelector('.planePositionZ');
el.setAttribute('min', ((-sizeZ) + img_origin_Z));
el.setAttribute('max', img_origin_Z);
el.setAttribute('value', ((-sizeZ) + img_origin_Z));
el = document.querySelector('.planePositionZ_inv');
el.setAttribute('min', img_origin_Z);
el.setAttribute('max', (sizeZ + img_origin_Z));
el.setAttribute('value', img_origin_Z);
document.querySelector('.planePositionX').addEventListener('input', (e) => {
clipPlane1PositionX = Number(e.target.value);
console.log(clipPlane1PositionX)
const clipPlaneOriginX = [clipPlane1PositionX * clipPlaneNormalX[0], clipPlane1PositionX * clipPlaneNormalX[1], clipPlane1PositionX * clipPlaneNormalX[2], ];
clipPlaneX.setOrigin(clipPlaneOriginX);
renderWindow.render();
});
document.querySelector('.planePositionX_inv').addEventListener('input', (e) => {
clipPlane1PositionX_inv = Number(e.target.value);
console.log(clipPlane1PositionX_inv)
const clipPlaneOriginX_inv = [clipPlane1PositionX_inv * clipPlaneNormalX_inv[0], clipPlane1PositionX_inv * clipPlaneNormalX_inv[1], clipPlane1PositionX_inv * clipPlaneNormalX_inv[2], ];
clipPlaneX_inv.setOrigin(clipPlaneOriginX_inv);
renderWindow.render();
});
document.querySelector('.planePositionY').addEventListener('input', (e) => {
clipPlane1PositionY = Number(e.target.value);
console.log(clipPlane1PositionY)
const clipPlaneOriginY = [clipPlane1PositionY * clipPlaneNormalY[0], clipPlane1PositionY * clipPlaneNormalY[1], clipPlane1PositionY * clipPlaneNormalY[2], ];
clipPlaneY.setOrigin(clipPlaneOriginY);
renderWindow.render();
});
document.querySelector('.planePositionY_inv').addEventListener('input', (e) => {
clipPlane1PositionY_inv = Number(e.target.value);
console.log(clipPlane1PositionY_inv)
const clipPlaneOriginY_inv = [clipPlane1PositionY_inv * clipPlaneNormalY_inv[0],clipPlane1PositionY_inv * clipPlaneNormalY_inv[1],clipPlane1PositionY_inv * clipPlaneNormalY_inv[2], ];
clipPlaneY_inv.setOrigin(clipPlaneOriginY_inv);
renderWindow.render();
});
document.querySelector('.planePositionZ').addEventListener('input', (e) => {
clipPlane1PositionZ = Number(e.target.value);
console.log(clipPlane1PositionZ)
const clipPlaneOriginZ = [clipPlane1PositionZ * clipPlaneNormalZ[0], clipPlane1PositionZ * clipPlaneNormalZ[1], clipPlane1PositionZ * clipPlaneNormalZ[2], ];
clipPlaneZ.setOrigin(clipPlaneOriginZ);
renderWindow.render();
});
document.querySelector('.planePositionZ_inv').addEventListener('input', (e) => {
clipPlane1PositionZ_inv = Number(e.target.value);
console.log(clipPlane1PositionZ_inv)
const clipPlaneOriginZ_inv = [clipPlane1PositionZ_inv * clipPlaneNormalZ_inv[0], clipPlane1PositionZ_inv * clipPlaneNormalZ_inv[1], clipPlane1PositionZ_inv * clipPlaneNormalZ_inv[2], ];
clipPlaneZ_inv.setOrigin(clipPlaneOriginZ_inv);
renderWindow.render();
});
Any suggestion?