diff --git a/TODO.md b/TODO.md index 4aeff947b38783e9426c2b001f3c5e0fe3f6c89c..a28815f7916127d5deb6cd3a6f490ac0f3b01825 100644 --- a/TODO.md +++ b/TODO.md @@ -1,8 +1,23 @@ ## New API -- make each -- arjs-session.html - with a select input on trackingMethod +- pick real world with all trackingMethod + - hit tester with plane -- trackingMethod +- build a aframe version of that to see how it fit + +- check it works on all cases + - no special cases incompatibilities +- full markers area + - learner + - option: markerhelper visibility + - reset area + - store defaultareaifneeded + +- in tango + - make point cloud or not an live option + + +- DONE tango point cloud visible +- how to handle trackingMethod - area-aruco - area-artoolkit - aruco @@ -11,6 +26,8 @@ - arkit - best + + ## New API - no three.js dependancy - first remove it externally - then remove it internally diff --git a/three.js/arjs-anchor.js b/three.js/arjs-anchor.js index 7b9833b5790a28b75424e6796fa048c0661f3f4b..c65aec3c9baff8d83c9a7632326893094743bc1e 100644 --- a/three.js/arjs-anchor.js +++ b/three.js/arjs-anchor.js @@ -17,44 +17,84 @@ ARjs.Anchor = function(arSession, markerParameters){ scene.add(markerRoot) if( markerParameters.changeMatrixMode === 'modelViewMatrix' ){ - var markerControls = new THREEx.ArMarkerControls(arContext, markerRoot, markerParameters) + var controlledObject = markerRoot }else if( markerParameters.changeMatrixMode === 'cameraTransformMatrix' ){ - var markerControls = new THREEx.ArMarkerControls(arContext, camera, markerParameters) + var controlledObject = camera }else console.assert(false) -// FIXME tango - the pickability is on the marker -// - aka handle the object positioning in a special function of ArMarkerControls -// - arkitanchor is like ArMarkerControls -// - make it generic to work on plane too, if the marker is markerBased + if( markerParameters.markersAreaEnabled === false ){ + var markerControls = new THREEx.ArMarkerControls(arContext, controlledObject, markerParameters) + }else{ + // get multiMarkerFile from localStorage + console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null ) + var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile') + // build a multiMarkerControls + var multiMarkerControls = THREEx.ArMultiMarkerControls.fromJSON(arContext, scene, markerRoot, multiMarkerFile) - // build a smoothedControls - var smoothedRoot = new THREE.Group() - scene.add(smoothedRoot) - var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot) + // create ArMarkerHelper - useful to debug + var markerHelpers = [] + multiMarkerControls.subMarkersControls.forEach(function(subMarkerControls){ + // add an helper to visuable each sub-marker + var markerHelper = new THREEx.ArMarkerHelper(subMarkerControls) + markerHelper.object3d.visible = false + subMarkerControls.object3d.add( markerHelper.object3d ) + // add it to markerHelpers + markerHelpers.push(markerHelper) + }) + this.setSubMarkersVisibility = function(visible){ + markerHelpers.forEach(function(markerHelper){ + markerHelper.object3d.visible = visible + }) + } + } this.object3d = new THREE.Group() - // markerRoot.add(arWorldRoot) - smoothedRoot.add(this.object3d) + + ////////////////////////////////////////////////////////////////////////////// + // THREEx.ArSmoothedControls + ////////////////////////////////////////////////////////////////////////////// + + var shouldBeSmoothed = true + if( arContext.parameters.trackingBackend === 'tango' ) shouldBeSmoothed = false + if( shouldBeSmoothed === true ){ + // build a smoothedControls + var smoothedRoot = new THREE.Group() + scene.add(smoothedRoot) + var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot) + smoothedRoot.add(this.object3d) + }else{ + markerRoot.add(this.object3d) + } - this.update = function(){ + + ////////////////////////////////////////////////////////////////////////////// + // Code Separator + ////////////////////////////////////////////////////////////////////////////// + this.update = function(){ // update scene.visible if the marker is seen if( markerParameters.changeMatrixMode === 'cameraTransformMatrix' ){ - _this.object3d.visible = smoothedRoot.visible + _this.object3d.visible = controlledObject.visible } - // update smoothedControls - smoothedControls.update(markerRoot) - } + if( smoothedControls !== undefined ){ + // update smoothedControls parameters depending on how many markers are visible in multiMarkerControls + if( multiMarkerControls !== undefined ){ + multiMarkerControls.updateSmoothedControls(smoothedControls) + } + // update smoothedControls + smoothedControls.update(markerRoot) + } + } } /** * Apply ARjs.Session.HitTestResult to the controlled object3d * - * @param {ARjs.Session.HitTestResult} hitTestResult - the result to apply + * @param {ARjs.HitTester.Result} hitTestResult - the result to apply */ ARjs.Anchor.prototype.applyHitTestResult = function(hitTestResult){ this.object3d.position.copy(hitTestResult.position) diff --git a/three.js/arjs-hittester.js b/three.js/arjs-hittester.js new file mode 100644 index 0000000000000000000000000000000000000000..c4ba9b18396d7a94a33d4f38514f58bab4487741 --- /dev/null +++ b/three.js/arjs-hittester.js @@ -0,0 +1,47 @@ +// @namespace +var ARjs = ARjs || {} + +/** + * Create an anchor in the real world + * + * @param {ARjs.Session} arSession - the session on which we create the anchor + * @param {Object} markerParameters - parameter of this anchor + */ +ARjs.HitTester = function(arSession){ + this.arSession = arSession +} + +/** + * Test the real world for intersections. + * + * @param {Number} mouseX - position X of the hit [-1, +1] + * @param {Number} mouseY - position Y of the hit [-1, +1] + * @return {[ARjs.HitTester.Result]} - array of result + */ +ARjs.HitTester.prototype.test = function(mouseX, mouseY){ + var arContext = this.arSession.arContext + var hitTestResults = [] + + var result = THREEx.ARClickability.tangoPickingPointCloud(arContext, mouseX, mouseY) + if( result !== null ){ + var scale = new THREE.Vector3(1,1,1).multiplyScalar(0.1) + var hitTestResult = new ARjs.HitTester.Result(result.position, result.quaternion, scale) + hitTestResults.push(hitTestResult) + } + + // TODO use clickability + return hitTestResults +} + +/** + * Contains the result of ARjs.HitTester.test() + * + * @param {THREE.Vector3} position - position to use + * @param {THREE.Quaternion} quaternion - quaternion to use + * @param {THREE.Vector3} scale - scale + */ +ARjs.HitTester.Result = function(position, quaternion, scale){ + this.position = position + this.quaternion = quaternion + this.scale = scale +} diff --git a/three.js/arjs-session.js b/three.js/arjs-session.js index 48d9072c46c0423e75738395c3f7ab31c7234e1f..724f5183b25a8d7a6c44740295c7a15f659ee5e9 100644 --- a/three.js/arjs-session.js +++ b/three.js/arjs-session.js @@ -1,23 +1,5 @@ var ARjs = ARjs || {} -function arSession_usage_example(){ - var arSession = new ARjs.Session({ - scene: scene, - renderer: renderer, - camera: camera, - sourceParameters: sourceParameters, - contextParameters: contextParameters - }) - - var arAnchor = new ARjs.Anchor(arSession, parameters) - - - var intersects = asSession.hitTest(mouseX, mouseY) - // intersects is an array of ARjs.HitTestingResult = function(position, quaternion, scale){} - // similar intersects that three.js raycasting - arAnchor.applyHitTestResult(intersects[0]) -} - /** * define a ARjs.Session * @@ -72,40 +54,3 @@ ARjs.Session = function(parameters){ arContext.update( arSource.domElement ) } } - -////////////////////////////////////////////////////////////////////////////// -// Hit Testing -////////////////////////////////////////////////////////////////////////////// - -/** - * Test the real world for intersections. - * - * @param {Number} mouseX - position X of the hit [-1, +1] - * @param {Number} mouseY - position Y of the hit [-1, +1] - * @return {[ARjs.Session.HitTestResult]} - array of HitTestResult - */ -ARjs.Session.prototype.hitTest = function(mouseX, mouseY){ - var intersects = [] - - var result = THREEx.ARClickability.tangoPickingPointCloud(this.arContext, mouseX, mouseY) - if( result !== null ){ - intersects.push(new ARjs.Session.HitTestResult(result.position, result.quaternion, new THREE.Vector3(1,1,1).multiplyScalar(0.1))) - } - - // TODO use clickability - return intersects -} - -/** - * Contains the result of arSession.hitTest. - * - * @param {THREE.Vector3} position - position to use - * @param {THREE.Quaternion} quaternion - quaternion to use - * @param {THREE.Vector3} scale - scale - * @return {[type]} [description] - */ -ARjs.Session.HitTestResult = function(position, quaternion, scale){ - this.position = position - this.quaternion = quaternion - this.scale = scale -} diff --git a/three.js/arjs-tangopointcloud.js b/three.js/arjs-tangopointcloud.js new file mode 100644 index 0000000000000000000000000000000000000000..5bfd960911be87471ad2fc1e10997485f7609362 --- /dev/null +++ b/three.js/arjs-tangopointcloud.js @@ -0,0 +1,26 @@ +// @namespace +var ARjs = ARjs || {} + +ARjs.TangoPointCloud = function(arSession){ + var _this = this + var arContext = arSession.arContext + this.object3d = new THREE.Group + +console.warn('Work only on cameraTransformMatrix - fix me - useless limitation') + + arContext.addEventListener('initialized', function(event){ + var vrPointCloud = arContext._tangoContext.vrPointCloud + var geometry = vrPointCloud.getBufferGeometry() + var material = new THREE.PointsMaterial({ + size: 0.01, + // colorWrite: false, // good for occlusion + depthWrite: false, + }) + var pointsObject = new THREE.Points(geometry, material) + // Points are changing all the time so calculating the frustum culling volume is not very convenient. + pointsObject.frustumCulled = false; + pointsObject.renderDepth = 0; + + _this.object3d.add(pointsObject) + }) +} diff --git a/three.js/arjs-tangovideomesh.js b/three.js/arjs-tangovideomesh.js index 96b010f4029d0a24f39c6c6dbacbf795c0bdd7eb..7a9c774b91ea3ff9bc7eaa7cb1924403c929b2c5 100644 --- a/three.js/arjs-tangovideomesh.js +++ b/three.js/arjs-tangovideomesh.js @@ -25,6 +25,10 @@ ARjs.TangoVideoMesh = function(arSession){ sceneOrtho.add(videoMesh) }) + ////////////////////////////////////////////////////////////////////////////// + // Code Separator + ////////////////////////////////////////////////////////////////////////////// + this.update = function(){ // sanity check console.assert( arContext.parameters.trackingBackend === 'tango' ) @@ -34,6 +38,10 @@ ARjs.TangoVideoMesh = function(arSession){ THREE.WebAR.updateCameraMeshOrientation(vrDisplay, videoMesh) } + ////////////////////////////////////////////////////////////////////////////// + // Code Separator + ////////////////////////////////////////////////////////////////////////////// + this.render = function(){ // sanity check console.assert( arContext.parameters.trackingBackend === 'tango' ) diff --git a/three.js/arjs-utils.js b/three.js/arjs-utils.js index 5198010b0e3ddf7c747cb7cb90a23475a81f4498..9044879914c132362c4c755fbeb05778d6b0cd0a 100644 --- a/three.js/arjs-utils.js +++ b/three.js/arjs-utils.js @@ -6,7 +6,8 @@ ARjs.Utils = {} * @param {string} trackingBackend - the tracking to user * @return {THREE.Camera} the created camera */ -ARjs.Utils.createDefaultCamera = function(trackingBackend){ +ARjs.Utils.createDefaultCamera = function(trackingMethod){ + var trackingBackend = this.parseTrackingMethod(trackingMethod).trackingBackend // Create a camera if( trackingBackend === 'artoolkit' ){ var camera = new THREE.Camera(); @@ -28,3 +29,18 @@ ARjs.Utils.isTango = function(){ var isTango = navigator.userAgent.match('Chrome/57.0.2987.5') !== null ? true : false return isTango } + + +ARjs.Utils.parseTrackingMethod = function(trackingMethod){ + if( trackingMethod.startsWith('area-') ){ + return { + trackingBackend : trackingMethod.replace('area-', ''), + markersAreaEnabled : true, + } + }else{ + return { + trackingBackend : trackingMethod, + markersAreaEnabled : false, + } + } +} diff --git a/three.js/examples/arjs-session.html b/three.js/examples/arjs-session.html index 825333847cf2e88dc689c9d83849da3b2bcc0df5..fb6c434f1055d05660892c143197c071a332c531 100644 --- a/three.js/examples/arjs-session.html +++ b/three.js/examples/arjs-session.html @@ -18,12 +18,15 @@ + + + @@ -42,41 +45,36 @@ / 1001 for aruco
- Tracking Backend: unknown + Tracking Method: unknown - Switch to : artoolkit / aruco / + area artoolkit + / + area aruco + / tango + / + best