more work

TODO.md

 ## New API - aframe
-
 - honor marker preset
 
 - artoolkit modelViewMatrix/cameraTransformMatrix works
 
-- area-artoolkit fails in cameraTransformMatrix
-  - wtf ??? so issue upstream ? how to reproduce in three.js
-
-- aruco got perspective issue - likely camera init
+- put multi-markers in /src/markers-area
+  - /examples/markers-area/ - here all the examples
+  - put marker page in this directory too
+  - three.js/examples/multi-markers/\*.js in /src/markers-area
+- refactor threex-screenasportal as a demo in /examples/markers-area/demo-screen-as-portal
+  - this is not a threex
 
 - tango video fails
   - some post processing in aframe.js - https://github.com/wizgrav/aframe-effects/blob/master/systems/effects.js
   - it seems to override renderer.render by its own function... not super clean but if it works ok
   - it can be changed later
-
 - tango tracking is working ? i think so
-  - test in both mode   
+  - test in both mode
   - tracking only tho, clearly no video
 
-- DONE remove arSession.onResize2() - thus the API is cleaner
-  - do a onResize with a test on argument.length - if not good number call old stuff
-- DONE put the UI in the plugin
-  - do a special function for it, and call this function from javascript
-  - or more like a data in the system
+- LATER aruco got perspective issue - likely camera init
+
 
 ## New API
 
-- build a aframe version of that to see how it fit
-  - when api is stable enougth ?
-  - when all the bugs are sorted out
-    - currently only something about displaying point cloud in tango - very minor
+- clickability works IIF changeMatrixMode === modelViewMatrix
+  - change that
+  - not a bug, it is just not implemented
+  - arjs-hittester and threex-arclickability are messy
+  - clean those 2. no need for 2 class ?
+  - which API will remain
+  - hittester-plane
+  - hittester-tango
+  - replace ARClickability with something better and port arjs-hittester on top
 
 - Check it works on all cases
   - no special cases incompatibilities
   - changeMatrixMode
   - tango point cloud fails in cameraTransformMatrix
 
-- move three.js/arjs-.js in three.js/src/newApi/
 - later rename file/class
   - move all THREEx for ar.js as ARjs.
   - remove artoolkit in the name when it is multi backend
@@ -53,6 +54,17 @@
   - arkit
   - best
 
+- DONE area-artoolkit fails in cameraTransformMatrix
+  - wtf ??? so issue upstream ? how to reproduce in three.js
+  - is the error in three.js level, or aframe level
+  - apparently setting cameraTransformMatrix or modelViewMatrix in changeMatrixMode doesnt change a thing in area-artoolkit
+  - area-artoolkit seems to react as if it was always modelViewMatrix
+- DONE remove arSession.onResize2() - thus the API is cleaner
+  - do a onResize with a test on argument.length - if not good number call old stuff
+- DONE put the UI in the plugin
+  - do a special function for it, and call this function from javascript
+  - or more like a data in the system
+- DONE move three.js/arjs-.js in three.js/src/newApi/
 - DONE pick real world with all trackingMethod
   - hit tester with plane
 - DONE button tangoonly pointcloudtoggle

aframe/Makefile

@@ -5,6 +5,7 @@ watch: build
 build:
 	cat ../three.js/threex*.js \
 		../three.js/examples/multi-markers/threex*.js \
+		../three.js/src/newAPI/*.js \
 		aframe-ar.js \
 		../three.js/vendor/jsartoolkit5/build/artoolkit.min.js \
 		../three.js/vendor/jsartoolkit5/js/artoolkit.api.js \
@@ -12,16 +13,3 @@ build:
 
 minify: build
 	uglifyjs build/aframe-ar.js > build/aframe-ar.min.js
-
-#####
-
-build0:
-	cat ../three.js/threex*.js \
-		../three.js/examples/multi-markers/threex*.js \
-		aframe-ar.js \
-		../three.js/vendor/jsartoolkit5/build/artoolkit.min.js \
-		../three.js/vendor/jsartoolkit5/js/artoolkit.api.js \
-		> build/aframe-ar0.js 
-
-minify0: build0
-	uglifyjs build/aframe-ar0.js > build/aframe-ar0.min.js

aframe/examples/aframe-session.html

@@ -62,17 +62,17 @@
 	</div>
 
 	<!-- artoolkit modelViewMatrix : OK -->
-	<!-- <a-scene embedded arjs='trackingMethod: area-artoolkit; debugUIEnabled: true;'>
-		<a-marker>
+	<a-scene embedded arjs='trackingMethod: area-artoolkit; debugUIEnabled: true;'>
+		<a-marker preset='area'>
 			<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'></a-box>
 		</a-marker>
 		<a-entity camera></a-entity>
-	</a-scene> -->
+	</a-scene>
 
 	<!-- artoolkit cameraTransformMatrix : OK -->
 	<!-- <a-scene embedded arjs='trackingMethod: area-artoolkit; debugUIEnabled: true;'>
 		<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'></a-box>
-		<a-marker-camera preset='hiro'></a-marker-camera>
+		<a-marker-camera preset='area'></a-marker-camera>
 	</a-scene> -->
 
 	<!-- artoolkit cameraTransformMatrix : FAILS -->
@@ -87,11 +87,11 @@
 		<a-marker-camera></a-marker-camera>
 	</a-scene> -->
 
-	<a-scene embedded arjs='trackingMethod: tango'>
+	<!-- <a-scene embedded arjs='trackingMethod: tango'>
 		<a-marker>
 			<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'></a-box>
 		</a-marker>
 		<a-entity camera></a-entity>
-	</a-scene>
+	</a-scene> -->
 </body>
 </html>

three.js/build/ar.js

@@ -2389,9 +2389,10 @@ THREEx.ArSmoothedControls.prototype.update = function(targetObject3d){
 		object3d.scale.lerp(targetObject3d.scale, parameters.lerpScale)
 	}
 }
+var ARjs = ARjs || {}
 var THREEx = THREEx || {}
 
-THREEx.ArToolkitContext = function(parameters){
+ARjs.Context = THREEx.ArToolkitContext = function(parameters){
 	var _this = this
 	
 	_this._updatedAt = null
@@ -2408,7 +2409,7 @@ THREEx.ArToolkitContext = function(parameters){
 		matrixCodeType: '3x3',
 		
 		// url of the camera parameters
-		cameraParametersUrl: THREEx.ArToolkitContext.baseURL + 'parameters/camera_para.dat',
+		cameraParametersUrl: ARjs.Context.baseURL + 'parameters/camera_para.dat',
 
 		// tune the maximum rate of pose detection in the source image
 		maxDetectionRate: 60,
@@ -2458,12 +2459,12 @@ THREEx.ArToolkitContext = function(parameters){
 	}
 }
 
-Object.assign( THREEx.ArToolkitContext.prototype, THREE.EventDispatcher.prototype );
+Object.assign( ARjs.Context.prototype, THREE.EventDispatcher.prototype );
 
-// THREEx.ArToolkitContext.baseURL = '../'
+// ARjs.Context.baseURL = '../'
 // default to github page
-THREEx.ArToolkitContext.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
-THREEx.ArToolkitContext.REVISION = '1.0.1-dev'
+ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
+ARjs.Context.REVISION = '1.0.1-dev'
 
 
 
@@ -2472,7 +2473,7 @@ THREEx.ArToolkitContext.REVISION = '1.0.1-dev'
  * @param {string} trackingBackend - the tracking to user
  * @return {THREE.Camera} the created camera
  */
