more work

README.md

@@ -183,7 +183,7 @@ Three.js Examples:
 - [parameters-tunning](https://jeromeetienne.github.io/AR.js/three.js/examples/parameters-tunning.html) :
   three.js example for parameters-tunning
   ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/parameters-tunning.html))
-- [multimarker](https://jeromeetienne.github.io/AR.js/three.js/examples/multi-markers/examples/player.html) :
+- [multi-markers](https://jeromeetienne.github.io/AR.js/three.js/examples/multi-markers/examples/player.html) :
   multi markers examples - it shows how to dynamically learn a multi markers and then how to use it.
   learner.html is a example of dynamic learning of a multi markers configuration. It has been designed
   to be reusable.

three.js/examples/mobile-performance.html

@@ -34,13 +34,6 @@
 
 	// init scene and camera
 	var scene	= new THREE.Scene();
-
-	var ambient = new THREE.AmbientLight( 0x666666 );
-	scene.add( ambient );
-
-	var directionalLight = new THREE.DirectionalLight( 0x887766 );
-	directionalLight.position.set( -1, 1, 1 ).normalize();
-	scene.add( directionalLight );
 	
 	//////////////////////////////////////////////////////////////////////////////////
 	//		Initialize a basic camera

three.js/examples/multi-markers/examples/learner.html

@@ -91,11 +91,11 @@
 		
 		// // to read from an image
 		// sourceType : 'image',
-		// sourceUrl : '../../../../data/images/multimarker.jpg'		
+		// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/multimarker.jpg'		
 
 		// to read from a video
 		// sourceType : 'video',
-		// sourceUrl : '../../../../data/videos/headtracking.mp4',	
+		// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',	
 	})
 
 
@@ -116,11 +116,12 @@
 
 	// create atToolkitContext
 	var arToolkitContext = new THREEx.ArToolkitContext({
-		cameraParametersUrl: '../../../../data/data/camera_para.dat',
+		cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
 		detectionMode: 'mono',
 		maxDetectionRate: 30,
-		canvasWidth: 80*4,
-		canvasHeight: 60*4,
+		// high accuracy of detection on purpose - important during learning
+		// canvasWidth: 80*4,
+		// canvasHeight: 60*4,
 		// debug: true,
 	})
 	// initialize it
@@ -142,37 +143,61 @@
 	
 	var hasHash = location.hash.substring(1) !== '' ? true : false
 	if( hasHash === true ){
-		var jsonData = JSON.parse(location.hash.substring(1))
-		var backURL = jsonData.backURL
-		var markersControlsParameters = jsonData.markersControlsParameters
+		var urlOptions = JSON.parse(location.hash.substring(1))
+	}else{
+		var urlOptions = {
+			backURL : null,
+			markerControlsParameters : [],
+		}
+		alert('should not happen')
 	}
 	
 
 
 	// prepare the parameters
 	var subMarkersControls = []
-	markersControlsParameters.forEach(function(markerControlsParameters){
+	urlOptions.markersControlsParameters.forEach(function(markerControlsParameters){
 		// create a markerRoot
-		var object3d = new THREE.Object3D()
-		scene.add(object3d)
+		var markerRoot = new THREE.Group()
+		scene.add(markerRoot)
+
+		// create markerControls for our markerRoot
+		var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, markerControlsParameters)
+
 
-		// create markerControls for our object3d
-		var markerControls = new THREEx.ArMarkerControls(arToolkitContext, object3d, markerControlsParameters)
+		// TODO here put a THREEx.ArSmoothedControls behind a flag - could be useful for tunning
+		var smoothedControls = null
+		if( false ){
+			// build a smoothedControls
+			var smoothedRoot = new THREE.Group()
+			scene.add(smoothedRoot)
+			var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot)
+			onRenderFcts.push(function(){
+				smoothedControls.update(markerRoot)
+			})				
+		}
 
-		if( true ){
-			// add an helper to visuable each sub-marker
-			var markerHelper = new THREEx.ArMarkerHelper(markerControls)
+		// add an helper to visuable each sub-marker
+		var markerHelper = new THREEx.ArMarkerHelper(markerControls)
+		if( smoothedControls !== null ){
+			smoothedControls.object3d.add( markerHelper.object3d )
+		}else{
 			markerControls.object3d.add( markerHelper.object3d )			
 		}
 		
-		// TODO here put a THREEx.ArSmoothedControls behind a flag - could be useful for tunning
+
+
 		
 		// store it in the parameters
-		subMarkersControls.push(markerControls)
+		if( smoothedControls !== null ){
+			subMarkersControls.push(smoothedControls)
+		}else {
+			subMarkersControls.push(markerControls)
+		}
 	})
 		
-	var multiMarkerLearning = new THREEx.ArMultiMakersLearning(subMarkersControls)
-window.multiMarkerLearning = multiMarkerLearning
+	var multiMarkerLearning = new THREEx.ArMultiMakersLearning(arToolkitContext, subMarkersControls)
+// window.multiMarkerLearning = multiMarkerLearning
 	multiMarkerLearning.enabled = false
 
 	//////////////////////////////////////////////////////////////////////////////
@@ -208,27 +233,27 @@ window.multiMarkerLearning = multiMarkerLearning
 			// generate json file and store it
 			var jsonString = multiMarkerLearning.toJSON()
 			console.log('Writing multiMarkerFile', jsonString)
-			localStorage.setItem('sampleMultiMarkerFile', jsonString);	
+			localStorage.setItem('ARjsMultiMarkerFile', jsonString);	
 			
 			// update application status
 			updateAppStatus()			
 		}
 		
 		// honor ?url= if present
