New version of the three.js plugin

plugins/three-with-encantar.js

@@ -11,40 +11,142 @@ __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__({
 });
 
 /**
- * Use this object to create your augmented scene
- * @typedef {object} ARSystem
- * @property {Session} session AR Session
- * @property {Frame} frame current Frame
- * @property {ReferenceImage | null} referenceImage corresponds to the target being tracked (if any)
- * @property {THREE.Scene} scene three.js Scene
- * @property {THREE.Group} root a 3D object that is automatically aligned to the physical target
- * @property {THREE.Camera} camera a camera adjusted for AR
- * @property {THREE.WebGLRenderer} renderer three.js renderer
+ * Base class for augmented scenes
  */
+class ARScene
+{
+    /**
+     * Start the AR session
+     * @abstract
+     * @returns {Promise<Session> | SpeedyPromise<Session>}
+     */
+    startSession()
+    {
+        throw new Error('Abstract method');
+    }
+
+    /**
+     * Initialize the augmented scene
+     * @abstract
+     * @param {ARPluginSystem} ar
+     * @returns {void | Promise<void> | SpeedyPromise<void>}
+     */
+    init(ar)
+    {
+        throw new Error('Abstract method');
+    }
+
+    /**
+     * Update / animate the augmented scene
+     * @abstract
+     * @param {ARPluginSystem} ar
+     * @returns {void}
+     */
+    update(ar)
+    {
+        throw new Error('Abstract method');
+    }
+
+    /**
+     * Release the augmented scene
+     * @param {ARPluginSystem} ar
+     * @returns {void}
+     */
+    release(ar)
+    {
+        // optional implementation
+    }
+}
+
+/**
+ * Helper for augmenting the scenes with three.js
+ */
+class ARPluginSystem
+{
+    /**
+     * AR Session
+     * @returns {Session}
+     */
+    get session()
+    {
+        return this._session;
+    }
+
+    /**
+     * Current frame: an object holding data to augment the physical scene.
+     * If the AR scene is not initialized, this will be null.
+     * @returns {Frame | null}
+     */
+    get frame()
+    {
+        return this._frame;
+    }
+
+    /**
+     * The root is a 3D object that is automatically aligned to the physical
+     * scene. Objects of your virtual scene should be descendants of this node.
+     * The root is only visible if something is being tracked.
+     * @returns {THREE.Group}
+     */
+    get root()
+    {
+        return this._root;
+    }
+
+    /**
+     * The three.js scene
+     * @returns {THREE.Scene}
+     */
+    get scene()
+    {
+        return this._scene;
+    }
+
+    /**
+     * A camera that is automatically adjusted for AR
+     * @returns {THREE.Camera}
+     */
+    get camera()
+    {
+        return this._camera;
+    }
+
+    /**
+     * The three.js renderer
+     * @returns {THREE.WebGLRenderer}
+     */
+    get renderer()
+    {
+        return this._renderer;
+    }
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+        this._session = null;
+        this._frame = null;
+        this._origin = null;
+        this._root = null;
+        this._scene = null;
+        this._camera = null;
+        this._renderer = null;
+    }
+}
 
 /**
  * Do magic to connect encantar.js to three.js
- * @param {() => Promise<Session> | SpeedyPromise<Session>} startARSession
- * @param {(ar: ARSystem, deltaSeconds?: number) => void} [animateVirtualScene] animation callback
- * @param {(ar: ARSystem) => void | Promise<void> | SpeedyPromise<Session>} [initializeVirtualScene] initialization callback
- * @returns {Promise<ARSystem> | SpeedyPromise<ARSystem>}
+ * @param {ARScene} scene
+ * @returns {Promise<ARPluginSystem> | SpeedyPromise<ARPluginSystem>}
  */
