Refactor WebXR Rendering to vtkWebXRRenderWindowHelper

Examples/Applications/GeometryViewer/index.js

@@ -14,11 +14,12 @@ import vtkScalarBarActor from '@kitware/vtk.js/Rendering/Core/ScalarBarActor';
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
 import vtkXMLPolyDataReader from '@kitware/vtk.js/IO/XML/XMLPolyDataReader';
 import vtkFPSMonitor from '@kitware/vtk.js/Interaction/UI/FPSMonitor';
-import { XrSessionTypes } from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow/Constants';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -36,6 +37,7 @@ let autoInit = true;
 let background = [0, 0, 0];
 let fullScreenRenderWindow;
 let renderWindow;
+let xrRenderWindowHelper;
 let renderer;
 let scalarBarActor;
 
@@ -162,6 +164,9 @@ function createViewer(container) {
   });
   renderer = fullScreenRenderWindow.getRenderer();
   renderWindow = fullScreenRenderWindow.getRenderWindow();
+  xrRenderWindowHelper = vtkWebXRRenderWindowHelper.newInstance({
+    renderWindow: fullScreenRenderWindow.getApiSpecificRenderWindow(),
+  });
   renderWindow.getInteractor().setDesiredUpdateRate(15);
 
   container.appendChild(rootControllerContainer);
