diff --git a/three.js/examples/augmented-website/app/index.html b/three.js/examples/augmented-website/app/index.html
index 0f83cb84a42d5c0e5ba93af478f6cb93dc500df5..596a3f658c68898630b65b2d6faa13ffcde983e4 100644
--- a/three.js/examples/augmented-website/app/index.html
+++ b/three.js/examples/augmented-website/app/index.html
@@ -1,3 +1,4 @@
+<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='js/threex-augmentedwebpages.js'></script>
diff --git a/three.js/examples/augmented-website/landing-page/js/arAppURL.js b/three.js/examples/augmented-website/landing-page/js/arAppURL.js
index 26309687eb9f60caa719ce1f96fb97720a3cd397..0dfdb768d0cf21c1ea1fd800598013349fb998ba 100644
--- a/three.js/examples/augmented-website/landing-page/js/arAppURL.js
+++ b/three.js/examples/augmented-website/landing-page/js/arAppURL.js
@@ -74,7 +74,7 @@ function updateArAppURL(){
 		// build url
 		// FIXME pass from relative to absolute url in a better way
 		// urlOptions.arAppURL = location.protocol + '//' + location.host + location.pathname.replace(/[^\/]*$/, '') + '../vendor/ar.js/three.js/examples/augmented-website/examples/screenAsPortal/index.html'		
-		urlOptions.arAppURL = location.protocol + '//' + location.host + location.pathname.replace(/[^\/]*$/, '') + 'examples/screenAsPortal/index.html'		
+		urlOptions.arAppURL = location.protocol + '//' + location.host + location.pathname.replace(/[^\/]*$/, '') + '../screenAsPortal/index.html'		
 	}
 
 	//////////////////////////////////////////////////////////////////////////////
diff --git a/three.js/examples/augmented-website/examples/screenAsPortal/images/box.png b/three.js/examples/screenAsPortal/images/box.png
similarity index 100%
rename from three.js/examples/augmented-website/examples/screenAsPortal/images/box.png
rename to three.js/examples/screenAsPortal/images/box.png
diff --git a/three.js/examples/augmented-website/examples/screenAsPortal/images/target.png b/three.js/examples/screenAsPortal/images/target.png
similarity index 100%
rename from three.js/examples/augmented-website/examples/screenAsPortal/images/target.png
rename to three.js/examples/screenAsPortal/images/target.png
diff --git a/three.js/examples/augmented-website/examples/screenAsPortal/index.html b/three.js/examples/screenAsPortal/index.html
similarity index 87%
rename from three.js/examples/augmented-website/examples/screenAsPortal/index.html
rename to three.js/examples/screenAsPortal/index.html
index ebd2e816c552c05d5fe76ff5806998089567b6a9..8c26e50beb77a0dffdf96640b803c36ced48a7f5 100644
--- a/three.js/examples/augmented-website/examples/screenAsPortal/index.html
+++ b/three.js/examples/screenAsPortal/index.html
@@ -1,30 +1,30 @@
 <!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>
+<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>
+<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='../../../../threex/threex-aruco/threex-arucocontext.js'></script> 
-<script src='../../../../threex/threex-aruco/threex-arucodebug.js'></script>
+<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='../../threex/threex-aruco/threex-arucocontext.js'></script> 
+<script src='../../threex/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='../../../multi-markers/threex-armultimarkercontrols.js'></script>
-<script src='../../../multi-markers/threex-armultimarkerlearning.js'></script>
+<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='../multi-markers/threex-armultimarkercontrols.js'></script>
+<script src='../multi-markers/threex-armultimarkerlearning.js'></script>
 
 <script src='js/threex-screenasportal.js'></script>
 
@@ -45,7 +45,7 @@
 	<a href='javascript:void(0)' onclick='toggleMarkerHelper()'>marker helper : <span id='markerHelpersStatus'></span></a>
 </div>
 <div style='position: fixed; bottom: 16px; right: 16px; z-index:1';>
