more work on object3d-glmatrix

TODO.md

@@ -128,28 +128,6 @@
 - ar-tracking-aruco.js
 - ar-tracking-tango.js
 
-## Remove three.js dependancy
-- first remove it externally
-  - find all dependancy to three.js in the ar-session API
-  - ARjs.Anchor should export a modelViewMatrix
-  - ARjs.Session should export a camera projection matrix and a camera transform matrix
-  - ARjs.HitTesting Plane is very three.js dependant - use raycasting of three.js
-  - ARjs.Session got dependancy on renderer/scene/camera .... quite a lot 
-    - it needs to be sorted out
-- then remove it internally
-- get ride of three.js dependancy 
-  - first arjs session API not to use any three.js specific
-  - vector3 as array, same for quaternion
-  - some matrix as array too - projection matrix, localMatrix
-- as im rewriting the highlevel API, im thinking about removing the three.js 
-  dependancy. aka to make AR.js easily usable by other than three.js
-  this could be osg.js (sketchfab stuff), this could be babylon.js
-  this would clean things up and this isnt too hard to do on my side.
-  Just using another math library and to do some THREE.Object3d emulation
-- use gl-matrix.js - it is good code - it is from somebody rigurous - it is well maintained
-- ARjs.Camera inherit from ARjs.Object3D - projectionMatrix
-- ARjs.Object3D : position, quaternion, scale
-
 
 --- 
 - put multi-markers in /src/markers-area

three.js/examples/object3d-glmatrix/README.md

+- https://github.com/mrdoob/three.js/blob/master/src/core/Object3D.js
+- http://glmatrix.net/docs/
+
 - do ARjs.Object3D
 - handle scene graph with world matrix
 - 
+
+---
+
+## Remove three.js dependancy
+- first remove it externally
+  - find all dependancy to three.js in the ar-session API
+  - ARjs.Anchor should export a modelViewMatrix
+  - ARjs.Session should export a camera projection matrix and a camera transform matrix
+  - ARjs.HitTesting Plane is very three.js dependant - use raycasting of three.js
+  - ARjs.Session got dependancy on renderer/scene/camera .... quite a lot 
+    - it needs to be sorted out
+    - renderer for canvas domElement - anything else ? for resize
+    - scene only for my own stuff
+    - camera too - for resize
+    - ARjs.THREE.onResizeCamera() - ARjs.THREE.onResizeRenderer()
+    - use inspector to display from where it is used
+
+- then remove it internally
+- get ride of three.js dependancy 
+  - first arjs session API not to use any three.js specific
+  - vector3 as array, same for quaternion
+  - some matrix as array too - projection matrix, localMatrix
+- as im rewriting the highlevel API, im thinking about removing the three.js 
+  dependancy. aka to make AR.js easily usable by other than three.js
+  this could be osg.js (sketchfab stuff), this could be babylon.js
+  this would clean things up and this isnt too hard to do on my side.
+  Just using another math library and to do some THREE.Object3d emulation
+- use gl-matrix.js - it is good code - it is from somebody rigurous - it is well maintained
+- ARjs.Camera inherit from ARjs.Object3D - projectionMatrix
+- ARjs.Object3D : position, quaternion, scale

three.js/examples/object3d-glmatrix/arjs-camera.js

+var ARjs = ARjs || {}
+
+ARjs.Camera = function(){
+	ARjs.Object3D.call(this)
+	
+	this.projectionMatrix = mat4.create()
+}
+
+ARjs.Camera.prototype = Object.create( ARjs.Object3D.prototype );
+ARjs.Camera.prototype.constructor = ARjs.Camera;

three.js/examples/object3d-glmatrix/arjs-math.js

+var ARjs = ARjs || {}
+ARjs.Math = ARjs.Math || {}
+
+ARjs.Math.Vector3 = vec3
+ARjs.Math.Quaternion = quat
+ARjs.Math.Matrix4 = mat4

three.js/examples/object3d-glmatrix/arjs-object3d.js

 var ARjs = ARjs || {}
 
-// https://github.com/mrdoob/three.js/blob/master/src/core/Object3D.js
 
