p5xr MR mode

stalgiag · Mar 7, 2024 · 10b085f · 10b085f
1 parent 094c129
commit 10b085f
Show file tree

Hide file tree

Showing 7 changed files with 326 additions and 12 deletions.
diff --git a/examples/hello-box/hello-box.js b/examples/hello-box/hello-box.js
@@ -0,0 +1,13 @@
+function preload() {
+  createMRCanvas();
+}
+
+function setup() {
+}
+
+function draw() {
+  push();
+  translate(0, 0, -0.3);
+  box(0.1, 0.1, 0.1);
+  pop();
+}
diff --git a/examples/hello-box/index.html b/examples/hello-box/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<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'>
+
+    <title>MR EXAMPLE #1 : HELLO BOX </title>
+    <script src='../../../node_modules/p5/lib/p5.js'></script>
+    <script src='../../../dist/p5xr.min.js'></script>
+  </head>
+  <body>
+    <header></header>
+    <script src="hello-box.js"></script>
+  </body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -1,5 +1,6 @@
 import p5vr from './p5xr/p5vr/p5vr';
 import p5ar from './p5xr/p5ar/p5ar';
+import p5mr from './p5xr/p5mr/p5mr';
 
 window.p5xr = {
   instance: null,
@@ -49,6 +50,22 @@ p5.prototype.createARCanvas = function () {
   p5xr.instance.initAR();
 };
 
+/**
+ * This creates a button that will create a AR canvas and new p5mr object
+ * on click. p5mr is for headset based AR with pass-through cameras.
+ * This should be called in `preload()` so
+ * that the entire sketch can wait to start until the user has "entered AR"
+ * via a button click gesture/
+ * @method createMRCanvas
+ * @section AR
+ * @category Initialization
+ */
+p5.prototype.createMRCanvas = function () {
+  noLoop();
+  p5xr.instance = new p5mr();
+  p5xr.instance.__initMR();
+};
+
 /**
  * Get the current "Enter XR" button.
  * @returns {p5xrButton} The button object
@@ -155,7 +172,7 @@ p5.prototype.surroundTexture = function (tex) {
  * @section AR
  */
 p5.prototype.createAnchor = function (vec) {
-  if (p5xr.instance.isVR) {
+  if (p5xr.instance.mode === 'VR') {
     return;
   }
   return p5xr.instance.__createAnchor(vec);
@@ -165,7 +182,7 @@ p5.prototype.createAnchor = function (vec) {
  * @ignore
  */
 p5.prototype.detectHit = function (ev) {
-  if (p5xr.instance.isVR) {
+  if (p5xr.instance.mode === 'VR') {
     return;
   }
   return p5xr.instance.__detectHit(ev);

diff --git a/src/p5xr/core/p5xr.js b/src/p5xr/core/p5xr.js
@@ -19,7 +19,7 @@ export default class p5xr {
   constructor(xrButton) {
     this.xrDevice = null;
     this.xrButton = xrButton || null;
-    this.isVR = null;
+    this.mode = null; // VR, AR or MR
     this.hasImmersive = null;
     this.xrSession = null;
     this.xrRefSpace = null;
@@ -125,8 +125,8 @@ export default class p5xr {
     // WebXR availabilty
     if (navigator?.xr) {
       console.log('XR Available');
-      const mode = this.isVR ? 'VR' : 'AR';
-      const session = this.isVR ? 'immersive-vr' : 'immersive-ar';
+      const mode = this.mode;
+      const session = this.mode === 'VR' ? 'immersive-vr' : 'immersive-ar';
       const supported = await navigator.xr.isSessionSupported(session);
       this.hasImmersive = supported;
       this.xrButton.setAvailable(supported, mode);
@@ -154,7 +154,7 @@ export default class p5xr {
     session.requestAnimationFrame(this.__onXRFrame.bind(this));
 
     let targetRefSpace = this.xrRefSpace;
-    if (this.isVR && !this.isImmersive) {
+    if (this.mode === 'VR' && !this.isImmersive) {
       // Account for the click-and-drag mouse movement or touch movement when
       // calculating the viewer pose for inline sessions.
       targetRefSpace = this.getAdjustedRefSpace(this.xrRefSpace);
@@ -176,7 +176,7 @@ export default class p5xr {
       // rendered.
       this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, glLayer.framebuffer);
 
-      if (this.isVR) {
+      if (this.mode === 'VR') {
         this.clearVR();
       }
 
@@ -225,7 +225,7 @@ export default class p5xr {
     const userDraw = context.draw;
     const userCalculate = context.calculate;
 
-    if (this.isVR) {
+    if (this.mode === 'VR' || this.mode === 'MR') {
       if (eyeIndex === 0) {
         if (typeof userCalculate === 'function') {
           userCalculate();
@@ -291,7 +291,7 @@ export default class p5xr {
    * @ignore
    */
   __onSessionEnded() {
-    if (!this.isVR) {
+    if (!(this.mode === 'VR')) {
       this.xrHitTestSource.cancel();
       this.xrHitTestSource = null;
     } else if (this.isImmersive) {