feat(app): option to start AR with or without DOM overlay

HSF · Jul 8, 2021 · 9a6c243 · 9a6c243
1 parent 46b8aee
commit 9a6c243
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git a/packages/phoenix-event-display/src/managers/three-manager/ar-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/ar-manager.ts
@@ -13,6 +13,8 @@ import { XRManager, XRSessionType } from './xr-manager';
 export class ARManager extends XRManager {
   /** Session type to use for AR. */
   static readonly SESSION_TYPE: string = 'immersive-ar';
+  /** Whether to enable DOM overlay which shows Phoenix overlays on top of the AR scene. */
+  public static enableDomOverlay: boolean = true;
   /** Previous values of scene scale, camera near and camera position. */
   private previousValues = {
     sceneScale: 1,
@@ -26,16 +28,22 @@ export class ARManager extends XRManager {
    * @override
    */
   constructor(private scene: Scene, private camera: PerspectiveCamera) {
-    super(XRSessionType.AR, {
-      optionalFeatures: ['dom-overlay'],
-      domOverlay: { root: document.body },
-    });
+    super(XRSessionType.AR);
+
+    this.previousValues.sceneScale = scene.scale.x;
+    this.previousValues.cameraNear = camera.near;
+    this.sessionInit = () => {
+      return ARManager.enableDomOverlay ? {
+        optionalFeatures: ['dom-overlay'],
+        domOverlay: { root: document.body },
+      } : {};
+    }
   }
 
   /**
    * Callback for when the AR session is started.
-   * @override
    * @param session The AR session.
+   * @override
    */
   protected async onXRSessionStarted(session: any) {
     document.body.style.setProperty('background-color', 'transparent');

diff --git a/packages/phoenix-event-display/src/managers/three-manager/vr-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/vr-manager.ts
@@ -32,7 +32,8 @@ export class VRManager extends XRManager {
    * @override
    */
   constructor() {
-    super(XRSessionType.VR, {
+    super(XRSessionType.VR);
+    this.sessionInit = () => ({
       optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking'],
     });
   }

diff --git a/packages/phoenix-event-display/src/managers/three-manager/xr-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/xr-manager.ts
@@ -17,6 +17,7 @@ export enum XRSessionType {
 export class XRManager {
   /** Whether the XR is currently active or not. */
   protected xrActive: boolean = false;
+  protected sessionInit: () => XRSessionInit & { [key: string]: any };
   /** Renderer to set the XR session for. */
   protected renderer: WebGLRenderer;
   /** Currently active XR session. */
@@ -34,8 +35,7 @@ export class XRManager {
    * @param sessionInit Other options for the session like optional features.
    */
   constructor(
-    private sessionType: XRSessionType,
-    private sessionInit?: XRSessionInit & { [key: string]: any }
+    private sessionType: XRSessionType
   ) {}
 
   /**
@@ -55,7 +55,7 @@ export class XRManager {
     const xrType = this.sessionType === XRSessionType.VR ? 'vr' : 'ar';
 
     webXR
-      ?.requestSession(`immersive-${xrType}`, this.sessionInit)
+      ?.requestSession(`immersive-${xrType}`, this.sessionInit?.())
       .then((session: any) => {
         this.onXRSessionStarted.bind(this)(session);
         onSessionStarted?.();

diff --git a/.../projects/phoenix-ui-components/src/components/ui-menu/ar-toggle/ar-toggle.component.html b/.../projects/phoenix-ui-components/src/components/ui-menu/ar-toggle/ar-toggle.component.html
@@ -1,8 +1,13 @@
+<mat-menu #animationPresets>
+  <button mat-menu-item (click)="toggleAr(true)">AR with overlays</button>
+  <button mat-menu-item (click)="toggleAr(false)">AR without overlays</button>
+</mat-menu>
+
 <app-menu-toggle
+  [matMenuTriggerFor]="animationPresets"
   [disabled]="!arSupported"
   [active]="arActive"
   icon="ar"
-  (click)="arSupported && toggleAr()"
   [tooltip]="
     arSupported ? (arActive ? 'Exit AR' : 'Enter AR') : 'AR not supported'
   "

diff --git a/...ng/projects/phoenix-ui-components/src/components/ui-menu/ar-toggle/ar-toggle.component.ts b/...ng/projects/phoenix-ui-components/src/components/ui-menu/ar-toggle/ar-toggle.component.ts
@@ -24,7 +24,9 @@ export class ArToggleComponent {
     } // else AR not supported
   }
 
-  toggleAr() {
+  toggleAr(enableDomOverlay: boolean = true) {
+    ARManager.enableDomOverlay = enableDomOverlay;
+
     // If toggling AR on
     if (!this.arActive) {
       this.eventDisplay.initXR(XRSessionType.AR, () => {