@@ -252,7 +257,7 @@ function createPipeline(fileName, fileContents) {
 
   if (
     navigator.xr !== undefined &&
-    fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported() &&
+    xrRenderWindowHelper.getXrSupported() &&
     requestedXrSessionType !== null
   ) {
     controlContainer.appendChild(immersionSelector);
@@ -431,17 +436,15 @@ function createPipeline(fileName, fileContents) {
 
   function toggleXR() {
     if (immersionSelector.textContent.startsWith('Start')) {
-      fullScreenRenderWindow
-        .getApiSpecificRenderWindow()
-        .startXR(requestedXrSessionType);
+      xrRenderWindowHelper.startXR(requestedXrSessionType);
       immersionSelector.textContent = [
         XrSessionTypes.HmdAR,
         XrSessionTypes.MobileAR,
       ].includes(requestedXrSessionType)
         ? 'Exit AR'
         : 'Exit VR';
     } else {
-      fullScreenRenderWindow.getApiSpecificRenderWindow().stopXR();
+      xrRenderWindowHelper.stopXR();
       immersionSelector.textContent = [
         XrSessionTypes.HmdAR,
         XrSessionTypes.MobileAR,

Examples/Applications/SkyboxViewer/index.js

@@ -10,10 +10,11 @@ import HttpDataAccessHelper from '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpD
 import macro from '@kitware/vtk.js/macros';
 import vtkDeviceOrientationToCamera from '@kitware/vtk.js/Interaction/Misc/DeviceOrientationToCamera';
 import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
 import vtkSkybox from '@kitware/vtk.js/Rendering/Core/Skybox';
 import vtkSkyboxReader from '@kitware/vtk.js/IO/Misc/SkyboxReader';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
-import { XrSessionTypes } from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow/Constants';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -157,6 +158,9 @@ function createVisualization(container, mapReader) {
     containerStyle: { height: '100%', width: '100%', position: 'absolute' },
   });
   const renderWindow = fullScreenRenderer.getRenderWindow();
+  const xrRenderWindowHelper = vtkWebXRRenderWindowHelper.newInstance({
+    renderWindow: fullScreenRenderer.getApiSpecificRenderWindow(),
+  });
   const mainRenderer = fullScreenRenderer.getRenderer();
   const interactor = fullScreenRenderer.getInteractor();
   const actor = vtkSkybox.newInstance();
@@ -202,6 +206,7 @@ function createVisualization(container, mapReader) {
   // add vr option button if supported
   if (
     navigator.xr !== undefined &&
+    xrRenderWindowHelper.getXrSupported() &&
     navigator.xr.isSessionSupported('immersive-vr')
   ) {
     const button = document.createElement('button');
@@ -213,12 +218,10 @@ function createVisualization(container, mapReader) {
     document.querySelector('body').appendChild(button);
     button.addEventListener('click', () => {
       if (button.textContent === 'Send To VR') {
-        fullScreenRenderer
-          .getApiSpecificRenderWindow()
-          .startXR(XrSessionTypes.HmdVR);
+        xrRenderWindowHelper.startXR(XrSessionTypes.HmdVR);
         button.textContent = 'Return From VR';
       } else {
-        fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+        xrRenderWindowHelper.stopXR();
         button.textContent = 'Send To VR';
       }
     });

Examples/Geometry/AR/index.js

@@ -7,11 +7,12 @@ import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
 import vtkCalculator from '@kitware/vtk.js/Filters/General/Calculator';
 import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
 import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
 import { AttributeTypes } from '@kitware/vtk.js/Common/DataModel/DataSetAttributes/Constants';
 import { FieldDataTypes } from '@kitware/vtk.js/Common/DataModel/DataSet/Constants';
-import { XrSessionTypes } from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow/Constants';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -36,6 +37,9 @@ const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
 });
 const renderer = fullScreenRenderer.getRenderer();
 const renderWindow = fullScreenRenderer.getRenderWindow();
+const xrRenderWindowHelper = vtkWebXRRenderWindowHelper.newInstance({
+  renderWindow: fullScreenRenderer.getApiSpecificRenderWindow(),
+});
 
 // ----------------------------------------------------------------------------
 // Example code
@@ -87,18 +91,14 @@ renderWindow.render();
 
 fullScreenRenderer.addController(controlPanel);
 const arbutton = document.querySelector('.arbutton');
-arbutton.disabled = !fullScreenRenderer
-  .getApiSpecificRenderWindow()
-  .getXrSupported();
+arbutton.disabled = !xrRenderWindowHelper.getXrSupported();
 
 arbutton.addEventListener('click', (e) => {
   if (arbutton.textContent === 'Start AR') {
-    fullScreenRenderer
-      .getApiSpecificRenderWindow()
-      .startXR(requestedXrSessionType);
+    xrRenderWindowHelper.startXR(requestedXrSessionType);
     arbutton.textContent = 'Exit AR';
   } else {
-    fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+    xrRenderWindowHelper.stopXR();
     arbutton.textContent = 'Start AR';
   }
 });

Examples/Geometry/LookingGlass/index.js

@@ -10,10 +10,11 @@ import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
 import vtkCalculator from '@kitware/vtk.js/Filters/General/Calculator';
 import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
 import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
 import { AttributeTypes } from '@kitware/vtk.js/Common/DataModel/DataSetAttributes/Constants';
 import { FieldDataTypes } from '@kitware/vtk.js/Common/DataModel/DataSet/Constants';
-import { XrSessionTypes } from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow/Constants';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -42,6 +43,9 @@ const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
 });
 const renderer = fullScreenRenderer.getRenderer();
 const renderWindow = fullScreenRenderer.getRenderWindow();
+const xrRenderWindowHelper = vtkWebXRRenderWindowHelper.newInstance({
+  renderWindow: fullScreenRenderer.getApiSpecificRenderWindow(),
+});
 
 // ----------------------------------------------------------------------------
 // Example code
@@ -110,12 +114,10 @@ resolutionChange.addEventListener('input', (e) => {
 
 vrbutton.addEventListener('click', (e) => {
   if (vrbutton.textContent === 'Send To Looking Glass') {
-    fullScreenRenderer
-      .getApiSpecificRenderWindow()
-      .startXR(XrSessionTypes.LookingGlassVR);
+    xrRenderWindowHelper.startXR(XrSessionTypes.LookingGlassVR);
     vrbutton.textContent = 'Return From Looking Glass';
   } else {
-    fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+    xrRenderWindowHelper.stopXR();
     vrbutton.textContent = 'Send To Looking Glass';
   }
 });

Examples/Geometry/VR/index.js

@@ -10,10 +10,11 @@ import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
 import vtkCalculator from '@kitware/vtk.js/Filters/General/Calculator';
 import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
 import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
 import { AttributeTypes } from '@kitware/vtk.js/Common/DataModel/DataSetAttributes/Constants';
 import { FieldDataTypes } from '@kitware/vtk.js/Common/DataModel/DataSet/Constants';
-import { XrSessionTypes } from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow/Constants';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -46,6 +47,9 @@ const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
 });
 const renderer = fullScreenRenderer.getRenderer();
 const renderWindow = fullScreenRenderer.getRenderWindow();
+const XRHelper = vtkWebXRRenderWindowHelper.newInstance({
+  renderWindow: fullScreenRenderer.getApiSpecificRenderWindow(),
+});
 
 // ----------------------------------------------------------------------------
 // Example code
@@ -114,12 +118,10 @@ resolutionChange.addEventListener('input', (e) => {
 
 vrbutton.addEventListener('click', (e) => {
   if (vrbutton.textContent === 'Send To VR') {
-    fullScreenRenderer
-      .getApiSpecificRenderWindow()
-      .startXR(XrSessionTypes.HmdVR);
+    XRHelper.startXR(XrSessionTypes.HmdVR);
     vrbutton.textContent = 'Return From VR';
   } else {
-    fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+    XRHelper.stopXR();
     vrbutton.textContent = 'Send To VR';
   }
 });

Examples/Volume/WebXRChestCTBlendedCVR/index.js

@@ -10,6 +10,7 @@ import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';
 
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
 import HttpDataAccessHelper from '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
@@ -18,7 +19,7 @@ import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
 import vtkXMLImageDataReader from '@kitware/vtk.js/IO/XML/XMLImageDataReader';
 import vtkImageReslice from '@kitware/vtk.js/Imaging/Core/ImageReslice';
 import vtkMath from '@kitware/vtk.js/Common/Core/Math';
-import { XrSessionTypes } from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow/Constants';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';
 
 import './WebXRVolume.module.css';
 
@@ -32,6 +33,9 @@ const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
 });
 const renderer = fullScreenRenderer.getRenderer();
 const renderWindow = fullScreenRenderer.getRenderWindow();
+const xrRenderWindowHelper = vtkWebXRRenderWindowHelper.newInstance({
+  renderWindow: fullScreenRenderer.getApiSpecificRenderWindow(),
+});
 
 // ----------------------------------------------------------------------------
 // Set up pipeline objects
@@ -118,10 +122,7 @@ HttpDataAccessHelper.fetchBinary(fileURL).then((fileContents) => {
   let enterText = 'XR not available!';
   const exitText = 'Exit XR';
   xrButton.textContent = enterText;
-  if (
-    navigator.xr !== undefined &&
-    fullScreenRenderer.getApiSpecificRenderWindow().getXrSupported()
-  ) {
+  if (navigator.xr !== undefined && xrRenderWindowHelper.getXrSupported()) {
     navigator.xr.isSessionSupported('immersive-ar').then((arSupported) => {
       if (arSupported) {
         xrSessionType = XrSessionTypes.MobileAR;
@@ -140,10 +141,10 @@ HttpDataAccessHelper.fetchBinary(fileURL).then((fileContents) => {
   }
   xrButton.addEventListener('click', () => {
     if (xrButton.textContent === enterText) {
-      fullScreenRenderer.getApiSpecificRenderWindow().startXR(xrSessionType);
+      xrRenderWindowHelper.startXR(xrSessionType);
       xrButton.textContent = exitText;
     } else {
-      fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+      xrRenderWindowHelper.stopXR();
       xrButton.textContent = enterText;
     }
   });

Examples/Volume/WebXRHeadFullVolumeCVR/index.js

@@ -10,6 +10,7 @@ import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';
 
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
 import HttpDataAccessHelper from '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
@@ -18,7 +19,7 @@ import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
 import vtkXMLImageDataReader from '@kitware/vtk.js/IO/XML/XMLImageDataReader';
 import vtkImageReslice from '@kitware/vtk.js/Imaging/Core/ImageReslice';
 import vtkMath from '@kitware/vtk.js/Common/Core/Math';
-import { XrSessionTypes } from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow/Constants';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';
 
 import './WebXRVolume.module.css';
 
@@ -32,6 +33,9 @@ const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
 });
 const renderer = fullScreenRenderer.getRenderer();
 const renderWindow = fullScreenRenderer.getRenderWindow();
+const xrRenderWindowHelper = vtkWebXRRenderWindowHelper.newInstance({
+  renderWindow: fullScreenRenderer.getApiSpecificRenderWindow(),
+});
 
 // ----------------------------------------------------------------------------
 // Set up pipeline objects
@@ -149,10 +153,7 @@ HttpDataAccessHelper.fetchBinary(fileURL).then((fileContents) => {
   let enterText = 'XR not available!';
   const exitText = 'Exit XR';
   xrButton.textContent = enterText;
-  if (
-    navigator.xr !== undefined &&
-    fullScreenRenderer.getApiSpecificRenderWindow().getXrSupported()
-  ) {
+  if (navigator.xr !== undefined && xrRenderWindowHelper.getXrSupported()) {
     enterText =
       requestedXrSessionType === XrSessionTypes.MobileAR
         ? 'Start AR'
@@ -161,12 +162,10 @@ HttpDataAccessHelper.fetchBinary(fileURL).then((fileContents) => {
   }
   xrButton.addEventListener('click', () => {
     if (xrButton.textContent === enterText) {
-      fullScreenRenderer
-        .getApiSpecificRenderWindow()
-        .startXR(requestedXrSessionType);
+      xrRenderWindowHelper.startXR(requestedXrSessionType);
       xrButton.textContent = exitText;
     } else {
-      fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+      xrRenderWindowHelper.stopXR();
       xrButton.textContent = enterText;
     }
   });

Examples/Volume/WebXRHeadGradientCVR/index.js

@@ -10,6 +10,7 @@ import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';
 
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkWebXRRenderWindowHelper from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper';
 import HttpDataAccessHelper from '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
@@ -18,7 +19,7 @@ import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
 import vtkXMLImageDataReader from '@kitware/vtk.js/IO/XML/XMLImageDataReader';
 import vtkImageReslice from '@kitware/vtk.js/Imaging/Core/ImageReslice';
 import vtkMath from '@kitware/vtk.js/Common/Core/Math';
-import { XrSessionTypes } from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow/Constants';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/WebXR/RenderWindowHelper/Constants';
 
 import './WebXRVolume.module.css';
 
@@ -32,6 +33,9 @@ const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
 });
 const renderer = fullScreenRenderer.getRenderer();
 const renderWindow = fullScreenRenderer.getRenderWindow();
+const xrRenderWindowHelper = vtkWebXRRenderWindowHelper.newInstance({
+  renderWindow: fullScreenRenderer.getApiSpecificRenderWindow(),
+});
 
 // ----------------------------------------------------------------------------
 // Set up pipeline objects
@@ -146,10 +150,7 @@ HttpDataAccessHelper.fetchBinary(fileURL).then((fileContents) => {
   let enterText = 'XR not available!';
   const exitText = 'Exit XR';
   xrButton.textContent = enterText;
-  if (
-    navigator.xr !== undefined &&
-    fullScreenRenderer.getApiSpecificRenderWindow().getXrSupported()
-  ) {
+  if (navigator.xr !== undefined && xrRenderWindowHelper.getXrSupported()) {
     enterText =
       requestedXrSessionType === XrSessionTypes.MobileAR
         ? 'Start AR'
@@ -158,12 +159,10 @@ HttpDataAccessHelper.fetchBinary(fileURL).then((fileContents) => {
   }
   xrButton.addEventListener('click', () => {
     if (xrButton.textContent === enterText) {
-      fullScreenRenderer
-        .getApiSpecificRenderWindow()
-        .startXR(requestedXrSessionType);
+      xrRenderWindowHelper.startXR(requestedXrSessionType);
       xrButton.textContent = exitText;
     } else {
-      fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+      xrRenderWindowHelper.stopXR();
       xrButton.textContent = enterText;
     }
   });