diff --git a/babylon.js/TODO.md b/babylon.js/TODO.md
index 98670ca5c5916f940090b591efe10afa564b1fd7..332f174ef9c8ad766e76834d743670e1dc6756f2 100644
--- a/babylon.js/TODO.md
+++ b/babylon.js/TODO.md
@@ -1,8 +1,9 @@
-- port it to ar-session.js
-- put the gatefunctions in a babylon-ar.js 
+- babylon forum - http://www.html5gamedevs.com/topic/31654-babylonaugmented-reality-in-arjs/?tab=comments&_fromLogin=1
 
 # Remaining issue
-- babylon.js object very shacky - while three.js super stable - reason unkonwn
-
 - camera projection matrix to set
 - resize to handle
+
+- DONE babylon.js object very shacky - while three.js super stable - reason unkonwn
+- DONE put the gatefunctions in a babylon-ar.js 
+- DONE port it to new api ar-session.js
diff --git a/babylon.js/examples/manual.html b/babylon.js/examples/dev.html
similarity index 50%
rename from babylon.js/examples/manual.html
rename to babylon.js/examples/dev.html
index e6d8987eee0bcceca635295db386c0641a2436fd..6661839f26a934a3bcb06ff1370f5db25cb6c10c 100644
--- a/babylon.js/examples/manual.html
+++ b/babylon.js/examples/dev.html
@@ -23,25 +23,16 @@ window.addEventListener('DOMContentLoaded', function(){
 	canvasElement.style.position = 'absolute'
 	canvasElement.style.zIndex = -1
 	document.body.appendChild(canvasElement)
-	var engine = new BABYLON.Engine(canvasElement, true);
+	var engine = new BABYLON.Engine(canvasElement, true)
 	var babylonCamera;
-	
-	/*********************************CREATE-LIGHTS******************************/
-	var createLights = function() {
-		var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,10,0), scene);
-		light.intensity = 0.4;
-		
-		var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
-		light.position = new BABYLON.Vector3(20, 39, 20);
-		light.intensity = 0.5;
-	}
+
 	
 	/******************************CREATE-MOON*****************************/
 	var createMoon = function(){
-		var material = new BABYLON.StandardMaterial("proutMaterial", scene);
-		material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene);
+		var material = new BABYLON.StandardMaterial("proutMaterial", scene)
+		material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene)
 		
-		var mesh = BABYLON.Mesh.CreateSphere("mesh", 12, 1, scene);
+		var mesh = BABYLON.Mesh.CreateSphere("mesh", 12, 1, scene)
 
 		// mesh.position.y = 60;
 		mesh.material = material;
@@ -49,81 +40,78 @@ window.addEventListener('DOMContentLoaded', function(){
 	}
 	
 	var displayMeshAxis = function (mesh) {
-		mesh.computeWorldMatrix();
-		var matrix = mesh.getWorldMatrix();
+		mesh.computeWorldMatrix()
+		var matrix = mesh.getWorldMatrix()
 		var origin = mesh.position;
 		// find existing axis for this box and dispose
-		var xAxis = scene.getMeshByName("xAxis"+mesh.name);
-		var yAxis = scene.getMeshByName("yAxis"+mesh.name);
-		var zAxis = scene.getMeshByName("zAxis"+mesh.name);
-		if (xAxis!=null){ xAxis.dispose();}
-		if (yAxis!=null){ yAxis.dispose();}
-		if (zAxis!=null){ zAxis.dispose();}
+		var xAxis = scene.getMeshByName("xAxis"+mesh.name)
+		var yAxis = scene.getMeshByName("yAxis"+mesh.name)
+		var zAxis = scene.getMeshByName("zAxis"+mesh.name)
+		if (xAxis!=null){ xAxis.dispose()}
+		if (yAxis!=null){ yAxis.dispose()}
+		if (zAxis!=null){ zAxis.dispose()}
 		// calculate new normals for this mesh in world coordinate system
-		var xNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(100,0,0),matrix);
-		var yNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,100,0),matrix);
-		var zNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,0,100),matrix);
+		var xNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(100,0,0),matrix)
+		var yNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,100,0),matrix)
+		var zNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,0,100),matrix)
 		// create axis lines
