From 0d836506c013f131d2f11f36f8018187792d3b75 Mon Sep 17 00:00:00 2001
From: Rik Cabanier <cabanier@meta.com>
Date: Wed, 19 Apr 2023 22:27:22 +0000
Subject: [PATCH] edge test anchors

---
 anchors-1.html | 361 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 361 insertions(+)
 create mode 100644 anchors-1.html
diff --git a/anchors-1.html b/anchors-1.html
new file mode 100644
index 0000000..83dfadb
--- /dev/null
+++ b/anchors-1.html
@@ -0,0 +1,361 @@
+<!doctype html>
+<!--
+Copyright 2021 The Immersive Web Community Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
+    <meta name='mobile-web-app-capable' content='yes'>
+    <meta name='apple-mobile-web-app-capable' content='yes'>
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='css/common.css'>
+
+    <title>Anchors</title>
+  </head>
+  <body>
+    <header>
+      <details open>
+        <summary>Anchors</summary>
+        <p>
+          This sample demonstrates use of anchors place virtual objects in stable, real world locations.
+          <a class="back" href="./">Back</a>
+        </p>
+      </details>
+    </header>
+    <script type="module">
+      import {WebXRButton} from './js/util/webxr-button.js';
+      import {Scene} from './js/render/scenes/scene.js';
+      import {Renderer, createWebGLContext} from './js/render/core/renderer.js';
+      import {SkyboxNode} from './js/render/nodes/skybox.js';
+      import {InlineViewerHelper} from './js/util/inline-viewer-helper.js';
+      import {Gltf2Node} from './js/render/nodes/gltf2.js';
+      import {QueryArgs} from './js/util/query-args.js';
+
+      // If requested, use the polyfill to provide support for mobile devices
+      // and devices which only support WebVR.
+      import WebXRPolyfill from './js/third-party/webxr-polyfill/build/webxr-polyfill.module.js';
+      if (QueryArgs.getBool('usePolyfill', true)) {
+        let polyfill = new WebXRPolyfill();
+      }
+
+      // XR globals.
+      let xrButton = null;
+      let xrImmersiveRefSpace = null;
+      let inlineViewerHelper = null;
+
+      let isARAvailable = false;
+      let isVRAvailable = false;
+      let xrSessionString = 'immersive-vr';
+
+      // WebGL scene globals.
+      let gl = null;
+      let renderer = null;
+      let scene = new Scene();
+      let solarSystem = new Gltf2Node({url: 'media/gltf/space/space.gltf'});
+      // The solar system is big (citation needed). Scale it down so that users
+      // can move around the planets more easily.
+      solarSystem.scale = [0.1, 0.1, 0.1];
+      scene.addNode(solarSystem);
+      // Still adding a skybox, but only for the benefit of the inline view.
+      let skybox = new SkyboxNode({url: 'media/textures/milky-way-4k.png'});
+      scene.addNode(skybox);
+
+      const MAX_ANCHORED_OBJECTS = 30;
+      let anchoredObjects = [];
+
+      // Set with all anchors tracked in a previous frame.
+      let all_previous_anchors = new Set();
+
+      function initXR() {
+        if (navigator.xr) {
+          // Checks to ensure that 'immersive-ar' or 'immersive-vr' mode is available,
+          // and only enables the button if so.
+          navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
+            isARAvailable = supported;
+            xrButton = new WebXRButton({
+              onRequestSession: onRequestSession,
+              onEndSession: onEndSession,
+              textEnterXRTitle: isARAvailable ? "START AR" : "START VR",
+              textXRNotFoundTitle: isARAvailable ? "AR NOT FOUND" : "VR NOT FOUND",
+              textExitXRTitle: isARAvailable ? "EXIT  AR" : "EXIT  VR",
+            });
+            document.querySelector('header').appendChild(xrButton.domElement);
+
+            xrButton.enabled = supported;
+            if (!supported) {
+              isVRAvailable = false;
+              xrButton.enabled = false;
+            } else {
+              xrSessionString = 'immersive-ar';
+            }
+          });
+
+          navigator.xr.requestSession('inline').then(onSessionStarted);
+        } else {
+           isARAvailable = false;
+           isVRAvailable = false;
+           xrButton = new WebXRButton({
+            onRequestSession: onRequestSession,
+            onEndSession: onEndSession,
+            textEnterXRTitle: "START VR",
+            textXRNotFoundTitle: "VR NOT FOUND",
+            textExitXRTitle: "EXIT  VR",
+          });
+          xrButton.enabled = false;
+          document.querySelector('header').appendChild(xrButton.domElement);
+        }
+      }
+
+      function onRequestSession() {
+        // Requests an 'immersive-ar' or 'immersive-vr' session, depending on which is supported,
+        // and requests the 'anchors' module as a required feature.
+        return navigator.xr.requestSession(xrSessionString, {requiredFeatures: ['anchors']})
+            .then((session) => {
+              xrButton.setSession(session);
+              session.isImmersive = true;
+              onSessionStarted(session);
+            });
+      }
+
+      function initGL() {
+        if (gl)
+          return;
+
+        gl = createWebGLContext({
+          xrCompatible: true
+        });
+        document.body.appendChild(gl.canvas);
+
+        function onResize() {
+          gl.canvas.width = gl.canvas.clientWidth * window.devicePixelRatio;
+          gl.canvas.height = gl.canvas.clientHeight * window.devicePixelRatio;
+        }
+        window.addEventListener('resize', onResize);
+        onResize();
+
+        renderer = new Renderer(gl);
+
+        scene.setRenderer(renderer);
+      }
+
+      function onSessionStarted(session) {
+        session.addEventListener('end', onSessionEnded);
+        session.addEventListener('select', onSelect);
+        session.addEventListener('squeeze', onSqueeze);
+
+        if (session.isImmersive && isARAvailable) {
+          // When in 'immersive-ar' mode don't draw an opaque background because
+          // we want the real world to show through.
+          skybox.visible = false;
+        }
+
+        initGL();
+
+        // This and all future samples that visualize controllers will use this
+        // convenience method to listen for changes to the active XRInputSources
+        // and load the right meshes based on the profiles array.
+        scene.inputRenderer.useProfileControllerMeshes(session);
+
+        session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
+
+        let refSpaceType = session.isImmersive ? 'local' : 'viewer';
+        session.requestReferenceSpace(refSpaceType).then((refSpace) => {
+          if (session.isImmersive) {
+            xrImmersiveRefSpace = refSpace;
+          } else {
+            inlineViewerHelper = new InlineViewerHelper(gl.canvas, refSpace);
+          }
+          session.requestAnimationFrame(onXRFrame);
+        });
+
+        if (session.isImmersive) {
+          for (const uuid of session.persistentAnchors) { // xrSession is the same as s, the current session
+          session
+          .deletePersistentAnchor(uuid) 
+          .then(() => console.log("deleting old anchor", uuid))
+          .catch(console.error); // This is called with "Anchor creation failed" :)
+          }
+        }
+      }
+
+      function onEndSession(session) {
+        session.end();
+      }
+
+      function onSessionEnded(event) {
+        if (event.session.isImmersive) {
+          xrButton.setSession(null);
+          // Turn the background back on when we go back to the inlive view.
+          skybox.visible = true;
+        }
+      }
+
+      function addAnchoredObjectToScene(anchor) {
+        console.debug("Anchor created");
+
+        anchor.context = {};
+
+        let flower = new Gltf2Node({url: 'media/gltf/sunflower/sunflower.gltf'});
+        scene.addNode(flower);
+        anchor.context.sceneObject = flower;
+        flower.anchor = anchor;
+        anchoredObjects.push(flower);
+
+        if (anchor.uuid === undefined) {
+          anchor.requestPersistentHandle().then((uuid) => {
+            console.log("new anchor: " + uuid);
+            anchor.uuid = uuid;
+          });
+        }
+
+        // For performance reasons if we add too many objects start
+        // removing the oldest ones to keep the scene complexity
+        // from growing too much.
+        if (anchoredObjects.length > MAX_ANCHORED_OBJECTS) {
+          let objectToRemove = anchoredObjects.shift();
+          scene.removeNode(objectToRemove);
+          objectToRemove.anchor.delete();
+        }
+      }
+
+      function onSelect(event) {
+        let frame = event.frame;
+        let session = frame.session;
+        let anchorPose = new XRRigidTransform();
+        let inputSource = event.inputSource;
+
+        // If the user is on a screen based device, place the anchor 1 meter in front of them.
+        // Otherwise place the anchor at the location of the input device
+        if (inputSource.targetRayMode == 'screen') {
+          anchorPose = new XRRigidTransform(
+          {x: 0, y: 0, z: -1},
+          {x: 0, y: 0, z: 0, w: 1});
+        }
+
+        if (session.isImmersive) {
+          // Create a free-floating anchor.
+          frame.createAnchor(anchorPose, inputSource.targetRaySpace).then((anchor) => {
+            addAnchoredObjectToScene(anchor);
+          }, (error) => {
+            console.error("Could not create anchor: " + error);
+          });
+        }
+      }
+
+      function onSqueeze(event) {
+        let frame = event.frame;
+        let session = frame.session;
+        if (anchoredObjects.length === 0)
+          return;
+
+        let objectToRemove = anchoredObjects[0];
+        session.deletePersistentAnchor(objectToRemove.anchor.uuid).then(() => {
+          anchoredObjects.shift();
+          scene.removeNode(objectToRemove);
+          console.log("deleted anchor");
+          let anchors = [];
+          for (let x = 0; x < anchoredObjects.length; x++) {
+            anchors.push(anchoredObjects[x].anchor.uuid);
+          }
+          localStorage.anchors = JSON.stringify(anchors);
+        }).catch(err =>
+          console.log("failed to delete anchor: " + err)
+        );
+      }
+
+      // Called every time a XRSession requests that a new frame be drawn.
+      let first_time = true;
+      function onXRFrame(t, frame) {
+        let session = frame.session;
+        let xrRefSpace = session.isImmersive ?
+                         xrImmersiveRefSpace :
+                         inlineViewerHelper.referenceSpace;
+        let pose = frame.getViewerPose(xrRefSpace);
+
+        if (session.isImmersive && first_time) {
+          first_time = false;
+          if (session.persistentAnchors) {
+            let anchors = session.persistentAnchors;
+            console.log("known anchors:")
+            for (let i = 0; i < anchors.length; i++) {
+              console.log(i + ": " + anchors[i]);
+
+              session.restorePersistentAnchor(anchors[i]).then((anchor) => {
+                console.log("restored anchor");
+                anchor.uuid = anchors[i];
+                addAnchoredObjectToScene(anchor);
+
+              }).catch(err =>
+                console.log("failed to restore anchor: " + err)
+              );
+            }
+          }
+        }
+
+        // Update the position of all the anchored objects based on the currently reported positions of their anchors
+        const tracked_anchors = frame.trackedAnchors;
+        if(tracked_anchors){
+          all_previous_anchors.forEach(anchor => {
+            if(!tracked_anchors.has(anchor)){
+              scene.removeNode(anchor.sceneObject);
+            }
+          });
+
+          tracked_anchors.forEach(anchor => {
+            const anchorPose = frame.getPose(anchor.anchorSpace, xrRefSpace);
+            if (anchorPose) {
+              anchor.context.sceneObject.matrix = anchorPose.transform.matrix;
+              anchor.context.sceneObject.visible = true;
+            } else {
+              anchor.context.sceneObject.visible = false;
+            }
+          });
+
+          all_previous_anchors = tracked_anchors;
+        } else {
+          all_previous_anchors.forEach(anchor => {
+            scene.removeNode(anchor.sceneObject);
+          });
+
+          all_previous_anchors = new Set();
+        }
+
+        // In this sample and most samples after it we'll use a helper function
+        // to automatically add the right meshes for the session's input sources
+        // each frame. This also does simple hit detection to position the
+        // cursors correctly on the surface of selectable nodes.
+        scene.updateInputSources(frame, xrRefSpace);
+
+        scene.startFrame();
+
+        session.requestAnimationFrame(onXRFrame);
+
+        scene.drawXRFrame(frame, pose);
+
+        scene.endFrame();
+      }
+
+      // Start the XR application.
+      initXR();
+    </script>
+  </body>
+</html>
