feat(XR): Update to WebXR functionality in OpenGL RenderWindow

Author: tbirdso

Examples/Applications/SkyboxViewer/index.js

@@ -41,7 +41,7 @@ let autoInit = true;
 const cameraFocalPoint = userParams.direction || [0, 0, -1];
 const cameraViewUp = userParams.up || [0, 1, 0];
 const cameraViewAngle = userParams.viewAngle || 100;
-const enableVR = !!userParams.vr;
+const enableXR = !!userParams.xr;
 const eyeSpacing = userParams.eye || 0.0;
 const grid = userParams.debug || false;
 const autoIncrementTimer = userParams.timer || 0;
@@ -189,13 +189,7 @@ function createVisualization(container, mapReader) {
     updateSkybox(allPositions[nextIdx]);
   }
 
-  if (enableVR && vtkDeviceOrientationToCamera.isDeviceOrientationSupported()) {
-    // vtkMobileVR.getVRHeadset().then((headset) => {
-    //   console.log('got headset');
-    //   console.log(headset);
-    //   console.log(vtkMobileVR.hardware);
-    // });
-
+  if (enableXR && navigator.xr.isSessionSupported('immersive-vr')) {
     leftRenderer = vtkRenderer.newInstance();
     rightRenderer = vtkRenderer.newInstance();
 
@@ -236,7 +230,7 @@ function createVisualization(container, mapReader) {
     distPass.setCameraCenterX1(-eyeSpacing);
     distPass.setCameraCenterX2(eyeSpacing);
     distPass.setDelegates([vtkForwardPass.newInstance()]);
-    fullScreenRenderer.getAPISpecificRenderWindow().setRenderPasses([distPass]);
+    fullScreenRenderer.getApiSpecificRenderWindow().setRenderPasses([distPass]);
 
     // Hide any controller
     fullScreenRenderer.setControllerVisibility(false);
@@ -278,29 +272,27 @@ function createVisualization(container, mapReader) {
     mainRenderer.addActor(actor);
 
     // add vr option button if supported
-    fullScreenRenderer.getApiSpecificRenderWindow().onHaveVRDisplay(() => {
-      if (
-        fullScreenRenderer.getApiSpecificRenderWindow().getVrDisplay()
-          .capabilities.canPresent
-      ) {
-        const button = document.createElement('button');
-        button.style.position = 'absolute';
-        button.style.left = '10px';
-        button.style.bottom = '10px';
-        button.style.zIndex = 10000;
-        button.textContent = 'Send To VR';
-        document.querySelector('body').appendChild(button);
-        button.addEventListener('click', () => {
-          if (button.textContent === 'Send To VR') {
-            fullScreenRenderer.getApiSpecificRenderWindow().startVR();
-            button.textContent = 'Return From VR';
-          } else {
-            fullScreenRenderer.getApiSpecificRenderWindow().stopVR();
-            button.textContent = 'Send To VR';
-          }
-        });
-      }
-    });
+    if (
+      navigator.xr !== undefined &&
+      navigator.xr.isSessionSupported('immersive-vr')
+    ) {
+      const button = document.createElement('button');
+      button.style.position = 'absolute';
+      button.style.left = '10px';
+      button.style.bottom = '10px';
+      button.style.zIndex = 10000;
+      button.textContent = 'Send To VR';
+      document.querySelector('body').appendChild(button);
+      button.addEventListener('click', () => {
+        if (button.textContent === 'Send To VR') {
+          fullScreenRenderer.getApiSpecificRenderWindow().startXR();
+          button.textContent = 'Return From VR';
+        } else {
+          fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+          button.textContent = 'Send To VR';
+        }
+      });
+    }
   }
 
   renderWindow.render();

Examples/Geometry/VR/index.js

@@ -36,8 +36,7 @@ const renderWindow = fullScreenRenderer.getRenderWindow();
 // this
 // ----------------------------------------------------------------------------
 
-const coneSource = vtkConeSource.newInstance({ height: 100.0, radius: 50.0 });
-// const coneSource = vtkConeSource.newInstance({ height: 1.0, radius: 0.5 });
+const coneSource = vtkConeSource.newInstance({ height: 100.0, radius: 50 });
 const filter = vtkCalculator.newInstance();
 
 filter.setInputConnection(coneSource.getOutputPort());
@@ -67,7 +66,7 @@ mapper.setInputConnection(filter.getOutputPort());
 
 const actor = vtkActor.newInstance();
 actor.setMapper(mapper);
-actor.setPosition(20.0, 0.0, 0.0);
+actor.setPosition(0.0, 0.0, -20.0);
 
 renderer.addActor(actor);
 renderer.resetCamera();
@@ -96,10 +95,10 @@ resolutionChange.addEventListener('input', (e) => {
 
 vrbutton.addEventListener('click', (e) => {
   if (vrbutton.textContent === 'Send To VR') {
-    fullScreenRenderer.getApiSpecificRenderWindow().startVR();
+    fullScreenRenderer.getApiSpecificRenderWindow().startXR();
     vrbutton.textContent = 'Return From VR';
   } else {
-    fullScreenRenderer.getApiSpecificRenderWindow().stopVR();
+    fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
     vrbutton.textContent = 'Send To VR';
   }
 });

Sources/Rendering/Core/RenderWindowInteractor/index.js

@@ -366,7 +366,7 @@ function vtkRenderWindowInteractor(publicAPI, model) {
       return;
     }
     animationRequesters.add(requestor);
-    if (animationRequesters.size === 1) {
+    if (animationRequesters.size === 1 && !model.xrAnimation) {
       model.lastFrameTime = 0.1;
       model.lastFrameStart = Date.now();
       model.animationRequest = requestAnimationFrame(publicAPI.handleAnimation);
@@ -375,7 +375,7 @@ function vtkRenderWindowInteractor(publicAPI, model) {
   };
 
   publicAPI.isAnimating = () =>
-    model.vrAnimation || model.animationRequest !== null;
+    model.xrAnimation || model.animationRequest !== null;
 
   publicAPI.cancelAnimation = (requestor, skipWarning = false) => {
     if (!animationRequesters.has(requestor)) {
@@ -398,17 +398,17 @@ function vtkRenderWindowInteractor(publicAPI, model) {
     }
   };
 
-  publicAPI.switchToVRAnimation = () => {
+  publicAPI.switchToXRAnimation = () => {
     // cancel existing animation if any
     if (model.animationRequest) {
       cancelAnimationFrame(model.animationRequest);
       model.animationRequest = null;
     }
-    model.vrAnimation = true;
+    model.xrAnimation = true;
   };
 
-  publicAPI.returnFromVRAnimation = () => {
-    model.vrAnimation = false;
+  publicAPI.returnFromXRAnimation = () => {
+    model.xrAnimation = false;
     if (animationRequesters.size !== 0) {
       model.FrameTime = -1;
       model.animationRequest = requestAnimationFrame(publicAPI.handleAnimation);
@@ -756,7 +756,7 @@ function vtkRenderWindowInteractor(publicAPI, model) {
   // do not want extra renders as the make the apparent interaction
   // rate slower.
   publicAPI.render = () => {
-    if (model.animationRequest === null && !model.inRender) {
+    if (!publicAPI.isAnimating() && !model.inRender) {
       forceRender();
     }
   };