-		xAxis = BABYLON.Mesh.CreateDashedLines("xAxis"+mesh.name, [origin, xNormal],3,10,200, scene, false);
-		xAxis.color = BABYLON.Color3.Red();
-		yAxis = BABYLON.Mesh.CreateDashedLines("yAxis"+mesh.name, [origin, yNormal],3,10,200, scene, false);
-		yAxis.color = BABYLON.Color3.Green();
-		zAxis = BABYLON.Mesh.CreateDashedLines("zAxis"+mesh.name, [origin, zNormal],3,10,200, scene, false);
-		zAxis.color = BABYLON.Color3.Blue();
+		xAxis = BABYLON.Mesh.CreateDashedLines("xAxis"+mesh.name, [origin, xNormal],3,10,200, scene, false)
+		xAxis.color = BABYLON.Color3.Red()
+		yAxis = BABYLON.Mesh.CreateDashedLines("yAxis"+mesh.name, [origin, yNormal],3,10,200, scene, false)
+		yAxis.color = BABYLON.Color3.Green()
+		zAxis = BABYLON.Mesh.CreateDashedLines("zAxis"+mesh.name, [origin, zNormal],3,10,200, scene, false)
+		zAxis.color = BABYLON.Color3.Blue()
 	}
 	
 	/****************************CREATE-SYMPHONY*******************************/
 	var createImagePlane = function(){
-		
-		var material = new BABYLON.StandardMaterial("texturePlane", scene);
-		material.twoSidedLighting = true
-		material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene);
-		material.specularColor = new BABYLON.Color3(1, 1, 1);
-
-		// material.backFaceCulling = true;
-		// var mesh = BABYLON.Mesh.CreatePlane("mesh", 2, scene);
-
 		var mesh = BABYLON.MeshBuilder.CreatePlane("plane1", {
 			size: 2,
 			sideOrientation: BABYLON.Mesh.DOUBLESIDE
-		}, scene);
-
-		mesh.material = material;
+		}, scene)
 		mesh.position = new BABYLON.Vector3(0,0, 0)
 		mesh.rotation.y = Math.PI
-		
+
+		var material = new BABYLON.StandardMaterial("texturePlane", scene)
+		material.twoSidedLighting = true
+		material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene)
+		material.specularColor = new BABYLON.Color3(1, 1, 1)
+		mesh.material = material		
 	}
 	
 	/******************************Initialization******************************/
-	var scene = new BABYLON.Scene(engine);
+	var scene = new BABYLON.Scene(engine)
 	scene.useRightHandedSystem = true
-	scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+	scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)
 
 	var babylonCamera = ARjs.Babylon.createCamera(scene)
 
-	var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,10,0), scene);
-	light.intensity = 0.4;
-	
-	var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
-	light.position = new BABYLON.Vector3(20, 39, 20);
-	light.intensity = 0.5;
+	// add ligts
+	var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,10,0), scene)
+	light.intensity = 0.4
+	var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene)
+	light.position = new BABYLON.Vector3(20, 39, 20)
+	light.intensity = 0.5
 	
-	createMoon();
-	createImagePlane();
+	createMoon()
+	createImagePlane()
 	
 	engine.runRenderLoop(function(){
-		ARjs.Babylon.setObject3D(babylonCamera, markerControls.object3d)
+		ARjs.Babylon.updateObjectPose(babylonCamera, camera)
 
-		scene.render();
-	});
+		scene.render()
+	})
 	
 	window.addEventListener('resize', function(){
-		engine.resize();
-	});
-});
+		engine.resize()
+	})
+})
  </script>
 
 <script>
+// ;(function(){
+// 	
+// })()
 	//////////////////////////////////////////////////////////////////////////////////
 	//		Init
 	//////////////////////////////////////////////////////////////////////////////////
@@ -132,127 +120,92 @@ window.addEventListener('DOMContentLoaded', function(){
 	var renderer	= new THREE.WebGLRenderer({
 		antialias: true,
 		alpha: true
-	});
+	})
 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
-	renderer.setSize( 640, 480 );
+	renderer.setSize( 640, 480 )
 	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 scene	= new THREE.Scene()
+
+	var trackingMethod = 'area-artoolkit'
+
 	//////////////////////////////////////////////////////////////////////////////////
-	//		Initialize a basic camera
+	//		Initialize the camera
 	//////////////////////////////////////////////////////////////////////////////////
 
-	// Create a camera
-	var camera = new THREE.Camera();
-	scene.add(camera);
-	console.log('STEP: creating new bjsCamera')
-	// var bjscamera = new BABYLON.Camera("bcam",new BABYLON.Vector3(0,0,0),bscene); //https://doc.babylonjs.com/classes/2.5/camera
-	////////////////////////////////////////////////////////////////////////////////
-	//          handle arToolkitSource
-	////////////////////////////////////////////////////////////////////////////////
-
-	var arToolkitSource = new THREEx.ArToolkitSource({
-		// to read from the webcam 
-		sourceType : 'webcam',
-	})
+	var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
+	scene.add(camera)
 