-	<img id='recordButton' src="../../../multi-markers/examples/images/record-start.png" width='64px'  height='64px'>
+	<img id='recordButton' src="../multi-markers/examples/images/record-start.png" width='64px'  height='64px'>
 </div>
 
 <script>
diff --git a/three.js/examples/augmented-website/examples/screenAsPortal/js/threex-screenasportal.js b/three.js/examples/screenAsPortal/js/threex-screenasportal.js
similarity index 100%
rename from three.js/examples/augmented-website/examples/screenAsPortal/js/threex-screenasportal.js
rename to three.js/examples/screenAsPortal/js/threex-screenasportal.js
diff --git a/three.js/examples/show-gravity.html b/three.js/examples/show-gravity-raw.html
similarity index 99%
rename from three.js/examples/show-gravity.html
rename to three.js/examples/show-gravity-raw.html
index 601ecb869403de29743bbc51f592f0d0dd8c581c..3181a044c837321af795cc662aac5ce4f2381b9e 100644
--- a/three.js/examples/show-gravity.html
+++ b/three.js/examples/show-gravity-raw.html
@@ -58,8 +58,6 @@ function onDeviceMotion(event) {
 	gravity.y = event.accelerationIncludingGravity.y - event.acceleration.y
 	gravity.z = event.accelerationIncludingGravity.z - event.acceleration.z
 	document.querySelector('#gravityLength').innerHTML = gravity.length().toFixed(2)
-	
-
 }
 window.addEventListener("devicemotion", onDeviceMotion, true);
 
