feat(WebXR): Support rendering to Looking Glass holographic displays

Documentation/content/docs/develop_webxr.md

@@ -59,6 +59,19 @@ vtk.js supports virtual and augmented reality rendering via the [WebXR device AP
 
 </div>
 
+### Holographic Examples
+
+<div class="gallery">
+
+[![Looking Glass Cone Example][LookingGlassCone]](../examples/LookingGlass.html)
+[![GeometryViewer Example][GeometryViewer]](../examples/GeometryViewer.html?xrSessionType=2&fileURL=https://data.kitware.com/api/v1/item/59de9de58d777f31ac641dc5/download)
+[![GeometryViewer Brain Blood Vessels][GeometryViewerBrainBloodVessels]](../examples/GeometryViewer/GeometryViewer.html?xrSessionType=2&fileURL=[https://data.kitware.com/api/v1/file/61f041f14acac99f42c2ff9a/download,https://data.kitware.com/api/v1/file/61f042024acac99f42c2ffa6/download,https://data.kitware.com/api/v1/file/61f042b74acac99f42c30079/download])
+[![GeometryViewer Chest CT][GeometryViewerchestCT]](../examples/GeometryViewer/GeometryViewer.html?xrSessionType=2&fileURL=[https://data.kitware.com/api/v1/file/61f044354acac99f42c30276/download,https://data.kitware.com/api/v1/file/61f0440f4acac99f42c30191/download,https://data.kitware.com/api/v1/file/61f044204acac99f42c30267/download])
+[![XR Volume Example][WebXRVolume]](../examples/WebXRVolume.html?xrSessionType=2)
+[![XR Gradient Example][HeadGradient]](../examples/WebXRHeadGradientCVR.html?xrSessionType=2)
+
+</div>
+
 ### For Developers
 
 Developers without access to XR hardware may find it convenient to install and use the [Mozilla WebXR emulator](https://github.com/MozillaReality/WebXR-emulator-extension) in their browser.
@@ -81,3 +94,4 @@ While WebXR has broad industry support, it is not yet implemented in all browser
 [HeadFullVolume]: ../docs/gallery/HeadFullVolume.png
 [ChestCTHybrid]: ../docs/gallery/ChestCTHybrid.png
 [HeadGradient]: ../docs/gallery/HeadGradient.png
+[LookingGlassCone]: ../docs/gallery/LookingGlassCone.png

Examples/Applications/GeometryViewer/index.js

@@ -18,6 +18,7 @@ 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';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -75,6 +76,44 @@ function preventDefaults(e) {
   e.stopPropagation();
 }
 
+// WebXR
+let requestedXrSessionType =
+  userParams.xrSessionType !== undefined ? userParams.xrSessionType : null;
+if (
+  requestedXrSessionType !== null &&
+  !Object.values(XrSessionTypes).includes(requestedXrSessionType)
+) {
+  console.warn(
+    'Could not parse requested XR session type: ',
+    requestedXrSessionType
+  );
+  requestedXrSessionType = null;
+}
+
+if (requestedXrSessionType === XrSessionTypes.LookingGlassVR) {
+  // Import the Looking Glass WebXR Polyfill override
+  // Assumes that the Looking Glass Bridge native application is already running.
+  // See https://docs.lookingglassfactory.com/developer-tools/webxr
+  import(
+    // eslint-disable-next-line import/no-unresolved, import/extensions
+    /* webpackIgnore: true */ 'https://unpkg.com/@lookingglass/[email protected]/dist/@lookingglass/bundle/webxr.js'
+  ).then((obj) => {
+    // eslint-disable-next-line no-new
+    new obj.LookingGlassWebXRPolyfill();
+  });
+} else if (requestedXrSessionType === null && navigator.xr !== undefined) {
+  // Determine supported session type
+  navigator.xr.isSessionSupported('immersive-ar').then((arSupported) => {
+    if (arSupported) {
+      requestedXrSessionType = XrSessionTypes.MobileAR;
+    } else {
+      navigator.xr.isSessionSupported('immersive-vr').then((vrSupported) => {
+        requestedXrSessionType = vrSupported ? XrSessionTypes.HmdVR : null;
+      });
+    }
+  });
+}
+
 // ----------------------------------------------------------------------------
 // DOM containers for UI control
 // ----------------------------------------------------------------------------
@@ -197,7 +236,10 @@ function createPipeline(fileName, fileContents) {
 
   const immersionSelector = document.createElement('button');
   immersionSelector.setAttribute('class', selectorClass);
-  immersionSelector.innerHTML = 'Start AR';
+  immersionSelector.innerHTML =
+    requestedXrSessionType === XrSessionTypes.MobileAR
+      ? 'Start AR'
+      : 'Start VR';
 
   const controlContainer = document.createElement('div');
   controlContainer.setAttribute('class', style.control);
@@ -210,8 +252,8 @@ function createPipeline(fileName, fileContents) {
 
   if (
     navigator.xr !== undefined &&
-    navigator.xr.isSessionSupported('immersive-ar') &&
-    fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported()
+    fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported() &&
+    requestedXrSessionType !== null
   ) {
     controlContainer.appendChild(immersionSelector);
   }
@@ -387,21 +429,29 @@ function createPipeline(fileName, fileContents) {
   // Immersion handling
   // --------------------------------------------------------------------
 
-  function toggleAR() {
-    const SESSION_IS_AR = true;
-    if (immersionSelector.textContent === 'Start AR') {
+  function toggleXR() {
+    if (requestedXrSessionType === XrSessionTypes.MobileAR) {
       fullScreenRenderWindow.setBackground([...background, 0]);
+    }
+
+    if (immersionSelector.textContent.startsWith('Start')) {
       fullScreenRenderWindow
         .getApiSpecificRenderWindow()
-        .startXR(SESSION_IS_AR);
-      immersionSelector.textContent = 'Exit AR';
+        .startXR(requestedXrSessionType);
+      immersionSelector.textContent =
+        requestedXrSessionType === XrSessionTypes.MobileAR
+          ? 'Exit AR'
+          : 'Exit VR';
     } else {
       fullScreenRenderWindow.setBackground([...background, 255]);
-      fullScreenRenderWindow.getApiSpecificRenderWindow().stopXR(SESSION_IS_AR);
-      immersionSelector.textContent = 'Start AR';
+      fullScreenRenderWindow.getApiSpecificRenderWindow().stopXR();
+      immersionSelector.textContent =
+        requestedXrSessionType === XrSessionTypes.MobileAR
+          ? 'Start AR'
+          : 'Start VR';
     }
   }
-  immersionSelector.addEventListener('click', toggleAR);
+  immersionSelector.addEventListener('click', toggleXR);
 
   // --------------------------------------------------------------------
   // Pipeline handling

Examples/Applications/GeometryViewer/index.md

@@ -14,4 +14,9 @@ Also using extra argument to the URL allow to view remote VTP like the links bel
 - [Brain Blood Vessels](https://kitware.github.io/vtk-js/examples/GeometryViewer/index.html?fileURL=[https://data.kitware.com/api/v1/file/61f041f14acac99f42c2ff9a/download,https://data.kitware.com/api/v1/file/61f042024acac99f42c2ffa6/download,https://data.kitware.com/api/v1/file/61f042b74acac99f42c30079/download]) 57.71 MB
 - [Chest CT](https://kitware.github.io/vtk-js/examples/GeometryViewer/index.html?fileURL=[https://data.kitware.com/api/v1/file/61f044354acac99f42c30276/download,https://data.kitware.com/api/v1/file/61f0440f4acac99f42c30191/download,https://data.kitware.com/api/v1/file/61f044204acac99f42c30267/download]) 63.75 MB
 
+Virtual reality, augmented reality, and holographic viewing is supported for WebXR devices using the `xrSessionType` URL parameter. The following links provide holographic examples for a Looking Glass display:
+- [diskout.vtp (holographic)](https://kitware.github.io/vtk-js/examples/GeometryViewer/GeometryViewer.html?xrSessionType=2&fileURL=https://data.kitware.com/api/v1/item/59de9de58d777f31ac641dc5/download) 471.9 kB
+- [Brain Blood Vessels (holographic)](https://kitware.github.io/vtk-js/examples/GeometryViewer/index.html?xrSessionType=2&fileURL=[https://data.kitware.com/api/v1/file/61f041f14acac99f42c2ff9a/download,https://data.kitware.com/api/v1/file/61f042024acac99f42c2ffa6/download,https://data.kitware.com/api/v1/file/61f042b74acac99f42c30079/download]) 57.71 MB
+- [Chest CT (holographic)](https://kitware.github.io/vtk-js/examples/GeometryViewer/index.html?xrSessionType=2&fileURL=[https://data.kitware.com/api/v1/file/61f044354acac99f42c30276/download,https://data.kitware.com/api/v1/file/61f0440f4acac99f42c30191/download,https://data.kitware.com/api/v1/file/61f044204acac99f42c30267/download]) 63.75 MB
+
 [HTML]: https://kitware.github.io/vtk-js/examples/GeometryViewer/GeometryViewer.html

Examples/Applications/SkyboxViewer/index.js

@@ -13,7 +13,7 @@ import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreen
 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 vtkMobileVR from '@kitware/vtk.js/Common/System/MobileVR';
+import { XrSessionTypes } from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow/Constants';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -213,7 +213,9 @@ function createVisualization(container, mapReader) {
     document.querySelector('body').appendChild(button);
     button.addEventListener('click', () => {
       if (button.textContent === 'Send To VR') {
-        fullScreenRenderer.getApiSpecificRenderWindow().startXR();
+        fullScreenRenderer
+          .getApiSpecificRenderWindow()
+          .startXR(XrSessionTypes.HmdVR);
         button.textContent = 'Return From VR';
       } else {
         fullScreenRenderer.getApiSpecificRenderWindow().stopXR();

Examples/Geometry/AR/index.js

@@ -10,6 +10,7 @@ import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreen
 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';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -82,15 +83,16 @@ arbutton.disabled = !fullScreenRenderer
   .getApiSpecificRenderWindow()
   .getXrSupported();
 
-const SESSION_IS_AR = true;
 arbutton.addEventListener('click', (e) => {
   if (arbutton.textContent === 'Start AR') {
     fullScreenRenderer.setBackground([0, 0, 0, 0]);
-    fullScreenRenderer.getApiSpecificRenderWindow().startXR(SESSION_IS_AR);
+    fullScreenRenderer
+      .getApiSpecificRenderWindow()
+      .startXR(XrSessionTypes.MobileAR);
     arbutton.textContent = 'Exit AR';
   } else {
     fullScreenRenderer.setBackground([0, 0, 0, 255]);
-    fullScreenRenderer.getApiSpecificRenderWindow().stopXR(SESSION_IS_AR);
+    fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
     arbutton.textContent = 'Start AR';
   }
 });

Examples/Geometry/LookingGlass/controller.html

@@ -0,0 +1,21 @@
+<table>
+  <tr>
+    <td>
+      <button class='vrbutton' style="width: 100%">Send To Looking Glass</button>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <select class='representations' style="width: 100%">
+        <option value='0'>Points</option>
+        <option value='1'>Wireframe</option>
+        <option value='2' selected>Surface</option>
+      </select>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <input class='resolution' type='range' min='4' max='80' value='6' />
+    </td>
+  </tr>
+</table>

Examples/Geometry/LookingGlass/index.js

@@ -0,0 +1,132 @@
+// For streamlined VR development install the WebXR emulator extension
+// https://github.com/MozillaReality/WebXR-emulator-extension
+
+import '@kitware/vtk.js/favicon';
+
+// Load the rendering pieces we want to use (for both WebGL and WebGPU)
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+
+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 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';
+
+// Force DataAccessHelper to have access to various data source
+import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
+import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
+import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';
+
+import controlPanel from './controller.html';
+
+// Import the Looking Glass WebXR Polyfill override
+// Assumes that the Looking Glass Bridge native application is already running.
+// See https://docs.lookingglassfactory.com/developer-tools/webxr
+import(
+  // eslint-disable-next-line import/no-unresolved, import/extensions
+  /* webpackIgnore: true */ 'https://unpkg.com/@lookingglass/[email protected]/dist/@lookingglass/bundle/webxr.js'
+).then((obj) => {
+  // eslint-disable-next-line no-new
+  new obj.LookingGlassWebXRPolyfill();
+});
+
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+
+const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
+  background: [0, 0, 0],
+});
+const renderer = fullScreenRenderer.getRenderer();
+const renderWindow = fullScreenRenderer.getRenderWindow();
+
+// ----------------------------------------------------------------------------
+// Example code
+// ----------------------------------------------------------------------------
+// create a filter on the fly, sort of cool, this is a random scalars
+// filter we create inline, for a simple cone you would not need
+// this
+// ----------------------------------------------------------------------------
+
+const coneSource = vtkConeSource.newInstance({ height: 1.0, radius: 0.5 });
+const filter = vtkCalculator.newInstance();
+
+filter.setInputConnection(coneSource.getOutputPort());
+// filter.setFormulaSimple(FieldDataTypes.CELL, [], 'random', () => Math.random());
+filter.setFormula({
+  getArrays: (inputDataSets) => ({
+    input: [],
+    output: [
+      {
+        location: FieldDataTypes.CELL,
+        name: 'Random',
+        dataType: 'Float32Array',
+        attribute: AttributeTypes.SCALARS,
+      },
+    ],
+  }),
+  evaluate: (arraysIn, arraysOut) => {
+    const [scalars] = arraysOut.map((d) => d.getData());
+    for (let i = 0; i < scalars.length; i++) {
+      scalars[i] = Math.random();
+    }
+  },
+});
+
+const mapper = vtkMapper.newInstance();
+mapper.setInputConnection(filter.getOutputPort());
+
+const actor = vtkActor.newInstance();
+actor.setMapper(mapper);
+actor.setPosition(0.0, 0.0, -20.0);
+
+renderer.addActor(actor);
+renderer.resetCamera();
+renderWindow.render();
+
+// -----------------------------------------------------------
+// UI control handling
+// -----------------------------------------------------------
+
+fullScreenRenderer.addController(controlPanel);
+const representationSelector = document.querySelector('.representations');
+const resolutionChange = document.querySelector('.resolution');
+const vrbutton = document.querySelector('.vrbutton');
+
+representationSelector.addEventListener('change', (e) => {
+  const newRepValue = Number(e.target.value);
+  actor.getProperty().setRepresentation(newRepValue);
+  renderWindow.render();
+});
+
+resolutionChange.addEventListener('input', (e) => {
+  const resolution = Number(e.target.value);
+  coneSource.setResolution(resolution);
+  renderWindow.render();
+});
+
+vrbutton.addEventListener('click', (e) => {
+  if (vrbutton.textContent === 'Send To Looking Glass') {
+    fullScreenRenderer
+      .getApiSpecificRenderWindow()
+      .startXR(XrSessionTypes.LookingGlassVR);
+    vrbutton.textContent = 'Return From Looking Glass';
+  } else {
+    fullScreenRenderer.getApiSpecificRenderWindow().stopXR();
+    vrbutton.textContent = 'Send To Looking Glass';
+  }
+});
+
+// -----------------------------------------------------------
+// Make some variables global so that you can inspect and
+// modify objects in your browser's developer console:
+// -----------------------------------------------------------
+
+global.source = coneSource;
+global.mapper = mapper;
+global.actor = actor;
+global.renderer = renderer;
+global.renderWindow = renderWindow;

Examples/Geometry/LookingGlass/index.md

@@ -0,0 +1,14 @@
+## Holographic Scenes with Looking Glass
+
+vtk.js supports rendering 3D holograms to [Looking Glass](https://lookingglassfactory.com/) holographic displays. The following are required for getting started:
+- A physical Looking Glass display with an HDMI and USB connection to the computer running the vtk.js scene;
+- The [Looking Glass Bridge](https://lookingglassfactory.com/software/looking-glass-bridge) native application; and
+- The [Looking Glass WebXR Polyfill](https://github.com/Looking-Glass/looking-glass-webxr) (already fetched in this example).
+
+Clicking "Send to Looking Glass" in the example above will open a new popup window on the connected Looking Glass display. Double-clicking the window will maximize the hologram view to display properly.
+
+If the Looking Glass display is disconnected or the Looking Glass Bridge application is not running then a non-composited, "swizzled" view will be shown in a popup window.
+
+The Looking Glass display composites a "quilt" of multiple scene renderings into a hologram with "depth" when viewed from multiple angles. vtk.js generates multiple scene renderings for each frame in order to generate new "quilt".
+
+More information on holograms and Looking Glass displays is available in the [Looking Glass documentation](https://docs.lookingglassfactory.com/).

Examples/Geometry/VR/index.js

@@ -13,6 +13,7 @@ import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreen
 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';
 
 // Force DataAccessHelper to have access to various data source
 import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
@@ -113,7 +114,9 @@ resolutionChange.addEventListener('input', (e) => {
 
 vrbutton.addEventListener('click', (e) => {
   if (vrbutton.textContent === 'Send To VR') {
-    fullScreenRenderer.getApiSpecificRenderWindow().startXR();
+    fullScreenRenderer
+      .getApiSpecificRenderWindow()
+      .startXR(XrSessionTypes.HmdVR);
     vrbutton.textContent = 'Return From VR';
   } else {
     fullScreenRenderer.getApiSpecificRenderWindow().stopXR();