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:

https://github.com/InsightSoftwareConsortium/ITK-Wasm/blob/2bbb8bbc94aa8deebeeb2c4d8988aaa939f945aa/examples/vite/vite.config.js#L10-L24

[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! :sparkles:

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

https://github.com/InsightSoftwareConsortium/ITK-Wasm/pull/1201

Then build a native debug binary from:

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

and investigate in gdb or another debugger.