+/**
+ * Heavily inspired from the great three.js THREE.Object3D
+ */
 ARjs.Object3D = function(){
-	this.position = vec3.create()
+	this.position = ARjs.Math.Vector3.create()
 	this.quaternion = quat.create()
-	this.scale = vec3.create()
-	vec3.set(this.scale, 1, 1, 1)
+	this.scale = ARjs.Math.Vector3.create()
+	ARjs.Math.Vector3.set(this.scale, 1, 1, 1)
 
 
-	this.matrix = mat4.create()
+	this.matrix = ARjs.Math.Matrix4.create()
 	this.matrixAutoUpdate = true
 
-	this.matrixWorld = mat4.create()
+	this.matrixWorld = ARjs.Math.Matrix4.create()
 	this.matrixWorldNeedsUpdate = false
 	
 	// decompose transform matrix
-	// mat4.getTranslation(this.position, this.matrix)
-	// mat4.getRotation(this.quaternion, this.matrix)
-	// mat4.getScaling(this.scale, this.matrix)
+	// ARjs.Math.Matrix4.getTranslation(this.position, this.matrix)
+	// ARjs.Math.Matrix4.getRotation(this.quaternion, this.matrix)
+	// ARjs.Math.Matrix4.getScaling(this.scale, this.matrix)
 
 	this.updateMatrix()
 
@@ -32,18 +34,51 @@ ARjs.Object3D = function(){
 
 ARjs.Object3D.nextID = 0
 
-ARjs.Object3D.prototype.updateMatrix = function () {
+ARjs.Object3D.prototype.decomposeMatrix = function(){
+	ARjs.Math.Matrix4.getTranslation(this.position, this.matrix)
+	ARjs.Math.Matrix4.getRotation(this.quaternion, this.matrix)
+	ARjs.Math.Matrix4.getScaling(this.scale, this.matrix)
+}
+
+//////////////////////////////////////////////////////////////////////////////
+//		.updateMatrix + .updateMatrixWorld
+//////////////////////////////////////////////////////////////////////////////
+
+ARjs.Object3D.prototype.updateMatrix = function(){
 	// compose transform matrix
-	mat4.fromRotationTranslationScale(this.matrix, this.quaternion, this.position, this.scale)
+	ARjs.Math.Matrix4.fromRotationTranslationScale(this.matrix, this.quaternion, this.position, this.scale)
 
 	this.matrixWorldNeedsUpdate = true
 }
 
-ARjs.Object3D.prototype.updateMatrixWorld = function (force) {
-	// not yet implemented
+ARjs.Object3D.prototype.updateMatrixWorld = function(force){
+	if( this.matrixAutoUpdate ) this.updateMatrix();
+
+	if( this.matrixWorldNeedsUpdate || force ){
+
+		if( this.parent === null ){
+			ARjs.Math.Matrix4.copy(this.matrixWorld, this.matrix);
+		}else{
+			// this.matrixWorld.multiplyMatrices( this.parent.matrixWorld, this.matrix );
+			ARjs.Math.Matrix4.multiply(this.matrixWorld, this.parent.matrixWorld, this.matrix);
+		}
+
+		this.matrixWorldNeedsUpdate = false;
+		force = true;
+	}
+
+	// update children
+	for( var i = 0; i < this.children.length; i ++ ){
+		var child = this.children[i]
+		child.updateMatrixWorld( force );
+	}
 }
 
-ARjs.Object3D.prototype.add = function (child) {
+//////////////////////////////////////////////////////////////////////////////
+//		.add/.remove
+//////////////////////////////////////////////////////////////////////////////
+
+ARjs.Object3D.prototype.add = function(child){
 	if( child.parent !== null )	child.parent.remove( child )
 
 	child.parent = this
@@ -51,10 +86,10 @@ ARjs.Object3D.prototype.add = function (child) {
 	this.children.push( child )
 }
 
-ARjs.Object3D.prototype.remove = function (child){
+ARjs.Object3D.prototype.remove = function(child){
 	var index = this.children.indexOf( child )
 
-	if ( index === - 1 ) return
+	if( index === - 1 ) return
 
 	child.parent = null;
 

three.js/examples/object3d-glmatrix/examples/basic.html

 <script src='../vendor/gl-matrix.js'></script>
+<script src='../arjs-math.js'></script>
 <script src='../arjs-object3d.js'></script>
+<script src='../arjs-camera.js'></script>
 <script>
 	var object3d = new ARjs.Object3D()
+	vec3.set(object3d.position, 2,0,0)
 
-	var aChild = new ARjs.Object3D()
+	var aChild = new ARjs.Camera()
+	vec3.set(aChild.position, 1,0,0)
+	
 	object3d.add(aChild)
+	
+	object3d.updateMatrixWorld()
+
+
 </script>