Outdated Vite example

[aghouas]

I am trying to setup vite @itk-wasm/mesh-io to load and render vtk meshes in vtk.js. I was following this guide: https://wasm.itk.org/en/latest/typescript/distribution/vite.html. However the example seems a bit outdated. Could you provide an updated vite example?

The specific issue I am seeing in vite:

ITK-Wasm/examples/vite/vite.config.js

Lines 10 to 24 in 2bbb8bb

	viteStaticCopy({
	targets: [
	{ src: 'node_modules/itk-wasm/dist/web-workers/*', dest: 'dist/itk/web-workers' },
	{
	src: 'node_modules/itk-image-io/*',
	dest: 'dist/itk/image-io',
	},
	{
	src: 'node_modules/itk-mesh-io/*',
	dest: 'dist/itk/mesh-io',
	rename: 'mesh-io'
	}
	],
	})
	],

[thewtex]

Hi @aghouas ,

We use vite in the tests for this package, which can be used as a reference:

https://github.com/InsightSoftwareConsortium/ITK-Wasm/blob/main/packages/mesh-io/typescript/vite.config.js

[thewtex]

Also:

https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_C.7.6.html#sect_C.7.6.1.1.1

These two configurations will vendor the assets in a vite build.

With no extra configuration, the assets are fetched from the jsDelivr CDN by default.

[aghouas]

Thanks @thewtex !

I managed to get @itk-wasm/mesh-io to load and run properly.

Now I am faced with another issues.

At a high-level this is how I am trying to load and render a mesh stored in a .vtk file:

1. Load .vtk file from a remote source using fetch. ✅
2. Read file as an ITK Mesh using the readMesh function provided by@itk-wasm/mesh-io ✅
3. Convert Mesh to an itk PolyData object using the meshToPolyData function from @itk-wasm/mesh-to-poly-data. ❌
4. Convert itk PolyData to vtk Poly data using convertItkToVtkPolyData from @kitware/vtk.js/Common/DataModel/ITKHelper
5. Render mesh using vtk.js

When I check the console, this is all I see:

I know the error occurs in meshToPolyData, but I don know why.

Have you seen this error before or do you have any tips on how to debug?

For reference, here is the react code:

import { useRef, useEffect } from "react";

import "@kitware/vtk.js/Rendering/Profiles/Geometry";

import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";

import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import type vtkRenderWindow from "@kitware/vtk.js/Rendering/Core/RenderWindow";
import type vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
import vtkITKHelper from "@kitware/vtk.js/Common/DataModel/ITKHelper";
import { readMesh } from "@itk-wasm/mesh-io";
import { meshToPolyData } from "@itk-wasm/mesh-to-poly-data";

interface VtkJsContext {
  fullScreenRenderer: vtkFullScreenRenderWindow;
  renderWindow: vtkRenderWindow;
  renderer: vtkRenderer;
  actor?: vtkActor;
  mapper?: vtkMapper;
}
const fileName = "brain.vtk";
export function VtkViewer() {
  const vtkContainerRef = useRef<HTMLDivElement | null>(null);
  const context = useRef<VtkJsContext | null>(null);

  useEffect(() => {
    if (!context.current) {
      const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
        container: vtkContainerRef.current ?? undefined,
      });

      const renderer = fullScreenRenderer.getRenderer();
      const renderWindow = fullScreenRenderer.getRenderWindow();

      renderer.resetCamera();

      context.current = {
        fullScreenRenderer,
        renderWindow,
        renderer,
      };
    }

    return () => {
      if (context.current) {
        const { fullScreenRenderer, actor, mapper } = context.current;
        actor?.delete();
        mapper?.delete();
        // coneSource.delete();
        fullScreenRenderer.delete();
        context.current = null;
      }
    };
  }, [vtkContainerRef]);

  useEffect(() => {
    async function renderMesh(context: VtkJsContext) {
      const { renderer, renderWindow } = context;
      const vtkFile = await fetch(fileName)
        .then((resp) => {
          return resp.blob();
        })
        .then((blob) => {
          return new File([blob], fileName);
        });

      console.log("file", vtkFile);
      const { mesh, webWorker } = await readMesh(vtkFile);

      console.log("Mesh", mesh);
      const { polyData: itkPolyData } = await meshToPolyData(mesh, {
        webWorker: webWorker,
      });

      webWorker.terminate();

      console.log("Poly Data", itkPolyData);
      const polyData = vtkITKHelper.convertItkToVtkPolyData(itkPolyData);

      const mapper = vtkMapper.newInstance();
      mapper.setInputData(polyData);
      const actor = vtkActor.newInstance();
      actor.setMapper(mapper);

      renderer.addActor(actor);

      renderer.resetCamera();
      renderWindow.render();
    }

    if (context.current) {
      renderMesh(context.current);
    }
  }, [context]);

  return (
    <div>
      <div ref={vtkContainerRef} />
    </div>
  );
}

export default VtkViewer;

[thewtex]

Hello @aghouas ,

Great work! ✨

To investigate the source of the error, one option is to create a native Debug build per:

#1201

Then build a native debug binary from:

https://github.com/InsightSoftwareConsortium/ITKMeshToPolyData/tree/master/wasm

and investigate in gdb or another debugger.

[sigmama]

Hi, I've also encountered the same issue.
In my case,

• stl files would work
• obj files will throw below error:
  
• vtk/vtp files will throw below error:
  

All those files are converted with Paraview.

[thewtex]

Hi @sigmama

A patch to address the third is here: InsightSoftwareConsortium/ITKMeshToPolyData#71

[sigmama]

Hi @thewtex, actually I've a little bit confused by the examples typically for vite. With the latest change, how would I config the itkConfig.js or use other approaches to make my app to get the worker files locally instead of CDN? I've checked both the document site and the vite example in the code base and seems that both are outdated.

Update:
OK, by checking the browser app example source code, setPipelinesBaseUrl resolves the CDN issue when I serve the pipeline files with nginx.