migration to jsartoolkit5

src/r3-api-ar.js

@@ -8,8 +8,8 @@
  * @param pathMarker
  * @param scene
  * @param camera
- * @param renderer
+ * @param videoScene
- * @param markerRoot
+ * @param videoCamera
  * @constructor
  */
 R3.API.AR = function(
@@ -21,8 +21,8 @@ R3.API.AR = function(
     pathMarker,
     scene,
     camera,
-    renderer,
+    videoScene,
-    markerRoot
+    videoCamera
 ) {
     if (R3.Utils.UndefinedOrNull(id)) {
         id = R3.Utils.RandomId();
@@ -59,15 +59,22 @@ R3.API.AR = function(
     }
     this.camera = camera;
 
-    if (R3.Utils.UndefinedOrNull(renderer)) {
+    if (R3.Utils.UndefinedOrNull(videoScene)) {
-        renderer = null;
+        videoScene = new R3.D3.API.Scene(
+            null,
+            'Scene - AR Video'
+        );
     }
-    this.renderer = renderer;
+    this.videoScene = videoScene;
 
-    if (R3.Utils.UndefinedOrNull(markerRoot)) {
+    if (R3.Utils.UndefinedOrNull(videoCamera)) {
-        markerRoot = null;
+        videoCamera = new R3.D3.API.Camera.Orthographic(
+            {
+                name : 'Camera Orthgraphic - AR Video'
+            }
+        );
     }
-    this.markerRoot = markerRoot;
+    this.videoCamera = videoCamera;
 
     R3.API.Component.call(
         this,

src/r3-ar.js

@@ -25,9 +25,8 @@ R3.AR = function(
 		apiAR.pathMarker,
         apiAR.scene,
         apiAR.camera,
-        apiAR.renderer,
+        apiAR.videoScene,
-        apiAR.markerRoot,
+        apiAR.videoCamera
-        apiAR.renderConfiguration
     );
 
     if (
@@ -39,11 +38,35 @@ R3.AR = function(
     }
 
     if (
-        R3.Utils.Defined(this.markerRoot) &&
+        R3.Utils.Defined(this.scene) &&
-        R3.Utils.Defined(this.markerRoot.componentType) &&
+        R3.Utils.Defined(this.scene.componentType) &&
-        !(this.markerRoot instanceof R3.D3.Object)
+        !(this.scene instanceof R3.D3.Scene)
     ) {
-        this.markerRoot = R3.Component.ConstructFromObject(this.markerRoot);
+        this.scene = R3.Component.ConstructFromObject(this.scene);
+    }
+
+    if (
+        R3.Utils.Defined(this.camera) &&
+        R3.Utils.Defined(this.camera.componentType) &&
+        !(this.camera instanceof R3.D3.Camera.Orthographic)
+    ) {
+        this.camera = R3.Component.ConstructFromObject(this.camera);
+    }
+
+    if (
+        R3.Utils.Defined(this.videoScene) &&
+        R3.Utils.Defined(this.videoScene.componentType) &&
+        !(this.videoScene instanceof R3.D3.Scene)
+    ) {
+        this.videoScene = R3.Component.ConstructFromObject(this.videoScene);
+    }
+
+    if (
+        R3.Utils.Defined(this.videoCamera) &&
+        R3.Utils.Defined(this.videoCamera.componentType) &&
+        !(this.videoCamera instanceof R3.D3.Camera.Orthographic)
+    ) {
+        this.videoCamera = R3.Component.ConstructFromObject(this.videoCamera);
     }
 
     R3.Component.call(
@@ -52,8 +75,8 @@ R3.AR = function(
             'video' : R3.Video,
             'scene' : R3.D3.Scene,
             'camera' : R3.D3.Camera,
-            'renderer' : R3.D3.Renderer,
+            'videoScene' : R3.D3.Scene,
-            'markerRoot' : R3.D3.Object
+            'videoCamera' : R3.D3.Camera
         }
     );
 
@@ -68,6 +91,81 @@ R3.AR.prototype.constructor = R3.AR;
  */
 R3.AR.prototype.createInstance = function() {
 
+    ARController.prototype.setupThree = function(arComponent) {
+
+        return function() {
+
+            if (this.THREE_JS_ENABLED) {
+                return;
+            }
+
+            this.THREE_JS_ENABLED = true;
+
+            /*
+                Listen to getMarker events to keep track of Three.js markers.
+            */
+            this.addEventListener(
+                'getMarker',
+                function (event) {
+
+                    if (event.data.type === artoolkit.PATTERN_MARKER) {
+
+                        console.log('found marker');
+
+                        /**
+                         * We want to update the camera
+                         */
+                        var modelViewMatrix = new THREE.Matrix4().fromArray(event.data.matrix);
+
+                        /**
+                         * Apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
+                         */
+                        var tmpMatrix = new THREE.Matrix4().copy(this._artoolkitProjectionAxisTransformMatrix);
+
+                        tmpMatrix.multiply(modelViewMatrix);
+
+                        modelViewMatrix.copy(tmpMatrix);
+
+                        /**
+                         * Change axis orientation on marker - artoolkit say Z is normal to the marker - ar.js say Y is normal to the marker
+                         */
+                        var markerAxisTransformMatrix = new THREE.Matrix4().makeRotationX(Math.PI / 2);
+                        modelViewMatrix.multiply(markerAxisTransformMatrix);
+
+                        arComponent.camera.instance.matrix.getInverse(modelViewMatrix);
+
+                        /**
+                         * Decompose - the matrix into .position, .quaternion, .scale
+                         */
+                        arComponent.camera.instance.matrix.decompose(
+                            arComponent.camera.instance.position,
+                            arComponent.camera.instance.quaternion,
+                            arComponent.camera.instance.scale
+                        );
+
+                        // get projectionMatrixArr from artoolkit
+                        var projectionMatrixArr = this.camera_mat;
+
+                        var projectionMatrix = new THREE.Matrix4().fromArray(projectionMatrixArr);
+
+                        // apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
+                        projectionMatrix.multiply(this._artoolkitProjectionAxisTransformMatrix);
+
+                        arComponent.camera.instance.projectionMatrix.copy(projectionMatrix);
+
+                    }
+
+                }
+            );
+
+            this.threePatternMarkers = {};
+
+            this._artoolkitProjectionAxisTransformMatrix = new THREE.Matrix4();
+            this._artoolkitProjectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI));
+            this._artoolkitProjectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationZ(Math.PI));
+        }
+    }(this);
+
     R3.Event.Emit(
         R3.Event.GET_RENDER_CONFIGURATION,
         null,
@@ -105,15 +203,39 @@ R3.AR.prototype.createInstance = function() {
         ARController.getUserMediaThreeScene(
             {
                 maxARVideoSize: 320,
-                cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat',
+                cameraParam: this.pathCamera,
 
                 onSuccess: function (arScene,
                                      arController,
                                      arCamera) {
 
-                    arScene.scene = this.scene.instance;
+                    R3.Event.Emit(
+                        R3.Event.GET_RENDER_CONFIGURATION,
+                        null,
+                        function(renderConfiguration) {
 
-                    arScene.camera = this.camera.instance;
+                            this.videoCamera.instance = arScene.videoCamera;
+
+                            this.videoScene.instance = arScene.videoScene;
+
+                            this.videoScene.camera = this.videoCamera;
+
+                            /**
+                             * Also update the video texture before render
+                             */
+                            this.subscribe(
+                                R3.Event.BEFORE_RENDER,
+                                function() {
+                                    arScene.videoScene.children[0].material.map.needsUpdate = true;
+                                }
+                            );
+
+                            if (renderConfiguration.activeScenes.indexOf(this.videoScene) === -1) {
+                                renderConfiguration.activeScenes.unshift(this.videoScene);
+                            }
+
+                        }.bind(this)
+                    );
 
                     arController.loadMarker(
                         this.pathMarker,
@@ -121,25 +243,7 @@ R3.AR.prototype.createInstance = function() {
 
                             var markerRoot = arController.createThreeMarker(markerId);
 
-                            this.markerRoot.instance = markerRoot;
+                            markerRoot.add(this.scene.instance);
-
-                            this.markerRoot.instance.markerMatrix = new Float64Array(12);
-
-                            // var cameraMatrix = arController.getCameraMatrix();
-                            // this.camera.instance.projectionMatrix.fromArray(cameraMatrix);
-
-                            var child = null;
-                            var c = arScene.scene.children.length - 1;
-
-                            for (c; c >= 0; c -= 1) {
-                                child = arScene.scene.children[c];
-                                markerRoot.add(child);
-                                arScene.scene.remove(child);
-                            }
-
-                            arScene.scene.add(markerRoot);
-
-                            //arScene.scene.add(this.camera.instance);
 
                             this.instance = {
                                 arScene: arScene,
@@ -275,32 +379,32 @@ R3.AR.prototype.updateInstance = function(property) {
 
     if (property === 'camera') {
         console.warn('todo: update camera');
-
+        //
-        if (this.augmented.augmentedType === R3.AugmentedRuntime.AR_JS) {
+        // if (this.augmented.augmentedType === R3.AugmentedRuntime.AR_JS) {
-
+        //
-            if (this.camera) {
+        //     if (this.camera) {
-                this.controls = new THREEx.ArMarkerControls(
+        //         this.controls = new THREEx.ArMarkerControls(
-                    this.arToolkitContext,
+        //             this.arToolkitContext,
-                    this.camera.instance,
+        //             this.camera.instance,
-                    {
+        //             {
-                        type: 'pattern',
+        //                 type: 'pattern',
-                        patternUrl: this.pathMarker,
+        //                 patternUrl: this.pathMarker,
-                        changeMatrixMode: 'cameraTransformMatrix'
+        //                 changeMatrixMode: 'cameraTransformMatrix'
-                    }
+        //             }
-                );
+        //         );
-            }
+        //     }
-        }
+        // }
 
         return;
     }
 
-    if (property === 'renderer') {
+    if (property === 'videoScene') {
-        console.warn('todo: update camera');
+        console.warn('todo: update videoScene');
         return;
     }
 
-    if (property === 'markerRoot') {
+    if (property === 'videoCamera') {
-        console.warn('todo: update markerRoot');
+        console.warn('todo: update videoCamera');
         return;
     }
 
@@ -322,8 +426,8 @@ R3.AR.prototype.toApiObject = function() {
         this.pathMarker,
         R3.Utils.IdOrNull(this.scene),
         R3.Utils.IdOrNull(this.camera),
-        R3.Utils.IdOrNull(this.renderer),
+        R3.Utils.IdOrNull(this.videoScene),
-        R3.Utils.IdOrNull(this.markerRoot)
+        R3.Utils.IdOrNull(this.videoCamera)
 	);
 };
 

src/r3-augmented-runtime.js

@@ -21,7 +21,7 @@ R3.AugmentedRuntime = function(
     this.name = name;
 
     if (R3.Utils.UndefinedOrNull(augmentedType)) {
-        augmentedType = R3.AugmentedRuntime.AR_JS;
+        augmentedType = R3.AugmentedRuntime.JS_AR_TOOLKIT_5;
     }
     this.augmentedType = augmentedType;
 

src/r3-d3-scene.js

@@ -7,7 +7,8 @@
  */
 R3.D3.Scene = function (
     graphics,
-    apiScene
+    apiScene,
+    instance
 ) {
     this.graphics = graphics;
     this.graphics.isNotThreeThrow();
@@ -106,6 +107,8 @@ R3.D3.Scene = function (
 
 	this.storeClones = false;
 
+	this.instance = instance;
+
     R3.Component.call(
         this,
         {
@@ -123,13 +126,23 @@ R3.D3.Scene = function (
 R3.D3.Scene.prototype = Object.create(R3.Component.prototype);
 R3.D3.Scene.prototype.constructor = R3.D3.Scene;
 
+R3.D3.Scene.prototype.constructFromInstance = function() {
+    this.loaded = true;
+    console.log('todo: - setup scene from instance');
+};
+
 /**
  * Creates an instance scene
  * @returns {THREE.Scene}
  */
 R3.D3.Scene.prototype.createInstance = function() {
 
-    this.instance = new THREE.Scene();
+    if (R3.Utils.UndefinedOrNull(this.instance)) {
+        this.instance = new THREE.Scene();
+    } else {
+        this.constructFromInstance();
+        return;
+    }
 
     this.instance.name = this.name;
 

src/r3-system-render.js

@@ -705,6 +705,23 @@ R3.System.Render.prototype.render = function(data) {
         arComponent = this.arComponents[0];
     }
 
+    if (arComponent) {
+        arComponent.instance.arScene.process();
+    }
+
+    var resetAutoClear = false;
+
+    if (scenes.length > 1) {
+
+        if (renderer.autoClear) {
+            resetAutoClear = true;
+        }
+
+        renderer.autoClear = false;
+        renderer.updateInstance('autoClear');
+        renderer.clear();
+    }
+
     var size = renderer.getSize();
 
     renderer.viewports.map(
@@ -756,6 +773,15 @@ R3.System.Render.prototype.render = function(data) {
 
                 function (scene) {
 
+                    var backupCamera = camera;
+
+                    /**
+                     * Scene camera overrides normal camera
+                     */
+                    if (scene.camera) {
+                        camera = scene.camera;
+                    }
+
                     if (renderer.renderMode === R3.API.Renderer.MODE_TARGET ||
                         renderer.renderMode === R3.API.Renderer.MODE_CANVAS_AND_TARGET) {
 
@@ -774,19 +800,21 @@ R3.System.Render.prototype.render = function(data) {
                             return;
                         }
 
-                        if (arComponent) {
+                        renderer.render(scene, camera);
-                            arComponent.beforeRender();
-                            renderer.instance.render( scene.instance, camera.instance);
-                        } else {
-                            renderer.render(scene, camera);
-                        }
                     }
 
+                    camera = backupCamera;
+
                 }.bind(this)
             );
         }.bind(this)
     );
 
+    if (resetAutoClear) {
+        renderer.autoClear = true;
+        renderer.updateInstance('autoClear');
+    }
+
     R3.Event.Emit(
         R3.Event.AFTER_RENDER,
         data