From 825b09402eb775804a6514216664547937d9101c Mon Sep 17 00:00:00 2001 From: Jerome Etienne Date: Thu, 4 May 2017 15:20:00 +0100 Subject: [PATCH] more work --- README.md | 2 +- three.js/examples/mobile-performance.html | 7 -- .../multi-markers/examples/learner.html | 75 ++++++++++++------- .../multi-markers/examples/player.html | 66 +++++++++++----- .../threex-armultimarkercontrols.js | 16 ++-- .../threex-armultimarkerlearning.js | 4 +- 6 files changed, 104 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index 384df6f..c2bc96e 100644 --- a/README.md +++ b/README.md @@ -183,7 +183,7 @@ Three.js Examples: - [parameters-tunning](https://jeromeetienne.github.io/AR.js/three.js/examples/parameters-tunning.html) : three.js example for parameters-tunning ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/parameters-tunning.html)) -- [multimarker](https://jeromeetienne.github.io/AR.js/three.js/examples/multi-markers/examples/player.html) : +- [multi-markers](https://jeromeetienne.github.io/AR.js/three.js/examples/multi-markers/examples/player.html) : multi markers examples - it shows how to dynamically learn a multi markers and then how to use it. learner.html is a example of dynamic learning of a multi markers configuration. It has been designed to be reusable. diff --git a/three.js/examples/mobile-performance.html b/three.js/examples/mobile-performance.html index 1a5cf6b..d5033aa 100644 --- a/three.js/examples/mobile-performance.html +++ b/three.js/examples/mobile-performance.html @@ -34,13 +34,6 @@ // 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 diff --git a/three.js/examples/multi-markers/examples/learner.html b/three.js/examples/multi-markers/examples/learner.html index c9a8c66..ea1d04a 100644 --- a/three.js/examples/multi-markers/examples/learner.html +++ b/three.js/examples/multi-markers/examples/learner.html @@ -91,11 +91,11 @@ // // to read from an image // sourceType : 'image', - // sourceUrl : '../../../../data/images/multimarker.jpg' + // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/multimarker.jpg' // to read from a video // sourceType : 'video', - // sourceUrl : '../../../../data/videos/headtracking.mp4', + // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4', }) @@ -116,11 +116,12 @@ // create atToolkitContext var arToolkitContext = new THREEx.ArToolkitContext({ - cameraParametersUrl: '../../../../data/data/camera_para.dat', + cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat', detectionMode: 'mono', maxDetectionRate: 30, - canvasWidth: 80*4, - canvasHeight: 60*4, + // high accuracy of detection on purpose - important during learning + // canvasWidth: 80*4, + // canvasHeight: 60*4, // debug: true, }) // initialize it @@ -142,37 +143,61 @@ var hasHash = location.hash.substring(1) !== '' ? true : false if( hasHash === true ){ - var jsonData = JSON.parse(location.hash.substring(1)) - var backURL = jsonData.backURL - var markersControlsParameters = jsonData.markersControlsParameters + var urlOptions = JSON.parse(location.hash.substring(1)) + }else{ + var urlOptions = { + backURL : null, + markerControlsParameters : [], + } + alert('should not happen') } // prepare the parameters var subMarkersControls = [] - markersControlsParameters.forEach(function(markerControlsParameters){ + urlOptions.markersControlsParameters.forEach(function(markerControlsParameters){ // create a markerRoot - var object3d = new THREE.Object3D() - scene.add(object3d) + var markerRoot = new THREE.Group() + scene.add(markerRoot) + + // create markerControls for our markerRoot + var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, markerControlsParameters) + - // create markerControls for our object3d - var markerControls = new THREEx.ArMarkerControls(arToolkitContext, object3d, markerControlsParameters) + // TODO here put a THREEx.ArSmoothedControls behind a flag - could be useful for tunning + var smoothedControls = null + if( false ){ + // build a smoothedControls + var smoothedRoot = new THREE.Group() + scene.add(smoothedRoot) + var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot) + onRenderFcts.push(function(){ + smoothedControls.update(markerRoot) + }) + } - if( true ){ - // add an helper to visuable each sub-marker - var markerHelper = new THREEx.ArMarkerHelper(markerControls) + // add an helper to visuable each sub-marker + var markerHelper = new THREEx.ArMarkerHelper(markerControls) + if( smoothedControls !== null ){ + smoothedControls.object3d.add( markerHelper.object3d ) + }else{ markerControls.object3d.add( markerHelper.object3d ) } - // TODO here put a THREEx.ArSmoothedControls behind a flag - could be useful for tunning + + // store it in the parameters - subMarkersControls.push(markerControls) + if( smoothedControls !== null ){ + subMarkersControls.push(smoothedControls) + }else { + subMarkersControls.push(markerControls) + } }) - var multiMarkerLearning = new THREEx.ArMultiMakersLearning(subMarkersControls) -window.multiMarkerLearning = multiMarkerLearning + var multiMarkerLearning = new THREEx.ArMultiMakersLearning(arToolkitContext, subMarkersControls) +// window.multiMarkerLearning = multiMarkerLearning multiMarkerLearning.enabled = false ////////////////////////////////////////////////////////////////////////////// @@ -208,27 +233,27 @@ window.multiMarkerLearning = multiMarkerLearning // generate json file and store it var jsonString = multiMarkerLearning.toJSON() console.log('Writing multiMarkerFile', jsonString) - localStorage.setItem('sampleMultiMarkerFile', jsonString); + localStorage.setItem('ARjsMultiMarkerFile', jsonString); // update application status updateAppStatus() } // honor ?url= if present - if( backURL !== null ){ + if( urlOptions.backURL !== null ){ setTimeout(function(){ - location.href = backURL + location.href = urlOptions.backURL }, 1) } } function onRecordClear(){ - localStorage.removeItem('sampleMultiMarkerFile') + localStorage.removeItem('ARjsMultiMarkerFile') updateAppStatus() } function updateAppStatus(){ - var multiMarkerFile = localStorage.getItem('sampleMultiMarkerFile'); + var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile'); if( multiMarkerFile === null ){ document.querySelector('#dataStatus').innerHTML = 'none' }else{ diff --git a/three.js/examples/multi-markers/examples/player.html b/three.js/examples/multi-markers/examples/player.html index 8205a7e..9fc80f3 100644 --- a/three.js/examples/multi-markers/examples/player.html +++ b/three.js/examples/multi-markers/examples/player.html @@ -33,10 +33,14 @@
Record new area
+ Markers Helper : + enable + / + disable appMode : - stored - / - hardcoded + stored + / + hardcoded