-		if( backURL !== null ){
+		if( urlOptions.backURL !== null ){
 			setTimeout(function(){
-				location.href = backURL				
+				location.href = urlOptions.backURL				
 			}, 1)
 		}
 	}
 
 	function onRecordClear(){
-		localStorage.removeItem('sampleMultiMarkerFile')
+		localStorage.removeItem('ARjsMultiMarkerFile')
 		updateAppStatus()
 	}
 
 	function updateAppStatus(){
-		var multiMarkerFile = localStorage.getItem('sampleMultiMarkerFile');
+		var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile');
 		if( multiMarkerFile === null ){
 			document.querySelector('#dataStatus').innerHTML = 'none'
 		}else{

three.js/examples/multi-markers/examples/player.html

@@ -33,10 +33,14 @@
 	<br/>
 	<a id='recordButton' href='learner.html?url=player.html'>Record new area</a>
 	<br/>
+	Markers Helper : 
+		<a href='javascript:void(0)' onclick='urlOptions.markersHelper = true; reload()'>enable</a>
+		/
+		<a href='javascript:void(0)' onclick='urlOptions.markersHelper = false; reload()'>disable</a>
 	appMode : 
-	<a href='#areaUsing' onclick='location.reload()'>stored</a>
-	/
-	<a href='#areaHardcoded' onclick='location.reload()'>hardcoded</a>
+		<a href='javascript:void(0)' onclick='urlOptions.appMode = "areaUsing"; reload()'>stored</a>
+		/
+		<a href='javascript:void(0)' onclick='urlOptions.appMode = "areaHardcoded"; reload()'>hardcoded</a>
 </div><script>
 ;(function(){
 	//////////////////////////////////////////////////////////////////////////////////
@@ -48,6 +52,9 @@
 		antialias	: true,
 		alpha: true
 	});
+	renderer.shadowMap.type = THREE.PCFSoftShadowMap
+	renderer.shadowMap.enabled = true;	
+
 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 	// renderer.setPixelRatio( 2 );
 	renderer.setSize( window.innerWidth, window.innerHeight );
@@ -65,10 +72,7 @@
 	var ambient = new THREE.AmbientLight( 0x666666 );
 	scene.add( ambient );
 
-	var directionalLight = new THREE.DirectionalLight( 0x887766 );
-	directionalLight.position.set( -1, 1, 1 ).normalize();
-	scene.add( directionalLight );
-	
+
 	//////////////////////////////////////////////////////////////////////////////////
 	//		Initialize a basic camera
 	//////////////////////////////////////////////////////////////////////////////////
@@ -135,20 +139,34 @@
 	//          Create a ArMarkerControls
 	////////////////////////////////////////////////////////////////////////////////
 
+
+	var hasHash = location.hash.substring(1) !== '' ? true : false
+	if( hasHash === true ){
+		var urlOptions = JSON.parse(location.hash.substring(1))
+	}else{
+		var urlOptions = {
+			appMode : 'areaUsing',
+			markersHelper: true,
+		}
+	}
+	window.urlOptions = urlOptions
+	window.reload = function(){
+		location.hash = '#'+JSON.stringify(urlOptions)
+		location.reload()
+	}
+
+	if( location.hash.substring(1) === '' )	location.hash = '#'+JSON.stringify(urlOptions)
 	
-	var appMode = location.hash.substring(1) || 'areaUsing'
-	if( location.hash.substring(1) === '' )	location.hash = '#'+appMode
-	
-	if( appMode === 'areaUsing' && localStorage.getItem('sampleMultiMarkerFile') === null ){
+	if( urlOptions.appMode === 'areaUsing' && localStorage.getItem('ARjsMultiMarkerFile') === null ){
 		alert('cant find sample multimarker.')
-		appMode = 'areaHardcoded'
+		urlOptions.appMode = 'areaHardcoded'
 	}
 	
 	
-	if( appMode === 'areaUsing' ){
-		console.assert( localStorage.getItem('sampleMultiMarkerFile') !== null )
-		multiMarkerPlay(localStorage.getItem('sampleMultiMarkerFile'))
-	}else if( appMode === 'areaHardcoded' ){
+	if( urlOptions.appMode === 'areaUsing' ){
+		console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null )
+		multiMarkerPlay(localStorage.getItem('ARjsMultiMarkerFile'))
+	}else if( urlOptions.appMode === 'areaHardcoded' ){
 		multiMarkerPlayHarcoded()
 	}else{
 		console.assert('unknown appMode', appMode)
@@ -210,6 +228,15 @@
 		// build a multiMarkerControls
 		var multiMarkerControls = THREEx.ArMultiMarkerControls.fromJSON(arToolkitContext, scene, markerRoot, multiMarkerFile)
 
+
+		if( urlOptions.markersHelper === true ){
+			multiMarkerControls.markersControls.forEach(function(subMarkerControls){
+				// add an helper to visuable each sub-marker
+				var markerHelper = new THREEx.ArMarkerHelper(subMarkerControls)
+				subMarkerControls.object3d.add( markerHelper.object3d )		
+			})			
+		}
+
 		// build a smoothedControls
 		var smoothedRoot = new THREE.Group()
 		scene.add(smoothedRoot)
@@ -226,11 +253,12 @@
 		// compute the average matrix of this markerFile
 		var averageMatrix = THREEx.ArMultiMarkerControls.computeCenter(multiMarkerFile)
 		averageMatrix.decompose(markerScene.position, markerScene.quaternion, markerScene.scale)
-		 markerScene.scale.multiplyScalar(3)
+		markerScene.scale.multiplyScalar(3)
+
 		//////////////////////////////////////////////////////////////////////////////////
 		//		add an object in the scene
 		//////////////////////////////////////////////////////////////////////////////////
-
+		
 		var mesh = new THREE.AxisHelper()
 		// markerScene.add(mesh)
 
@@ -253,7 +281,7 @@
 		
 		onRenderFcts.push(function(delta){
 			mesh.rotation.x += delta * Math.PI
-		})	
+		})
 	}
 
 	//////////////////////////////////////////////////////////////////////////////

three.js/examples/multi-markers/threex-armultimarkercontrols.js

@@ -142,8 +142,8 @@ THREEx.ArMultiMarkerControls.averageVector3 = function(vector3Sum, vector3, coun
 THREEx.ArMultiMarkerControls.fromJSON = function(arToolkitContext, scene, markerRoot, jsonData){
 	var multiMarkerFile = JSON.parse(jsonData)
 	// declare the parameters
-	var markersControls = []
-	var markerPoses = []
+	var subMarkersControls = []
+	var subMarkerPoses = []
 
 	// prepare the parameters
 	multiMarkerFile.subMarkersControls.forEach(function(item){
@@ -154,18 +154,12 @@ THREEx.ArMultiMarkerControls.fromJSON = function(arToolkitContext, scene, marker
 		// create markerControls for our object3d
 		var subMarkerControls = new THREEx.ArMarkerControls(arToolkitContext, object3d, item.parameters)
 
-		if( true ){
-			// add an helper to visuable each sub-marker
-			var markerHelper = new THREEx.ArMarkerHelper(subMarkerControls)
-			subMarkerControls.object3d.add( markerHelper.object3d )			
-		}
-		
 		// store it in the parameters
-		markersControls.push(subMarkerControls)
-		markerPoses.push(new THREE.Matrix4().fromArray(item.poseMatrix))
+		subMarkersControls.push(subMarkerControls)
+		subMarkerPoses.push(new THREE.Matrix4().fromArray(item.poseMatrix))
 	})
 	// create a new THREEx.ArMultiMarkerControls
-	var multiMarkerControls = new THREEx.ArMultiMarkerControls(markerRoot, markersControls, markerPoses)
+	var multiMarkerControls = new THREEx.ArMultiMarkerControls(markerRoot, subMarkersControls, subMarkerPoses)
 
 	// return it
 	return multiMarkerControls	

three.js/examples/multi-markers/threex-armultimarkerlearning.js

 var THREEx = THREEx || {}
 
-THREEx.ArMultiMakersLearning = function(subMarkersControls){
+THREEx.ArMultiMakersLearning = function(arToolkitContext, subMarkersControls){
 	var _this = this
 
 	// Init variables
@@ -9,8 +9,6 @@ THREEx.ArMultiMakersLearning = function(subMarkersControls){
 		
 	// listen to arToolkitContext event 'sourceProcessed'
 	// - after we fully processed one image, aka when we know all detected poses in it
-	var originSubControls = this.subMarkersControls[0]
-	var arToolkitContext = originSubControls.context
 	arToolkitContext.addEventListener('sourceProcessed', function(){
 		_this._onSourceProcessed()
 	})