bring augmenting-webpages

5880314c · Jerome Etienne · f239c2c2 · 5880314c · 5880314c · 5880314c
13 changed file
--- a/TODO.md
+++ b/TODO.md
 - port webvr-arbackend
 - rename THREEx.ArToolkitContext.getProjectionMatrix into .getArtoolkitProjectMatrix
 - three.js/vendor/threex-aruco  => three.js/threex/threex-aruco
+
+
 ---
  
 - DONE make multi-markers to support aruco too

--- a/three.js/examples/arbackend-switch.html
+++ b/three.js/examples/arbackend-switch.html
@@ -92,7 +92,7 @@
 		// to read from the webcam 
 		// sourceType : 'webcam',
 		
-		// // to read from an image
+		// to read from an image
 		sourceType : 'image',
 		sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',		


--- a/three.js/examples/multi-markers/augmenting-webpages/README.md
+++ b/three.js/examples/multi-markers/augmenting-webpages/README.md
+- use mate screen
+- read this post about [Augmenting the webpage](https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8)
--- a/three.js/examples/multi-markers/augmenting-webpages/TODO.md
+++ b/three.js/examples/multi-markers/augmenting-webpages/TODO.md
+- screenAsPortal - put a border like with hublo 360
+
+- add description in landing pages
+  - if isMobile, 'please open this url on desktop, then click here' - goto arApp
+  - if isMobile === false, 'please open this url on phone, (or scan qrcode), and click here' - goto markerPage
+  
+- add qrCode in landingPage
+- landingPage got a arPageUrl (for qrCode)
+- handle webar-playground parameters in the qrCode
+- add description in marker pages
+- move it all to ar.js three.js/examples/multi-markers/augmenting-webpages
+- make an example in multi marker
+  - examples/screenAsPortal.html
+  - with usual lee demo
+
+---
+
+- THREEx.ArMultiMarkerControls.computeBoundingBox(jsonData)
+  - similar to THREEx.ArMultiMarkerControls.computeCenter
+- from this function, you get -0.5 - 0.1 (white margin) on x,z
+- and you get the dimension of the screen
+- display a plane on top of the screen as you see it
+- gather back a hole in a wall
+- with usual lee demo
+---------------------------------------------------
+# in marker pages
+- marker page is mainly running on desktop
+- what is a good marker pages ?
+- i got the dimension of the screen deducable from the markers position/size
+- it can be read on desktop, tablet, phone
+- the AR is centered in the middle of the screen
+- toggle to go fullscreen
+
+---------------------------------------------------
+- DONE put all that in its own folder 
+  - markers-on-screen
+
+- put multi marker on screen
+  - with a qrcode for the phone - it is there only at the begining
+  - you arrive, there is a url+qrcode for the phone in a popup
+  - then you scan the qrcode, and close the popup
+  - there is big markers on the screens (usable from far)
+  - you edit on this scene
+  - with webar-editor, you learn this area and edit on it
+- later you build the url of the application based on the dimension of the screen
+  - thus you dont need to learn it
+  - link it from the home page!
+  - get the marker definition in the url of the app.html 
+  - thus when you arrive on the homepage with a saved scene, i add the marker definition to the url
+  - so any url will get a good marker definition no matter the screen size
+
+---
+
+- detection seems bad super bad... how come ? because it is on screen ?
+  - if so, i can change the color of the screen and use this
+  - i can do thresholding
+  - augmenting the screen is a big case
+  - display debug and see
--- a/three.js/examples/multi-markers/augmenting-webpages/landingPage/index.html
+++ b/three.js/examples/multi-markers/augmenting-webpages/landingPage/index.html
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+
+<!-- https://davidshimjs.github.io/qrcodejs/ -->
+<script src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script>
+	
+<body>
+	
+	<div id='descriptionForDesktop'>
+		<h2>You are on Desktop</h2>
+		<div id="qrCodeContainer">
+			
+		</div>
+	</div>
+	<div id='descriptionForPhone'>
+		<h2>You are on Phone</h2>
+	</div>
+
+	<div id="arAppURLView">
+	</div>
+	<a id="arAppURLLink" href='javascript:void(0)'>
+		<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+			WebAR App
+		</button>
+	</a>
+	<a href='../markerPage/index.html'>
+		<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+			Marker Page
+		</button>
+	</a>
+	
+	<script>
+		// goto the proper landing page depending on where you run
+		var isMobile = 'ontouchstart' in window === true ? true : false
+		// document.querySelector('#currentPlatform').innerHTML = isMobile ? 'mobile' : 'desktop'
+	</script>
+	
+
+<script type="text/javascript">
+	var arAppURL = 'https://jeromeetienne.github.io/webar-playground/'
+	var arAppURL = '../screenAsPortal/screenAsPortal.html'
+	// TODO take url from hash is available
+	document.body.querySelector('#arAppURLView').innerHTML = arAppURL
+	document.body.querySelector('#arAppURLLink').href = arAppURL
+
+	if( isMobile === false ){
+	        var container = document.createElement('div')
+	        var qrcode = new QRCode(container, {
+	                text: arAppURL,
+	                width: 256,
+	                height: 256,
+	                colorDark : '#000000',
+	                colorLight : '#ffffff',
+	        });
+	        var qrCodeImage = container.querySelector('img')
+		qrCodeImage.style.margin = '3em'
+		document.body.querySelector('#qrCodeContainer').appendChild(qrCodeImage)		
+	}
+	
+	document.body.querySelector('#descriptionForDesktop').style.display = isMobile === false ? 'inherit' :  'none'
+	document.body.querySelector('#descriptionForPhone').style.display = isMobile === true ? 'inherit' :  'none'
+	
+</script>
+
+</body>
--- a/three.js/examples/multi-markers/augmenting-webpages/markerPage/index.html
+++ b/three.js/examples/multi-markers/augmenting-webpages/markerPage/index.html
+<!DOCTYPE html>
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+<style media='screen'>
+	body {
+		background-color: #444;
+	}
+	.marker-image {
+		max-height:40%;
+	}
+	.marker-hiro {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		/* bring your own prefixes */
+		transform: translate(-50%, -50%);		
+	}
+	.marker-letterA {
+		position: fixed;
+		top: 0;
+		left: 0;
+	}
+	.marker-letterB {
+		position: fixed;
+		top: 0;
+		right: 0;
+	}
+	.marker-letterC {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+	}
+	.marker-letterF {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+	}
+</style>
+<body>
+	<img class='marker-hiro marker-image' src='../../../marker-training/examples/pattern-images/pattern-hiro.png'>
+	<img class='marker-letterA marker-image' src='../../../marker-training/examples/pattern-images/pattern-letterA.png'>
+	<img class='marker-letterB marker-image' src='../../../marker-training/examples/pattern-images/pattern-letterB.png'>
+	<img class='marker-letterC marker-image' src='../../../marker-training/examples/pattern-images/pattern-letterC.png'>
+	<img class='marker-letterF marker-image' src='../../../marker-training/examples/pattern-images/pattern-letterF.png'>
+</body>
--- a/three.js/examples/multi-markers/augmenting-webpages/markerPage/manual.html
+++ b/three.js/examples/multi-markers/augmenting-webpages/markerPage/manual.html
+<!DOCTYPE html>
+<style media='screen'>
+	body {
+		background-color: #444;
+	}
+	.marker-image {
+		max-height:40%;
+	}
+	.marker-hiro {
+		position: fixed;
+		top: 30%;
+		left: 35%;
+	}
+	.marker-letterA {
+		position: fixed;
+		top: 2em;
+		left: 2em;
+	}
+	.marker-letterB {
+		position: fixed;
+		top: 2em;
+		right: 2em;
+	}
+	.marker-letterC {
+		position: fixed;
+		bottom: 2em;
+		left: 2em;
+	}
+	.marker-letterF {
+		position: fixed;
+		bottom: 2em;
+		right: 2em;
+	}
+</style>
+<body>
+	<img class='marker-hiro marker-image' src='../../../marker-training/examples/pattern-images/pattern-hiro.png'>
+	<img class='marker-letterA marker-image' src='../../../marker-training/examples/pattern-images/pattern-letterA.png'>
+	<img class='marker-letterB marker-image' src='../../../marker-training/examples/pattern-images/pattern-letterB.png'>
+	<img class='marker-letterC marker-image' src='../../../marker-training/examples/pattern-images/pattern-letterC.png'>
+	<img class='marker-letterF marker-image' src='../../../marker-training/examples/pattern-images/pattern-letterF.png'>
+</body>
--- a/three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/images/box.png
+++ b/three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/images/box.png
--- a/three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/images/target.png
+++ b/three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/images/target.png
--- a/three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/js/threex-screenasportal.js
+++ b/three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/js/threex-screenasportal.js
+var THREEx = THREEx || {}
+
+THREEx.ScreenAsPortal = function(multiMarkerFile, screenDepth){
+	var _this = this
+	this.object3d = new THREE.Group
+
+	// init render loop
+	this._onRenderFcts = []
+	this.update = function(){
+		_this._onRenderFcts.forEach(function(onRenderFct){
+			onRenderFct()
+		})
+	}
+	
+	// compute screenSize
+	var markerSize = 1
+	var whiteMargin = 0.125*2
+	var boundingBox = THREEx.ArMultiMarkerControls.computeBoundingBox(multiMarkerFile)
+	boundingBox.min.x -= markerSize/2 + whiteMargin
+	boundingBox.min.z -= markerSize/2 + whiteMargin
+	boundingBox.max.x += markerSize/2 + whiteMargin
+	boundingBox.max.z += markerSize/2 + whiteMargin
+	var screenSize = boundingBox.getSize()
+	
+
+	initCube()
+	addTargets()
+	addBorders()
+	return
+	
+	function initCube(){
+		// add outter cube - invisibility cloak
+		var geometry = new THREE.BoxGeometry(screenSize.x, screenDepth, screenSize.z)
+		geometry.faces.splice(4, 2); // make hole by removing top two triangles (is this assumption stable?)
+		var material = new THREE.MeshBasicMaterial({
+			colorWrite: false // only write to z-buf
+		})
+		var outterCubeMesh = new THREE.Mesh( geometry, material);
+		outterCubeMesh.scale.set(1.04, 1, 1.04)
+		outterCubeMesh.position.y = -geometry.parameters.height/2
+		_this.object3d.add(outterCubeMesh)
+
+		// add the inner box
+		var textureBox = new THREE.TextureLoader().load('images/box.png')
+		textureBox.wrapS = THREE.RepeatWrapping;
+		textureBox.wrapT = THREE.RepeatWrapping;
+		textureBox.repeat.set(15, 20);
+		// textureBox.anisotropy = renderer.getMaxAnisotropy();
+		textureBox.anisotropy = 16;
+		var geometry	= new THREE.BoxGeometry(screenSize.x, screenDepth, screenSize.z);
+		var material	= new THREE.MeshBasicMaterial({
+			side: THREE.BackSide,
+			map: textureBox,
+			color: 'cyan',
+		}); 
+		var innerBoxMesh	= new THREE.Mesh( geometry, material );
+		innerBoxMesh.position.y = -geometry.parameters.height/2
+		_this.object3d.add( innerBoxMesh );		
+	}
+
+	function addTargets(){
+		// add the inner box
+		var geometry	= new THREE.PlaneGeometry(0.8,0.8).rotateX(-Math.PI/2);
+		var material	= new THREE.MeshBasicMaterial({
+			side: THREE.DoubleSide,
+			map: new THREE.TextureLoader().load('images/target.png'),
+			alphaTest: 0.9,
+		}); 
+		var targetModel	= new THREE.Mesh( geometry, material );
+
+		// create a blue LineBasicMaterial
+		var lineMaterial = new THREE.LineBasicMaterial({
+			color: 0x0000ff
+		});
+
+		var nTargets = 8;
+		for(var i = 0; i < nTargets; i++){
+			var positionX = (Math.random()-0.5)*(screenSize.x - targetModel.geometry.parameters.width )
+			var positionZ = (Math.random()-0.5)*(screenSize.z - targetModel.geometry.parameters.height)
+			var height = screenDepth*0.25 + Math.random() * (screenDepth * 1.5)
+			addTarget( positionX, positionZ, height)
+		}
+		
+		
+		return
+		function addTarget(positionX, positionZ, height){
+			var geometry = new THREE.Geometry();
+			geometry.vertices.push(new THREE.Vector3(0, 0, 0));
+			geometry.vertices.push(new THREE.Vector3(0, height-0.1, 0));
+			var line = new THREE.Line(geometry, lineMaterial);
+			line.position.x = positionX
+			line.position.y = -screenDepth
+			line.position.z = positionZ
+			_this.object3d.add(line)
+			
+			var target = targetModel.clone()
+			target.position.copy(line.position)
+			target.position.y += height
+			_this.object3d.add(target)
+
+		}
+	}
+	//////////////////////////////////////////////////////////////////////////////
+	//		addBorders
+	//////////////////////////////////////////////////////////////////////////////
+	function addBorders(){
+		var thickNess = 0.1
+		
+		var material = new THREE.MeshNormalMaterial()
+		var material = new THREE.MeshBasicMaterial({
+			color: 'black'
+		})
+		// top border
+		var geometry = new THREE.BoxGeometry(screenSize.x, thickNess, thickNess).rotateX(Math.PI/4);
+		var mesh = new THREE.Mesh(geometry, material)
+		mesh.position.y = +thickNess/2
+		mesh.position.z = -screenSize.z/2
+		_this.object3d.add(mesh)		
+
+		// bottom border
+		var mesh = new THREE.Mesh(geometry, material)
+		mesh.position.y = +thickNess/2
+		mesh.position.z = +screenSize.z/2
+		_this.object3d.add(mesh)		
+
+		// left border
+		var geometry = new THREE.BoxGeometry(thickNess, thickNess, screenSize.z).rotateZ(Math.PI/4);
+		var mesh = new THREE.Mesh(geometry, material)
+		mesh.position.y = +thickNess/2
+		mesh.position.x = -screenSize.x/2
+		_this.object3d.add(mesh)		
+
+		// right border
+		var mesh = new THREE.Mesh(geometry, material)
+		mesh.position.y = +thickNess/2
+		mesh.position.x = +screenSize.x/2
+		_this.object3d.add(mesh)		
+	}
+}
--- a/three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/screenAsPortal.html
+++ b/three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/screenAsPortal.html
+<!DOCTYPE html>
+<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
+<!-- three.js library -->
+<script src='../../../vendor/three.js/build/three.js'></script>
+<script src='../../../vendor/three.js/examples/js/libs/stats.min.js'></script>
+<!-- jsartookit -->
+<script src='../../../../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
+<script src='../../../../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
+<!-- aruco -->
+<script src='../../../../vendor/js-aruco/src/svd.js'></script> 
+<script src='../../../../vendor/js-aruco/src/posit1.js'></script> 
+<script src='../../../../vendor/js-aruco/src/cv.js'></script> 
+<script src='../../../../vendor/js-aruco/src/aruco.js'></script> 
+<script src='../../../../vendor/threex-aruco/threex-arucocontext.js'></script> 
+<script src='../../../../vendor/threex-aruco/threex-arucodebug.js'></script>
+<!-- include threex.artoolkit -->
+<script src='../../../../threex-artoolkitsource.js'></script>
+<script src='../../../../threex-artoolkitcontext.js'></script>
+<script src='../../../../threex-artoolkitprofile.js'></script>
+<script src='../../../../threex-arbasecontrols.js'></script>
+<script src='../../../../threex-armarkercontrols.js'></script>
+<script src='../../../../threex-armarkerhelper.js'></script>
+<script src='../../../../threex-arsmoothedcontrols.js'></script>
+<script>THREEx.ArToolkitContext.baseURL = '../../../../'</script>
+
+<script src='../../threex-armultimarkercontrols.js'></script>
+<script src='../../threex-armultimarkerlearning.js'></script>
+
+<script src='js/threex-screenasportal.js'></script>
+
+<style>
+	#recordButton:hover {
+		cursor: pointer;
+	}
+</style>
+
+
+<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1';>
+	<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - Multi marker
+	by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
+</div>
+<div style='position: fixed; bottom: 10px; width:100%; text-align: center;z-index:1';>
+	Area source: 
+		<a href='javascript:void(0)' onclick='urlOptions.areaSource = "localStorage"; reload()'>localStorage</a>
+		/
+		<a href='javascript:void(0)' onclick='urlOptions.areaSource = "hardcodedSingle"; reload()'>hardcodedSingle</a>
+	<br>
+	ar backend: 
+		<a href='javascript:void(0)' onclick='urlOptions.arBackend = "artoolkit"; reload()'>artoolkit</a>
+		/
+		<a href='javascript:void(0)' onclick='urlOptions.arBackend = "aruco"; reload()'>aruco</a>
+	<br>
+	Marker helpers: 
+		<a href='javascript:void(0)' onclick='urlOptions.markerHelpers = true; reload()'>yes</a>
+		/
+		<a href='javascript:void(0)' onclick='urlOptions.markerHelpers = false; reload()'>no</a>
+</div>
+<div style='position: fixed; bottom: 16px; right: 16px; z-index:1';>
+	<img id='recordButton' src="../../examples/images/record-start.png" width='64px'  height='64px'>
+</div>
+<script>
+;(function(){
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Init
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// init renderer
+	var renderer	= new THREE.WebGLRenderer({
+		alpha: true
+	});
+	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.domElement.style.position = 'absolute'
+	renderer.domElement.style.top = '0px'
+	renderer.domElement.style.left = '0px'
+	document.body.appendChild( renderer.domElement );
+
+	// array of functions for the rendering loop
+	var onRenderFcts= [];
+
+	// 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 );
+
+
+
+	////////////////////////////////////////////////////////////////////////////////
+	//          handle urlOptions
+	////////////////////////////////////////////////////////////////////////////////
+
+	var hasHash = location.hash.substring(1) !== '' ? true : false
+	if( hasHash === true ){
+		var urlOptions = JSON.parse(location.hash.substring(1))
+	}else{
+		var urlOptions = {
+			areaSource : 'localStorage',
+			arBackend: 'artoolkit',
+			markerHelpers: false,
+		}
+	}
+	window.urlOptions = urlOptions
+	urlOptionsUpdate()
+	window.reload = function(){
+		urlOptionsUpdate()
+		location.reload()
+	}
+	function urlOptionsUpdate(){
+		location.hash = '#'+JSON.stringify(urlOptions)
+	}
+	
+	if( urlOptions.areaSource === 'localStorage' && localStorage.getItem('ARjsMultiMarkerFile') === null ){
+		alert('No area has been learned on this device!\n Using only hardcoded single marker hiro/1001.')
+		urlOptions.areaSource === 'hardcodedSingle'	
+		urlOptionsUpdate()
+	}
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Initialize a basic camera
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// Create a camera
+	if( urlOptions.arBackend === 'aruco' ){
+		var camera = new THREE.PerspectiveCamera(42, renderer.domElement.width / renderer.domElement.height, 0.01, 100);
+	}else if( urlOptions.arBackend === 'artoolkit' ){
+		var camera = new THREE.Camera();
+	}else console.assert(false)
+	scene.add(camera);
+
+	////////////////////////////////////////////////////////////////////////////////
+	//          handle arToolkitSource
+	////////////////////////////////////////////////////////////////////////////////
+
+	var artoolkitProfile = new THREEx.ArToolkitProfile()
+	artoolkitProfile.sourceWebcam()
+		.performance('desktop')
+
+	var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
+
+	arToolkitSource.init(function onReady(){
+		onResize()
+	})
+	
+	// handle resize
+	window.addEventListener('resize', function(){
+		onResize()
+	})
+	function onResize(){
+		arToolkitSource.onResize()
+		arToolkitSource.copySizeTo(renderer.domElement)	
+		if( urlOptions.arBackend === 'aruco' ){
+			arToolkitSource.copySizeTo(arToolkitContext.arucoContext.canvas)	
+
+			camera.aspect = renderer.domElement.width / renderer.domElement.height;
+			camera.updateProjectionMatrix();			
+		}else if( urlOptions.arBackend === 'artoolkit' ){
+			if( arToolkitContext.arController !== null ){
+				arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
+			}	
+		}else console.assert(false)
+	}
+
+	////////////////////////////////////////////////////////////////////////////////
+	//          initialize arToolkitContext
+	////////////////////////////////////////////////////////////////////////////////	
+
+	// honor urlOptions.arBackend
+	artoolkitProfile.contextParameters.arBackend = urlOptions.arBackend
+
+	// create atToolkitContext
+	var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
+	// initialize it
+	arToolkitContext.init(function onCompleted(){
+		// if artoolkit, copy projection matrix to camera
+		if( arToolkitContext.parameters.arBackend === 'artoolkit' ){
+			camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );			
+		}
+	})
+
+	// update artoolkit on every frame
+	onRenderFcts.push(function(){
+		if( arToolkitSource.ready === false )	return
+
+		arToolkitContext.update( arToolkitSource.domElement )
+	})
+	//////////////////////////////////////////////////////////////////////////////
+	//		init learnerParameters and markersControlsParameters
+	//////////////////////////////////////////////////////////////////////////////
+
+	if( urlOptions.arBackend === 'artoolkit' ){
+		// pattern hiro/kanji/a/b/c/f
+		var patternBaseUrl = location.protocol + '//'  + location.host + '/three.js/'
+		
+		var markersControlsParameters = [
+			{
+				type : 'pattern',
+				patternUrl : patternBaseUrl + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt',
+			},
+			{
+				type : 'pattern',
+				patternUrl : patternBaseUrl + 'examples/marker-training/examples/pattern-files/pattern-kanji.patt',
+			},
+			{
+				type : 'pattern',
+				patternUrl : patternBaseUrl + 'examples/marker-training/examples/pattern-files/pattern-letterA.patt',
+			},
+			{
+				type : 'pattern',
+				patternUrl : patternBaseUrl + 'examples/marker-training/examples/pattern-files/pattern-letterB.patt',
+			},
+			{
+				type : 'pattern',
+				patternUrl : patternBaseUrl + 'examples/marker-training/examples/pattern-files/pattern-letterC.patt',
+			},
+			{
+				type : 'pattern',
+				patternUrl : patternBaseUrl + 'examples/marker-training/examples/pattern-files/pattern-letterF.patt',
+			},
+		]		
+	}else if( urlOptions.arBackend === 'aruco' ){
+		var markersControlsParameters = [
+			{
+				type : 'barcode',
+				barcodeValue: 1001,
+			},
+			{
+				type : 'barcode',
+				barcodeValue: 1002,
+			},
+			{
+				type : 'barcode',
+				barcodeValue: 1003,
+			},
+			{
+				type : 'barcode',
+				barcodeValue: 1004,
+			},
+			{
+				type : 'barcode',
+				barcodeValue: 1005,
+			},
+			{
+				type : 'barcode',
+				barcodeValue: 1006,
+			},
+		]
+	}else console.assert(false)
+
+	
+	document.querySelector('#recordButton').addEventListener('click', function(){
+		urlOptions.areaSource = 'localStorage'	
+		urlOptionsUpdate()
+
+		var learnerParameters = {
+			backURL : location.href,
+			arBackend: urlOptions.arBackend,
+			markersControlsParameters: markersControlsParameters,
+		}
+		location.href = THREEx.ArToolkitContext.baseURL + 'examples/multi-markers/examples/learner.html#'+JSON.stringify(learnerParameters)
+	})
+	
+	//////////////////////////////////////////////////////////////////////////////
+	//		get multiMarkerFile
+	//////////////////////////////////////////////////////////////////////////////
+	
+	if( urlOptions.areaSource === 'localStorage' ){
+		console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null )
+		var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile')
+	}else if( urlOptions.areaSource === 'hardcodedSingle' ){
+		if( urlOptions.arBackend === 'artoolkit' ){
+			var multiMarkerFile = JSON.stringify({
+				subMarkersControls : [
+					{
+						parameters: {
+							type : 'pattern',
+							patternUrl : THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt',
+						},
+						poseMatrix: new THREE.Matrix4().makeTranslation(0,0,0).toArray()
+					},
+				]
+			})
+		}else if( urlOptions.arBackend === 'aruco' ){
+			var multiMarkerFile = JSON.stringify({
+				subMarkersControls : [
+					{
+						parameters: {
+							type : 'barcode',
+							barcodeValue : 1001,
+						},
+						poseMatrix: new THREE.Matrix4().makeTranslation(0,0,0).toArray()
+					},
+				]
+			})
+		}else console.assert(false)
+	}else{
+		console.assert('unknown areaSource', areaSource)
+	}
+
+	//////////////////////////////////////////////////////////////////////////////
+	//		Create ArMultiMarkerControls
+	//////////////////////////////////////////////////////////////////////////////
+	// build a markerRoot
+	var markerRoot = new THREE.Group()
+	scene.add(markerRoot)
+	
+	// build a multiMarkerControls
+	var multiMarkerControls = THREEx.ArMultiMarkerControls.fromJSON(arToolkitContext, scene, markerRoot, multiMarkerFile)
+
+	// display THREEx.ArMarkerHelper if needed - useful to debug
+	if( urlOptions.markerHelpers === true ){
+		multiMarkerControls.subMarkersControls.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)
+	var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot)
+	onRenderFcts.push(function(delta){
+		// update smoothedControls parameters depending on how many markers are visible in multiMarkerControls
+		multiMarkerControls.updateSmoothedControls(smoothedControls)
+		// update multiMarkerRoot position
+		smoothedControls.update(markerRoot)
+	})
+
+	var arWorldRoot = new THREE.Group()
+	var averageMatrix = THREEx.ArMultiMarkerControls.computeCenter(multiMarkerFile)
+	averageMatrix.decompose(arWorldRoot.position, arWorldRoot.quaternion, arWorldRoot.scale)		
+	smoothedRoot.add(arWorldRoot)
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Add simple object on smoothedRoot
+	//////////////////////////////////////////////////////////////////////////////////
+
+	;(function(){
+		var screenDepth = 5
+		var screenAsPortal = new THREEx.ScreenAsPortal(multiMarkerFile, screenDepth)
+		arWorldRoot.add(screenAsPortal.object3d)
+	})()
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the whole thing on the page
+	//////////////////////////////////////////////////////////////////////////////////
+	var stats = new Stats();
+	// document.body.appendChild( stats.dom );
+
+	// render the scene
+	onRenderFcts.push(function(){
+		renderer.render( scene, camera );
+		stats.update();
+	})
+
+	// run the rendering loop
+	var lastTimeMsec= null
+	requestAnimationFrame(function animate(nowMsec){
+		// keep looping
+		requestAnimationFrame( animate );
+		// measure time
+		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
+		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
+		lastTimeMsec	= nowMsec
+		// call each update function
+		onRenderFcts.forEach(function(onRenderFct){
+			onRenderFct(deltaMsec/1000, nowMsec/1000)
+		})
+	})
+})()
+</script></body>
--- a/three.js/examples/multi-markers/threex-armultimarkercontrols.js
+++ b/three.js/examples/multi-markers/threex-armultimarkercontrols.js
@@ -181,6 +181,23 @@ THREEx.ArMultiMarkerControls.computeCenter = function(jsonData){
 	return averageMatrix
 }

