switched to canvasWidth/HEight in Context

README.md

@@ -166,13 +166,16 @@ a-frame Examples:
 - [marker-camera](https://jeromeetienne.github.io/AR.js/aframe/examples/marker-camera.html) : 
   a-frame example for marker-camera
   ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/marker-camera.html))
-- [multiple-independent-markers](https://jeromeetienne.github.io/AR.js/aframe/examples/multiple-independant-markers.html) : 
-  a-frame example for multiple-independent-markers
+- [multiple-indepandent-markers](https://jeromeetienne.github.io/AR.js/aframe/examples/multiple-independant-markers.html) : 
+  a-frame example for multiple-indepandent-markers
   ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/multiple-independant-markers.html))
 - [minimal](https://jeromeetienne.github.io/AR.js/aframe/examples/minimal.html) : 
   Want to do Augmented Reality on the web ? You can do it [in less than 10 lines of html now](https://twitter.com/jerome_etienne/status/842192608256512000) :)
   minimal.html is the shortest html file you need if you want to do ar.js with a-frame
   ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/minimal.html))
+- [mobile-performance](https://jeromeetienne.github.io/AR.js/aframe/examples/mobile-performance.html) : 
+  a-frame example for mobile-performance
+  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/mobile-performance.html))
 
 WebVR-polyfill Examples: 
 - [aframe](https://jeromeetienne.github.io/AR.js/webvr-polyfill/examples/aframe.html) : 

aframe/README.md

@@ -39,10 +39,12 @@ include a hatsune miku or minecraft avatar on the marker
 | maxDetectionRate | tune the maximum rate of pose detection in the source image |
 | sourceType | type of source - ['webcam', 'image', 'video'] |
 | sourceUrl | url of the source - valid if sourceType = image|video |
-| sourceWidth | resolution of at which we detect pose in the source image |
-| sourceHeight | resolution of at which we detect pose in the source image |
+| sourceWidth | resolution of at which we initialize the source image |
+| sourceHeight | resolution of at which we initialize the source image |
 | displayWidth | resolution displayed for the source  |
 | displayHeight | resolution displayed for the source  |
+| canvasWidth | resolution of at which we detect pose in the source image |
+| canvasHeight | resolution of at which we detect pose in the source image |
 
 # \<a-marker\>
 

aframe/aframe-ar.js

@@ -46,6 +46,14 @@ AFRAME.registerSystem('artoolkit', {
 			type: 'number',
 			default: 480
 		},
+		canvasWidth : {
+			type: 'number',
+			default: 640
+		},
+		canvasHeight : {
+			type: 'number',
+			default: 480
+		},
 	},
 
 	//////////////////////////////////////////////////////////////////////////////

aframe/build/aframe-ar.js

@@ -365,14 +365,16 @@ THREEx.ArToolkitContext = function(parameters){
 		// tune the maximum rate of pose detection in the source image
 		maxDetectionRate: parameters.maxDetectionRate !== undefined ? parameters.maxDetectionRate : 60,
 		// resolution of at which we detect pose in the source image
-		sourceWidth: parameters.sourceWidth !== undefined ? parameters.sourceWidth : 640,
-		sourceHeight: parameters.sourceHeight !== undefined ? parameters.sourceHeight : 480,
+		canvasWidth: parameters.canvasWidth !== undefined ? parameters.canvasWidth : 640,
+		canvasHeight: parameters.canvasHeight !== undefined ? parameters.canvasHeight : 480,
 		
 		// enable image smoothing or not for canvas copy - default to true
 		// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
 		imageSmoothingEnabled : parameters.imageSmoothingEnabled !== undefined ? parameters.imageSmoothingEnabled : false,
 	}
 	
+// debugger	
+	
 	this._axistransformMatrix = new THREE.Matrix4()
 	this._axistransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI))
 	this._axistransformMatrix.multiply(new THREE.Matrix4().makeRotationZ(Math.PI))
