From eefaa1fbce48666335459c9d91e16005dda9fdda Mon Sep 17 00:00:00 2001 From: -=yb4f310 Date: Fri, 11 May 2018 12:51:30 +0200 Subject: [PATCH] migration to jsartoolkit5 --- src/r3-api-ar.js | 27 +++-- src/r3-ar.js | 208 +++++++++++++++++++++++++++--------- src/r3-augmented-runtime.js | 2 +- src/r3-d3-scene.js | 17 ++- src/r3-system-render.js | 40 +++++-- 5 files changed, 223 insertions(+), 71 deletions(-) diff --git a/src/r3-api-ar.js b/src/r3-api-ar.js index 98c03d3..8fc3f94 100644 --- a/src/r3-api-ar.js +++ b/src/r3-api-ar.js @@ -8,8 +8,8 @@ * @param pathMarker * @param scene * @param camera - * @param renderer - * @param markerRoot + * @param videoScene + * @param videoCamera * @constructor */ R3.API.AR = function( @@ -21,8 +21,8 @@ R3.API.AR = function( pathMarker, scene, camera, - renderer, - markerRoot + videoScene, + 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)) { - renderer = null; + if (R3.Utils.UndefinedOrNull(videoScene)) { + videoScene = new R3.D3.API.Scene( + null, + 'Scene - AR Video' + ); } - this.renderer = renderer; + this.videoScene = videoScene; - if (R3.Utils.UndefinedOrNull(markerRoot)) { - markerRoot = null; + if (R3.Utils.UndefinedOrNull(videoCamera)) { + videoCamera = new R3.D3.API.Camera.Orthographic( + { + name : 'Camera Orthgraphic - AR Video' + } + ); } - this.markerRoot = markerRoot; + this.videoCamera = videoCamera; R3.API.Component.call( this, diff --git a/src/r3-ar.js b/src/r3-ar.js index 9b2f60f..be089d9 100644 --- a/src/r3-ar.js +++ b/src/r3-ar.js @@ -25,9 +25,8 @@ R3.AR = function( apiAR.pathMarker, apiAR.scene, apiAR.camera, - apiAR.renderer, - apiAR.markerRoot, - apiAR.renderConfiguration + apiAR.videoScene, + apiAR.videoCamera ); if ( @@ -39,11 +38,35 @@ R3.AR = function( } if ( - R3.Utils.Defined(this.markerRoot) && - R3.Utils.Defined(this.markerRoot.componentType) && - !(this.markerRoot instanceof R3.D3.Object) + R3.Utils.Defined(this.scene) && + R3.Utils.Defined(this.scene.componentType) && + !(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, - 'markerRoot' : R3.D3.Object + 'videoScene' : R3.D3.Scene, + '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; - - 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); + markerRoot.add(this.scene.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.camera) { - this.controls = new THREEx.ArMarkerControls( - this.arToolkitContext, - this.camera.instance, - { - type: 'pattern', - patternUrl: this.pathMarker, - changeMatrixMode: 'cameraTransformMatrix' - } - ); - } - } + // + // if (this.augmented.augmentedType === R3.AugmentedRuntime.AR_JS) { + // + // if (this.camera) { + // this.controls = new THREEx.ArMarkerControls( + // this.arToolkitContext, + // this.camera.instance, + // { + // type: 'pattern', + // patternUrl: this.pathMarker, + // changeMatrixMode: 'cameraTransformMatrix' + // } + // ); + // } + // } return; } - if (property === 'renderer') { - console.warn('todo: update camera'); + if (property === 'videoScene') { + console.warn('todo: update videoScene'); return; } - if (property === 'markerRoot') { - console.warn('todo: update markerRoot'); + if (property === 'videoCamera') { + 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.markerRoot) + R3.Utils.IdOrNull(this.videoScene), + R3.Utils.IdOrNull(this.videoCamera) ); }; diff --git a/src/r3-augmented-runtime.js b/src/r3-augmented-runtime.js index 2f11bd8..0a44c62 100644 --- a/src/r3-augmented-runtime.js +++ b/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; diff --git a/src/r3-d3-scene.js b/src/r3-d3-scene.js index cb798eb..e97a611 100644 --- a/src/r3-d3-scene.js +++ b/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; diff --git a/src/r3-system-render.js b/src/r3-system-render.js index d0f2aae..f7270fb 100644 --- a/src/r3-system-render.js +++ b/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) { - arComponent.beforeRender(); - renderer.instance.render( scene.instance, camera.instance); - } else { - renderer.render(scene, camera); - } + 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