-THREEx.ArToolkitContext.createDefaultCamera = function( trackingBackend ){
+ARjs.Context.createDefaultCamera = function( trackingBackend ){
 	console.assert(false, 'use ARjs.Utils.createDefaultCamera instead')
 	// Create a camera
 	if( trackingBackend === 'artoolkit' ){
@@ -2489,7 +2490,7 @@ THREEx.ArToolkitContext.createDefaultCamera = function( trackingBackend ){
 //////////////////////////////////////////////////////////////////////////////
 //		init functions
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype.init = function(onCompleted){
+ARjs.Context.prototype.init = function(onCompleted){
 	var _this = this
 	if( this.parameters.trackingBackend === 'artoolkit' ){
 		this._initArtoolkit(done)
@@ -2515,7 +2516,7 @@ THREEx.ArToolkitContext.prototype.init = function(onCompleted){
 ////////////////////////////////////////////////////////////////////////////////
 //          update function
 ////////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype.update = function(srcElement){
+ARjs.Context.prototype.update = function(srcElement){
 
 	// be sure arController is fully initialized
         if(this.parameters.trackingBackend === 'artoolkit' && this.arController === null) return false;
@@ -2556,12 +2557,12 @@ THREEx.ArToolkitContext.prototype.update = function(srcElement){
 ////////////////////////////////////////////////////////////////////////////////
 //          Add/Remove markerControls
 ////////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype.addMarker = function(arMarkerControls){
+ARjs.Context.prototype.addMarker = function(arMarkerControls){
 	console.assert(arMarkerControls instanceof THREEx.ArMarkerControls)
 	this._arMarkersControls.push(arMarkerControls)
 }
 
-THREEx.ArToolkitContext.prototype.removeMarker = function(arMarkerControls){
+ARjs.Context.prototype.removeMarker = function(arMarkerControls){
 	console.assert(arMarkerControls instanceof THREEx.ArMarkerControls)
 	// console.log('remove marker for', arMarkerControls)
 	var index = this.arMarkerControlss.indexOf(artoolkitMarker);
@@ -2572,7 +2573,7 @@ THREEx.ArToolkitContext.prototype.removeMarker = function(arMarkerControls){
 //////////////////////////////////////////////////////////////////////////////
 //		artoolkit specific
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype._initArtoolkit = function(onCompleted){
+ARjs.Context.prototype._initArtoolkit = function(onCompleted){
         var _this = this
 
 	// set this._artoolkitProjectionAxisTransformMatrix to change artoolkit projection matrix axis to match usual webgl one
@@ -2643,7 +2644,7 @@ THREEx.ArToolkitContext.prototype._initArtoolkit = function(onCompleted){
 /**
  * return the projection matrix
  */
-THREEx.ArToolkitContext.prototype.getProjectionMatrix = function(srcElement){
+ARjs.Context.prototype.getProjectionMatrix = function(srcElement){
 	
 	
 // FIXME rename this function to say it is artoolkit specific - getArtoolkitProjectMatrix
@@ -2666,14 +2667,14 @@ THREEx.ArToolkitContext.prototype.getProjectionMatrix = function(srcElement){
 	return projectionMatrix
 }
 
-THREEx.ArToolkitContext.prototype._updateArtoolkit = function(srcElement){
+ARjs.Context.prototype._updateArtoolkit = function(srcElement){
 	this.arController.process(srcElement)
 }
 
 //////////////////////////////////////////////////////////////////////////////
 //		aruco specific 
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype._initAruco = function(onCompleted){
+ARjs.Context.prototype._initAruco = function(onCompleted){
 	this.arucoContext = new THREEx.ArucoContext()
 	
 	// honor this.parameters.canvasWidth/.canvasHeight
@@ -2694,7 +2695,7 @@ THREEx.ArToolkitContext.prototype._initAruco = function(onCompleted){
 }
 
 
-THREEx.ArToolkitContext.prototype._updateAruco = function(srcElement){
+ARjs.Context.prototype._updateAruco = function(srcElement){
 	// console.log('update aruco here')
 	var _this = this
 	var arMarkersControls = this._arMarkersControls
@@ -2722,7 +2723,7 @@ THREEx.ArToolkitContext.prototype._updateAruco = function(srcElement){
 //////////////////////////////////////////////////////////////////////////////
 //		tango specific 
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype._initTango = function(onCompleted){
+ARjs.Context.prototype._initTango = function(onCompleted){
 	var _this = this
 	// check webvr is available
 	if (navigator.getVRDisplays){
@@ -2765,7 +2766,7 @@ THREEx.ArToolkitContext.prototype._initTango = function(onCompleted){
 }
 
 
-THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
+ARjs.Context.prototype._updateTango = function(srcElement){
 	// console.log('update aruco here')
 	var _this = this
 	var arMarkersControls = this._arMarkersControls
@@ -2818,7 +2819,6 @@ THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
 
 }
 var ARjs = ARjs || {}
-
 var THREEx = THREEx || {}
 
 /**
@@ -2994,32 +2994,59 @@ ARjs.Profile.prototype.checkIfValid = function () {
 	}
 	return this
 }
+var ARjs = ARjs || {}
 var THREEx = THREEx || {}
 
-THREEx.ArToolkitSource = function(parameters){	
+ARjs.Source = THREEx.ArToolkitSource = function(parameters){	
+	var _this = this
+
+	this.ready = false
+        this.domElement = null
+
 	// handle default parameters
 	this.parameters = {
 		// type of source - ['webcam', 'image', 'video']
-		sourceType : parameters.sourceType !== undefined ? parameters.sourceType : 'webcam',
+		sourceType : 'webcam',
 		// url of the source - valid if sourceType = image|video
-		sourceUrl : parameters.sourceUrl !== undefined ? parameters.sourceUrl : null,
+		sourceUrl : null,
 		
 		// resolution of at which we initialize in the source image
-		sourceWidth: parameters.sourceWidth !== undefined ? parameters.sourceWidth : 640,
-		sourceHeight: parameters.sourceHeight !== undefined ? parameters.sourceHeight : 480,
+		sourceWidth: 640,
+		sourceHeight: 480,
 		// resolution displayed for the source 
-		displayWidth: parameters.displayWidth !== undefined ? parameters.displayWidth : 640,
-		displayHeight: parameters.displayHeight !== undefined ? parameters.displayHeight : 480,
+		displayWidth: 640,
+		displayHeight: 480,
 	}
+	//////////////////////////////////////////////////////////////////////////////
+	//		setParameters
+	//////////////////////////////////////////////////////////////////////////////
+	setParameters(parameters)
+	function setParameters(parameters){
+		if( parameters === undefined )	return
+		for( var key in parameters ){
+			var newValue = parameters[ key ]
 
-	this.ready = false
-        this.domElement = null
+			if( newValue === undefined ){
+				console.warn( "THREEx.ArToolkitSource: '" + key + "' parameter is undefined." )
+				continue
+			}
+
+			var currentValue = _this.parameters[ key ]
+
+			if( currentValue === undefined ){
+				console.warn( "THREEx.ArToolkitSource: '" + key + "' is not a property of this material." )
+				continue
+			}
+
+			_this.parameters[ key ] = newValue
+		}
+	}	
 }
 
 //////////////////////////////////////////////////////////////////////////////
 //		Code Separator
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitSource.prototype.init = function(onReady, onError){
+ARjs.Source.prototype.init = function(onReady, onError){
 	var _this = this
 
         if( this.parameters.sourceType === 'image' ){
@@ -3055,7 +3082,7 @@ THREEx.ArToolkitSource.prototype.init = function(onReady, onError){
 ////////////////////////////////////////////////////////////////////////////////
 
 
-THREEx.ArToolkitSource.prototype._initSourceImage = function(onReady) {
+ARjs.Source.prototype._initSourceImage = function(onReady) {
 	// TODO make it static
         var domElement = document.createElement('img')
 	domElement.src = this.parameters.sourceUrl
@@ -3080,7 +3107,7 @@ THREEx.ArToolkitSource.prototype._initSourceImage = function(onReady) {
 ////////////////////////////////////////////////////////////////////////////////
 
 
-THREEx.ArToolkitSource.prototype._initSourceVideo = function(onReady) {
+ARjs.Source.prototype._initSourceVideo = function(onReady) {
 	// TODO make it static
 	var domElement = document.createElement('video');
 	domElement.src = this.parameters.sourceUrl
@@ -3117,12 +3144,12 @@ THREEx.ArToolkitSource.prototype._initSourceVideo = function(onReady) {
 //          handle webcam source
 ////////////////////////////////////////////////////////////////////////////////
 
-THREEx.ArToolkitSource.prototype._initSourceWebcam = function(onReady, onError) {
+ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
 	var _this = this
-debugger
+
 	// init default value
 	onError = onError || function(error){	
-		alert('Cant init webcam due to '+error.message)
+		alert('Webcam Error\nName: '+error.name + '\nMessage: '+error.message)
 	}
 
 	var domElement = document.createElement('video');
@@ -3132,13 +3159,18 @@ debugger
 	domElement.style.width = this.parameters.displayWidth+'px'
 	domElement.style.height = this.parameters.displayHeight+'px'
 
+	// check API is available
 	if (navigator.mediaDevices === undefined 
 			|| navigator.mediaDevices.enumerateDevices === undefined 
 			|| navigator.mediaDevices.getUserMedia === undefined  ){
-		onError("WebRTC issue! navigator.mediaDevices.enumerateDevices not present in your browser")
+		onError({
+			name: '',
+			message: 'WebRTC issue! navigator.mediaDevices.enumerateDevices not present in your browser'
+		})
 		return
 	}
 
+	// get available devices
 	navigator.mediaDevices.enumerateDevices().then(function(devices) {
                 var userMediaConstraints = {
 			audio: false,
@@ -3156,6 +3188,7 @@ debugger
 				}
 		  	}
                 }
+		// get a device which satisfy the constraints
 		navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
 			// set the .src of the domElement
 			domElement.srcObject = stream;
@@ -3164,6 +3197,7 @@ debugger
 				domElement.play();
 			})
 			// domElement.play();
+
 // TODO listen to loadedmetadata instead
 			// wait until the video stream is ready
 			var interval = setInterval(function() {
@@ -3173,7 +3207,8 @@ debugger
 			}, 1000/50);
 		}).catch(function(error) {
 			onError({
-				message: "Can't access user media :()"
+				name: error.name,
+				message: error.message
 			});
 		});
 	}).catch(function(error) {
@@ -3188,7 +3223,7 @@ debugger
 //////////////////////////////////////////////////////////////////////////////
 //		Handle Mobile Torch
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitSource.prototype.hasMobileTorch = function(){
+ARjs.Source.prototype.hasMobileTorch = function(){
 	var stream = arToolkitSource.domElement.srcObject
 	if( stream instanceof MediaStream === false )	return false
 
@@ -3210,7 +3245,7 @@ THREEx.ArToolkitSource.prototype.hasMobileTorch = function(){
  * toggle the flash/torch of the mobile fun if applicable.
  * Great post about it https://www.oberhofer.co/mediastreamtrack-and-its-capabilities/
  */
-THREEx.ArToolkitSource.prototype.toggleMobileTorch = function(){
+ARjs.Source.prototype.toggleMobileTorch = function(){
 	// sanity check
 	console.assert(this.hasMobileTorch() === true)
 		
@@ -3246,7 +3281,7 @@ THREEx.ArToolkitSource.prototype.toggleMobileTorch = function(){
 //          handle resize
 ////////////////////////////////////////////////////////////////////////////////
 
-THREEx.ArToolkitSource.prototype.onResizeElement = function(mirrorDomElements){
+ARjs.Source.prototype.onResizeElement = function(mirrorDomElements){
 	var _this = this
 	var screenWidth = window.innerWidth
 	var screenHeight = window.innerHeight
@@ -3304,7 +3339,7 @@ THREEx.ArToolkitSource.prototype.onResizeElement = function(mirrorDomElements){
 	})
 }
 
-THREEx.ArToolkitSource.prototype.copyElementSizeTo = function(otherElement){
+ARjs.Source.prototype.copyElementSizeTo = function(otherElement){
 	otherElement.style.width = this.domElement.style.width
 	otherElement.style.height = this.domElement.style.height	
 	otherElement.style.marginLeft = this.domElement.style.marginLeft
@@ -3315,7 +3350,7 @@ THREEx.ArToolkitSource.prototype.copyElementSizeTo = function(otherElement){
 //		Code Separator
 //////////////////////////////////////////////////////////////////////////////
 
-THREEx.ArToolkitSource.prototype.copySizeTo = function(){
+ARjs.Source.prototype.copySizeTo = function(){
 	console.warn('obsolete function arToolkitSource.copySizeTo. Use arToolkitSource.copyElementSizeTo' )
 	this.copyElementSizeTo.apply(this, arguments)
 }
@@ -3324,14 +3359,15 @@ THREEx.ArToolkitSource.prototype.copySizeTo = function(){
 //		Code Separator
 //////////////////////////////////////////////////////////////////////////////
 
-THREEx.ArToolkitSource.prototype.onResize	= function(arToolkitContext, renderer, camera){
-	var trackingBackend = arToolkitContext.parameters.trackingBackend
-	
+ARjs.Source.prototype.onResize	= function(arToolkitContext, renderer, camera){
 	if( arguments.length !== 3 ){
 		console.warn('obsolete function arToolkitSource.onResize. Use arToolkitSource.onResizeElement' )
 		return this.onResizeElement.apply(this, arguments)
 	}
 
+	var trackingBackend = arToolkitContext.parameters.trackingBackend
+	
+
 	// RESIZE DOMELEMENT
 	if( trackingBackend === 'artoolkit' ){
 

three.js/examples/arjs-session.html

@@ -28,7 +28,8 @@
 <script src='../threex-armarkercontrols.js'></script>
 <script src='../threex-armarkerhelper.js'></script>
 <script src='../threex-arsmoothedcontrols.js'></script>
-<script src='../threex-arclickability.js'></script>
+<script src='../threex-hittester-plane.js'></script>
+<script src='../threex-hittester-tango.js'></script>
 <script>THREEx.ArToolkitContext.baseURL = '../'</script>
 
 <script src='multi-markers/threex-armultimarkerutils.js'></script>
@@ -37,8 +38,8 @@
 
 
 <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> - switching between backend
-	by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
+	<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - Session API demo with multi tracking and hit testing
+	- by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
 	<br/>
 	Marker image 
 	<a href='../../data/images/hiro.jpg' target='_blank'>hiro for artoolkit</a>
@@ -65,7 +66,7 @@
 	<a href='javascript:void(0)' id='buttonMarkersAreaLearner'>Learn-new-marker-area</a>
 	<a href='javascript:void(0)' id='buttonMarkersAreaReset'>Reset-marker-area</a>
 </div><script>
-;(function(){
+// ;(function(){
 	// get tracking method from location.hash
 	var trackingMethod = location.hash.substring(1) ? location.hash.substring(1) : 'best'
 	
@@ -107,8 +108,8 @@
 	var arProfile = new ARjs.Profile()
 		.sourceWebcam()
 		.trackingMethod(trackingMethod)
-		// .changeMatrixMode('modelViewMatrix')
-		.changeMatrixMode('cameraTransformMatrix')
+		.changeMatrixMode('modelViewMatrix')
+		// .changeMatrixMode('cameraTransformMatrix')
 		.defaultMarker()
 		.checkIfValid()
 
@@ -131,7 +132,6 @@
 	//          Create a ARjs.Anchor
 	////////////////////////////////////////////////////////////////////////////////
 
-
 	var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters)
 	onRenderFcts.push(function(){
 		arAnchor.update()
@@ -140,7 +140,6 @@
 	//////////////////////////////////////////////////////////////////////////////
 	//                handle Hit Tester
 	//////////////////////////////////////////////////////////////////////////////
-
 	
 	var hitTester = new ARjs.HitTester(arSession)
 	onRenderFcts.push(function(){
@@ -195,11 +194,11 @@
 	var mesh	= new THREE.Mesh( geometry, material );
 	mesh.position.y	= 0.5
 	arWorldRoot.add( mesh );
-	
+
 	onRenderFcts.push(function(delta){
 		mesh.rotation.x += Math.PI*delta
 	})
-	
+
 	//////////////////////////////////////////////////////////////////////////////
 	//		Handle UI
 	//////////////////////////////////////////////////////////////////////////////
@@ -216,7 +215,7 @@
 	}else{
 		document.querySelector('#buttonTangoTogglePointCloud').style.display = 'none'
 	}
-	
+
 	if( arAnchor.parameters.markersAreaEnabled ){
 		var subMarkerHelpersVisible = false
 		document.querySelector('#buttonToggleMarkerHelpers').addEventListener('click', function(){
@@ -273,5 +272,5 @@
 			onRenderFct(deltaMsec/1000, nowMsec/1000)
 		})
 	})
-})()
+// })()
 </script></body>

three.js/src/newAPI/arjs-anchor.js

@@ -18,11 +18,14 @@ ARjs.Anchor = function(arSession, markerParameters){
 	
 	this.parameters = markerParameters
 	
-	console.log('ARjs.Anchor -', 'changeMatrixMode:', this.parameters.changeMatrixMode, 'markersAreaEnabled:', markerParameters.markersAreaEnabled)
+	// log to debug
+	console.log('ARjs.Anchor -', 'changeMatrixMode:', this.parameters.changeMatrixMode, '/ markersAreaEnabled:', markerParameters.markersAreaEnabled)
+
 
 	var markerRoot = new THREE.Group
 	scene.add(markerRoot)
 
+	// set controlledObject depending on changeMatrixMode
 	if( markerParameters.changeMatrixMode === 'modelViewMatrix' ){
 		var controlledObject = markerRoot
 	}else if( markerParameters.changeMatrixMode === 'cameraTransformMatrix' ){
@@ -32,7 +35,7 @@ ARjs.Anchor = function(arSession, markerParameters){
 	if( markerParameters.markersAreaEnabled === false ){
 		var markerControls = new THREEx.ArMarkerControls(arContext, controlledObject, markerParameters)		
 	}else{
-		// sanity check
+		// sanity check - MUST be a trackingBackend with markers
 		console.assert( arContext.parameters.trackingBackend === 'artoolkit' || arContext.parameters.trackingBackend === 'aruco' )
 		// for multi marker
 		if( localStorage.getItem('ARjsMultiMarkerFile') === null ){
@@ -44,7 +47,10 @@ ARjs.Anchor = function(arSession, markerParameters){
 		var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile')
 
 		// build a multiMarkerControls
-		var multiMarkerControls = THREEx.ArMultiMarkerControls.fromJSON(arContext, scene, markerRoot, multiMarkerFile)
+		var multiMarkerControls = THREEx.ArMultiMarkerControls.fromJSON(arContext, scene, controlledObject, multiMarkerFile)
+		
+		// honor markerParameters.changeMatrixMode
+		multiMarkerControls.parameters.changeMatrixMode = markerParameters.changeMatrixMode
 
 		// create ArMarkerHelper - useful to debug
 		var markerHelpers = []
@@ -56,6 +62,7 @@ ARjs.Anchor = function(arSession, markerParameters){
 			// add it to markerHelpers
 			markerHelpers.push(markerHelper)
 		})
+		// define API specific to markersArea
 		this.markersArea = {}
 		this.markersArea.setSubMarkersVisibility = function(visible){
 			markerHelpers.forEach(function(markerHelper){

three.js/src/newAPI/arjs-hittester.js

@@ -9,16 +9,19 @@ var ARjs = ARjs || {}
  */
 ARjs.HitTester = function(arSession){
 	var _this = this
+	var arContext = arSession.arContext
+	var trackingBackend = arContext.parameters.trackingBackend
+
 	this.arSession = arSession
+	this._hitTesterPlane = null
+	this._hitTesterTango = null
 
-	var arContext = this.arSession.arContext
-	var trackingBackend = arContext.parameters.trackingBackend
 
 	if( trackingBackend === 'tango' ){
-		// Do nothing...
+		_this._hitTesterTango = new THREEx.HitTesterTango()
 	}else{
 		arContext.addEventListener('initialized', function(event){
-			_this._arClickability = new THREEx.ARClickability(arSession.arSource.domElement)
+			_this._hitTesterPlane = new THREEx.HitTesterPlane(arSession.arSource.domElement)
 			_this._pickingScene = new THREE.Scene
 			
 			var geometry = new THREE.PlaneGeometry(20,20,19,19).rotateX(-Math.PI/2)
@@ -33,24 +36,33 @@ ARjs.HitTester = function(arSession){
 			_this._pickingScene.add(_this._pickingPlane)
 		})		
 	}
-
-
 }
 
-
+//////////////////////////////////////////////////////////////////////////////
+//		update function
+//////////////////////////////////////////////////////////////////////////////
+/**
+ * update
+ * 
+ * @param {THREE.Camera} camera   - the camera to use
+ * @param {THREE.Object3D} object3d - 
+ */
 ARjs.HitTester.prototype.update = function (camera, object3d) {
 	var arContext = this.arSession.arContext
 	var trackingBackend = arContext.parameters.trackingBackend
 
-	if( trackingBackend === 'tango' ){
-		// Do nothing...
-	}else{
+	if( this._hitTesterTango !== null ){
+		this._hitTesterTango.update()
+	}else if( this._hitTesterPlane !== null ){
+		
+		// TODO put that in a .update
+
 		if( arContext.initialized === false )	return
 
-		this._arClickability.onResize()
+		this._hitTesterPlane.onResize()
 		
 		// // set cameraPicking position
-		var cameraPicking = this._arClickability._cameraPicking
+		var cameraPicking = this._hitTesterPlane._cameraPicking
 		// camera.updateMatrixWorld()
 		// cameraPicking.matrix.copy(object3d.matrixWorld)
 		// cameraPicking.matrix.decompose(cameraPicking.position, cameraPicking.quaternion, cameraPicking.scale)				
@@ -70,8 +82,12 @@ ARjs.HitTester.prototype.update = function (camera, object3d) {
 	}
 }
 
+//////////////////////////////////////////////////////////////////////////////
+//		actual hit testing
+//////////////////////////////////////////////////////////////////////////////
+
 /**
- * Test the real world for intersections.
+ * Test the real world for intersections directly from a DomEvent
  * 
  * @param {Number} mouseX - position X of the hit [-1, +1]
  * @param {Number} mouseY - position Y of the hit [-1, +1]
@@ -120,7 +136,7 @@ ARjs.HitTester.prototype.test = function(mouseX, mouseY){
 		// compute intersections between mouseVector3 and pickingPlane
 		var raycaster = new THREE.Raycaster();
 		var mouseVector3 = new THREE.Vector3(mouseX, mouseY, 1);
-		raycaster.setFromCamera( mouseVector3, this._arClickability._cameraPicking );
+		raycaster.setFromCamera( mouseVector3, this._hitTesterPlane._cameraPicking );
 		var intersects = raycaster.intersectObjects( [this._pickingPlane] )
 	
 		// if no intersection occurs, return now
@@ -141,7 +157,6 @@ ARjs.HitTester.prototype.test = function(mouseX, mouseY){
 	return hitTestResults
 }
 
-
 //////////////////////////////////////////////////////////////////////////////
 //		ARjs.HitTester.Result
 //////////////////////////////////////////////////////////////////////////////

three.js/threex-hittester-plane.js

+var THREEx = THREEx || {}
+
+// TODO this is useless - prefere arjs-hittester.js
+
+/**
+ * - maybe support .onClickFcts in each object3d
+ * - seems an easy light layer for clickable object
+ * - up to 
+ */
+THREEx.HitTesterPlane = function(sourceElement){
+	this._sourceElement = sourceElement
+	// Create cameraPicking
+	var fullWidth = parseInt(sourceElement.style.width)
+	var fullHeight = parseInt(sourceElement.style.height)
+	// TODO hardcoded fov - couch
+	this._cameraPicking = new THREE.PerspectiveCamera(42, fullWidth / fullHeight, 0.1, 100);	
+
+console.warn('THREEx.HitTesterPlane works only in modelViewMatrix')
+// TODO just push camera in computeIntersects
+}
+
+THREEx.HitTesterPlane.prototype.onResize = function(){
+	var sourceElement = this._sourceElement
+	var cameraPicking = this._cameraPicking
+	
+	var fullWidth = parseInt(sourceElement.style.width)
+	var fullHeight = parseInt(sourceElement.style.height)
+	cameraPicking.aspect = fullWidth / fullHeight;
+	cameraPicking.updateProjectionMatrix();
+}
+
+THREEx.HitTesterPlane.prototype.computeIntersects = function(domEvent, objects){
+	var sourceElement = this._sourceElement
+	var cameraPicking = this._cameraPicking
+
+	// compute mouse coordinatge with [-1,1]
+	var eventCoords = new THREE.Vector3();
+	eventCoords.x =   ( domEvent.layerX / parseInt(sourceElement.style.width)  ) * 2 - 1;
+	eventCoords.y = - ( domEvent.layerY / parseInt(sourceElement.style.height) ) * 2 + 1;
+
+	// compute intersections between eventCoords and pickingPlane
+	var raycaster = new THREE.Raycaster();
+	raycaster.setFromCamera( eventCoords, cameraPicking );
+	var intersects = raycaster.intersectObjects( objects )
+	
+	return intersects
+}
+
+THREEx.HitTesterPlane.prototype.update = function(){
+
+}

three.js/threex-hittester-tango.js

+var THREEx = THREEx || {}
+
+THREEx.HitTesterTango = function(){
+}
+
+THREEx.HitTesterTango.tangoPickingPointCloud = function(artoolkitContext, mouseX, mouseY){
+	var vrDisplay = artoolkitContext._tangoContext.vrDisplay
+        if (vrDisplay === null ) return null
+        var pointAndPlane = vrDisplay.getPickingPointAndPlaneInPointCloud(mouseX, mouseY)
+        if( pointAndPlane == null ) {
+                console.warn('Could not retrieve the correct point and plane.')
+                return null
+        }
+	
+	// FIXME not sure what this is
+	var boundingSphereRadius = 0.01	
+	
+	// the bigger the number the likeliest it crash chromium-webar
+
+        // Orient and position the model in the picking point according
+        // to the picking plane. The offset is half of the model size.
+        var object3d = new THREE.Object3D
+        THREE.WebAR.positionAndRotateObject3DWithPickingPointAndPlaneInPointCloud(
+                pointAndPlane, object3d, boundingSphereRadius
+        )
+	object3d.rotateZ(-Math.PI/2)
+
+	// return the result
+	var result = {}
+	result.position = object3d.position
+	result.quaternion = object3d.quaternion
+	return result
+}

webvr-polyfill/build/artoolkit-webvr-polyfill.js

@@ -2389,9 +2389,10 @@ THREEx.ArSmoothedControls.prototype.update = function(targetObject3d){
 		object3d.scale.lerp(targetObject3d.scale, parameters.lerpScale)
 	}
 }
+var ARjs = ARjs || {}
 var THREEx = THREEx || {}
 
-THREEx.ArToolkitContext = function(parameters){
+ARjs.Context = THREEx.ArToolkitContext = function(parameters){
 	var _this = this
 	
 	_this._updatedAt = null
@@ -2408,7 +2409,7 @@ THREEx.ArToolkitContext = function(parameters){
 		matrixCodeType: '3x3',
 		
 		// url of the camera parameters
-		cameraParametersUrl: THREEx.ArToolkitContext.baseURL + 'parameters/camera_para.dat',
+		cameraParametersUrl: ARjs.Context.baseURL + 'parameters/camera_para.dat',
 
 		// tune the maximum rate of pose detection in the source image
 		maxDetectionRate: 60,
@@ -2458,12 +2459,12 @@ THREEx.ArToolkitContext = function(parameters){
 	}
 }
 
-Object.assign( THREEx.ArToolkitContext.prototype, THREE.EventDispatcher.prototype );
+Object.assign( ARjs.Context.prototype, THREE.EventDispatcher.prototype );
 
-// THREEx.ArToolkitContext.baseURL = '../'
+// ARjs.Context.baseURL = '../'
 // default to github page
-THREEx.ArToolkitContext.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
-THREEx.ArToolkitContext.REVISION = '1.0.1-dev'
+ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
+ARjs.Context.REVISION = '1.0.1-dev'
 
 
 
@@ -2472,7 +2473,7 @@ THREEx.ArToolkitContext.REVISION = '1.0.1-dev'
  * @param {string} trackingBackend - the tracking to user
  * @return {THREE.Camera} the created camera
  */
-THREEx.ArToolkitContext.createDefaultCamera = function( trackingBackend ){
+ARjs.Context.createDefaultCamera = function( trackingBackend ){
 	console.assert(false, 'use ARjs.Utils.createDefaultCamera instead')
 	// Create a camera
 	if( trackingBackend === 'artoolkit' ){
@@ -2489,7 +2490,7 @@ THREEx.ArToolkitContext.createDefaultCamera = function( trackingBackend ){
 //////////////////////////////////////////////////////////////////////////////
 //		init functions
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype.init = function(onCompleted){
+ARjs.Context.prototype.init = function(onCompleted){
 	var _this = this
 	if( this.parameters.trackingBackend === 'artoolkit' ){
 		this._initArtoolkit(done)
@@ -2515,7 +2516,7 @@ THREEx.ArToolkitContext.prototype.init = function(onCompleted){
 ////////////////////////////////////////////////////////////////////////////////
 //          update function
 ////////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype.update = function(srcElement){
+ARjs.Context.prototype.update = function(srcElement){
 
 	// be sure arController is fully initialized
         if(this.parameters.trackingBackend === 'artoolkit' && this.arController === null) return false;
@@ -2556,12 +2557,12 @@ THREEx.ArToolkitContext.prototype.update = function(srcElement){
 ////////////////////////////////////////////////////////////////////////////////
 //          Add/Remove markerControls
 ////////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype.addMarker = function(arMarkerControls){
+ARjs.Context.prototype.addMarker = function(arMarkerControls){
 	console.assert(arMarkerControls instanceof THREEx.ArMarkerControls)
 	this._arMarkersControls.push(arMarkerControls)
 }
 
-THREEx.ArToolkitContext.prototype.removeMarker = function(arMarkerControls){
+ARjs.Context.prototype.removeMarker = function(arMarkerControls){
 	console.assert(arMarkerControls instanceof THREEx.ArMarkerControls)
 	// console.log('remove marker for', arMarkerControls)
 	var index = this.arMarkerControlss.indexOf(artoolkitMarker);
@@ -2572,7 +2573,7 @@ THREEx.ArToolkitContext.prototype.removeMarker = function(arMarkerControls){
 //////////////////////////////////////////////////////////////////////////////
 //		artoolkit specific
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype._initArtoolkit = function(onCompleted){
+ARjs.Context.prototype._initArtoolkit = function(onCompleted){
         var _this = this
 
 	// set this._artoolkitProjectionAxisTransformMatrix to change artoolkit projection matrix axis to match usual webgl one
@@ -2643,7 +2644,7 @@ THREEx.ArToolkitContext.prototype._initArtoolkit = function(onCompleted){
 /**
  * return the projection matrix
  */
-THREEx.ArToolkitContext.prototype.getProjectionMatrix = function(srcElement){
+ARjs.Context.prototype.getProjectionMatrix = function(srcElement){
 	
 	
 // FIXME rename this function to say it is artoolkit specific - getArtoolkitProjectMatrix
@@ -2666,14 +2667,14 @@ THREEx.ArToolkitContext.prototype.getProjectionMatrix = function(srcElement){
 	return projectionMatrix
 }
 
-THREEx.ArToolkitContext.prototype._updateArtoolkit = function(srcElement){
+ARjs.Context.prototype._updateArtoolkit = function(srcElement){
 	this.arController.process(srcElement)
 }
 
 //////////////////////////////////////////////////////////////////////////////
 //		aruco specific 
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype._initAruco = function(onCompleted){
+ARjs.Context.prototype._initAruco = function(onCompleted){
 	this.arucoContext = new THREEx.ArucoContext()
 	
 	// honor this.parameters.canvasWidth/.canvasHeight
@@ -2694,7 +2695,7 @@ THREEx.ArToolkitContext.prototype._initAruco = function(onCompleted){
 }
 
 
-THREEx.ArToolkitContext.prototype._updateAruco = function(srcElement){
+ARjs.Context.prototype._updateAruco = function(srcElement){
 	// console.log('update aruco here')
 	var _this = this
 	var arMarkersControls = this._arMarkersControls
@@ -2722,7 +2723,7 @@ THREEx.ArToolkitContext.prototype._updateAruco = function(srcElement){
 //////////////////////////////////////////////////////////////////////////////
 //		tango specific 
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitContext.prototype._initTango = function(onCompleted){
+ARjs.Context.prototype._initTango = function(onCompleted){
 	var _this = this
 	// check webvr is available
 	if (navigator.getVRDisplays){
@@ -2765,7 +2766,7 @@ THREEx.ArToolkitContext.prototype._initTango = function(onCompleted){
 }
 
 
-THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
+ARjs.Context.prototype._updateTango = function(srcElement){
 	// console.log('update aruco here')
 	var _this = this
 	var arMarkersControls = this._arMarkersControls
@@ -2818,7 +2819,6 @@ THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
 
 }
 var ARjs = ARjs || {}
-
 var THREEx = THREEx || {}
 
 /**
@@ -2994,32 +2994,59 @@ ARjs.Profile.prototype.checkIfValid = function () {
 	}
 	return this
 }
+var ARjs = ARjs || {}
 var THREEx = THREEx || {}
 
-THREEx.ArToolkitSource = function(parameters){	
+ARjs.Source = THREEx.ArToolkitSource = function(parameters){	
+	var _this = this
+
+	this.ready = false
+        this.domElement = null
+
 	// handle default parameters
 	this.parameters = {
 		// type of source - ['webcam', 'image', 'video']
-		sourceType : parameters.sourceType !== undefined ? parameters.sourceType : 'webcam',
+		sourceType : 'webcam',
 		// url of the source - valid if sourceType = image|video
-		sourceUrl : parameters.sourceUrl !== undefined ? parameters.sourceUrl : null,
+		sourceUrl : null,
 		
 		// resolution of at which we initialize in the source image
-		sourceWidth: parameters.sourceWidth !== undefined ? parameters.sourceWidth : 640,
-		sourceHeight: parameters.sourceHeight !== undefined ? parameters.sourceHeight : 480,
+		sourceWidth: 640,
+		sourceHeight: 480,
 		// resolution displayed for the source 
-		displayWidth: parameters.displayWidth !== undefined ? parameters.displayWidth : 640,
-		displayHeight: parameters.displayHeight !== undefined ? parameters.displayHeight : 480,
+		displayWidth: 640,
+		displayHeight: 480,
 	}
+	//////////////////////////////////////////////////////////////////////////////
+	//		setParameters
+	//////////////////////////////////////////////////////////////////////////////
+	setParameters(parameters)
+	function setParameters(parameters){
+		if( parameters === undefined )	return
+		for( var key in parameters ){
+			var newValue = parameters[ key ]
 
-	this.ready = false
-        this.domElement = null
+			if( newValue === undefined ){
+				console.warn( "THREEx.ArToolkitSource: '" + key + "' parameter is undefined." )
+				continue
+			}
+
+			var currentValue = _this.parameters[ key ]
+
+			if( currentValue === undefined ){
+				console.warn( "THREEx.ArToolkitSource: '" + key + "' is not a property of this material." )
+				continue
+			}
+
+			_this.parameters[ key ] = newValue
+		}
+	}	
 }
 
 //////////////////////////////////////////////////////////////////////////////
 //		Code Separator
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitSource.prototype.init = function(onReady, onError){
+ARjs.Source.prototype.init = function(onReady, onError){
 	var _this = this
 
         if( this.parameters.sourceType === 'image' ){
@@ -3055,7 +3082,7 @@ THREEx.ArToolkitSource.prototype.init = function(onReady, onError){
 ////////////////////////////////////////////////////////////////////////////////
 
 
-THREEx.ArToolkitSource.prototype._initSourceImage = function(onReady) {
+ARjs.Source.prototype._initSourceImage = function(onReady) {
 	// TODO make it static
         var domElement = document.createElement('img')
 	domElement.src = this.parameters.sourceUrl
@@ -3080,7 +3107,7 @@ THREEx.ArToolkitSource.prototype._initSourceImage = function(onReady) {
 ////////////////////////////////////////////////////////////////////////////////
 
 
-THREEx.ArToolkitSource.prototype._initSourceVideo = function(onReady) {
+ARjs.Source.prototype._initSourceVideo = function(onReady) {
 	// TODO make it static
 	var domElement = document.createElement('video');
 	domElement.src = this.parameters.sourceUrl
@@ -3117,12 +3144,12 @@ THREEx.ArToolkitSource.prototype._initSourceVideo = function(onReady) {
 //          handle webcam source
 ////////////////////////////////////////////////////////////////////////////////
 
-THREEx.ArToolkitSource.prototype._initSourceWebcam = function(onReady, onError) {
+ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
 	var _this = this
-debugger
+
 	// init default value
 	onError = onError || function(error){	
-		alert('Cant init webcam due to '+error.message)
+		alert('Webcam Error\nName: '+error.name + '\nMessage: '+error.message)
 	}
 
 	var domElement = document.createElement('video');
@@ -3132,13 +3159,18 @@ debugger
 	domElement.style.width = this.parameters.displayWidth+'px'
 	domElement.style.height = this.parameters.displayHeight+'px'
 
+	// check API is available
 	if (navigator.mediaDevices === undefined 
 			|| navigator.mediaDevices.enumerateDevices === undefined 
 			|| navigator.mediaDevices.getUserMedia === undefined  ){
-		onError("WebRTC issue! navigator.mediaDevices.enumerateDevices not present in your browser")
+		onError({
+			name: '',
+			message: 'WebRTC issue! navigator.mediaDevices.enumerateDevices not present in your browser'
+		})
 		return
 	}
 
+	// get available devices
 	navigator.mediaDevices.enumerateDevices().then(function(devices) {
                 var userMediaConstraints = {
 			audio: false,
@@ -3156,6 +3188,7 @@ debugger
 				}
 		  	}
                 }
+		// get a device which satisfy the constraints
 		navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
 			// set the .src of the domElement
 			domElement.srcObject = stream;
@@ -3164,6 +3197,7 @@ debugger
 				domElement.play();
 			})
 			// domElement.play();
+
 // TODO listen to loadedmetadata instead
 			// wait until the video stream is ready
 			var interval = setInterval(function() {
@@ -3173,7 +3207,8 @@ debugger
 			}, 1000/50);
 		}).catch(function(error) {
 			onError({
-				message: "Can't access user media :()"
+				name: error.name,
+				message: error.message
 			});
 		});
 	}).catch(function(error) {
@@ -3188,7 +3223,7 @@ debugger
 //////////////////////////////////////////////////////////////////////////////
 //		Handle Mobile Torch
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitSource.prototype.hasMobileTorch = function(){
+ARjs.Source.prototype.hasMobileTorch = function(){
 	var stream = arToolkitSource.domElement.srcObject
 	if( stream instanceof MediaStream === false )	return false
 
@@ -3210,7 +3245,7 @@ THREEx.ArToolkitSource.prototype.hasMobileTorch = function(){
  * toggle the flash/torch of the mobile fun if applicable.
  * Great post about it https://www.oberhofer.co/mediastreamtrack-and-its-capabilities/
  */
-THREEx.ArToolkitSource.prototype.toggleMobileTorch = function(){
+ARjs.Source.prototype.toggleMobileTorch = function(){
 	// sanity check
 	console.assert(this.hasMobileTorch() === true)
 		
@@ -3246,7 +3281,7 @@ THREEx.ArToolkitSource.prototype.toggleMobileTorch = function(){
 //          handle resize
 ////////////////////////////////////////////////////////////////////////////////
 
-THREEx.ArToolkitSource.prototype.onResizeElement = function(mirrorDomElements){
+ARjs.Source.prototype.onResizeElement = function(mirrorDomElements){
 	var _this = this
 	var screenWidth = window.innerWidth
 	var screenHeight = window.innerHeight
@@ -3304,7 +3339,7 @@ THREEx.ArToolkitSource.prototype.onResizeElement = function(mirrorDomElements){
 	})
 }
 
-THREEx.ArToolkitSource.prototype.copyElementSizeTo = function(otherElement){
+ARjs.Source.prototype.copyElementSizeTo = function(otherElement){
 	otherElement.style.width = this.domElement.style.width
 	otherElement.style.height = this.domElement.style.height	
 	otherElement.style.marginLeft = this.domElement.style.marginLeft
@@ -3315,7 +3350,7 @@ THREEx.ArToolkitSource.prototype.copyElementSizeTo = function(otherElement){
 //		Code Separator
 //////////////////////////////////////////////////////////////////////////////
 
-THREEx.ArToolkitSource.prototype.copySizeTo = function(){
+ARjs.Source.prototype.copySizeTo = function(){
 	console.warn('obsolete function arToolkitSource.copySizeTo. Use arToolkitSource.copyElementSizeTo' )
 	this.copyElementSizeTo.apply(this, arguments)
 }
@@ -3324,14 +3359,15 @@ THREEx.ArToolkitSource.prototype.copySizeTo = function(){
 //		Code Separator
 //////////////////////////////////////////////////////////////////////////////
 
-THREEx.ArToolkitSource.prototype.onResize	= function(arToolkitContext, renderer, camera){
-	var trackingBackend = arToolkitContext.parameters.trackingBackend
-	
+ARjs.Source.prototype.onResize	= function(arToolkitContext, renderer, camera){
 	if( arguments.length !== 3 ){
 		console.warn('obsolete function arToolkitSource.onResize. Use arToolkitSource.onResizeElement' )
 		return this.onResizeElement.apply(this, arguments)
 	}
 
+	var trackingBackend = arToolkitContext.parameters.trackingBackend
+	
+
 	// RESIZE DOMELEMENT
 	if( trackingBackend === 'artoolkit' ){