Open aghouas opened 4 weeks ago
Hi @aghouas ,
We use vite in the tests for this package, which can be used as a reference:
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.
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:
fetch
. ✅Mesh
using the readMesh
function provided by@itk-wasm/mesh-io
✅PolyData
object using the meshToPolyData
function from @itk-wasm/mesh-to-poly-data
. ❌convertItkToVtkPolyData
from @kitware/vtk.js/Common/DataModel/ITKHelper
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;
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.
I am trying to setup vite
@itk-wasm/mesh-io
to load and render vtk meshes invtk.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