more work

CHANGELOG.md

@@ -5,8 +5,9 @@
 - fixed perspective in artoolkit portrait #212 (thanks @pikilipita)
 - fixed barcode in a-frame #260 (thanks @basbase)
 - created portableAR.js - a simple way to port ar.js to a non-three.js framework
-  - it is in contribs/portableAR.js
-  - ported babylon.js to portableAR.js
+  - it is in /three.js/contribs/portableAR.js
+  - in [examples/]() you can find babylon.js using portableAR.js
+
 
 ## Tests
 - Made tests to report failure - yeah i know it is silly but before it reported

TODO2.md

 # reorganize the repo
-- remove any tango support
+- rename EasyARjs into PortableARjs 
 - remove webvr-polyfill
-- fix the testing, seems to have projection issue on image read, works on webcam tho
-- import the new babylon.js port
-- clean up data
-- remove all the examples which are only demos.
+- merge to master
+---
+- remove all the examples which are only demos
+  - aframe/demos three.js/demos instead of examples
   - maybe put them in a arjs-demos repository ?
+  - currently move them in this repo, in their own directory
+  - demos/three.js demos/aframe
+  - make them as standalone as possible, aka copy dependancy in their
+  - when it is ready
+- remove three.js dependancy
+- remove any tango support
+- clean up data
+
+
+- DONE fix the testing, seems to have projection issue on image read, works on webcam tho
+- DONE import the new babylon.js port

three.js/build/ar.js

@@ -1029,15 +1029,13 @@ var Qb=[Ik,Zh,_h,Qj,Qi,Pi,Ri,Ag,sg,qg,rg,yg,kh,jh,Oi,Mj];var Rb=[Jk,ki,ji,gi];va
 			image = this.image;
 		}
 
-		if (image.videoWidth > image.videoHeight)
-		{
-			//landscape
+		if( (image.nodeName === 'IMG' && image.width > image.height ) ||
+			(image.nodeName === 'VIDEO' && image.videoWidth > image.videoHeight) ){
+			// if landscape
 			this.ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); // draw video
-		}
-		else {
-
+		}else{
+			// if portrait
 			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-			//portrait
 			var scale = this.canvas.height / this.canvas.width;
 			var scaledHeight = this.canvas.width*scale;
 			var scaledWidth = this.canvas.height*scale;

contribs/portableAR.js/Makefile → three.js/contribs/portableAR.js/Makefile

 watch: build
-	fswatch -0 src/*.js ../../three.js/src/*/*.js | xargs -0 -n 1 -I {} make build
+	fswatch -0 src/*.js ../../src/*/*.js | xargs -0 -n 1 -I {} make build
 	
 .PHONY: build
 build:
-	(cd ../../three.js/ && make build)
+	(cd ../../ && make build)
 	cat 	\
-		../../three.js/examples/vendor/three.js/build/three.js	\
-		../../three.js/build/ar.js				\
-		src/portable-ar.js					\
+		../../examples/vendor/three.js/build/three.js	\
+		../../build/ar.js					\
+		src/portable-ar.js				\
 		> build/portable-ar.js 
 
 minify: build

contribs/portableAR.js/build/portable-ar.js → three.js/contribs/portableAR.js/build/portable-ar.js

@@ -45139,15 +45139,13 @@ var Qb=[Ik,Zh,_h,Qj,Qi,Pi,Ri,Ag,sg,qg,rg,yg,kh,jh,Oi,Mj];var Rb=[Jk,ki,ji,gi];va
 			image = this.image;
 		}
 
-		if (image.videoWidth > image.videoHeight)
-		{
-			//landscape
+		if( (image.nodeName === 'IMG' && image.width > image.height ) ||
+			(image.nodeName === 'VIDEO' && image.videoWidth > image.videoHeight) ){
+			// if landscape
 			this.ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); // draw video
-		}
-		else {
-
+		}else{
+			// if portrait
 			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-			//portrait
 			var scale = this.canvas.height / this.canvas.width;
 			var scaledHeight = this.canvas.width*scale;
 			var scaledWidth = this.canvas.height*scale;
@@ -52304,7 +52302,7 @@ ARjs.MarkersAreaUtils.buildMarkersAreaFileFromResolution = function(trackingBack
 		parameters.barcodeValue = layout2Barcode[layout]
 	}
 }