diff --git a/three.js/examples/show-gravity-webgl.html b/three.js/examples/show-gravity-webgl.html
new file mode 100644
index 0000000000000000000000000000000000000000..63bc20e980f01d1463636307ccefcd7f09f5e58f
--- /dev/null
+++ b/three.js/examples/show-gravity-webgl.html
@@ -0,0 +1,141 @@
+<!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.min.js'></script>
+<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> - three.js camera transform
+	<br/>
+	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
+</div><script>
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Init
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// init renderer
+	var renderer	= new THREE.WebGLRenderer({
+		antialias: true,
+		alpha: true
+	});
+	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();
+		
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Initialize a basic camera
+	//////////////////////////////////////////////////////////////////////////////////
+
+
+	// Create a camera
+	var camera = new THREE.PerspectiveCamera( 23*2, window.innerWidth / window.innerHeight, 0.01, 100 );
+	camera.position.z = 4;
+	window.addEventListener( 'resize', function() {
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+		
+		renderer.setSize( window.innerWidth, window.innerHeight );
+	}, false );
+			
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object in the scene
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// add a torus knot	
+	var geometry	= new THREE.CubeGeometry(1,1,1);
+	var material	= new THREE.MeshNormalMaterial({
+		transparent : true,
+		opacity: 0.5,
+		side: THREE.DoubleSide
+	}); 
+	var meshCube	= new THREE.Mesh( geometry, material );
+	scene.add( meshCube );
+	
+	meshCube.add( new THREE.AxisHelper() )
+	
+	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,64,16);
+	var material	= new THREE.MeshNormalMaterial(); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	meshCube.add( mesh );
+	
+	onRenderFcts.push(function(delta){
+		mesh.rotation.x += Math.PI*delta
+	})
+
+	window.addEventListener("deviceorientation", function onDeviceOrientation(event) {
+		var deviceEuler = new THREE.Euler()
+		deviceEuler.x =  event.beta  / 180 * Math.PI
+		deviceEuler.y =  event.gamma / 180 * Math.PI
+		deviceEuler.z =  event.alpha / 180 * Math.PI
+		deviceEuler.order = "XZY"
+	
+		var controllerQuaternion = new THREE.Quaternion().setFromEuler(deviceEuler).inverse()			
+		meshCube.quaternion.copy(controllerQuaternion)			
+	});
+
+
+	// window.addEventListener("deviceorientation", function onDeviceOrientation(event) {
+	// 	var deviceEuler = new THREE.Euler()
+	// 	deviceEuler.x =  event.beta  / 180 * Math.PI
+	// 	deviceEuler.y =  event.gamma / 180 * Math.PI
+	// 	deviceEuler.z =  event.alpha / 180 * Math.PI
+	// 	deviceEuler.order = "XZY"
+	// 
+	// 	var controllerQuaternion = new THREE.Quaternion().setFromEuler(deviceEuler).inverse()			
+	// 	meshCube.quaternion.copy(controllerQuaternion)			
+	// });
+	// 
+
+
+	// window.addEventListener("devicemotion", function onDeviceMotion(event) {
+	// 	// document.querySelector('#accelerationIncludingGravityX').innerHTML = event.accelerationIncludingGravity.x.toFixed(2)
+	// 	// document.querySelector('#accelerationIncludingGravityY').innerHTML = event.accelerationIncludingGravity.y.toFixed(2)
+	// 	// document.querySelector('#accelerationIncludingGravityZ').innerHTML = event.accelerationIncludingGravity.z.toFixed(2)
+	// 	// 
+	// 	// document.querySelector('#accelerationX').innerHTML = event.acceleration.x.toFixed(2)
+	// 	// document.querySelector('#accelerationY').innerHTML = event.acceleration.y.toFixed(2)
+	// 	// document.querySelector('#accelerationZ').innerHTML = event.acceleration.z.toFixed(2)
+	// 	// 
+	// 	// document.querySelector('#gravityX').innerHTML = (event.accelerationIncludingGravity.x - event.acceleration.x).toFixed(2)
+	// 	// document.querySelector('#gravityY').innerHTML = (event.accelerationIncludingGravity.y - event.acceleration.y).toFixed(2)
+	// 	// document.querySelector('#gravityZ').innerHTML = (event.accelerationIncludingGravity.z - event.acceleration.z).toFixed(2)
+	// 	// 
+	// 	var gravity = new THREE.Vector3()
+	// 	gravity.x = event.accelerationIncludingGravity.x - event.acceleration.x
+	// 	gravity.y = event.accelerationIncludingGravity.y - event.acceleration.y
+	// 	gravity.z = event.accelerationIncludingGravity.z - event.acceleration.z
+	// 
+	// 	meshCube.lookAt(gravity)
+	// });
+
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the whole thing on the page
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// render the scene
+	onRenderFcts.push(function(){
+		renderer.render( scene, camera );
+	})
+
+	// 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>
diff --git a/three.js/examples/threejs-boilerplate.html b/three.js/examples/threejs-boilerplate.html
new file mode 100644
index 0000000000000000000000000000000000000000..5e19b0f15408bc9482f2c884fc7e05f82ddfbed2
--- /dev/null
+++ b/three.js/examples/threejs-boilerplate.html
@@ -0,0 +1,92 @@
+<!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.min.js'></script>
+<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> - three.js camera transform
+	<br/>
+	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
+</div><script>
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Init
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// init renderer
+	var renderer	= new THREE.WebGLRenderer({
+		antialias: true,
+		alpha: true
+	});
+	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();
+		
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Initialize a basic camera
+	//////////////////////////////////////////////////////////////////////////////////
+
+
+	// Create a camera
+	var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
+	camera.position.z = 3;
+	window.addEventListener( 'resize', function() {
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+		
+		renderer.setSize( window.innerWidth, window.innerHeight );
+	}, false );
+			
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object in the scene
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// add a torus knot	
+	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 );
+	scene.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 );
+	scene.add( mesh );
+	
+	onRenderFcts.push(function(delta){
+		mesh.rotation.x += Math.PI*delta
+	})
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the whole thing on the page
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// render the scene
+	onRenderFcts.push(function(){
+		renderer.render( scene, camera );
+	})
+
+	// 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>
