first version of profile

a952ca59 · Jerome Etienne · 4d089dcf · a952ca59 · a952ca59 · a952ca59
5 changed file
--- a/README.md
+++ b/README.md
@@ -87,6 +87,9 @@ Three.js Examples:
 - [mobile-performance](https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html) : 
  three.js example for mobile-performance
  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/mobile-performance.html))
+- [profile](https://jeromeetienne.github.io/AR.js/three.js/examples/profile.html) : 
+  three.js example for artoolkit-profile
+  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/profile.html))

 a-frame Examples: 


--- a/three.js/examples/dev.html
+++ b/three.js/examples/dev.html
@@ -60,7 +60,13 @@
 	////////////////////////////////////////////////////////////////////////////////


-	var artoolkitProfile = new THREEx.ArToolkitProfile('guess')
+	var artoolkitProfile = new THREEx.ArToolkitProfile()
+	// artoolkitProfile.sourceWebcam().hiroMarker();
+	artoolkitProfile.sourceVideo('../../data/videos/headtracking.mp4').kanjiMarker();
+	// artoolkitProfile.sourceImage('../../data/images/img.jpg').hiroMarker();
+
+	artoolkitProfile.performance('slow');
+	

 	var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)


--- a/three.js/examples/profile.html
+++ b/three.js/examples/profile.html
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+<!-- three.js library -->
+<script src='vendor/three.js/build/three.js'></script>
+<script src="vendor/three.js/examples/js/libs/stats.min.js"></script>
+<!-- jsartookit -->
+<script src="../vendor/jsartoolkit5/build/artoolkit.min.js"></script>
+<script src="../vendor/jsartoolkit5/js/artoolkit.api.js"></script>
+<!-- include threex.artoolkit -->
+<script src="../threex-artoolkitsource.js"></script>
+<script src="../threex-artoolkitcontext.js"></script>
+<script src="../threex-artoolkitprofile.js"></script>
+<script src="../threex-armarkercontrols.js"></script>
+
+<body style='margin : 0px; overflow: hidden;'><div style='position: absolute; top: 10px; width:100%; text-align: center;';>
+	<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - developement playground
+	<br/>
+	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
+</div><script>
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Init
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// init renderer
+	var renderer	= new THREE.WebGLRenderer({
+		// antialias	: true,
+		alpha: true
+	});
+	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
+	// renderer.setPixelRatio( 2 );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.domElement.style.position = 'absolute'
+	renderer.domElement.style.top = '0px'
+	renderer.domElement.style.left = '0px'
+	document.body.appendChild( renderer.domElement );
+
+	// array of functions for the rendering loop
+	var onRenderFcts= [];
+
+	// init scene and camera
+	var scene	= new THREE.Scene();
+
+	var ambient = new THREE.AmbientLight( 0x666666 );
+	scene.add( ambient );
+
+	var directionalLight = new THREE.DirectionalLight( 0x887766 );
+	directionalLight.position.set( -1, 1, 1 ).normalize();
+	scene.add( directionalLight );
+	
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Initialize a basic camera
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// Create a camera
+	var camera = new THREE.Camera();
+	scene.add(camera);
+
+	////////////////////////////////////////////////////////////////////////////////
+	//          handle arToolkitSource
+	////////////////////////////////////////////////////////////////////////////////
+
+
+	var artoolkitProfile = new THREEx.ArToolkitProfile()
+	artoolkitProfile.sourceWebcam().hiroMarker()
+	artoolkitProfile.performance('desktop-fast')
+	// artoolkitProfile.sourceVideo('../../data/videos/headtracking.mp4').kanjiMarker();
+	// artoolkitProfile.sourceImage('../../data/images/img.jpg').hiroMarker()
+	// artoolkitProfile.discoverPerformance()
+	// artoolkitProfile.discoverPerformance()
+	
+
+	var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
+
+	arToolkitSource.init(function onReady(){
+		// handle resize of renderer
+		arToolkitSource.onResize(renderer.domElement)		
+	})
+	
+	// handle resize
+	window.addEventListener('resize', function(){
+		// handle arToolkitSource resize
+		arToolkitSource.onResize(renderer.domElement)		
+	})	
+	////////////////////////////////////////////////////////////////////////////////
+	//          initialize arToolkitContext
+	////////////////////////////////////////////////////////////////////////////////
+	
+
+	// create atToolkitContext
+	var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
+	// initialize it
+	arToolkitContext.init(function onCompleted(){
+		// copy projection matrix to camera
+		var projectionMatrix = arToolkitContext.arController.getCameraMatrix();
+		camera.projectionMatrix.fromArray(projectionMatrix);
+	})
+
+	// update artoolkit on every frame
+	onRenderFcts.push(function(){
+		if( arToolkitSource.ready === false )	return
+
+		arToolkitContext.update( arToolkitSource.domElement )
+	})
+	
+	
+	////////////////////////////////////////////////////////////////////////////////
+	//          Create a ArMarkerControls
+	////////////////////////////////////////////////////////////////////////////////
+	
+	var markerRoot = new THREE.Group
+	scene.add(markerRoot)
+	var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, artoolkitProfile.defaultMarkerParameters)
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object in the scene
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// add a torus knot	
+	var geometry	= new THREE.CubeGeometry(1,1,1);
+	var material	= new THREE.MeshNormalMaterial({
+		transparent : true,
+		opacity: 0.5,
+		side: THREE.DoubleSide
+	}); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	mesh.position.z	= geometry.parameters.height/2
+	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 );
+	
+	onRenderFcts.push(function(){
+		mesh.rotation.x += 0.1
+	})
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the whole thing on the page
+	//////////////////////////////////////////////////////////////////////////////////
+	var stats = new Stats();
+	document.body.appendChild( stats.dom );
+	// render the scene
+	onRenderFcts.push(function(){
+		renderer.render( scene, camera );
+		// stats.update();
+	})
+
+	// run the rendering loop
+	var lastTimeMsec= null
+	requestAnimationFrame(function animate(nowMsec){
+		// keep looping
+		requestAnimationFrame( animate );
+		// measure time
+		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
+		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
+		lastTimeMsec	= nowMsec
+		// call each update function
+		onRenderFcts.forEach(function(onRenderFct){
+			onRenderFct(deltaMsec/1000, nowMsec/1000)
+		})
+	})
+</script></body>
--- a/three.js/threex-artoolkitcontext.js
+++ b/three.js/threex-artoolkitcontext.js
@@ -44,7 +44,7 @@ THREEx.ArToolkitContext.prototype.init = function(onCompleted){
 	var sourceWidth = this.parameters.sourceWidth
 	var sourceHeight = this.parameters.sourceHeight

-        console.log('ArToolkitContext: _onSourceReady width', sourceWidth, 'height', sourceHeight)
+        // console.log('ArToolkitContext: _onSourceReady width', sourceWidth, 'height', sourceHeight)
        _this._cameraParameters = new ARCameraParam(_this.parameters.cameraParametersUrl, function() {
        	// init controller
                var arController = new ARController(sourceWidth, sourceHeight, _this._cameraParameters);

--- a/three.js/threex-artoolkitprofile.js
+++ b/three.js/threex-artoolkitprofile.js
 var THREEx = THREEx || {}

-/**
- * TODO
- * - .setMarkerHiro()
- * - .setMarkerKanji()
- * - .setSourceWebcam()
- * - .setSourceVideo(url)
- * - .setSourceImage(url)
- * - .setPerformance()
- */
-
-THREEx.ArToolkitProfile = function(label){
-	if( label === 'guess' )	label = this._guessLabel()
-	
-	this.reset()
-	this.setProfile(label)
-}

-THREEx.ArToolkitProfile.prototype.reset = function () {
-	this.sourceParameters = {}
-	this.contextParameters = {}
-	this.defaultMarkerParameters = {}
-};
-
-THREEx.ArToolkitProfile.prototype._guessLabel = function () {
-	// TODO implement this
-	return 'desktop'
-};
+THREEx.ArToolkitProfile = function(){
+	this.reset().discoverPerformance()
+}

-THREEx.ArToolkitProfile.prototype.setProfile = function (label) {
-	if( 'desktop' ){
-		this.desktopProfile()
-	}else if( 'mobile' ){
-		this.mobileProfile()
-	}else console.assert('false')	
-};

-THREEx.ArToolkitProfile.prototype.desktopProfile = function () {
+THREEx.ArToolkitProfile.prototype.reset = function () {
 	this.sourceParameters = {
 		// to read from the webcam 
 		sourceType : 'webcam',
-		
-		// to read from an image
-		// sourceType : 'image',
-		// sourceUrl : '../../data/images/img.jpg',		
-
-		// to read from a video
-		// sourceType : 'video',
-		// sourceUrl : '../../data/videos/headtracking.mp4',		
-
-		// sourceWidth: 80*3,
-		// sourceHeight: 60*3,
-		// 
 	}

 	this.contextParameters = {
 		cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
 		detectionMode: 'mono',
-		maxDetectionRate: 30,
 	}
 	this.defaultMarkerParameters = {
 		type : 'pattern',
-		// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
-		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji'
+		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
 	}
-}
+	return this
+};

-THREEx.ArToolkitProfile.prototype.mobileProfile = function () {
-	this.sourceParameters = {
-		// to read from the webcam 
-		sourceType : 'webcam',
-		
-		// to read from an image
-		// sourceType : 'image',
-		// sourceUrl : '../../data/images/img.jpg',		
-
-		// to read from a video
-		// sourceType : 'video',
-		// sourceUrl : '../../data/videos/headtracking.mp4',		
-
-		sourceWidth: 80*3,
-		sourceHeight: 60*3,
-		// 
-	}
+//////////////////////////////////////////////////////////////////////////////
+//		Performance
+//////////////////////////////////////////////////////////////////////////////

-	this.contextParameters = {
-		cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
-		detectionMode: 'mono',
-		maxDetectionRate: 30,
-		sourceWidth: this.sourceParameters.sourceWidth,
-		sourceHeight: this.sourceParameters.sourceHeight,		
+THREEx.ArToolkitProfile.prototype.discoverPerformance = function() {
+	var isMobile = navigator.userAgent.match(/Android/i)
+			|| navigator.userAgent.match(/webOS/i)
+			|| navigator.userAgent.match(/iPhone/i)
+			|| navigator.userAgent.match(/iPad/i)
+			|| navigator.userAgent.match(/iPod/i)
+			|| navigator.userAgent.match(/BlackBerry/i)
+			|| navigator.userAgent.match(/Windows Phone/i)
+			? true : false 
+	if( isMobile === true ){
+		this.performance('phone-normal')
+	}else{
+		this.performance('desktop-normal')	
 	}
-	this.defaultMarkerParameters = {
-		type : 'pattern',
-		// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
-		patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji'
+}
+
+THREEx.ArToolkitProfile.prototype.performance = function(label) {
+	if( label === 'desktop-fast' ){
+		this.sourceParameters.sourceWidth = 640*2
+		this.sourceParameters.sourceWidth = 480*2
+
+		this.contextParameters.maxDetectionRate = 60
+	}else if( label === 'desktop-normal' ){
+		this.sourceParameters.sourceWidth = 640
+		this.sourceParameters.sourceWidth = 480
+
+		this.contextParameters.maxDetectionRate = 60
+	}else if( label === 'phone-normal' ){
+		this.sourceParameters.sourceWidth = 240
+		this.sourceParameters.sourceWidth = 180
+
+		this.contextParameters.maxDetectionRate = 30	
+	}else if( label === 'phone-slow' ){
+		this.sourceParameters.sourceWidth = 240
+		this.sourceParameters.sourceWidth = 180
+
+		this.contextParameters.maxDetectionRate = 15		
+	}else {
+		console.assert(false, 'unknonwn label '+label)
 	}
+	this.contextParameters.sourceWidth = this.sourceParameters.sourceWidth	
+	this.contextParameters.sourceHeight = this.sourceParameters.sourceHeight	
+}
+
+//////////////////////////////////////////////////////////////////////////////
+//		Marker
+//////////////////////////////////////////////////////////////////////////////
+THREEx.ArToolkitProfile.prototype.kanjiMarker = function () {
+	this.contextParameters.detectionMode = 'mono'
+
+	this.defaultMarkerParameters.type = 'pattern'
+	this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji'
+	return this
+}
+
+THREEx.ArToolkitProfile.prototype.hiroMarker = function () {
+	this.contextParameters.detectionMode = 'mono'
+
+	this.defaultMarkerParameters.type = 'pattern'
+	this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
+	return this
+}
+
+//////////////////////////////////////////////////////////////////////////////
+//		Source
+//////////////////////////////////////////////////////////////////////////////
+THREEx.ArToolkitProfile.prototype.sourceWebcam = function () {
+	this.sourceParameters.sourceType = 'webcam'
+	delete this.sourceParameters.sourceUrl
+	return this
+}
+
+
+THREEx.ArToolkitProfile.prototype.sourceVideo = function (url) {
+	this.sourceParameters.sourceType = 'video'
+	this.sourceParameters.sourceUrl = url
+	return this
+}
+
+THREEx.ArToolkitProfile.prototype.sourceImage = function (url) {
+	this.sourceParameters.sourceType = 'image'
+	this.sourceParameters.sourceUrl = url
+	return this
 }