@@ -407,13 +409,13 @@ THREEx.ArToolkitContext.prototype.getProjectionMatrix = function(srcElement){
 //////////////////////////////////////////////////////////////////////////////
 THREEx.ArToolkitContext.prototype.init = function(onCompleted){
         var _this = this
-	var sourceWidth = this.parameters.sourceWidth
-	var sourceHeight = this.parameters.sourceHeight
+	var canvasWidth = this.parameters.canvasWidth
+	var canvasHeight = this.parameters.canvasHeight
 
-        // console.log('ArToolkitContext: _onSourceReady width', sourceWidth, 'height', sourceHeight)
+        // console.log('ArToolkitContext: _onSourceReady width', canvasWidth, 'height', canvasHeight)
         _this._cameraParameters = new ARCameraParam(_this.parameters.cameraParametersUrl, function() {
         	// init controller
-                var arController = new ARController(sourceWidth, sourceHeight, _this._cameraParameters);
+                var arController = new ARController(canvasWidth, canvasHeight, _this._cameraParameters);
                 _this.arController = arController
                 
 		arController.ctx.mozImageSmoothingEnabled = _this.parameters.imageSmoothingEnabled;
@@ -664,7 +666,7 @@ THREEx.ArToolkitSource = function(parameters){
 		// url of the source - valid if sourceType = image|video
 		sourceUrl : parameters.sourceUrl !== undefined ? parameters.sourceUrl : null,
 		
-		// resolution of at which we detect pose in the source image
+		// resolution of at which we initialize in the source image
 		sourceWidth: parameters.sourceWidth !== undefined ? parameters.sourceWidth : 640,
 		sourceHeight: parameters.sourceHeight !== undefined ? parameters.sourceHeight : 480,
 		// resolution displayed for the source 
@@ -942,6 +944,14 @@ AFRAME.registerSystem('artoolkit', {
 			type: 'number',
 			default: 480
 		},
+		canvasWidth : {
+			type: 'number',
+			default: 640
+		},
+		canvasHeight : {
+			type: 'number',
+			default: 480
+		},
 	},
 
 	//////////////////////////////////////////////////////////////////////////////

aframe/examples/basic.html

 <!DOCTYPE html>
 <!-- include aframe -->
-<script src="vendor/aframe.min.js"></script>
+<script src="vendor/aframe.js"></script>
 <!-- include aframe-artoolkit -->
 <script src="../build/aframe-ar.js"></script>
 

aframe/examples/mobile-performance.html

+<!DOCTYPE html>
+<!-- include aframe -->
+<script src="vendor/aframe.js"></script>
+<!-- include aframe-artoolkit -->
+<script src="../build/aframe-ar.js"></script>
+
+<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
+	<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - mobile performance in a-frame
+	<br/>
+	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
+</div>
+	<!-- enable artoolkit on this scene -->
+	<a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180'>
+
+		<!-- define the object which gonna be put on this marker  -->
+		<a-box position='0 0 0.5' material='opacity: 0.5; side: double'>
+			<a-torus-knot radius='0.27' radius-tubular='0.05'>
+				<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
+			</a-torus-knot>
+		</a-box>
+
+		<a-marker-camera preset='hiro'></a-marker-camera>
+	</a-scene>
+</body>
+</html>

three.js/README.md

@@ -50,8 +50,8 @@ var parameters = {
 	// tune the maximum rate of pose detection in the source image
 	maxDetectionRate: 60,
 	// resolution of at which we detect pose in the source image
-	sourceWidth: 640,
-	sourceHeight: 480,
+	canvasWidth: 640,
+	canvasHeight: 480,
 	
 	// enable image smoothing or not for canvas copy - default to true
 	// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
@@ -68,7 +68,7 @@ var parameters = {
 	// url of the source - valid if sourceType = image|video
 	sourceUrl : null,
 	
-	// resolution of at which we detect pose in the source image
+	// resolution of at which we initialize the source image
 	sourceWidth: 640,
 	sourceHeight: 480,
 	// resolution displayed for the source 

three.js/examples/cameratransform.html

@@ -80,8 +80,6 @@
 	var arToolkitContext = new THREEx.ArToolkitContext({
 		cameraParametersUrl: '../../data/data/camera_para.dat',
 		detectionMode: 'mono',
-		sourceWidth: arToolkitSource.parameters.sourceWidth,
-		sourceHeight: arToolkitSource.parameters.sourceHeight,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){

three.js/examples/dev.html

@@ -91,8 +91,8 @@
 	var arToolkitContext = new THREEx.ArToolkitContext({
 		cameraParametersUrl: '../../data/data/camera_para.dat',
 		detectionMode: 'mono',
-		sourceWidth: 80*3,
-		sourceHeight: 60*3,
+		canvasWidth: 80*3,
+		canvasHeight: 60*3,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){

three.js/examples/hole-in-the-wall.html

@@ -101,8 +101,8 @@
 		detectionMode: 'mono',
 		imageSmoothingEnabled: false,
 		maxDetectionRate: 30,
-		sourceWidth: 80*4,
-		sourceHeight: 60*4,
+		canvasWidth: 80*4,
+		canvasHeight: 60*4,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){

three.js/examples/holographic-message.html

@@ -138,11 +138,9 @@
 	var arToolkitContext = new THREEx.ArToolkitContext({
 		cameraParametersUrl: '../../data/data/camera_para.dat',
 		detectionMode: 'mono',
-		sourceWidth: arToolkitSource.parameters.sourceWidth,
-		sourceHeight: arToolkitSource.parameters.sourceHeight,
 		maxDetectionRate: 30,
-		sourceWidth: 80*3,
-		sourceHeight: 60*3,
+		canvasWidth: 80*3,
+		canvasHeight: 60*3,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){
@@ -188,7 +186,7 @@
 	// video.src = '../../data/videos/headtracking.mp4'
 	// video.src = '../../data/videos/bird_greenscreen.mp4'
 	video.src = '../../data/videos/Star\ wars\ demo\ Alex.mp4'
-	video.autoplay = true;
+	// video.autoplay = true;
 	video.webkitPlaysinline = true;
 	video.controls = false;
 	video.loop = true;

three.js/examples/markercloak.html

@@ -85,8 +85,6 @@
 		// to read from a video
 		// sourceType : 'video',
 		// sourceUrl : '../../data/videos/headtracking.mp4',		
-		// sourceWidth: 80*4,
-		// sourceHeight: 60*4,
 	})
 
 	arToolkitSource.init(function onReady(){
@@ -110,8 +108,8 @@
 		detectionMode: 'mono',
 		imageSmoothingEnabled: false,
 		maxDetectionRate: 30,
-		sourceWidth: 80*4,
-		sourceHeight: 60*4,
+		canvasWidth: 80*4,
+		canvasHeight: 60*4,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){

three.js/examples/markerroot.html

@@ -83,8 +83,6 @@
 	var arToolkitContext = new THREEx.ArToolkitContext({
 		cameraParametersUrl: '../../data/data/camera_para.dat',
 		detectionMode: 'mono',
-		sourceWidth: arToolkitSource.parameters.sourceWidth,
-		sourceHeight: arToolkitSource.parameters.sourceHeight,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){

three.js/examples/mobile-performance.html

@@ -90,10 +90,9 @@
 	var arToolkitContext = new THREEx.ArToolkitContext({
 		cameraParametersUrl: '../../data/data/camera_para.dat',
 		detectionMode: 'mono',
-		imageSmoothingEnabled: false,
 		maxDetectionRate: 30,
-		sourceWidth: 80*3,
-		sourceHeight: 60*3,
+		canvasWidth: 80*3,
+		canvasHeight: 60*3,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){

three.js/examples/refraction.html

@@ -134,8 +134,8 @@ void main(void) {
 		detectionMode: 'mono',
 		imageSmoothingEnabled: false,
 		maxDetectionRate: 30,
-		sourceWidth: 80*4,
-		sourceHeight: 60*4,
+		canvasWidth: 80*4,
+		canvasHeight: 60*4,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){

three.js/examples/shadow.html

@@ -106,8 +106,8 @@ renderer.shadowMap.enabled = true;
 		detectionMode: 'mono',
 		imageSmoothingEnabled: false,
 		maxDetectionRate: 30,
-		sourceWidth: 80*3,
-		sourceHeight: 60*3,
+		canvasWidth: 80*3,
+		canvasHeight: 60*3,
 	})
 	// initialize it
 	arToolkitContext.init(function onCompleted(){

three.js/threex-artoolkitcontext.js

@@ -20,14 +20,16 @@ THREEx.ArToolkitContext = function(parameters){
 		// tune the maximum rate of pose detection in the source image
 		maxDetectionRate: parameters.maxDetectionRate !== undefined ? parameters.maxDetectionRate : 60,
 		// resolution of at which we detect pose in the source image
-		sourceWidth: parameters.sourceWidth !== undefined ? parameters.sourceWidth : 640,
-		sourceHeight: parameters.sourceHeight !== undefined ? parameters.sourceHeight : 480,
+		canvasWidth: parameters.canvasWidth !== undefined ? parameters.canvasWidth : 640,
+		canvasHeight: parameters.canvasHeight !== undefined ? parameters.canvasHeight : 480,
 		
 		// enable image smoothing or not for canvas copy - default to true
 		// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
 		imageSmoothingEnabled : parameters.imageSmoothingEnabled !== undefined ? parameters.imageSmoothingEnabled : false,
 	}
 	
+// debugger	
+	
 	this._axistransformMatrix = new THREE.Matrix4()
 	this._axistransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI))
 	this._axistransformMatrix.multiply(new THREE.Matrix4().makeRotationZ(Math.PI))
@@ -62,13 +64,13 @@ THREEx.ArToolkitContext.prototype.getProjectionMatrix = function(srcElement){
 //////////////////////////////////////////////////////////////////////////////
 THREEx.ArToolkitContext.prototype.init = function(onCompleted){
         var _this = this
-	var sourceWidth = this.parameters.sourceWidth
-	var sourceHeight = this.parameters.sourceHeight
+	var canvasWidth = this.parameters.canvasWidth
+	var canvasHeight = this.parameters.canvasHeight
 
-        // console.log('ArToolkitContext: _onSourceReady width', sourceWidth, 'height', sourceHeight)
+        // console.log('ArToolkitContext: _onSourceReady width', canvasWidth, 'height', canvasHeight)
         _this._cameraParameters = new ARCameraParam(_this.parameters.cameraParametersUrl, function() {
         	// init controller
-                var arController = new ARController(sourceWidth, sourceHeight, _this._cameraParameters);
+                var arController = new ARController(canvasWidth, canvasHeight, _this._cameraParameters);
                 _this.arController = arController
                 
 		arController.ctx.mozImageSmoothingEnabled = _this.parameters.imageSmoothingEnabled;

three.js/threex-artoolkitsource.js

@@ -8,7 +8,7 @@ THREEx.ArToolkitSource = function(parameters){
 		// url of the source - valid if sourceType = image|video
 		sourceUrl : parameters.sourceUrl !== undefined ? parameters.sourceUrl : null,
 		
-		// resolution of at which we detect pose in the source image
+		// resolution of at which we initialize in the source image
 		sourceWidth: parameters.sourceWidth !== undefined ? parameters.sourceWidth : 640,
 		sourceHeight: parameters.sourceHeight !== undefined ? parameters.sourceHeight : 480,
 		// resolution displayed for the source