-var EasyARjs = function(canvasEl, options){
+var PortableARjs = function(canvasEl, options){
 	// handle default options
 	options = options || {}
 	options.debugUI = options.debugUI !== undefined ? options.debugUI : false
@@ -52410,7 +52408,7 @@ var EasyARjs = function(canvasEl, options){
 //		Code Separator
 //////////////////////////////////////////////////////////////////////////////
 
-EasyARjs.prototype._initOptionsDebugUI = function(arjsSession, arjsAnchor){
+PortableARjs.prototype._initOptionsDebugUI = function(arjsSession, arjsAnchor){
 	// create arjsDebugUIContainer if needed
 	if( document.querySelector('#arjsDebugUIContainer') === null ){
 		var domElement = document.createElement('div')
@@ -52432,7 +52430,7 @@ EasyARjs.prototype._initOptionsDebugUI = function(arjsSession, arjsAnchor){
 //////////////////////////////////////////////////////////////////////////////
 
 // function initRenderThreejs
-EasyARjs.prototype._initOptionRenderThreejs = function(renderer, scene, camera, arjsAnchor){
+PortableARjs.prototype._initOptionRenderThreejs = function(renderer, scene, camera, arjsAnchor){
 	// array of functions for the rendering loop
 	var onRenderFcts= [];
 

contribs/babylon.js/basic.html → three.js/contribs/portableAR.js/examples/babylon.js/basic.html

@@ -9,8 +9,8 @@
 	<script src="vendor/babylon.max.js"></script> 
 
 	<!-- babylon-ar.js -->
-	<script src="../portableAR.js/build/portable-ar.js"></script>
-	<script>ARjs.Context.baseURL = '../../three.js/'</script> 
+	<script src="../../build/portable-ar.js"></script>
+	<script>ARjs.Context.baseURL = '../../../../'</script> 
 
 	<style>
 	html, body {
@@ -34,7 +34,7 @@
 	Support for <a href=''>babylon.js</a>
 	- by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
 	<br/>
-	<a href='../../three.js/examples/multi-markers/markers-page/' target='_blank'>Markers page</a>
+	<a href='../examples/multi-markers/markers-page/' target='_blank'>Markers page</a>
 </div>
 	
 	<div id="canvasZone">
@@ -93,24 +93,24 @@
 	////////////////////////////////////////////////////////////////////////////////
 	//          	Set up EasyARjs
 	////////////////////////////////////////////////////////////////////////////////
-	// create a easyARjs instance
-	var easyARjs = new EasyARjs(canvas, {
+	// create a portableARjs instance
+	var portableARjs = new PortableARjs(canvas, {
 		debugUI : true,
 		// renderThreejs: true
 	})
 	// run on every iteration of babylon.js engine
 	engine.runRenderLoop(function(){
 
-		// update easyARjs
-		easyARjs.update()
+		// update portableARjs
+		portableARjs.update()
 
-		// update babylon camera with easyARjs cameraProjectionMatrix
+		// update babylon camera with portableARjs cameraProjectionMatrix
 		var babylonCamera = scene.cameras[0]
-		var babylonMatrix = BABYLON.Matrix.FromArray(easyARjs.cameraProjectionMatrix)
+		var babylonMatrix = BABYLON.Matrix.FromArray(portableARjs.cameraProjectionMatrix)
 		babylonCamera.freezeProjectionMatrix(babylonMatrix)
 
-		// update babylon camera with easyARjs cameraTransformMatrix
-		var babylonMatrix = BABYLON.Matrix.FromArray(easyARjs.cameraTransformMatrix);
+		// update babylon camera with portableARjs cameraTransformMatrix
+		var babylonMatrix = BABYLON.Matrix.FromArray(portableARjs.cameraTransformMatrix);
 		babylonCamera._computedViewMatrix = babylonMatrix
 		babylonCamera._computedViewMatrix.invert()
 	})

contribs/portableAR.js/src/TODO.md → three.js/contribs/portableAR.js/src/TODO.md

@@ -9,20 +9,20 @@
   
 
 ```js
-var ezAR = new ezAR()
+var portableARjs = new PortableARjs()
 
-ezAR.addEventListener('ready', function(){
-	// ezAR.cameraProjectionMatrix = array(16)
+portableARjs.addEventListener('ready', function(){
+	// portableARjs.cameraProjectionMatrix = array(16)
 })
 
-ezAR.addEventListener('tracking-updated', function(cameraTransform){
+portableARjs.addEventListener('tracking-updated', function(cameraTransform){
 	
 })
 
-ezAR.addEventListener('tracking-stopped', function(){
+portableARjs.addEventListener('tracking-stopped', function(){
 	
 })
-ezAR.addEventListener('tracking-started', function(){
+portableARjs.addEventListener('tracking-started', function(){
 	
 })
 ```

contribs/portableAR.js/src/portable-ar.js → three.js/contribs/portableAR.js/src/portable-ar.js

-var EasyARjs = function(canvasEl, options){
+var PortableARjs = function(canvasEl, options){
 	// handle default options
 	options = options || {}
 	options.debugUI = options.debugUI !== undefined ? options.debugUI : false
@@ -104,7 +104,7 @@ var EasyARjs = function(canvasEl, options){
 //		Code Separator
 //////////////////////////////////////////////////////////////////////////////
 
-EasyARjs.prototype._initOptionsDebugUI = function(arjsSession, arjsAnchor){
+PortableARjs.prototype._initOptionsDebugUI = function(arjsSession, arjsAnchor){
 	// create arjsDebugUIContainer if needed
 	if( document.querySelector('#arjsDebugUIContainer') === null ){
 		var domElement = document.createElement('div')
@@ -126,7 +126,7 @@ EasyARjs.prototype._initOptionsDebugUI = function(arjsSession, arjsAnchor){
 //////////////////////////////////////////////////////////////////////////////
 
 // function initRenderThreejs
-EasyARjs.prototype._initOptionRenderThreejs = function(renderer, scene, camera, arjsAnchor){
+PortableARjs.prototype._initOptionRenderThreejs = function(renderer, scene, camera, arjsAnchor){
 	// array of functions for the rendering loop
 	var onRenderFcts= [];
 

three.js/examples/test-runner.html

@@ -103,6 +103,7 @@
 	if( arProfile.contextParameters.trackingBackend === 'artoolkit' ){
 		// arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad.jpg')
 		arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad-640x480.jpg')
+		// arProfile.sourceImage('/data/images/img.jpg')
 		// arProfile.sourceVideo(THREEx.ArToolkitContext.baseURL + '../test/data/videos/markers-page-ipad.mp4')
 	}else if( arProfile.contextParameters.trackingBackend === 'aruco' ){
 		arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + 'src/threex/threex-aruco/examples/images/screenshot-marker-aruco.png')

three.js/vendor/jsartoolkit5/js/artoolkit.api.js

@@ -1010,15 +1010,13 @@
 			image = this.image;
 		}
 
-		if (image.videoWidth > image.videoHeight)
-		{
-			//landscape
+		if( (image.nodeName === 'IMG' && image.width > image.height ) ||
+			(image.nodeName === 'VIDEO' && image.videoWidth > image.videoHeight) ){
+			// if landscape
 			this.ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); // draw video
-		}
-		else {
-
+		}else{
+			// if portrait
 			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-			//portrait
 			var scale = this.canvas.height / this.canvas.width;
 			var scaledHeight = this.canvas.width*scale;
 			var scaledWidth = this.canvas.height*scale;