-	arToolkitSource.init(function onReady(){
-		onResize()
-	})
 	
-	// handle resize
-	window.addEventListener('resize', function(){
-		onResize()
-	})
-	function onResize(){
-		arToolkitSource.onResize()	
-		arToolkitSource.copySizeTo(renderer.domElement)	
-		if( arToolkitContext.arController !== null ){
-			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
-		}	
-	}
 	////////////////////////////////////////////////////////////////////////////////
-	//          initialize arToolkitContext
+	//          	Set up Arjs.Profile
 	////////////////////////////////////////////////////////////////////////////////
-	
 
-	// create atToolkitContext
-	var arToolkitContext = new THREEx.ArToolkitContext({
-		// cameraParametersUrl: '../data/camera_para.dat',
-		// cameraParametersUrl: THREEx.ArToolkitContext.baseURL +'../data/camera_para.dat',
-		cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
-		detectionMode: 'mono',
-	})
-	// initialize it
-	arToolkitContext.init(function onCompleted(){  //ARCameraParam loaded file and created ARController, calls back through a chain to here.
-		// copy projection matrix to camera!! projection Matrix is...camera_mat?
-		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
-	// bjscamera._projectionMatrix =  arToolkitContext.getProjectionMatrix() ;
-	// 	console.log('STEP: ProjectionMatrix put into Camera.')
-	})
+	var arProfile = new ARjs.Profile()
+		.sourceWebcam()
+		.trackingMethod(trackingMethod)
+		// .changeMatrixMode('modelViewMatrix')
+		.changeMatrixMode('cameraTransformMatrix')
+		.defaultMarker()
+		.checkIfValid()
 
-	// update artoolkit on every frame
-	onRenderFcts.push(function(){ //RUNTIME-LOOP...
-		if( arToolkitSource.ready === false )	return
 
-		arToolkitContext.update( arToolkitSource.domElement ) //passes in the video component
-		
-		// update scene.visible if the marker is seen
-		scene.visible = true //SHOW 3D ALWAYS....
-		// scene.visible = camera.visible
+	if( arProfile.contextParameters.trackingBackend === 'tango' ){
+		arProfile.changeMatrixMode('cameraTransformMatrix')
+	}
+
+	//////////////////////////////////////////////////////////////////////////////
+	//		build ARjs.Session
+	//////////////////////////////////////////////////////////////////////////////
+
+	var arSession = new ARjs.Session({
+		scene: scene,
+		renderer: renderer,
+		camera: camera,
+		sourceParameters: arProfile.sourceParameters,
+		contextParameters: arProfile.contextParameters		
 	})
-		
+	onRenderFcts.push(function(){
+		arSession.update()
+	})
+	
 	////////////////////////////////////////////////////////////////////////////////
-	//          Create a ArMarkerControls
+	//          Create a ARjs.Anchor
 	////////////////////////////////////////////////////////////////////////////////
-	console.log('STEP: possibly swap out camera early.')
-	// init controls for camera
-	var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
-		type : 'pattern',
-		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
-		// as we controls the camera, set changeMatrixMode: 'cameraTransformMatrix'
-		changeMatrixMode: 'cameraTransformMatrix'
+
+	var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters)
+	onRenderFcts.push(function(){
+		arAnchor.update()
 	})
-	// as we do changeMatrixMode: 'cameraTransformMatrix', start with invisible scene
-	scene.visible = true
-	// scene.visible = false
-	// 
-	// 
-	// markerControls.addEventListener('markerFound', function(){
-	// 	var markerObject3D = markerControls.object3d
-	// 	var modelViewMatrix = markerObject3D.matrix
-	// 
-	// 	// cameraBabylon._computedViewMatrix = new BABYLON.Matrix.FromArray(modelViewMatrix.toArray());
-	// 	cameraBabylon._computedViewMatrix.m.set(modelViewMatrix.toArray());
-	// })
+
 	//////////////////////////////////////////////////////////////////////////////////
 	//		add an object in the scene
 	//////////////////////////////////////////////////////////////////////////////////
 
+	var arWorldRoot = arAnchor.object3d
+
 	// add a torus knot	
-	var geometry	= new THREE.CubeGeometry(1,1,1);
+	var geometry	= new THREE.CubeGeometry(1,1,1)
 	var material	= new THREE.MeshNormalMaterial({
 		transparent : true,
 		opacity: 0.5,
 		side: THREE.DoubleSide
-	}); 
-	var mesh	= new THREE.Mesh( geometry, material );
+	}) 
+	var mesh	= new THREE.Mesh( geometry, material )
 	// mesh.position.y	= geometry.parameters.height/2
