feat: add WebXR helper component

package.json

@@ -19,7 +19,7 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@kitware/vtk.js": "29.4.5",
+    "@kitware/vtk.js": "32.2.0",
     "@vitejs/plugin-vue": "^4.0.0"
   },
   "peerDependencies": {

src/components.js

@@ -13,6 +13,7 @@ import VtkRemoteLocalView from "./core/VtkRemoteLocalView";
 import VtkRemoteView from "./core/VtkRemoteView";
 import VtkSyncView from "./core/VtkSyncView";
 import VtkView from "./core/VtkView";
+import VtkWebXRHelper from "./core/VtkWebXRHelper";
 
 export default {
   VtkAlgorithm,
@@ -31,4 +32,5 @@ export default {
   VtkSyncView,
   VtkLocalView: VtkSyncView,
   VtkView,
+  VtkWebXRHelper,
 };

src/core/VtkView.js

@@ -124,6 +124,7 @@ export default {
       props.interactorEvents,
       { emit, nextTick }
     );
+    view.setCubeAxesVisibility(props.showCubeAxes);
     const { onEnter, onLeave, onKeyUp } = enableResetCamera(view);
     const resizeObserver = new ResizeObserver(() => view.resize());
 
@@ -149,12 +150,19 @@ export default {
       () => props.pickingModes,
       () => (view.pickingModes = props.pickingModes)
     );
+    watch(
+      () => props.showCubeAxes,
+      () => view.setCubeAxesVisibility(props.showCubeAxes)
+    );
 
     provide("view", view);
     const { onClick, onMouseMove } = view;
     const resetCamera = () => view.resetCamera();
     const getCamera = () => view.getCamera();
     const setCamera = (v) => view.setCamera(v);
+    const setCubeAxesVisibility = (v) => {
+      props.showCubeAxes = v;
+    };
     return {
       vtkContainer,
       onEnter,
@@ -164,6 +172,7 @@ export default {
       resetCamera,
       getCamera,
       setCamera,
+      setCubeAxesVisibility,
     };
   },
   template: `

src/core/VtkWebXRHelper.js

@@ -0,0 +1,72 @@
+import { inject } from "vue";
+import vtkResourceLoader from "@kitware/vtk.js/IO/Core/ResourceLoader";
+import vtkWebXRRenderWindowHelper from "@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper";
+import vtkInteractorStyleHMDXR from "@kitware/vtk.js/Interaction/Style/InteractorStyleHMDXR";
+
+export default {
+  props: {
+    drawControllersRay: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["enterXR", "exitXR"],
+  setup(props, { attrs, emit }) {
+    // Dynamically load WebXR polyfill from CDN for WebVR and Cardboard API backwards compatibility
+    if (navigator.xr === undefined) {
+      vtkResourceLoader
+        .loadScript(
+          "https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js"
+        )
+        .then(() => {
+          // eslint-disable-next-line no-new, no-undef
+          new WebXRPolyfill();
+        });
+    }
+
+    // WebXR helper from VTK.js
+    const XRHelper = vtkWebXRRenderWindowHelper.newInstance();
+    const view = inject("view");
+
+    const startXR = () => {
+      // Returns if we're using an unsupported view (RemoteView)
+      if (!view || !view.openglRenderWindow) {
+        console.error("WebXR is not supported by VtkRemoteView");
+        return;
+      }
+      XRHelper.setRenderWindow(view.openglRenderWindow);
+      XRHelper.setDrawControllersRay(props.drawControllersRay);
+
+      // Setup interactor style HMDXR
+      attrs.oldInteractorStyle = view.renderWindow
+        .getInteractor()
+        .getInteractorStyle();
+      view.renderWindow
+        .getInteractor()
+        .setInteractorStyle(vtkInteractorStyleHMDXR.newInstance());
+
+      XRHelper.startXR();
+      emit("enterXR");
+    };
+    const stopXR = () => {
+      // Returns if we're using an unsupported view (RemoteView)
+      if (!view || !view.openglRenderWindow) {
+        console.error("WebXR is not supported by VtkRemoteView");
+        return;
+      }
+
+      // Revert interactor style
+      view.renderWindow
+        .getInteractor()
+        .setInteractorStyle(attrs.oldInteractorStyle);
+
+      XRHelper.stopXR();
+      emit("exitXR");
+    };
+
+    return {
+      startXR,
+      stopXR,
+    };
+  },
+};

src/core/localview.js

@@ -561,7 +561,6 @@ export class ClientView {
       .getActors()
       .forEach(({ setVisibility }) => setVisibility(false));
 
-    this.cubeAxes.setCamera(this.activeCamera);
     this.renderer.addActor(this.cubeAxes);
 
     const bbox = vtkBoundingBox.newInstance({ bounds: [0, 0, 0, 0, 0, 0] });
@@ -706,6 +705,15 @@ export class ClientView {
     }
   }
 
+  setCubeAxesVisibility(isVisible) {
+    this.cubeAxes.setVisibility(isVisible);
+    this.cubeAxes
+      .getActors()
+      .forEach(({ setVisibility }) => setVisibility(isVisible));
+    this.cubeAxes.setCamera(isVisible ? this.activeCamera : null); // WebXRHelper compatibility (see PR #9)
+    this.vueCtx.nextTick(this.render);
+  }
+
   updateStyle(settings) {
     assignManipulators(this.style, settings, this.onBoxSelectChange);
   }