more work

TODO.md

 ## 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
 

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)

aframe/examples/aframe-session.html

@@ -36,7 +36,7 @@
 
 <script>THREEx.ArToolkitContext.baseURL = '../../three.js/'</script>
 
-<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
+<body style='margin : 0px; overflow: hidden; font-family: Monospace; background-color: black;'>
 	<div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
 		<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - tango example for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
 		<br/>
@@ -62,17 +62,17 @@
 	</div>
 
 	<!-- artoolkit modelViewMatrix : OK -->
-	<a-scene embedded arjs='trackingMethod: artoolkit; debugUIEnabled: true;'>
+	<!-- <a-scene embedded arjs='trackingMethod: area-artoolkit; debugUIEnabled: true;'>
 		<a-marker>
 			<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'></a-box>
 		</a-marker>
-		<a-entity camera></a-entity>	
-	</a-scene>
+		<a-entity camera></a-entity>
+	</a-scene> -->
 
 	<!-- artoolkit cameraTransformMatrix : OK -->
-	<!-- <a-scene embedded arjs='trackingMethod: artoolkit; debugUIEnabled: true;'>
+	<!-- <a-scene embedded arjs='trackingMethod: area-artoolkit; debugUIEnabled: true;'>
 		<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'></a-box>
-		<a-marker-camera preset='area'></a-marker-camera>
+		<a-marker-camera preset='hiro'></a-marker-camera>
 	</a-scene> -->
 
 	<!-- artoolkit cameraTransformMatrix : FAILS -->
@@ -82,9 +82,16 @@
 	</a-scene> -->
 
 	<!-- tango cameraTransformMatrix : OK -->
-	<!-- <a-scene embedded arjs='trackingMethod: best'>
+	<!-- <a-scene embedded arjs='trackingMethod: tango'>
 		<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'></a-box>
 		<a-marker-camera></a-marker-camera>
 	</a-scene> -->
+
+	<a-scene embedded arjs='trackingMethod: tango'>
+		<a-marker>
+			<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'></a-box>
+		</a-marker>
+		<a-entity camera></a-entity>
+	</a-scene>
 </body>
 </html>

three.js/examples/arjs-session.html

@@ -60,6 +60,7 @@
 	/ 
 	<a href='#best' onclick='location.reload()'>best</a>
 	<br/>
+	<a href='javascript:void(0)' id='buttonTangoTogglePointCloud'>toggle-point-cloud</a>
 	<a href='javascript:void(0)' id='buttonToggleMarkerHelpers'>toggle-marker-helper</a>
 	<a href='javascript:void(0)' id='buttonMarkersAreaLearner'>Learn-new-marker-area</a>
 	<a href='javascript:void(0)' id='buttonMarkersAreaReset'>Reset-marker-area</a>

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

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 
 

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)	
+};

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

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' ){