HTML file with itk and vtk to render meshes

Engineering
1

Hello,

I am building an itk vtk web application. I am new to .js. Is there something wrong with my code?

Thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your VTK.js Web Application</title>

    <!-- Include VTK.js and its dependencies from a CDN -->
    <script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
    <script type="text/javascript" src="https://unpkg.com/itk-wasm"></script>
   


<script type="text/javascript">
    async function processDicomFile(filename) {
        try {
            // Load the DICOM image using ITK.js
            const dicomImage = await itk.ImageSeriesReader.ReadDicomImage({
                fetchDICOMFile: filePath => fetch(filePath).then(response => response.arrayBuffer()),
                useITKSnapping: true,
            });

            return dicomImage;
        } catch (error) {
            console.error("Error processing DICOM file:", error);
            return null;
        }
    }

    function convertITKToVTK(itkImage) {
        console.log("Start Parse to VTK");

        // Create a vtkImageData
        const imageData = vtk.Common.DataModel.vtkImageData.newInstance();

        // Set spacing, origin, and extent
        imageData.setSpacing(itkImage.getSpacing());
        imageData.setOrigin(itkImage.getOrigin());
        const size = itkImage.getLargestPossibleRegion().getSize();
        imageData.setExtent(0, size[0] - 1, 0, size[1] - 1, 0, size[2] - 1);

        // Allocate memory for the vtkImageData
        imageData.allocateScalars(vtk.Common.DataModel.vtkDataArray.VtkDataTypes.UNSIGNED_SHORT, 1);

        // Fill the vtkImageData with ITK image data
        const vtkDataArray = imageData.getPointData().getScalars();
        const itkDataArray = itkImage.getBufferAsTypedArray();
        vtkDataArray.setData(itkDataArray);

        const contourValues = [1.0, 2.0, 3.0];

        // Create a renderer and render window
        const renderer = vtk.Rendering.Core.vtkRenderer.newInstance();
        const renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance();

        // Iterate through contour values
        contourValues.forEach((contourValue) => {
            const marchingCubesFilter = vtk.Filters.General.DiscreteMarchingCubes.newInstance({
                contourValue: contourValue,
            });

            marchingCubesFilter.setInputData(imageData);
            marchingCubesFilter.update();

            // Combine the polydata from each iteration
            const combinedPolyData = marchingCubesFilter.getOutputData();

            // Create a mapper and actor for the combined polydata
            const mapper = vtk.Rendering.Core.vtkMapper.newInstance();
            mapper.setInputData(combinedPolyData);

            const actor = vtk.Rendering.Core.vtkActor.newInstance();
            actor.setMapper(mapper);

            // Add actor to the renderer
            renderer.addActor(actor);
        });

        // Set up render window
        renderWindow.addView(renderer);

        // Append render window to the body
        document.body.appendChild(renderWindow.getCanvas());

        // Render the scene
        renderWindow.render();

        console.log("PRISMAMESH - VTK parse ok");
    }

    // Example usage
    const dicomFilename = "/var/www/html/3484681/PHAMTON.dcm";
    processDicomFile(dicomFilename).then(itkImage => {
        if (itkImage) {
            console.log("PRISMAMESH: DICOM file processed successfully!");
            convertITKToVTK(itkImage);
        } else {
            console.error("PRISMAMESH: Error processing DICOM file.");
        }
    });
</script>

</body>
</html>
2

Hello Rafael,

Is the code producing errors?

With a quick look, I notice that the ITK/VTK conversion functions can be used, vtkITKHelper. convertItkToVtkImage,

Hope this helps,
Matt