-	scene.add( mesh );
+	arWorldRoot.add( mesh )
 	
-	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,64,16);
-	var material	= new THREE.MeshNormalMaterial(); 
-	var mesh	= new THREE.Mesh( geometry, material );
+	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,64,16)
+	var material	= new THREE.MeshNormalMaterial() 
+	var mesh	= new THREE.Mesh( geometry, material )
 	// mesh.position.y	= 0.5
-	// scene.add( mesh );
+	// arWorldRoot.add( mesh )
 	
 	onRenderFcts.push(function(delta){
 		mesh.rotation.x += Math.PI*delta
@@ -264,14 +217,22 @@ window.addEventListener('DOMContentLoaded', function(){
 
 	// render the scene
 	onRenderFcts.push(function(){
-		renderer.render( scene, camera );
+		// update all matrixWorld
+		scene.updateMatrixWorld()
 	})
 
+	if( true ){
+		document.body.appendChild( renderer.domElement )
+		onRenderFcts.push(function(){
+			renderer.render( scene, camera )
+		})		
+	}
+
 	// run the rendering loop
 	var lastTimeMsec= null
 	requestAnimationFrame(function animate(nowMsec){
 		// keep looping
-		requestAnimationFrame( animate );
+		requestAnimationFrame( animate )
 		// measure time
 		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
 		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
diff --git a/babylon.js/src/babylon-ar.js b/babylon.js/src/babylon-ar.js
index b62bfb2f4d09e3fe8e7c93070af9587b4a067a18..f64b73475aa49e053977dfae068a590ca397c505 100644
--- a/babylon.js/src/babylon-ar.js
+++ b/babylon.js/src/babylon-ar.js
@@ -4,17 +4,21 @@ var ARjs = ARjs || {}
 ARjs.Babylon = function(){}
 
 ARjs.Babylon.createCamera = function(scene){
-			var babylonCamera = new BABYLON.ArcRotateCamera("GlobalRotativeCamera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -1), scene);
-			// arcRotateCamera.setPosition(new BABYLON.Vector3(0, 50, 80));
-			// arcRotateCamera.setTarget(BABYLON.Vector3.Zero());
-			// arcRotateCamera.attachControl(canvas, true);
-	// debugger
-			scene.activeCamera.fovmode = BABYLON.Camera.fovmode_HORIZONTAL_FIXED;
-			scene.activeCamera.fov = 2*22 / 180*Math.PI
+	var babylonCamera = new BABYLON.ArcRotateCamera("GlobalRotativeCamera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -1), scene);
+	// arcRotateCamera.setPosition(new BABYLON.Vector3(0, 50, 80));
+	// arcRotateCamera.setTarget(BABYLON.Vector3.Zero());
+	// arcRotateCamera.attachControl(canvas, true);
+
+	scene.activeCamera.fovmode = BABYLON.Camera.fovmode_HORIZONTAL_FIXED;
+	scene.activeCamera.fov = 2*22 / 180*Math.PI
 	return babylonCamera
 }
 
-ARjs.Babylon.setObject3D = function(babylonObject3D, threeObject3D){
+ARjs.Babylon.updateCamera = function(babylonCamera, threeCamera){
+	
+}
+
+ARjs.Babylon.updateObjectPose = function(babylonObject3D, threeObject3D){
 	var modelViewMatrix = threeObject3D.matrix
 
 	threeObject3D.updateMatrixWorld()
diff --git a/three.js/build/ar.js b/three.js/build/ar.js
index 7a9e6a73bac1bf5e7aacb968375f8c15a6ac08a7..d96d3fb414d78c83ea7d966620403d34220077ad 100644
--- a/three.js/build/ar.js
+++ b/three.js/build/ar.js
@@ -7367,11 +7367,11 @@ ARjs.MarkersAreaControls.prototype.updateSmoothedControls = function(smoothedCon
 		// {lerpPosition: 0.5, lerpQuaternion: 0.2, lerpQuaternion: 0.7}
 		// ]
 		lerpsValues = [
-			[0.1, 0.1, 0.3],
-			[0.2, 0.1, 0.4],
-			[0.2, 0.2, 0.5],
-			[0.3, 0.2, 0.7],
-			[0.3, 0.2, 0.7],
+			[0.3+.1, 0.1, 0.3],
+			[0.4+.1, 0.1, 0.4],
+			[0.4+.1, 0.2, 0.5],
+			[0.5+.1, 0.2, 0.7],
+			[0.5+.1, 0.2, 0.7],
 		]
 	}
 	// count how many subMarkersControls are visible