+THREEx.ArMultiMarkerControls.computeBoundingBox = function(jsonData){
+	var multiMarkerFile = JSON.parse(jsonData)
+	var boundingBox = new THREE.Box3()
+
+	multiMarkerFile.subMarkersControls.forEach(function(item){
+		var poseMatrix = new THREE.Matrix4().fromArray(item.poseMatrix)
+		
+		var position = new THREE.Vector3
+		var quaternion = new THREE.Quaternion
+		var scale = new THREE.Vector3
+		poseMatrix.decompose(position, quaternion, scale)
+
+		boundingBox.expandByPoint(position)
+	})
+
+	return boundingBox
+}
 //////////////////////////////////////////////////////////////////////////////
 //		updateSmoothedControls
 //////////////////////////////////////////////////////////////////////////////
@@ -189,10 +206,11 @@ THREEx.ArMultiMarkerControls.prototype.updateSmoothedControls = function(smoothe
 	// handle default values
 	if( lerpsValues === undefined ){
 		lerpsValues = [
-			[0.7, 0.1, 0.3],
-			[0.7, 0.1, 0.4],
-			[0.8, 0.2, 0.5],
-			[0.8, 0.2, 0.7],
+			[0.4, 0.1, 0.3],
+			[0.4, 0.1, 0.4],
+			[0.4, 0.2, 0.5],
+			[0.4, 0.2, 0.7],
+			[0.4, 0.2, 0.7],
 		]
 	}
 	// count how many subMarkersControls are visible

--- a/three.js/threex-artoolkitcontext.js
+++ b/three.js/threex-artoolkitcontext.js
@@ -299,10 +299,10 @@ THREEx.ArToolkitContext.prototype._initTango = function(onCompleted){
 		var canvasElement = document.createElement('canvas')
 		document.body.appendChild(canvasElement)
 		var layers = [{ source: canvasElement }]
-		vrDisplay.requestPresent(layers).then(function() {
-			console.log('vrdisplay request accepted')
-		});
-
+// 		vrDisplay.requestPresent(layers).then(function() {
+// 			console.log('vrdisplay request accepted')
+// 		});
+// window.vrDisplay = vrDisplay

 		onCompleted && onCompleted()
 	});
