Store a reference to ARSystem in ARDemo

demos/hello-babylon/demo.js

@@ -87,10 +87,9 @@ class EnchantedDemo extends ARDemo
 
     /**
      * Initialization
-     * @param {ARSystem} ar
      * @returns {Promise<void>}
      */
-    async init(ar)
+    async init()
     {
         // Do not automatically play an animation when loading GLTF models
         BABYLON.SceneLoader.OnPluginActivatedObservable.add(loader => {
@@ -100,16 +99,17 @@ class EnchantedDemo extends ARDemo
         });
 
         // Change the point of view - slightly
+        const ar = this.ar;
         ar.root.position.y = -0.8;
 
         // Initialize objects
-        this._initLight(ar);
-        this._initText(ar);
-        this._initMagicCircle(ar);
+        this._initLight();
+        this._initText();
+        this._initMagicCircle();
 
         await Promise.all([
-            this._initMage(ar),
-            this._initCat(ar),
+            this._initMage(),
+            this._initCat(),
         ]);
 
         // done!
@@ -118,11 +118,11 @@ class EnchantedDemo extends ARDemo
 
     /**
      * Animation loop
-     * @param {ARSystem} ar
      * @returns {void}
      */
-    update(ar)
+    update()
     {
+        const ar = this.ar;
         const delta = ar.session.time.delta; // given in seconds
 
         this._animateMagicCircle(delta);
@@ -132,7 +132,7 @@ class EnchantedDemo extends ARDemo
     // ------------------------------------------------------------------------
 
 
-    _initLight(ar)
+    _initLight()
     {
         const light = new BABYLON.HemisphericLight('light', BABYLON.Vector3.Up());
         light.intensity = 1.0;
@@ -140,7 +140,7 @@ class EnchantedDemo extends ARDemo
         light.specular.set(0, 0, 0);
     }
 
-    _initMagicCircle(ar)
+    _initMagicCircle()
     {
         // create a magic circle
         const magicCircle = BABYLON.MeshBuilder.CreatePlane('magic-circle', {
@@ -160,13 +160,14 @@ class EnchantedDemo extends ARDemo
         magicCircle.scaling.set(4, 4, 1);
 
         // make it a child of ar.root
+        const ar = this.ar;
         magicCircle.parent = ar.root;
 
         // save a reference
         this._objects.magicCircle = magicCircle;
     }
 
-    _initText(ar)
+    _initText()
     {
         const text = BABYLON.MeshBuilder.CreatePlane('text', {
             width: 1,
@@ -184,12 +185,13 @@ class EnchantedDemo extends ARDemo
         text.position.set(0, 2, 0.5);
         text.scaling.set(3, 1.5, 1);
 
+        const ar = this.ar;
         text.parent = ar.root;
 
         this._objects.text = text;
     }
 
-    async _initMage(ar)
+    async _initMage()
     {
         // load the mage
         const gltf = await BABYLON.SceneLoader.ImportMeshAsync('', '../assets/', 'mage.glb');
@@ -202,13 +204,14 @@ class EnchantedDemo extends ARDemo
             anim.play(true);
 
         // make the mage a child of ar.root
+        const ar = this.ar;
         mage.parent = ar.root;
 
         // save a reference
         this._objects.mage = mage;
     }
 
-    async _initCat(ar)
+    async _initCat()
     {
         const gltf = await BABYLON.SceneLoader.ImportMeshAsync('', '../assets/', 'cat.glb');
         const cat = gltf.meshes[0];
@@ -218,6 +221,7 @@ class EnchantedDemo extends ARDemo
         if(anim)
             anim.play(true);
 
+        const ar = this.ar;
         cat.parent = ar.root;
 
         this._objects.cat = cat;

demos/hello-three/demo.js

@@ -177,11 +177,12 @@ class EnchantedDemo extends ARDemo
 
     /**
      * Initialization
-     * @param {ARSystem} ar
      * @returns {void}
      */
-    init(ar)
+    init()
     {
+        const ar = this.ar;
+
         // Change the point of view. All virtual objects are descendants of
         // ar.root, a node that is automatically aligned to the physical scene.
         // Adjusting ar.root will adjust all virtual objects.
@@ -189,11 +190,11 @@ class EnchantedDemo extends ARDemo
         ar.root.position.set(0, -0.8, 0);
 
         // Initialize objects
-        this._initLight(ar);
-        this._initText(ar);
-        this._initMagicCircle(ar);
-        this._initMage(ar);
-        this._initCat(ar);
+        this._initLight();
+        this._initText();
+        this._initMagicCircle();
+        this._initMage();
+        this._initCat();
 
         // done!
         this._initialized = true;
@@ -201,11 +202,11 @@ class EnchantedDemo extends ARDemo
 
     /**
      * Animation loop
-     * @param {ARSystem} ar
      * @returns {void}
      */
-    update(ar)
+    update()
     {
+        const ar = this.ar;
         const delta = ar.session.time.delta; // given in seconds
 
         // animate the objects of the scene
@@ -218,15 +219,16 @@ class EnchantedDemo extends ARDemo
     // ------------------------------------------------------------------------
 
 
-    _initLight(ar)
+    _initLight()
     {
         const ambientLight = new THREE.AmbientLight(0xffffff);
         ambientLight.intensity = 1.5;
 
+        const ar = this.ar;
         ar.scene.add(ambientLight);
     }
 
-    _initMagicCircle(ar)
+    _initMagicCircle()
     {
         // create a magic circle
         const magicCircle = Utils.createImagePlane('../assets/magic-circle.png');
@@ -235,13 +237,14 @@ class EnchantedDemo extends ARDemo
         magicCircle.scale.set(4, 4, 1);
 
         // make it a child of ar.root
+        const ar = this.ar;
         ar.root.add(magicCircle);
 
         // save a reference
         this._objects.magicCircle = magicCircle;
     }
 
-    _initText(ar)
+    _initText()
     {
         const text = Utils.createImagePlane('../assets/it-works.png');
         text.material.transparent = true;
@@ -250,12 +253,13 @@ class EnchantedDemo extends ARDemo
         text.scale.set(3, 1.5, 1);
         text.rotateX(Math.PI / 2);
 
+        const ar = this.ar;
         ar.root.add(text);
 
         this._objects.text = text;
     }
 
-    _initMage(ar)
+    _initMage()
     {
         // load the mage
         const gltf = this._objects.gltf.mage;
@@ -267,6 +271,7 @@ class EnchantedDemo extends ARDemo
         mageAction.play();
 
         // make the mage a child of ar.root
+        const ar = this.ar;
         ar.root.add(mage);
 
         // save references
@@ -274,7 +279,7 @@ class EnchantedDemo extends ARDemo
         this._objects.mageAction = mageAction;
     }
 
-    _initCat(ar)
+    _initCat()
     {
         const gltf = this._objects.gltf.cat;
         const cat = gltf.scene;
@@ -283,6 +288,7 @@ class EnchantedDemo extends ARDemo
         const catAction = Utils.createAnimationAction(gltf, 'Cheer');
         catAction.play();
 
+        const ar = this.ar;
         ar.root.add(cat);
 
         this._objects.cat = cat;

plugins/babylon-with-encantar.js

@@ -17,8 +17,8 @@ class ARDemo
 {
     /**
      * Start the AR session
-     * @abstract
      * @returns {Promise<Session> | SpeedyPromise<Session>}
+     * @abstract
      */
     startSession()
     {
@@ -27,32 +27,29 @@ class ARDemo
 
     /**
      * Initialization
-     * @abstract
-     * @param {ARSystem} ar
      * @returns {void | Promise<void> | SpeedyPromise<void>}
+     * @abstract
      */
-    init(ar)
+    init()
     {
         throw new Error('Abstract method');
     }
 
     /**
      * Animation loop
-     * @abstract
-     * @param {ARSystem} ar
      * @returns {void}
+     * @abstract
      */
-    update(ar)
+    update()
     {
         throw new Error('Abstract method');
     }
 
     /**
      * Release resources
-     * @param {ARSystem} ar
      * @returns {void}
      */
-    release(ar)
+    release()
     {
         // optional implementation
     }
@@ -66,6 +63,23 @@ class ARDemo
         // optional implementation
         return Promise.resolve();
     }
+
+    /**
+     * A reference to the ARSystem
+     * @returns {ARSystem | null}
+     */
+    get ar()
+    {
+        return this._ar;
+    }
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+        this._ar = null;
+    }
 }
 
 /**
@@ -244,7 +258,7 @@ function encantar(demo)
         mix(frame);
 
         ar._engine.beginFrame();
-        demo.update(ar);
+        demo.update();
         ar._scene.render(false);
         ar._engine.endFrame();
 
@@ -307,6 +321,8 @@ function encantar(demo)
     .then(() => demo.startSession()) // Promise or SpeedyPromise
     .then(session => {
 
+        demo._ar = ar;
+
         ar._session = session;
 
         ar._engine = new BABYLON.Engine(session.viewport.canvas, false, {
@@ -352,10 +368,10 @@ function encantar(demo)
 
         return Promise.resolve()
         .then(() => {
-            return demo.init(ar);
+            return demo.init();
         })
         .then(() => {
-            session.addEventListener('end', event => { demo.release(ar); });
+            session.addEventListener('end', event => { demo.release(); });
             session.requestAnimationFrame(animate);
             return ar;
         })

plugins/three-with-encantar.js

@@ -27,32 +27,29 @@ class ARDemo
 
     /**
      * Initialization
-     * @abstract
-     * @param {ARSystem} ar
      * @returns {void | Promise<void> | SpeedyPromise<void>}
+     * @abstract
      */
-    init(ar)
+    init()
     {
         throw new Error('Abstract method');
     }
 
     /**
      * Animation loop
-     * @abstract
-     * @param {ARSystem} ar
      * @returns {void}
+     * @abstract
      */
-    update(ar)
+    update()
     {
         throw new Error('Abstract method');
     }
 
     /**
      * Release resources
-     * @param {ARSystem} ar
      * @returns {void}
      */
-    release(ar)
+    release()
     {
         // optional implementation
     }
@@ -66,6 +63,23 @@ class ARDemo
         // optional implementation
         return Promise.resolve();
     }
+
+    /**
+     * A reference to the ARSystem
+     * @returns {ARSystem | null}
+     */
+    get ar()
+    {
+        return this._ar;
+    }
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+        this._ar = null;
+    }
 }
 
 /**
@@ -237,7 +251,7 @@ function encantar(demo)
         ar._frame = frame;
         mix(frame);
 
-        demo.update(ar);
+        demo.update();
 
         ar._renderer.render(ar._scene, ar._camera);
         ar._session.requestAnimationFrame(animate);
@@ -289,6 +303,8 @@ function encantar(demo)
     .then(() => demo.startSession()) // Promise or SpeedyPromise
     .then(session => {
 
+        demo._ar = ar;
+
         ar._session = session;
 
         ar._scene = new THREE.Scene();
@@ -324,10 +340,10 @@ function encantar(demo)
 
         return Promise.resolve()
         .then(() => {
-            return demo.init(ar);
+            return demo.init();
         })
         .then(() => {
-            session.addEventListener('end', event => { demo.release(ar); });
+            session.addEventListener('end', event => { demo.release(); });
             session.requestAnimationFrame(animate);
             return ar;
         })