-function encantar(startARSession, animateVirtualScene, initializeVirtualScene)
+function encantar(scene)
 {
-    const ar = /** @type {ARSystem} */ ({
-        session: null,
-        frame: null,
-        referenceImage: null,
-        scene: null,
-        root: null,
-        camera: null,
-        renderer: null,
-    });
+    const ar = new ARPluginSystem();
 
     function mix(frame)
     {
-        ar.root.visible = false;
-        ar.referenceImage = null;
+        ar._root.visible = false;
 
         for(const result of frame.results) {
             if(result.tracker.type == 'image-tracker') {
@@ -54,10 +156,10 @@ function encantar(startARSession, animateVirtualScene, initializeVirtualScene)
                     const viewMatrixInverse = result.viewer.pose.transform.matrix;
                     const modelMatrix = trackable.pose.transform.matrix;
 
-                    ar.root.visible = true;
-                    ar.referenceImage = trackable.referenceImage;
-
                     align(projectionMatrix, viewMatrixInverse, modelMatrix);
+                    ar._root.visible = true;
+
+                    return;
                 }
             }
         }
@@ -65,64 +167,59 @@ function encantar(startARSession, animateVirtualScene, initializeVirtualScene)
 
     function align(projectionMatrix, viewMatrixInverse, modelMatrix)
     {
-        ar.camera.projectionMatrix.fromArray(projectionMatrix.read());
-        ar.camera.projectionMatrixInverse.copy(ar.camera.projectionMatrix).invert();
-        ar.camera.matrix.fromArray(viewMatrixInverse.read());
-        ar.camera.updateMatrixWorld(true);
-        ar.root.matrix.fromArray(modelMatrix.read());
-        ar.root.updateMatrixWorld(true);
+        ar._camera.projectionMatrix.fromArray(projectionMatrix.read());
+        ar._camera.projectionMatrixInverse.copy(ar._camera.projectionMatrix).invert();
+        ar._camera.matrix.fromArray(viewMatrixInverse.read());
+        ar._camera.updateMatrixWorld(true);
+        ar._origin.matrix.fromArray(modelMatrix.read());
+        ar._origin.updateMatrixWorld(true);
     }
 
     function animate(time, frame)
     {
-        ar.frame = frame;
-        mix(ar.frame);
+        ar._frame = frame;
+        mix(frame);
 
-        animateVirtualScene.call(undefined, ar, ar.session.time.delta);
+        scene.update(ar);
 
-        ar.renderer.render(ar.scene, ar.camera);
-        ar.session.requestAnimationFrame(animate);
+        ar._renderer.render(ar._scene, ar._camera);
+        ar._session.requestAnimationFrame(animate);
     }
 
+    return scene.startSession().then(session => {
 
+        ar._session = session;
 
+        ar._scene = new THREE.Scene();
 
-    if(typeof animateVirtualScene !== 'function')
-        animateVirtualScene = (ar => void 0);
-
-    if(typeof initializeVirtualScene !== 'function')
-        initializeVirtualScene = (ar => void 0);
-
-    return startARSession().then(session => {
+        ar._origin = new THREE.Group();
+        ar._origin.matrixAutoUpdate = false;
+        ar._scene.add(ar._origin);
 
-        ar.session = session;
+        ar._root = new THREE.Group();
+        ar._origin.add(ar._root);
 
-        ar.scene = new THREE.Scene();
-        ar.camera = new THREE.PerspectiveCamera();
-        ar.camera.matrixAutoUpdate = false;
+        ar._camera = new THREE.PerspectiveCamera();
+        ar._camera.matrixAutoUpdate = false;
 
-        ar.root = new THREE.Group();
-        ar.root.matrixAutoUpdate = false;
-        ar.scene.add(ar.root);
-
-        ar.renderer = new THREE.WebGLRenderer({
-            canvas: ar.session.viewport.canvas,
+        ar._renderer = new THREE.WebGLRenderer({
+            canvas: session.viewport.canvas,
             alpha: true,
         });
 
-        ar.session.addEventListener('end', event => {
-            ar.root.visible = false;
-            ar.frame = null;
-            ar.referenceImage = null;
+        session.addEventListener('end', event => {
+            ar._root.visible = false;
+            scene.release(ar);
+            ar._frame = null;
         });
 
-        ar.session.viewport.addEventListener('resize', event => {
-            const size = ar.session.viewport.virtualSize;
-            ar.renderer.setPixelRatio(1.0);
-            ar.renderer.setSize(size.width, size.height, false);
+        session.viewport.addEventListener('resize', event => {
+            const size = session.viewport.virtualSize;
+            ar._renderer.setPixelRatio(1.0);
+            ar._renderer.setSize(size.width, size.height, false);
         });
 
-        let init = initializeVirtualScene.call(undefined, ar);
+        let init = scene.init(ar);
         if(!(typeof init === 'object' && 'then' in init))
             init = Promise.resolve();
 
@@ -135,7 +232,7 @@ function encantar(startARSession, animateVirtualScene, initializeVirtualScene)
         
         console.error(error);
         alert(error.message);
-        return ar;
+        throw error;
    
     });
 }
@@ -157,4 +254,4 @@ function __THIS_PLUGIN_HAS_BEEN_TESTED_WITH__(json)
             alert(e.message);
         }
     });
-}
+}