@@ -315,13 +315,12 @@ THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
 	var arMarkersControls = this._arMarkersControls
 	var tangoContext= this._tangoContext

-// console.log('update tango')
 	// check vrDisplay is already initialized
 	if( tangoContext.vrDisplay === null )	return
-// console.log('update tango')

 	if( this._arMarkersControls.length === 0 )	return
-// console.log('update tango')
+
+	// TODO here do a fake search on barcode/1001 ?

 	var foundControls = this._arMarkersControls[0]
 	
@@ -330,21 +329,16 @@ THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
 	// read frameData
 	tangoContext.vrDisplay.getFrameData(frameData);

-	var cameraTransformMatrix = new THREE.Matrix4()
-	
+	// create cameraTransformMatrix
 	var position = new THREE.Vector3().fromArray(frameData.pose.position)
 	var quaternion = new THREE.Quaternion().fromArray(frameData.pose.orientation)
 	var scale = new THREE.Vector3(1,1,1)	
-	cameraTransformMatrix.compose(position, quaternion, scale)
-	
+	var cameraTransformMatrix = new THREE.Matrix4().compose(position, quaternion, scale)
+	// compute modelViewMatrix from cameraTransformMatrix
 	var modelViewMatrix = new THREE.Matrix4()
 	modelViewMatrix.getInverse( cameraTransformMatrix )	
 	
-	// console.log('position', position)
-	console.log('update tango quaternion', quaternion)
-	
-	// debugger;
-
+	console.log('position', position)

 	foundControls.updateWithModelViewMatrix(modelViewMatrix)
 }