working on aframe tango

TODO.md

@@ -10,6 +10,11 @@
   - ```arglCameraFrustum(&((arc->paramLT)->param), arc->nearPlane, arc->farPlane, arc->cameraLens);```
   - this should be called in setNearPlane
 
+- do test with a special webrtc emulation layer
+  - so i can download video and/or image - better for testing
+- handle pwa stuff - useful for phone
+  - https://twitter.com/jerome_etienne/status/888008537984708608
+
 # aframe-ar.js new
 - there is a resize every 1/60 seconds ??
 - test on mobile

aframe/aframe-ar-new.js

+//////////////////////////////////////////////////////////////////////////////
+//		Code Separator
+//////////////////////////////////////////////////////////////////////////////
+
+// to keep backward compatibility with deprecated code
+// AFRAME.registerComponent('arjs', buildSystemParameter())
+// AFRAME.registerComponent('artoolkit', buildSystemParameter())
+
+// function buildSystemParameter(){ return {
+// AFRAME.registerSystem('arjs', {
+AFRAME.registerSystem('arjs', {
+	schema: {
+		trackingBackend : {
+			type: 'string',	
+			default: 'artoolkit',			
+		},
+		areaLearningButton : {
+			type: 'boolean',	
+			default: true,
+		},
+		performanceProfile : {
+			type: 'string',	
+			default: 'default',
+		},
+
+		// old parameters
+		debug : {
+			type: 'boolean',
+			default: false
+		},
+		detectionMode : {
+			type: 'string',
+			default: '',
+		},
+		matrixCodeType : {
+			type: 'string',
+			default: '',
+		},
+		cameraParametersUrl : {
+			type: 'string',
+			default: '',
+		},
+		maxDetectionRate : {
+			type: 'number',
+			default: -1
+		},
+		sourceType : {
+			type: 'string',
+			default: '',
+		},
+		sourceUrl : {
+			type: 'string',
+			default: '',
+		},
+		sourceWidth : {
+			type: 'number',
+			default: -1
+		},
+		sourceHeight : {
+			type: 'number',
+			default: -1
+		},
+		displayWidth : {
+			type: 'number',
+			default: -1
+		},
+		displayHeight : {
+			type: 'number',
+			default: -1
+		},
+		canvasWidth : {
+			type: 'number',
+			default: -1
+		},
+		canvasHeight : {
+			type: 'number',
+			default: -1
+		},
+	},
+	
+	//////////////////////////////////////////////////////////////////////////////
+	//		Code Separator
+	//////////////////////////////////////////////////////////////////////////////
+	
+	
+	init: function () {
+		var _this = this
+
+		// setup artoolkitProfile
+		var artoolkitProfile = new THREEx.ArToolkitProfile()
+		artoolkitProfile.sourceWebcam()
+		artoolkitProfile.trackingBackend(this.data.trackingBackend)
+		artoolkitProfile.performance(this.data.performanceProfile)
+
+		
+		//////////////////////////////////////////////////////////////////////////////
+		//		honor this.data
+		//////////////////////////////////////////////////////////////////////////////
+		
+		// honor this.data and push what has been modified into artoolkitProfile
+		if( this.data.debug !== false )			artoolkitProfile.contextParameters.debug = this.data.debug
+		if( this.data.detectionMode !== '' )		artoolkitProfile.contextParameters.detectionMode = this.data.detectionMode
+		if( this.data.matrixCodeType !== '' )		artoolkitProfile.contextParameters.matrixCodeType = this.data.matrixCodeType
+		if( this.data.cameraParametersUrl !== '' )	artoolkitProfile.contextParameters.cameraParametersUrl = this.data.cameraParametersUrl
+		if( this.data.maxDetectionRate !== -1 )		artoolkitProfile.contextParameters.maxDetectionRate = this.data.maxDetectionRate
+
+		if( this.data.sourceType !== '' )		artoolkitProfile.contextParameters.sourceType = this.data.sourceType
+		if( this.data.sourceUrl !== '' )		artoolkitProfile.contextParameters.sourceUrl = this.data.sourceUrl
+		if( this.data.sourceWidth !== -1 )		artoolkitProfile.contextParameters.sourceWidth = this.data.sourceWidth
+		if( this.data.sourceHeight !== -1 )		artoolkitProfile.contextParameters.sourceHeight = this.data.sourceHeight
+		if( this.data.displayWidth !== -1 )		artoolkitProfile.contextParameters.displayWidth = this.data.displayWidth
+		if( this.data.displayHeight !== -1 )		artoolkitProfile.contextParameters.displayHeight = this.data.displayHeight
+		if( this.data.canvasWidth !== -1 )		artoolkitProfile.contextParameters.canvasWidth = this.data.canvasWidth
+		if( this.data.canvasHeight !== -1 )		artoolkitProfile.contextParameters.canvasHeight = this.data.canvasHeight
+
+		////////////////////////////////////////////////////////////////////////////////
+		//          handle arToolkitSource
+		////////////////////////////////////////////////////////////////////////////////
+		
+		var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
+		this.arToolkitSource = arToolkitSource
+		arToolkitSource.init(function onReady(){
+			// handle resize of renderer
+			onResize()
+
+			// kludge to write a 'resize' event - use exponentialBackoff delay
+			var startedAt = Date.now()
+			var exponentialBackoffDelay = 1000/60
+			setTimeout(function callback(){
+				if( Date.now() - startedAt > 5*1000 )	return 					
+				// update delay
+				exponentialBackoffDelay *= 1.2;
+				exponentialBackoffDelay = Math.min(exponentialBackoffDelay, 1*1000)
+				setTimeout(callback, exponentialBackoffDelay)
+				// trigger a resize
+				window.dispatchEvent(new Event('resize'));
+				console.log('trigger a resize', exponentialBackoffDelay)
+			}, exponentialBackoffDelay)
+		})
+		
+		// handle resize
+		window.addEventListener('resize', onResize)
+		function onResize(){
+			// ugly kludge to get resize on aframe... not even sure it works
+			arToolkitSource.onResizeElement()		
+			arToolkitSource.copyElementSizeTo(document.body)
+			
+			var buttonElement = document.querySelector('.a-enter-vr')
+			if( buttonElement ){
+				buttonElement.style.position = 'fixed'
+			}
+		}
+		////////////////////////////////////////////////////////////////////////////////
+		//          initialize arToolkitContext
+		////////////////////////////////////////////////////////////////////////////////
+		// create atToolkitContext
+		var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
+		this.arToolkitContext = arToolkitContext
+		// initialize it
+		arToolkitContext.init(function onCompleted(){
+			// // copy projection matrix to camera
+			// var projectionMatrixArr = arToolkitContext.arController.getCameraMatrix();
+			// _this.sceneEl.camera.projectionMatrix.fromArray(projprojectionMatrixArrectionMatrix);
+		})
+		
+		//////////////////////////////////////////////////////////////////////////////
+		//		area learning
+		//////////////////////////////////////////////////////////////////////////////
+		
+		// export function to navigateToLearnerPage
+		this.navigateToLearnerPage = function(){
+			var learnerURL = THREEx.ArToolkitContext.baseURL + 'examples/multi-markers/examples/learner.html'
+			THREEx.ArMultiMarkerUtils.navigateToLearnerPage(learnerURL, _this.data.trackingBackend)
+		}
+
+		// export function to initAreaLearningButton
+		this.initAreaLearningButton = function(){
+			// honor arjsSystem.data.areaLearningButton
+			if( this.data.areaLearningButton === false )	return
+
+			// if there is already a button, do nothing
+			if( document.querySelector('#arjsAreaLearningButton') !== null )	return
+
+			// create the img
+			var imgElement = document.createElement('img')
+			imgElement.id = 'arjsAreaLearningButton'
+			imgElement.style.position = 'fixed'
+			imgElement.style.bottom = '16px'
+			imgElement.style.left = '16px'
+			imgElement.style.width = '48px'
+			imgElement.style.height = '48px'
+			imgElement.style.zIndex = 1
+			imgElement.src = THREEx.ArToolkitContext.baseURL + "examples/multi-markers/examples/images/record-start.png"
+			document.body.appendChild(imgElement)
+			imgElement.addEventListener('click', function(){
+				_this.navigateToLearnerPage()
+			})					
+		}
+		
+	},
+	
+	tick : function(now, delta){
+		if( this.arToolkitSource.ready === false )	return
+
+		// copy projection matrix to camera
+		if( this.arToolkitContext.arController !== null ){
+			this.el.sceneEl.camera.projectionMatrix.copy( this.arToolkitContext.getProjectionMatrix() );
+		}
+		
+		this.arToolkitContext.update( this.arToolkitSource.domElement )
+	},
+})
+
+
+//////////////////////////////////////////////////////////////////////////////
+//		arjsmarker
+//////////////////////////////////////////////////////////////////////////////
+AFRAME.registerComponent('arjsmarker', {
+	dependencies: ['arjs', 'artoolkit'],
+	schema: {
+		preset: {
+			type: 'string',
+		},
+		markerhelpers : {	// IIF preset === 'area'
+			type: 'boolean',
+			default: false,
+		},
+
+		// controls parameters
+		size: {
+			type: 'number',
+			default: 1
+		},
+		type: {
+			type: 'string',
+		},
+		patternUrl: {
+			type: 'string',
+		},
+		barcodeValue: {
+			type: 'number'
+		},
+		changeMatrixMode: {
+			type: 'string',
+			default : 'modelViewMatrix',
+		},
+		minConfidence: {
+			type: 'number',
+			default: 0.6,
+		},
+	},
+	init: function () {
+		var _this = this
+		// actually init arMarkerControls
+		var arjsSystem = this.el.sceneEl.systems.arjs || this.el.sceneEl.systems.artoolkit
+
+		var artoolkitContext = arjsSystem.arToolkitContext
+		var scene = this.el.sceneEl.object3D
+		
+		// honor this.data.preset
+		if( this.data.preset === 'hiro' ){
+			this.data.type = 'pattern'
+			this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
+		}else if( this.data.preset === 'kanji' ){
+			this.data.type = 'pattern'
+			this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
+		}else if( this.data.preset === 'area' ){
+			this.data.type = 'area'
+		}else {
+			console.assert( this.data.preset === '', 'illegal preset value '+this.data.preset)
+		}
+
+		// build a smoothedControls
+		this._markerRoot = new THREE.Group()
+		scene.add(this._markerRoot)
+
+		this._arMarkerControls = null
+		this._multiMarkerControls = null 
+
+		// create the controls
+		if( this.data.type === 'area' ){
+			// if no localStorage.ARjsMultiMarkerFile, then write one with default marker
+			if( localStorage.getItem('ARjsMultiMarkerFile') === null ){
+				THREEx.ArMultiMarkerUtils.storeDefaultMultiMarkerFile(arjsSystem.data.trackingBackend)
+			}
+			
+			// get multiMarkerFile from localStorage
+			console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null )
+			var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile')
+
+			// create ArMultiMarkerControls
+			this._multiMarkerControls = THREEx.ArMultiMarkerControls.fromJSON(artoolkitContext, scene, this._markerRoot, multiMarkerFile, {
+				changeMatrixMode : this.data.changeMatrixMode
+			})
+console.log('this.data.markerhelpers', this.data.markerhelpers)
+			// display THREEx.ArMarkerHelper if needed - useful to debug
+			if( this.data.markerhelpers === true ){
+				this._multiMarkerControls.subMarkersControls.forEach(function(subMarkerControls){
+					// add an helper to visuable each sub-marker
+					var markerHelper = new THREEx.ArMarkerHelper(subMarkerControls)
+					scene.add( markerHelper.object3d )	
+				})	
+			}
+		}else if( this.data.type === 'pattern' || this.data.type === 'barcode' || this.data.type === 'unknown' ){
+			this._arMarkerControls = new THREEx.ArMarkerControls(artoolkitContext, this._markerRoot, this.data)
+		}else 	console.assert(false)
+
+		// build a smoothedControls
+		this.arSmoothedControls = new THREEx.ArSmoothedControls(this.el.object3D)
+		
+		
+
+		// honor arjsSystem.data.areaLearningButton
+		if( this.data.type === 'area' )	arjsSystem.initAreaLearningButton()
+	},
+	remove : function(){
+		// this._arMarkerControls.dispose()
+	},
+	update: function () {
+		// FIXME this mean to change the recode in trackBarcodeMarkerId ?
+		// var markerRoot = this.el.object3D;
+		// markerRoot.userData.size = this.data.size;
+	},
+	tick: function(){
+		if( this.data.changeMatrixMode === 'cameraTransformMatrix' ){
+			this.el.sceneEl.object3D.visible = this.el.object3D.visible;
+		}
+		if( this._multiMarkerControls !== null ){
+			// update smoothedControls parameters depending on how many markers are visible in multiMarkerControls
+			this._multiMarkerControls.updateSmoothedControls(this.arSmoothedControls)			
+		}
+
+		// update smoothedControls position
+		this.arSmoothedControls.update(this._markerRoot)
+	}
+});
+
+//////////////////////////////////////////////////////////////////////////////
+//                define some primitives shortcuts
+//////////////////////////////////////////////////////////////////////////////
+
+AFRAME.registerPrimitive('a-marker', AFRAME.utils.extendDeep({}, AFRAME.primitives.getMeshMixin(), {
+	defaultComponents: {
+		'arjsmarker': {},
+	},
+	mappings: {
+		'type': 'arjsmarker.type',
+		'size': 'arjsmarker.size',
+		'url': 'arjsmarker.patternUrl',
+		'value': 'arjsmarker.barcodeValue',
+		'preset': 'arjsmarker.preset',
+		'minConfidence': 'arjsmarker.minConfidence',
+		'markerhelpers': 'arjsmarker.markerhelpers',
+	}
+}));
+
+AFRAME.registerPrimitive('a-marker-camera', AFRAME.utils.extendDeep({}, AFRAME.primitives.getMeshMixin(), {
+	defaultComponents: {
+		'arjsmarker': {
+			changeMatrixMode: 'cameraTransformMatrix'
+		},
+		'camera': true,
+	},
+	mappings: {
+		'type': 'arjsmarker.type',
+		'size': 'arjsmarker.size',
+		'url': 'arjsmarker.patternUrl',
+		'value': 'arjsmarker.barcodeValue',
+		'preset': 'arjsmarker.preset',
+		'minConfidence': 'arjsmarker.minConfidence',
+		'markerhelpers': 'arjsmarker.markerhelpers',
+	}
+}));

