diff --git a/TODO.md b/TODO.md index bac9361bbba58ea5d8b321a7a527003ddbce2e33..9d07ea3e06d175be5962d87d86c16865612edbbd 100644 --- a/TODO.md +++ b/TODO.md @@ -1,18 +1,29 @@ ## New API - aframe -- TODO put the UI in the plugin - - do a special function for it, and call this function from javascript - - or more like a data in the system -- remove arSession.onResize2() - thus the API is cleaner - - do a onResize with a test on argument.length - if not good number call old stuff + +- honor marker preset - artoolkit modelViewMatrix/cameraTransformMatrix works + - area-artoolkit fails in cameraTransformMatrix + - wtf ??? so issue upstream ? how to reproduce in three.js + - aruco got perspective issue - likely camera init -- tango video fails - - TODO initialize it and display it + +- tango video fails + - 4TODO initialize it and display it - how to by pass the renderer from a-frame + - some post processing in aframe.js - https://github.com/wizgrav/aframe-effects/blob/master/systems/effects.js + - it seems to override renderer.render by its own function... not super clean but if it works ok + - it can be changed later + - tango tracking is working ? i think so - - test in both mode + - test in both mode + +- DONE remove arSession.onResize2() - thus the API is cleaner + - do a onResize with a test on argument.length - if not good number call old stuff +- DONE put the UI in the plugin + - do a special function for it, and call this function from javascript + - or more like a data in the system ## New API diff --git a/aframe/aframe-ar-session.js b/aframe/aframe-ar-session.js index e0dd5382247d2dfa9cf0e4cb360a4fa4fcbe1133..04857b0b24de20b6a591350ef53f4577a97da71e 100644 --- a/aframe/aframe-ar-session.js +++ b/aframe/aframe-ar-session.js @@ -138,11 +138,13 @@ AFRAME.registerSystem('arjs', { this._arSession = null _this.initialised = false + _this.needsOverride = true + + // wait until the renderer is initialised this.el.sceneEl.addEventListener('renderstart', function(){ - var sceneEl = _this.el.sceneEl - var scene = sceneEl.object3D - var camera = sceneEl.camera - var renderer = sceneEl.renderer + var scene = _this.el.sceneEl.object3D + var camera = _this.el.sceneEl.camera + var renderer = _this.el.sceneEl.renderer ////////////////////////////////////////////////////////////////////////////// // build ARjs.Session @@ -155,21 +157,6 @@ AFRAME.registerSystem('arjs', { contextParameters: arProfile.contextParameters }) - // KLUDGE - window.addEventListener('resize', onResize) - function onResize(){ - var arSource = _this._arSession.arSource - // ugly kludge to get resize on aframe... not even sure it works - arSource.copyElementSizeTo(document.body) - - var buttonElement = document.querySelector('.a-enter-vr') - if( buttonElement ){ - buttonElement.style.position = 'fixed' - } - } - - _this.initialised = true - ////////////////////////////////////////////////////////////////////////////// // tango specifics ////////////////////////////////////////////////////////////////////////////// @@ -182,6 +169,44 @@ AFRAME.registerSystem('arjs', { // init tangoPointCloud var tangoPointCloud = _this._tangoPointCloud = new ARjs.TangoPointCloud(arSession) scene.add(tangoPointCloud.object3d) + + // override renderer.render + var rendererRenderFct = renderer.render; + renderer.render = function customRender(scene, camera, renderTarget, forceClear) { + renderer.autoClear = false; + + // clear it all + renderer.clear() + // render tangoVideoMesh + if( arProfile.contextParameters.trackingBackend === 'tango' ){ + // render sceneOrtho + rendererRenderFct.call(renderer, tangoVideoMesh._sceneOrtho, tangoVideoMesh._cameraOrtho, renderTarget, forceClear) + // Render the perspective scene + renderer.clearDepth() + } + + // render 3d scene + rendererRenderFct.call(renderer, scene, camera, renderTarget, forceClear); + } + + } + + _this.initialised = true + + ////////////////////////////////////////////////////////////////////////////// + // awefull resize trick + ////////////////////////////////////////////////////////////////////////////// + // KLUDGE + window.addEventListener('resize', onResize) + function onResize(){ + var arSource = _this._arSession.arSource + // ugly kludge to get resize on aframe... not even sure it works + arSource.copyElementSizeTo(document.body) + + var buttonElement = document.querySelector('.a-enter-vr') + if( buttonElement ){ + buttonElement.style.position = 'fixed' + } } @@ -218,27 +243,28 @@ AFRAME.registerSystem('arjs', { // onResize() window.dispatchEvent(new Event('resize')); }, 1000/30) + + }, tick : function(now, delta){ var _this = this + // skip it if not yet isInitialised if( this.initialised === false ) return - var arSession = this._arSession + + + // update arSession this._arSession.update() if( _this._tangoVideoMesh !== null ) _this._tangoVideoMesh.update() // copy projection matrix to camera - // TODO just call a this._arSession.onResize() - var camera = this.el.sceneEl.camera - var renderer = this.el.sceneEl.renderer - var arContext = this._arSession.arContext - this._arSession.arSource.onResize2(arContext, renderer, camera) + this._arSession.onResize() }, }) @@ -293,12 +319,15 @@ AFRAME.registerComponent('arjsmarker', { _this.initialised = false _this._arAnchor = null + // honor object visibility if( _this.data.changeMatrixMode === 'modelViewMatrix' ){ _this.el.object3D.visible = false }else if( _this.data.changeMatrixMode === 'cameraTransformMatrix' ){ _this.el.sceneEl.object3D.visible = false }else console.assert(false) + + // trick to wait until arjsSystem is initialised var startedAt = Date.now() var timerId = setInterval(function(){ @@ -316,6 +345,22 @@ AFRAME.registerComponent('arjsmarker', { arProfile.changeMatrixMode(_this.data.changeMatrixMode) var arProfile = arjsSystem._arProfile + + // honor this.data.preset + if( _this.data.preset === 'hiro' ){ + arProfile.defaultMarkerParameters.type = 'pattern' + arProfile.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt' + arProfile.defaultMarkerParameters.markersAreaEnabled = false + }else if( _this.data.preset === 'kanji' ){ + arProfile.defaultMarkerParameters.type = 'pattern' + arProfile.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt' + arProfile.defaultMarkerParameters.markersAreaEnabled = false + }else if( _this.data.preset === 'area' ){ + arProfile.defaultMarkerParameters.markersAreaEnabled = true + }else { + // console.assert( this.data.preset === '', 'illegal preset value '+this.data.preset) + } + var arSession = arjsSystem._arSession var arAnchor = _this._arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters) diff --git a/aframe/examples/aframe-session.html b/aframe/examples/aframe-session.html index 976016ac722bfea911e70ee39bfff0d0e07cb2b8..fbe709d6167d21e8ed99bb22b8e06c31cb0f7611 100644 --- a/aframe/examples/aframe-session.html +++ b/aframe/examples/aframe-session.html @@ -36,7 +36,7 @@ - +
AR.js - tango example for a-frame by @jerome_etienne
@@ -62,17 +62,17 @@
- + - @@ -82,9 +82,16 @@ --> - + + + + + + + diff --git a/three.js/examples/arjs-session.html b/three.js/examples/arjs-session.html index 71646e63f2ae9c6c99775e557f14f412389da709..5f7812268888449c65fd46b5b137a9ce5bc0f186 100644 --- a/three.js/examples/arjs-session.html +++ b/three.js/examples/arjs-session.html @@ -60,6 +60,7 @@ / best
+ toggle-point-cloud toggle-marker-helper Learn-new-marker-area Reset-marker-area diff --git a/three.js/examples/trackingbackend-switch.html b/three.js/examples/trackingbackend-switch.html index 964a4d91ca13f61e5d7d16eeec0cad22dbc52867..5ecc01ce2d1b40b4e88a37b48b86fc8252c1f846 100644 --- a/three.js/examples/trackingbackend-switch.html +++ b/three.js/examples/trackingbackend-switch.html @@ -115,12 +115,12 @@ var arToolkitSource = new THREEx.ArToolkitSource(arProfile.sourceParameters) arToolkitSource.init(function onReady(){ - arToolkitSource.onResize2(arContext, renderer, camera) + arToolkitSource.onResize(arContext, renderer, camera) }) // handle resize window.addEventListener('resize', function(){ - arToolkitSource.onResize2(arContext, renderer, camera) + arToolkitSource.onResize(arContext, renderer, camera) }) //////////////////////////////////////////////////////////////////////////////// @@ -134,7 +134,7 @@ arContext.init() arContext.addEventListener('initialized', function(event){ - arToolkitSource.onResize2(arContext, renderer, camera) + arToolkitSource.onResize(arContext, renderer, camera) }) // update artoolkit on every frame diff --git a/three.js/src/newAPI/arjs-anchor.js b/three.js/src/newAPI/arjs-anchor.js index 6283be2c57b00c2688e6ad72856e0613d1f547ed..a403a4b2391359ff95c09338b61f3ce94b5c93a9 100644 --- a/three.js/src/newAPI/arjs-anchor.js +++ b/three.js/src/newAPI/arjs-anchor.js @@ -18,9 +18,7 @@ ARjs.Anchor = function(arSession, markerParameters){ this.parameters = markerParameters - console.log('ARjs.Anchor -', 'changeMatrixMode:', this.parameters.changeMatrixMode - , 'trackingMethod:', (markerParameters.markersAreaEnabled ? 'area-' : '')+arContext.parameters.trackingBackend) - + console.log('ARjs.Anchor -', 'changeMatrixMode:', this.parameters.changeMatrixMode, 'markersAreaEnabled:', markerParameters.markersAreaEnabled) var markerRoot = new THREE.Group scene.add(markerRoot) @@ -34,6 +32,13 @@ ARjs.Anchor = function(arSession, markerParameters){ if( markerParameters.markersAreaEnabled === false ){ var markerControls = new THREEx.ArMarkerControls(arContext, controlledObject, markerParameters) }else{ + // sanity check + console.assert( arContext.parameters.trackingBackend === 'artoolkit' || arContext.parameters.trackingBackend === 'aruco' ) + // for multi marker + if( localStorage.getItem('ARjsMultiMarkerFile') === null ){ + THREEx.ArMultiMarkerUtils.storeDefaultMultiMarkerFile(arContext.parameters.trackingBackend) + } + // get multiMarkerFile from localStorage console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null ) var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile') @@ -65,7 +70,6 @@ ARjs.Anchor = function(arSession, markerParameters){ // THREEx.ArSmoothedControls ////////////////////////////////////////////////////////////////////////////// - // TODO should be part of trackingMethod parsing var shouldBeSmoothed = true if( arContext.parameters.trackingBackend === 'tango' ) shouldBeSmoothed = false diff --git a/three.js/src/newAPI/arjs-session.js b/three.js/src/newAPI/arjs-session.js index 0a486635adae3783bfd0ed068d89f92a5cdfe2e6..01519567da7ffaa18c193a8dfd6bfb203df2ba3a 100644 --- a/three.js/src/newAPI/arjs-session.js +++ b/three.js/src/newAPI/arjs-session.js @@ -14,11 +14,6 @@ ARjs.Session = function(parameters){ // log the version console.log('AR.js', THREEx.ArToolkitContext.REVISION, '- trackingBackend:', parameters.contextParameters.trackingBackend) - - // for multi marker - if( localStorage.getItem('ARjsMultiMarkerFile') === null && parameters.contextParameters.trackingBackend !== 'tango' ){ - THREEx.ArMultiMarkerUtils.storeDefaultMultiMarkerFile(parameters.contextParameters.trackingBackend) - } ////////////////////////////////////////////////////////////////////////////// // init arSource @@ -26,12 +21,12 @@ ARjs.Session = function(parameters){ var arSource = _this.arSource = new THREEx.ArToolkitSource(parameters.sourceParameters) arSource.init(function onReady(){ - arSource.onResize2(arContext, _this.renderer, _this.camera) + arSource.onResize(arContext, _this.renderer, _this.camera) }) // handle resize window.addEventListener('resize', function(){ - arSource.onResize2(arContext, _this.renderer, _this.camera) + arSource.onResize(arContext, _this.renderer, _this.camera) }) ////////////////////////////////////////////////////////////////////////////// @@ -45,10 +40,12 @@ ARjs.Session = function(parameters){ _this.arContext.init() arContext.addEventListener('initialized', function(event){ - arSource.onResize2(arContext, _this.renderer, _this.camera) + arSource.onResize(arContext, _this.renderer, _this.camera) }) - + ////////////////////////////////////////////////////////////////////////////// + // update function + ////////////////////////////////////////////////////////////////////////////// // update artoolkit on every frame this.update = function(){ if( arSource.ready === false ) return @@ -56,3 +53,7 @@ ARjs.Session = function(parameters){ arContext.update( arSource.domElement ) } } + +ARjs.Session.prototype.onResize = function () { + this.arSource.onResize(this.arContext, this.renderer, this.camera) +}; diff --git a/three.js/src/newAPI/arjs-tangovideomesh.js b/three.js/src/newAPI/arjs-tangovideomesh.js index 7a9c774b91ea3ff9bc7eaa7cb1924403c929b2c5..f39a466d6782df29552551ea46e217c01c03a797 100644 --- a/three.js/src/newAPI/arjs-tangovideomesh.js +++ b/three.js/src/newAPI/arjs-tangovideomesh.js @@ -11,6 +11,9 @@ ARjs.TangoVideoMesh = function(arSession){ // Create the see through camera scene and camera var sceneOrtho = new THREE.Scene() var cameraOrtho = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 100 ) +this._sceneOrtho = sceneOrtho +this._cameraOrtho = cameraOrtho + // tango only - init cameraMesh arContext.addEventListener('initialized', function(event){ // sanity check @@ -45,8 +48,6 @@ ARjs.TangoVideoMesh = function(arSession){ this.render = function(){ // sanity check console.assert( arContext.parameters.trackingBackend === 'tango' ) - // if not yet initialized, return now - if( videoMesh === null ) return // render sceneOrtho renderer.render( sceneOrtho, cameraOrtho ) // Render the perspective scene diff --git a/three.js/threex-artoolkitsource.js b/three.js/threex-artoolkitsource.js index 6aaf6a1fbf6c142070f3ce1da16a38e5c3e8d83d..85e28d6a80b7add45d6a078725a5e95a0ec9819a 100644 --- a/three.js/threex-artoolkitsource.js +++ b/three.js/threex-artoolkitsource.js @@ -323,17 +323,17 @@ THREEx.ArToolkitSource.prototype.copySizeTo = function(){ this.copyElementSizeTo.apply(this, arguments) } -THREEx.ArToolkitSource.prototype.onResize = function(){ - console.warn('obsolete function arToolkitSource.onResize. Use arToolkitSource.onResizeElement' ) - this.onResizeElement.apply(this, arguments) -} - ////////////////////////////////////////////////////////////////////////////// // Code Separator ////////////////////////////////////////////////////////////////////////////// -THREEx.ArToolkitSource.prototype.onResize2 = function(arToolkitContext, renderer, camera){ +THREEx.ArToolkitSource.prototype.onResize = function(arToolkitContext, renderer, camera){ var trackingBackend = arToolkitContext.parameters.trackingBackend + + if( arguments.length !== 3 ){ + console.warn('obsolete function arToolkitSource.onResize. Use arToolkitSource.onResizeElement' ) + return this.onResizeElement.apply(this, arguments) + } // RESIZE DOMELEMENT if( trackingBackend === 'artoolkit' ){