Hello all,
I have used the filter on the dicom image like the code below
import { useRef, useEffect } from 'react';
import './viewport.css';
// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import '@kitware/vtk.js/Rendering/Profiles/All';
// Force DataAccessHelper to have access to various data source
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';
import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
import vtkHttpDataSetReader from '@kitware/vtk.js/IO/Core/HttpDataSetReader';
import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
// import vtkInteractorStyleTrackballCamera from '@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera';
// import vtkInteractorStyleImage from '@kitware/vtk.js/Interaction/Style/InteractorStyleImage';
import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
import vtkConvolution2DPass from '@kitware/vtk.js/Rendering/OpenGL/Convolution2DPass';
import vtkForwardPass from '@kitware/vtk.js/Rendering/OpenGL/ForwardPass';
import vtkImageSliceFilter from '@kitware/vtk.js/Filters/General/ImageSliceFilter';
function Viewport() {
const vtkContainerRef = useRef(null);
const context = useRef(null);
const getInteractorStyle = () => {
// const interactorStyle = vtkInteractorStyleTrackballCamera.newInstance();
// const interactorStyle = vtkInteractorStyleImage.newInstance();
const interactorStyle = vtkInteractorStyleManipulator.newInstance();
interactorStyle.removeAllMouseManipulators();
return interactorStyle;
}
function getConvolutionPass(kernelDimension, kernel, delegates = null) {
const convolutionPass = vtkConvolution2DPass.newInstance();
if (delegates !== null) {
convolutionPass.setDelegates(delegates);
}
convolutionPass.setKernelDimension(kernelDimension);
convolutionPass.setKernel(kernel);
return convolutionPass;
}
function getGaussianBlurPass(delegates = null) {
return getConvolutionPass(
3,
[
1, 2, 1,
2, 4, 2,
1, 2, 1
],
delegates
);
}
function getSharpenPass(delegates = null) {
return getConvolutionPass(
3,
[
0, -1, 0,
-1, 5, -1,
0, -1, 0
],
delegates
);
}
function getEdgeDetectPass(delegates = null) {
return getConvolutionPass(
3,
[
-1, -1, -1,
-1, 8, -1,
-1, -1, -1
],
delegates
);
}
function getUnsharpMaskPass(delegates = null) {
return getConvolutionPass(
5,
[
-1, -4, -6, -4, -1,
-4, -16, -24, -16, -4,
-6, -24, 512 - 36, -24, -6,
-4, -16, -24, -16, -4,
-1, -4, -6, -4, -1
],
delegates
);
}
const filter = (imageData) => {
const imageData2 = vtkImageData.newInstance();
imageData2.setDimensions(imageData.getDimensions());
imageData2.setSpacing(imageData.getSpacing());
imageData2.setDirection(imageData.getDirection());
imageData2.setOrigin(imageData.getOrigin());
const dataArray = imageData.getPointData().getScalars();
const data = dataArray.getData();
const data2 = new Uint8Array(data.byteLength);
let renderPass = vtkForwardPass.newInstance();
renderPass = getGaussianBlurPass([renderPass]); // vtkConvolution2DPass
// console.log(renderPass);
// const dataArray2 = vtkDataArray.newInstance({
// name: 'Pixels',
// numberOfComponents: 1,
// values: data2
// })
// imageData2.getPointData().setScalars(dataArray2);
return imageData2;
}
useEffect(() => {
if (!context.current) {
const genericRenderWindow = vtkGenericRenderWindow.newInstance({
background: [0, 0, 0],
});
genericRenderWindow.setContainer(vtkContainerRef.current);
genericRenderWindow.resize();
// Pipeline
const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
const imageMapper = vtkImageMapper.newInstance();
const imageActor = vtkImageSlice.newInstance();
const renderer = genericRenderWindow.getRenderer();
const renderWindow = genericRenderWindow.getRenderWindow();
const interactorStyle = getInteractorStyle();
// Setup camera
const camera = renderer.getActiveCamera();
camera.setParallelProjection(true);
// Setup render window
renderWindow.addRenderer(renderer);
renderWindow.getInteractor().setInteractorStyle(interactorStyle);
// Loading data
const url = 'https://kitware.github.io/vtk-js/data/volume/LIDC2.vti'
reader.setUrl(url, { loadData: true }).then(() => {
const data = reader.getOutputData(); // vtkImageData
// const imageData = filter(data);
imageMapper.setInputData(data);
imageMapper.setKSlice(30);
imageActor.setMapper(imageMapper);
renderer.addActor(imageActor);
renderer.resetCamera();
renderer.resetCameraClippingRange();
let renderPass = vtkForwardPass.newInstance();
renderPass = getGaussianBlurPass([renderPass]); // vtkConvolution2DPass
renderWindow.getViews()[0].setRenderPasses([renderPass]);
renderWindow.render();
})
context.current = {
genericRenderWindow,
renderer,
reader,
imageActor,
imageMapper
};
}
// Cleanup funtion
return () => {
if (context.current) {
const {
genericRenderWindow,
reader,
imageActor,
imageMapper
} = context.current;
imageActor.delete();
imageMapper.delete();
reader.delete();
genericRenderWindow.delete();
context.current = null;
}
};
}, [vtkContainerRef]);
return (
<div className='root'>
<div className='view1'>
<div className='viewport' ref={vtkContainerRef} />
</div>
</div>
);
}
export default Viewport;
Currently I want to use the filter function as in the code above to filter images with input vtkImageData and desired output vtkImageData. I want to ask is there any way to do it?