fix vtk js renderer example

Krande · Jan 27, 2024 · 8dd9d33 · 8dd9d33
1 parent efb906b
commit 8dd9d33
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 12 deletions.
diff --git a/examples/experiments/vtk_js/package-lock.json b/examples/experiments/vtk_js/package-lock.json
diff --git a/examples/experiments/vtk_js/package.json b/examples/experiments/vtk_js/package.json
@@ -9,8 +9,8 @@
   "dependencies": {
     "@types/react": "^18.0.27",
     "@vitejs/plugin-react": "^4.2.1",
-    "vtk.js": "^29.4.4",
     "archiver": "^6.0.1",
+    "shader-loader": "1.3.1",
     "autoprefixer": "^10.4.17",
     "esbuild-helpers": "^1.0.0",
     "postcss": "^8.4.21",
@@ -21,6 +21,7 @@
     "tailwindcss": "^3.2.6",
     "typescript": "^4.9.5",
     "vite": "^5.0.10",
+    "vtk.js": "^29.4.5",
     "zustand": "^4.4.7"
   },
   "devDependencies": {

diff --git a/examples/experiments/vtk_js/src/app.tsx b/examples/experiments/vtk_js/src/app.tsx
@@ -7,7 +7,9 @@ function App() {
 
     return (
         <div className={"flex flex-col h-full w-full"}>
-            <VTKRenderer/>
+            <div className={"flex-1 border-2 border-black"}>
+                <VTKRenderer/>
+            </div>
         </div>
 
 

diff --git a/examples/experiments/vtk_js/src/components/VTKRenderer.tsx b/examples/experiments/vtk_js/src/components/VTKRenderer.tsx
@@ -1,16 +1,29 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
+
+// Load the rendering pieces we want to use (for both WebGL and WebGPU)
+import 'vtk.js/Sources/Rendering/Profiles/Geometry';
+
 import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
 import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
 import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
-import vtkConeSource from "vtk.js/Sources/Filters/Sources/ConeSource";
+import vtkConeSource from 'vtk.js/Sources/Filters/Sources/ConeSource';
 
 function VTKRenderer() {
+    const vtkContainerRef = useRef<HTMLDivElement | null>(null);
+    const vtkContext = useRef<any | null>(null);
+
     useEffect(() => {
-        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
+        if (!vtkContainerRef.current || vtkContext.current) {
+            return;
+        }
+
+        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
+            container: vtkContainerRef.current,
+            controllerVisibility: true,
+        });
         const renderer = fullScreenRenderer.getRenderer();
         const renderWindow = fullScreenRenderer.getRenderWindow();
 
-        // Create a sphere
         const coneSource = vtkConeSource.newInstance();
         const mapper = vtkMapper.newInstance();
         mapper.setInputConnection(coneSource.getOutputPort());
@@ -21,9 +34,29 @@ function VTKRenderer() {
         renderer.addActor(actor);
         renderer.resetCamera();
         renderWindow.render();
+
+        vtkContext.current = {
+            fullScreenRenderer,
+            renderer,
+            renderWindow,
+            coneSource,
+            actor,
+            mapper,
+        };
+
+        return () => {
+            if (vtkContext.current) {
+                const {fullScreenRenderer, actor, mapper, coneSource} = vtkContext.current;
+                actor.delete();
+                mapper.delete();
+                coneSource.delete();
+                fullScreenRenderer.delete();
+                vtkContext.current = null;
+            }
+        };
     }, []);
 
-    return <div className={"h-screen w-full h-full"} />;
+    return <div ref={vtkContainerRef}/>;
 }
 
-export default VTKRenderer;
+export default VTKRenderer;
diff --git a/examples/experiments/vtk_js/vite.config.js b/examples/experiments/vtk_js/vite.config.js
@@ -17,4 +17,11 @@ export default defineConfig({
         }
     },
     base: './',
+    optimizeDeps: {
+        esbuildOptions: {
+            loader: {
+                ".glsl": "text",
+            },
+        },
+    },
 });