changed marker axis

README.md

@@ -244,6 +244,7 @@ I exited to see what people will do with AR.js :)
   - have a browser on server to produce high quality 3d - aka pbs and to stream that to a phone
   - so when the phone is moving a lot, we do the local rendering
   - when the phone is stable, we do the server rendering
+- social AR - https://github.com/haydenjameslee/networked-aframe/blob/master/docs/Tutorial:%20Create%20your%20first%20Networked-Aframe%20experience.md
 
 # Ideas
 - AR Gaming - https://www.youtube.com/watch?v=EmGGGzibGok

TODO.md

-- pack the TODO.md and all, then switch to webvr-polyfill until it works for three.js demo, then for a-frame demo
+
 
 # star war hologram
 - mvp DONE

aframe/build/aframe-ar.js

@@ -314,9 +314,15 @@ THREEx.ArMarkerControls.prototype._postInit = function(){
 			// data.matrix is the model view matrix
 			var modelViewMatrix = new THREE.Matrix4().fromArray(event.data.matrix)
 
+
 			// apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
-			var tmpMatrix = new THREE.Matrix4().copy(_this.context._axistransformMatrix)
+			var tmpMatrix = new THREE.Matrix4().copy(_this.context._projectionAxisTransformMatrix)
 			tmpMatrix.multiply(modelViewMatrix)
+
+			// change axis orientation on marker - artoolkit say Z is normal to the marker - ar.js say Y is normal to the marker
+			var markerAxisTransformMatrix = new THREE.Matrix4().makeRotationX(Math.PI/2)
+			tmpMatrix.multiply(markerAxisTransformMatrix)
+
 			modelViewMatrix.copy(tmpMatrix)
 
 
@@ -375,9 +381,10 @@ THREEx.ArToolkitContext = function(parameters){
 	
 // debugger	
 	
-	this._axistransformMatrix = new THREE.Matrix4()
-	this._axistransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI))
-	this._axistransformMatrix.multiply(new THREE.Matrix4().makeRotationZ(Math.PI))
+	// set this._projectionAxisTransformMatrix to change artoolkit projection matrix axis to match usual webgl one
+	this._projectionAxisTransformMatrix = new THREE.Matrix4()
+	this._projectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI))
+	this._projectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationZ(Math.PI))
 
 	
         this.arController = null;
@@ -398,7 +405,7 @@ THREEx.ArToolkitContext.prototype.getProjectionMatrix = function(srcElement){
 	var projectionMatrix = new THREE.Matrix4().fromArray(projectionMatrixArr)
 		
 	// apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
-	projectionMatrix.multiply(this._axistransformMatrix)
+	projectionMatrix.multiply(this._projectionAxisTransformMatrix)
 	
 	// return the result
 	return projectionMatrix

three.js/examples/dev.html

@@ -64,12 +64,12 @@
 		sourceType : 'webcam',
 		
 		// to read from an image
-		// sourceType : 'image',
-		// sourceUrl : '../../data/images/img.jpg',		
+		sourceType : 'image',
+		sourceUrl : '../../data/images/img.jpg',		
 
 		// to read from a video
-		sourceType : 'video',
-		sourceUrl : '../../data/videos/headtracking.mp4',		
+		// sourceType : 'video',
+		// sourceUrl : '../../data/videos/headtracking.mp4',		
 	})
 
 	arToolkitSource.init(function onReady(){
@@ -116,14 +116,18 @@
 	scene.add(markerRoot)
 	var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
 		type : 'pattern',
-		// patternUrl : '../../data/data/patt.hiro',
-		patternUrl : '../../data/data/patt.kanji',
+		patternUrl : '../../data/data/patt.hiro',
+		// patternUrl : '../../data/data/patt.kanji',
 	})
 
 	//////////////////////////////////////////////////////////////////////////////////
 	//		add an object in the scene
 	//////////////////////////////////////////////////////////////////////////////////
 
+
+	var mesh = new THREE.AxisHelper()
+	markerRoot.add(mesh)
+
 	// add a torus knot	
 	var geometry	= new THREE.CubeGeometry(1,1,1);
 	var material	= new THREE.MeshNormalMaterial({
@@ -133,13 +137,13 @@
 	}); 
 	var mesh	= new THREE.Mesh( geometry, material );
 	mesh.position.z	= geometry.parameters.height/2
-	markerRoot.add( mesh );
+	// markerRoot.add( mesh );
 	
 	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,32,32);
 	var material	= new THREE.MeshNormalMaterial(); 
 	var mesh	= new THREE.Mesh( geometry, material );
 	mesh.position.z	= 0.5
-	markerRoot.add( mesh );
+	// markerRoot.add( mesh );
 	
 	onRenderFcts.push(function(){
 		mesh.rotation.x += 0.1

three.js/threex-armarkercontrols.js

@@ -92,9 +92,15 @@ THREEx.ArMarkerControls.prototype._postInit = function(){
 			// data.matrix is the model view matrix
 			var modelViewMatrix = new THREE.Matrix4().fromArray(event.data.matrix)
 
+
 			// apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
-			var tmpMatrix = new THREE.Matrix4().copy(_this.context._axistransformMatrix)
+			var tmpMatrix = new THREE.Matrix4().copy(_this.context._projectionAxisTransformMatrix)
 			tmpMatrix.multiply(modelViewMatrix)
+
+			// change axis orientation on marker - artoolkit say Z is normal to the marker - ar.js say Y is normal to the marker
+			var markerAxisTransformMatrix = new THREE.Matrix4().makeRotationX(Math.PI/2)
+			tmpMatrix.multiply(markerAxisTransformMatrix)
+
 			modelViewMatrix.copy(tmpMatrix)
 
 

three.js/threex-artoolkitcontext.js

@@ -30,9 +30,10 @@ THREEx.ArToolkitContext = function(parameters){
 	
 // debugger	
 	
-	this._axistransformMatrix = new THREE.Matrix4()
-	this._axistransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI))
-	this._axistransformMatrix.multiply(new THREE.Matrix4().makeRotationZ(Math.PI))
+	// set this._projectionAxisTransformMatrix to change artoolkit projection matrix axis to match usual webgl one
+	this._projectionAxisTransformMatrix = new THREE.Matrix4()
+	this._projectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI))
+	this._projectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationZ(Math.PI))
 
 	
         this.arController = null;
@@ -53,7 +54,7 @@ THREEx.ArToolkitContext.prototype.getProjectionMatrix = function(srcElement){
 	var projectionMatrix = new THREE.Matrix4().fromArray(projectionMatrixArr)
 		
 	// apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
-	projectionMatrix.multiply(this._axistransformMatrix)
+	projectionMatrix.multiply(this._projectionAxisTransformMatrix)
 	
 	// return the result
 	return projectionMatrix