diff --git a/Examples/Applications/GeometryViewer/index.js b/Examples/Applications/GeometryViewer/index.js index 9e7255ecb01..12c082f3d6b 100644 --- a/Examples/Applications/GeometryViewer/index.js +++ b/Examples/Applications/GeometryViewer/index.js @@ -76,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/webxr@0.3.0/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 // ---------------------------------------------------------------------------- @@ -198,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); @@ -211,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); } @@ -388,22 +429,29 @@ function createPipeline(fileName, fileContents) { // Immersion handling // -------------------------------------------------------------------- - function toggleAR() { - if (immersionSelector.textContent === 'Start AR') { + function toggleXR() { + if (requestedXrSessionType === XrSessionTypes.MobileAR) { fullScreenRenderWindow.setBackground([...background, 0]); + } + + if (immersionSelector.textContent.startsWith('Start')) { fullScreenRenderWindow .getApiSpecificRenderWindow() - .startXR(XrSessionTypes.MobileAR); - immersionSelector.textContent = 'Exit AR'; + .startXR(requestedXrSessionType); + immersionSelector.textContent = + requestedXrSessionType === XrSessionTypes.MobileAR + ? 'Exit AR' + : 'Exit VR'; } else { fullScreenRenderWindow.setBackground([...background, 255]); - fullScreenRenderWindow - .getApiSpecificRenderWindow() - .stopXR(XrSessionTypes.MobileAR); - 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 diff --git a/Examples/Applications/GeometryViewer/index.md b/Examples/Applications/GeometryViewer/index.md index 15079720bc5..6b6d3673e5a 100644 --- a/Examples/Applications/GeometryViewer/index.md +++ b/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