aframe/aframe-ar.js

@@ -123,7 +123,7 @@ AFRAME.registerSystem('arjs', {
 			// handle resize of renderer
 			onResize()
 			
-// TODO this is crappy
+// TODO this is crappy - code an exponential backoff - max 1 seconds
 			// kludge to write a 'resize' event
 			var startedAt = Date.now()
 			var timerId = setInterval(function(){
@@ -140,7 +140,8 @@ AFRAME.registerSystem('arjs', {
 		window.addEventListener('resize', onResize)
 		function onResize(){
 			// ugly kludge to get resize on aframe... not even sure it works
-			arToolkitSource.onResize(document.body)		
+			arToolkitSource.onResizeElement()		
+			arToolkitSource.copyElementSizeTo(document.body)
 			
 			var buttonElement = document.querySelector('.a-enter-vr')
 			if( buttonElement ){
@@ -263,7 +264,6 @@ AFRAME.registerComponent('arjsmarker', {
 			this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
 		}else if( this.data.preset === 'area' ){
 			this.data.type = 'area'
-			// fall through
 		}else {
 			console.assert( this.data.preset === '', 'illegal preset value '+this.data.preset)
 		}

aframe/examples/basic.html

@@ -16,7 +16,7 @@
 		<a-marker preset='hiro'>
 			<!-- define the object which gonna be put on this marker  -->
 			<a-box position='0 0.5 0' material='opacity: 0.5; side: double'>
-				<a-torus-knot radius='0.27' radius-tubular='0.05'>
+				<a-torus-knot radius='0.26' radius-tubular='0.05'>
 					<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
 				</a-torus-knot>
 			</a-box>

aframe/examples/minimal.html

@@ -2,7 +2,7 @@
 <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
 <script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
 <body style='margin : 0px; overflow: hidden;'>
-	<a-scene embedded artoolkit='sourceType: webcam;'>
+	<a-scene embedded arjs='sourceType: webcam;'>
 		<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
 		<a-marker-camera preset='hiro'></a-marker-camera>
 	</a-scene>

aframe/examples/mobile-performance.html

@@ -14,7 +14,7 @@
 
 		<!-- define the object which gonna be put on this marker  -->
 		<a-box position='0 0.5 0' material='opacity: 0.5; side: double'>
-			<a-torus-knot radius='0.27' radius-tubular='0.05'>
+			<a-torus-knot radius='0.26' radius-tubular='0.05'>
 				<a-animation attribute="rotation" to="360 0 0" dur="3000" easing='linear' repeat="indefinite"></a-animation>
 			</a-torus-knot>
 		</a-box>

aframe/examples/multiple-independent-markers.html

@@ -17,7 +17,7 @@
 		<!-- handle hiro marker -->
 		<a-marker preset='hiro'>
 			<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:red;'>
-				<a-torus-knot radius='0.27' radius-tubular='0.05'>
+				<a-torus-knot radius='0.26' radius-tubular='0.05'>
 					<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
 				</a-torus-knot>
 			</a-box>
@@ -26,7 +26,7 @@
 		<!-- handle hiro marker -->
 		<a-marker type='barcode' barcodeValue='5'>
 			<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:pink;'>
-				<a-torus-knot radius='0.27' radius-tubular='0.05'>
+				<a-torus-knot radius='0.26' radius-tubular='0.05'>
 					<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
 				</a-torus-knot>
 			</a-box>
@@ -35,7 +35,7 @@
 		<!-- handle kanji marker -->
 		<a-marker preset='kanji'>
 			<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:green;'>
-				<a-torus-knot radius='0.27' radius-tubular='0.05'>
+				<a-torus-knot radius='0.26' radius-tubular='0.05'>
 					<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
 				</a-torus-knot>
 			</a-box>

aframe/examples/test-runner.html

@@ -14,7 +14,7 @@
 		<a-marker preset='hiro'>
 			<!-- define the object which gonna be put on this marker  -->
 			<a-box position='0 0.5 0' material='opacity: 0.5; side: double'>
-				<a-torus-knot radius='0.27' radius-tubular='0.05'>
+				<a-torus-knot radius='0.26' radius-tubular='0.05'>
 				</a-torus-knot>
 			</a-box>
 		</a-marker>

aframe/examples/tracking-tango.html

+<!DOCTYPE html>
+<!-- include a-frame -->
+<script src="vendor/aframe.min.js"></script>
+<!-- include aframe-ar.js -->
+<script src="../aframe-ar-new.js"></script>
+<!-- jsartookit -->
+<script src="../../three.js/vendor/jsartoolkit5/build/artoolkit.min.js"></script>
+<script src="../../three.js/vendor/jsartoolkit5/js/artoolkit.api.js"></script>
+<!-- include ar.js -->
+<script src="../../three.js/threex-artoolkitcontext.js"></script>
+<script src="../../three.js/threex-artoolkitsource.js"></script>
+<script src='../../three.js/threex-artoolkitprofile.js'></script>
+<script src="../../three.js/threex-arbasecontrols.js"></script>
+<script src="../../three.js/threex-armarkercontrols.js"></script>
+<script src="../../three.js/threex-armarkerhelper.js"></script>
+<script src="../../three.js/threex-arsmoothedcontrols.js"></script>
+<!-- include for tango trackingBackend -->
+<script src='../../three.js/vendor/chromium-tango/THREE.WebAR.js'></script>
+
+<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><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>
+</div>
+
+	<a-scene embedded arjs='sourceType: webcam; trackingBackend: artoolkit;'>
+		<a-box position='0 0.5 0' material='opacity: 0.5; side: double; color: blue;'>
+			<a-torus-knot radius='0.26' radius-tubular='0.05'>
+				<a-animation attribute="rotation" to="360 0 0" dur="3000" easing='linear' repeat="indefinite"></a-animation>
+			</a-torus-knot>
+		</a-box>
+		<a-marker-camera preset='hiro'></a-marker-camera>
+	</a-scene>
+
+	<!-- <a-scene embedded arjs='sourceType: webcam; trackingBackend: tango;'>
+		<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:pink;'>
+			<a-torus-knot radius='0.26' radius-tubular='0.05'>
+				<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
+			</a-torus-knot>
+		</a-box>
+		<a-marker-camera preset='tango'></a-marker-camera>
+	</a-scene> -->
+
+
+</body>
+</html>

three.js/examples/dev.html

@@ -85,10 +85,10 @@
 		onResize()
 	})
 	function onResize(){
-		arToolkitSource.onResize()	
-		arToolkitSource.copySizeTo(renderer.domElement)	
+		arToolkitSource.onResizeElement()	
+		arToolkitSource.copyElementSizeTo(renderer.domElement)	
 		if( arToolkitContext.arController !== null ){
-			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
+			arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)	
 		}	
 	}
 

three.js/threex-artoolkitsource.js

@@ -277,7 +277,10 @@ THREEx.ArToolkitSource.prototype.onResizeElement = function(mirrorDomElements){
 	}
 	
 	
-	if( arguments.length !== 0 )	console.warn('use bad signature for arToolkitSource.copyElementSizeTo')
+	if( arguments.length !== 0 ){
+		debugger
+		console.warn('use bad signature for arToolkitSource.copyElementSizeTo')
+	}
 	// honor default parameters
 	// if( mirrorDomElements !== undefined )	console.warn('still use the old resize. fix it')
 	if( mirrorDomElements === undefined )	mirrorDomElements = []
@@ -285,7 +288,7 @@ THREEx.ArToolkitSource.prototype.onResizeElement = function(mirrorDomElements){
 
 	// Mirror _this.domElement.style to mirrorDomElements
 	mirrorDomElements.forEach(function(domElement){
-		_this.copySizeTo(domElement)
+		_this.copyElementSizeTo(domElement)
 	})
 }