more works

Makefile

@@ -7,7 +7,4 @@ minify:
 test:
 	(cd test && make test)
 
-deploy:
-	(cd docs && make deploy)
-
 .PHONY: test

TODO.md

 ## New API
-- pick real world with all trackingMethod
-  - hit tester with plane
-  - DONE ?
 
 - build a aframe version of that to see how it fit
   - when api is stable enougth ?
   - when all the bugs are sorted out
+    - currently only something about displaying point cloud in tango - very minor
 
-- check it works on all cases
+- Check it works on all cases
   - no special cases incompatibilities
   - changeMatrixMode
   - tango point cloud fails in cameraTransformMatrix
 
-- button tangoonly pointcloudtoggle
-
-- full markers area
-  - THREEx.ArMultiMarkerUtils
-  - button - reset-markers-area
-  - button - toggle-marker-helper
-  - button - goto-learner
-
-- in tango
-  - make point cloud or not an live option
-  
+- move three.js/arjs-.js in three.js/src/newApi/
+- later rename file/class
+  - move all THREEx for ar.js as ARjs.
+  - remove artoolkit in the name when it is multi backend
+  - require to check/change all code 
+  - can i do a compatibility layer for all the classes
+  - thus it is only about changing the files
 
-- DONE tango point cloud visible
 - how to handle trackingMethod
   - area-aruco
   - area-artoolkit
@@ -34,6 +27,15 @@
   - arkit
   - best
 
+- DONE pick real world with all trackingMethod
+  - hit tester with plane
+- DONE button tangoonly pointcloudtoggle
+- DONE full markers area
+  - THREEx.ArMultiMarkerUtils
+  - button - reset-markers-area
+  - button - toggle-marker-helper
+  - button - goto-learner
+- DONE tango point cloud visible
 
 
 ## New API - no three.js dependancy
@@ -54,6 +56,10 @@
 
 
 --- 
+- remove the arcode generator + marker generator, now that they are in webxr.io
+- move docs/ into its own repository
+  - thus no conflict with main repo
+  - and it is considered secondery
 - have seen stuff about projection matrix in jsartoolkit
   - would need to recompiled
   - would fix the near/far

docs/.gitignore

-# ignore the build of github
-_book
-node_modules

docs/Makefile

-server:
-	gitbook serve
-	
-build:
-	gitbook build
-
-install:
-	gitbook install
-	
-deploy:
-	git pull
-	git checkout gh-pages
-	git pull
-	git merge master --no-edit
-	(make install && make build && cp -a _book/* .)
-	git commit -a -m 'new build of gitbook docs/'
-	git push origin gh-pages
-	git checkout master

docs/README.md

-* [Read Me](README.md)
-* [CHANGELOG](misc/CHANGELOG.md)
-* [EXAMPLES](misc/EXAMPLES.md)
-* [FAQ](misc/FAQ.md)
-* [FUTURE](misc/FUTURE.md)
-
-# Posts
-* [post-XX-how-to-use-arjs-with-aframe](posts/post-XX-how-to-use-arjs-with-aframe.md)

docs/SUMMARY.md

-* [Read Me](README.md)
-* [CHANGELOG](misc/CHANGELOG.md)
-* [EXAMPLES](misc/EXAMPLES.md)
-* [FAQ](misc/FAQ.md)
-* [FUTURE](misc/FUTURE.md)
-
-
-# Concepts
-* [augmented website](concepts/augmented-website.md)
-* [webar playground](concepts/webar-playground.md)
-
-
-# Posts
-* [post-XX-how-to-use-arjs-with-aframe](posts/post-XX-how-to-use-arjs-with-aframe.md)
-* [post-update](posts/post-update.md)

docs/book.json

-{
-        "links": {
-                "sidebar": {
-                        "Github": "https://github.com/jeromeetienne/ar.js"
-                }
-        },
-        "plugins": [
-                "edit-link",
-                "github",
-                "anchorjs"
-        ],
-        "pluginsConfig": {
-                "edit-link": {
-                        "base": "https://github.com/jeromeetienne/ar.js/tree/master/docs/",
-                        "label": "Edit This Page"
-                },
-                "github": {
-                        "url": "https://github.com/jeromeetienne/ar.js/"
-                }
-        },
-        "theme-default": {
-                "styles": {
-                        "website": "gitbook/gitbook.css"
-                }
-        }    
-}

docs/concepts/augmented-website.md

-# Augmented Website
-
-[Augmented Website](http://webxr.io/augmented-website)
-
-Bring AR to any website
-
-Easy way to share AR on the internet

docs/concepts/webar-playground.md

-# WebAR Playground
-
-The [webar playground](http://webxr.io/webar-playground) is an easy way
-to create Augmented Reality with a Few Clicks.
-You can create AR directly from your phone.
-
-## UI Description
-- Create Menu: this is where you create your AR objects. Traverse the menu and pick the one you like
-  - When you create an object, you may position it in the scene wherever you want.
-- Options Menu: Where you setup things
-- Objects Menu: List all objects currently in the scene. Click on them to select on objects or the others
-
-**Action on selected object**
-- Click/touch to position
-- Drag horizontally to rotate
-- Drag vertically to scale

docs/gitbook/gitbook-plugin-anchorjs/anchor-style.js

-gitbook.events.bind('start', function(e, config) {
-    anchors.options = config.anchorjs || {};
-});
-
-gitbook.events.bind('page.change', function() {
-    anchors.add('h1,h2,h3,h4,h5');
-});

docs/gitbook/gitbook-plugin-edit-link/plugin.js

-require(["gitbook", "jQuery"], function(gitbook, $) {
-    gitbook.events.bind('start', function (e, config) {
-        var conf = config['edit-link'];
-        var label = conf.label;
-        var base = conf.base;
-        var lang = gitbook.state.innerLanguage;
-        if (lang) {
-            // label can be a unique string for multi-languages site
-            if (typeof label === 'object') label = label[lang];
-
-            lang = lang + '/';
-        }
-
-        // Add slash at the end if not present
-        if (base.slice(-1) != "/") {
-            base = base + "/";
-        }
-
-        gitbook.toolbar.createButton({
-            icon: 'fa fa-edit',
-            text: label,
-            onClick: function() {
-                var filepath = gitbook.state.filepath;
-
-                window.open(base + lang + filepath);
-            }
-        });
-    });
-
-});
\ No newline at end of file

docs/gitbook/gitbook-plugin-github/plugin.js

-require([ 'gitbook' ], function (gitbook) {
-    gitbook.events.bind('start', function (e, config) {
-        var githubURL = config.github.url;
-
-        gitbook.toolbar.createButton({
-            icon: 'fa fa-github',
-            label: 'GitHub',
-            position: 'right',
-            onClick: function() {
-                window.open(githubURL)
-            }
-        });
-    });
-});

docs/gitbook/gitbook.css

-.book-summary ul.summary li span {
-  cursor: not-allowed;
-  opacity: 0.3;
-}
-
-.book-summary ul.summary li a:hover {
-  color: #008cff;
-  text-decoration: none;
-}
-
-code[class*="language-"],
-pre[class*="language-"] {
-  text-shadow: none;
-}
-
-.color-theme-2 .token.keyword {
-  color: #3ac;
-}
-
-.token.operator {
-  background: none;
-}

docs/misc/CHANGELOG.md

-# 1.0.1-dev - Current
-
-- added smoothedControls - everything tunable via parameters
-  - it applies LERP for position/quaternion/scale on sub-controls
-  - if display controls object3d when sub-controls has been visible for minVisibleDelay
-  - if display controls object3d when sub-controls has been unvisible for minUnvisibleDelay
-- did THREEx.ArMarkerHelper to help visualize marker
-- AR-Code generator - see [AR-Code Generator](https://jeromeetienne.github.io/AR.js/three.js/examples/arcode.html)
-- liquid markers are in!
-  [water tweet](https://twitter.com/jerome_etienne/status/844681159112036356) -
-  [boing tweet](https://twitter.com/jerome_etienne/status/845646514814947328)
-- marker invisible cloak are in! with tweening and all :)
-  [first tweet](https://twitter.com/jerome_etienne/status/840563600091688962) -
-  [video tweet](https://twitter.com/jerome_etienne/status/843757199436472320)
-- minimal.html just got a little bit cleaner
-  - aka the simplest way to do AR on the web
-  - or webar in less than 10 lines of html! on codepen
-- finished hole-in-the-wall demo - 
-  [duck on my desk tweet](https://twitter.com/jerome_etienne/status/846751371185541121)
-- support preset in a-frame a-marker - preset = ["hiro" | "kanji"]
-- experiementation in dead-reckoning ... not conclusive
-- early work about videoInWebgl - a important componant of phone-in-hmd usecase
-  [first tweet](https://twitter.com/jerome_etienne/status/846805050118864897)
-- better handling of .baseUrl in aframe default parameters
-- fixed artoolkit projection matrix to be more webgl - [projection matrix](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection)
-  - it was looking to positive-z and y was upside down compared to the usual webgl one
-- Change marker axis - now positive-y is normal to the marker
-- Added logo by @tentone - [AR.js logo](https://github.com/jeromeetienne/AR.js/blob/master/data/logo/logo-black-transparent-1280x512.png)
-Nice and slick! thanks @tentone
-- Added a-frame logo in AR - [aframe-logo.html](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/aframe-logo.html)
-- added a profile discovery. It helps choose the performance tradeoff which fit your case - [profile](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/profile.html)
-
-# 1.0.0 - AR.js has landed
-
-- Fixed the resize issue in a-frame!
-- Performance improvement of image copy time by 40%!!!
-  - massive improvement in the pose detection time
-  - so maxDetectionRate can go way up
-- Improved documentations
-
-# 0.9.0 - Initial Release
-
-I worked a lot on WebAR.
-But i recently reached [60fps on mobile phones](https://twitter.com/jerome_etienne/status/831333879810236421).
-so i think WebAR is now ready to be released :)
-
-I will keep the usual branch model
-
-- stable release on master branch
-- current release on dev branch
-- features in progress on their own branch

docs/misc/EXAMPLES.md

-# Three.js Examples
-
-- [basic](https://jeromeetienne.github.io/AR.js/three.js/examples/basic.html) :
-  three.js example for basic
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/basic.html))
-- [markerroot](https://jeromeetienne.github.io/AR.js/three.js/examples/markerroot.html) :
-  three.js example for markerroot
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/markerroot.html))
-- [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 profile
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/profile.html))
-- [deadreckoning](https://jeromeetienne.github.io/AR.js/three.js/examples/deadreckoning.html) :
-  Experiment with dead reckoning - not conclusive :(
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/deadreckoning.html))
-- [hole-in-the-wall](https://jeromeetienne.github.io/AR.js/three.js/examples/webar-playground/vendor/hole-in-the-wall/hole-in-the-wall.html) :
-  three.js example for hole-in-the-wall
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/webar-playground/vendor/hole-in-the-wall/hole-in-the-wall.html))
-- [shadow](https://jeromeetienne.github.io/AR.js/three.js/examples/shadow.html) :
-  three.js example for shadow
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/shadow.html))
-- [refraction](https://jeromeetienne.github.io/AR.js/three.js/examples/webar-playground/vendor/refraction/refraction.html) :
-  three.js example for refraction
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/webar-playground/vendor/refraction/refraction.html))
-- [markercloak](https://jeromeetienne.github.io/AR.js/three.js/examples/markercloak.html) :
-  three.js example for markercloak
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/markercloak.html))
-- [liquid-marker](https://jeromeetienne.github.io/AR.js/three.js/examples/liquid-marker/) :
-  demo transforming table and wall as liquid
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/liquid-marker/index.html))
-- [holographic-message](https://jeromeetienne.github.io/AR.js/three.js/examples/webar-playground/vendor/holographic-message/) :
-  A holographic-message in Augmented reality. Part of a business card for [@AndraConnect](https://twitter.com/AndraConnect)
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/webar-playground/vendor/holographic-message/index.html))
-- [videoinwebgl](https://jeromeetienne.github.io/AR.js/three.js/examples/videoinwebgl.html) :
-  Add video in webgl - useful for phone-in-hmd usecase - work in progress
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/videoinwebgl.html))
-- [webvr-for-ar](https://jeromeetienne.github.io/AR.js/three.js/examples/webvr-for-ar.html) :
-  Displaying AR in WebVR - work in progress
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/webvr-for-ar.html))
-- [magic-book](https://jeromeetienne.github.io/AR.js/three.js/examples/magic-book/index.html) :
-  Experimentation around magical book to open a secret door in [upload.io office](http://upload.io)
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/magic-book/index.html))
-- [measure-it](https://jeromeetienne.github.io/AR.js/three.js/examples/measure-it.html) :
-  three.js example for measure-it
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/measure-it.html))
-- [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))
-- [tracking switcher](https://jeromeetienne.github.io/AR.js/three.js/examples/trackingbackend-switch.html) :
-  Show to easily switch between tracking backends: jsartoolkit/aruco/tango
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/trackingbackend-switch.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.
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/multi-markers/examples/player.html))
-- [markers-page](https://jeromeetienne.github.io/AR.js/three.js/examples/multi-markers/markers-page/) :
-  display multiple markers on a website
-- [Screen as portal](https://jeromeetienne.github.io/AR.js/three.js/examples/multi-markers/examples/screenAsPortal/index.html) :
-  screen as portal
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/multi-markers/examples/screenAsPortal/index.html))
-- [face tracking](https://jeromeetienne.github.io/AR.js/three.js/examples/face-tracking/manual.html) :
-  face tracking experiment with tracking.js
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/face-tracking/manual.html))
-
-
-
-# a-frame Examples
-
-- [basic](https://jeromeetienne.github.io/AR.js/aframe/examples/basic.html) :
-  a-frame example for basic
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/basic.html))
-- [aframe-logo](https://jeromeetienne.github.io/AR.js/aframe/examples/aframe-logo.html) :
-  a-frame example for aframe-logo
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/aframe-logo.html))
-- [hatsune](https://jeromeetienne.github.io/AR.js/aframe/examples/hatsune.html) :
-  a-frame example for hatsune
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/hatsune.html))
-- [full-hatsune](https://jeromeetienne.github.io/AR.js/aframe/examples/full-hatsune.html) :
-  a-frame example for full-hatsune
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/full-hatsune.html))
-- [minecraft](https://jeromeetienne.github.io/AR.js/aframe/examples/minecraft.html) :
-  a-frame example for minecraft
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/minecraft.html))
-- [marker-camera](https://jeromeetienne.github.io/AR.js/aframe/examples/marker-camera.html) :
-  a-frame example for marker-camera
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/marker-camera.html))
-- [multiple-indepandent-markers](https://jeromeetienne.github.io/AR.js/aframe/examples/multiple-independent-markers.html) :
-  a-frame example for multiple-indepandent-markers
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/multiple-independent-markers.html))
-- [minimal](https://jeromeetienne.github.io/AR.js/aframe/examples/minimal.html) :
-  Want to do Augmented Reality on the web ? You can do it [in less than 10 lines of html now](https://twitter.com/jerome_etienne/status/842192608256512000) :)
-  minimal.html is the shortest html file you need if you want to do ar.js with a-frame
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/minimal.html))
-- [mobile-performance](https://jeromeetienne.github.io/AR.js/aframe/examples/mobile-performance.html) :
-  a-frame example for mobile-performance
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/mobile-performance.html))
-
-# WebVR-polyfill Examples
-- [aframe](https://jeromeetienne.github.io/AR.js/webvr-polyfill/examples/aframe.html) :
-  a-frame example for aframe
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/webvr-polyfill/examples/aframe.html))
-- [basic](https://jeromeetienne.github.io/AR.js/webvr-polyfill/examples/basic.html) :
-  a-frame example for basic
-  ([source](https://github.com/jeromeetienne/AR.js/blob/master/webvr-polyfill/examples/basic.html))

docs/misc/FAQ.md

-# AR.js FAQ
-
-## How small can we print the markers ?
-There is no absolute. It is a ratio between the physical size of the marker, and the resolution of the camera image.
-It is a tradeoff: the larger the camera image, the slower it is running.
-The larger the camera image, the smaller the marker can be.
-
-## How to Run AR.js Locally
-To run AR.js locally on your computer, first clone a copy of the repository, and change to the `AR.js` folder:
-
-  ````
-  git clone git@github.com:jeromeetienne/AR.js.git
-  cd AR.js
-  ````
-
-After that, serve the files using a static http server.  I use a simple command line http server called ```http-server```.
-This can be installed using npm:
-
-  ````
-  npm install -g http-server
-  ````
-
-
-to start the http-server, simply run:
-
-  ````
-  http-server
-  ````
-
-
-## Can't access user media error
-
-On mobile, accessing the camera using `getUserMedia` requires that you have a secure HTTPS connection to the server.  To do this, you will need to generate a certificate by running:
-
-  ````
-  openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
-  ````
-
-This will generate two files: `key.pem` and `cert.pem`.
-
-You then run the server with the `-S` to enable SSL and `-C` for your certificate files:
-
-  ````
-  http-server -S -C cert.pem -o
-  ````
-
-Alternatively, you can deploy to [github pages](https://pages.github.com/) which by default, is served using HTTPS.  This avoids having to configure a SSL server.
-
-Also working from localhost, you can avoid having to use HTTPS since [localhost is assumed secured](https://w3c.github.io/webappsec-secure-contexts/#localhost).
-
-Thanks to [@mritzco](https://gist.github.com/mritzco) for [configuration directions](https://gist.github.com/mritzco/18dfe13096294592d5eb53e7e1a5f63c).
-
-# Which plateform is Supported ?
-it works on any browser with WebRTC and WebGL.
-It run on platforms: android, IOS and window mobile.
-
-As experimentation, it has been on 
-[htc vive](https://twitter.com/jerome_etienne/status/883396955400880129) by [@robenghuse](https://twitter.com/robenghuse) 
-and [hololens](https://twitter.com/jerome_etienne/status/856503929814831108) by [@evhan55](https://twitter.com/evhan55).
-What is interested is that i didn't change a line to run on those devices. AR.js ran out of the box directly
-on htv vive and Hololens, i think it is a clear proof of the web being true cross-platform.
-
-
-# How To Release ?
-
-This one is mainly for [me](@jerome_etienne) to remember :)
-
-```bash
-# replace REVISION to the proper version
-atom three.js/threex-artoolkitcontext.js package.json
-
-# Rebuild a-frame and webvr-polyfill
-(cd aframe && make minify) && (cd webvr-polyfill && make minify)
-
-# Commit everything
-git add . && git commit -a -m 'Last commit before release'
-
-# tag the release
-git tag 1.0.0
-
-# push the tag on github
-git push origin --tags
-
-# update npm package.json
-npm publish
-
-# update the a-frame codepen
-open "https://codepen.io/jeromeetienne/pen/mRqqzb?editors=1000#0"
-```

docs/misc/FUTURE.md

-# Futures
-- add webworkers
-- add the nft
-- handle sensor fusion with the IMU ? Assume that the marker is fixed in space
-- marker removal in the video - https://twitter.com/jerome_etienne/status/838584931009835009
-- dynamic multiple markers - https://github.com/artoolkit/jsartoolkit5/issues/34
-- put the video in the webgl (and not the dom), as an options
-- stabilizer for marker orientation and/or position
-  - some tweening/smoothing on marker orientation - maybe just a lerp ?
-  - it would help the shakyness especially when the source resolution is low
-- stabilizer using gravity ?
-  - using gravity it is possible to know if the marker is on a wall or on a table
-  - once we flag the marker as on a wall, we can reduce shakyness from video detection
-  - by using gravity sensor
-- discover marker absolute orientation by comparing that to the phone gravity
-  - can be used to know if the marker is on a table, or on a wall
-- cloud computing to get better rendering
-  - fancy name for easy tech -
-  [Capture a MediaStream From a Canvas, Video or Audio Element](https://developers.google.com/web/updates/2016/10/capture-stream)
-  - 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
-- use a pingpong ball or a metallic ball to estimate the reality lighting
-  - https://www.youtube.com/watch?v=fhFzStkoE50&feature=youtu.be&t=59 for ping pong ball
-  - https://www.researchgate.net/publication/220222173_Image_Based_Shadowing_in_Real-Time_Augmented_Reality for metallic ball  
-- do a jelwery examples
-  - get a model or ring, one model of diamond
-  - https://www.transpacific-software.com/webgl/ring.html?tPage=7
-  - https://www.shadertoy.com/view/ltfXDM
-  - a refraction
-  - one ruby, one gold
-- add fresnel with bubble - even with fake envmap
-  - http://filmicworlds.com/blog/everything-has-fresnel/
-  - http://kylehalladay.com/blog/tutorial/2014/02/18/Fresnel-Shaders-From-The-Ground-Up.html
-  - http://www.tingting-wu.com/webgl_projects/ttwu_shaders.html
-- IDEA: "screen as portal" - put 4 markers in screen's corners, direct your phone at it and display a portal on the screen in #AR
-  - https://twitter.com/jerome_etienne/status/861868630883094528
-
-# Ideas
-- IDEA: a snake game in AR. https://twitter.com/jerome_etienne/status/879451002365247489
-- IDEA: A pong game in AR. Do it in augmented screen space. solo or multi-player. Two persons playing together thru #AR. https://twitter.com/jerome_etienne/status/878534742458732544
-- play with camera parameters to optimize it for AR - available in mediastreamtrack
-  - https://www.oberhofer.co/mediastreamtrack-and-its-capabilities/
-  - white balance off ?
-- AR Gaming - https://www.youtube.com/watch?v=EmGGGzibGok
-- AR Business Card - https://vimeo.com/4979525
-- ar cube visu - real nice for 360 AR https://twitter.com/jerome_etienne/status/869765239356747776
-- plug ar.js into sketchfab 
-  - do a mockup with the monkey script
-  - add a AR button on sketchfab, it pops up on marker on the screen with the instruction to connect to it
-  - then you display the model in 3d on top of the screen
-  - some simple user content
-- multi user AR world : much easier to code than you think - https://twitter.com/jerome_etienne/status/842219346030149632
-- IDEA: produce a single image able to do qr-code and pattern marker. https://twitter.com/nlehuen/status/834115970641829888
-  - about having an image able to do qr-code and pattern marker at the same time. If we have such image, we skip one step.
-  - The person first acquire the qr-code with his phone, and then it goes to a webpage which is a webar application.
-  - thus the publisher only has to publish this on its ads, likely on paper ads in magazine or in the street.
-  - and the user can use his phone to immediatly see the related augmented reality
-  - https://techcrunch.com/2017/02/02/google-chrome-gets-its-own-qr-code-barcode-scanner/
-  - somebody did it! https://twitter.com/alan17wilson/status/847738517669027842
-- do something with ps vita AR cards
-  - http://ie.playstation.com/media/8DokiOUp/AR%20Play%20Cards.pdf
-  - print it on hard papers
-  - find the kind of matrix it is.
-  - just put each marker in front of the camera - using image / photo of screen
-  - and go thru each and every matrix type detection
-- Nice effect with video texture - https://www.youtube.com/watch?v=Y9HMn6bd-v8&feature=youtu.be&t=172
-- Nice snowball effect - http://www.spacegoo.com/bubbles/
-- AR scene Minecraft: 
-  - When close to covered area, start making it interactive
-  - When I come close the character come to me and say hello
-  - I got 2d UI to say-hi dance, trigger animation, say stuff. Action button
-  - The screener become active depending on the distance with the user

docs/posts/post-XX-how-to-use-arjs-with-aframe.md

-# How To Easily Create Your Own Augmented Reality with AR.js
-## Don't Worry It's Less Than 10 Lines of HTML 
-
-
-AR.js is an efficient Augmented Reality solution on the Web. 
-It runs 100% in your web browser, this means no app to install! 
-There is no need for a specific device either e.g. Tango or iphone. 
-It runs on all mobile platforms: Android, iOS11 and Windows mobile.
-You can use it with your own phone. 
-Depending on your device, it can run very fast, up to 60fps on 2year-old phones!
-On top of that, the code is open source and all available on [github](https://github.com/jeromeetienne/ar.js).
-
-[![screen shot 2017-04-01 at 14 36 00](https://user-images.githubusercontent.com/6317076/27866704-452eaed6-618f-11e7-9cdd-2deaef865e3e.png)](https://www.youtube.com/watch?v=0MtvjFg7tik)
-A-frame is very easy to use so I wanted to make sure that AR.js was working well with it.
-Thus, combining a-frame and AR.js, it's simple for everybody to create AR content on the web. 
-
-Sounds good? Let's see how to use it.  
-
-# Show Dont Tell 
-[![screen shot 2017-07-05 at 14 40 01](https://user-images.githubusercontent.com/6317076/27867019-5c4699d4-6190-11e7-831b-e8251711acdf.png)](https://www.youtube.com/watch?v=v_Uj0C8sMi4&feature=youtu.be&utm_content=buffer22f18&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)
-
-Today you can make
-[augmented reality in 10 Lines of HTML](https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf), isn't the web amazing ?
-It is really that simple, you can try live on [codepen](https://codepen.io/jeromeetienne/pen/mRqqzb).
-Just put a [hiro marker](https://github.com/jeromeetienne/AR.js/blob/master/data/images/HIRO.jpg) in front
-of the camera and we will add the augmented reality on it.
-
-
-```html
-<!-- include aframe obviously -->
-<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
-<!-- include ar.js for a-frame -->
-<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
-<body style='margin : 0px; overflow: hidden;'>
-	<a-scene embedded arjs>
-		<!-- create your content here. just a box for now -->
-		<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
-		<!-- define a camera which will move according to the marker position -->
-		<a-marker-camera preset='hiro'></a-marker-camera>
-	</a-scene>
-</body>
-```
-
-In this scene, the camera is being moved by AR.js, and 
-the origin of your scene is at the center of the marker. 
-All the rest is normal a-frame. 
-So if you want to add new objects in the augmented reality, just add it 
-near the ```<a-box>```.
-
-
-# Add Augmented Reality in your A-Frame Project
-![screen shot 2017-07-05 at 14 22 23](https://user-images.githubusercontent.com/6317076/27867071-8833eaf6-6190-11e7-9fb9-9deac93b88bd.png)
-
-To include AR.js, you need to include [aframe-ar.js](https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js).
-Then you initialize ar.js in ```<a-scene>```.
-
-```html
-<a-scene embedded arjs>
-```
-
-Then you tell aframe that you want arjs to control the camera. For that, you just add
-
-```html
-<a-marker-camera preset='hiro'></a-marker-camera>
-```
-
-Don't forget to add the body style and a-scene embedded attribute. And you are **ALL DONE** 😄
-
-# Personalize your AR Content
-Now we have a basic cube in AR...
-It would be good to personalise the AR a bit. Let's see how to add a text, an image or even your 
-own model in augmented reality.
-
-![screen shot 2017-07-05 at 14 45 35](https://user-images.githubusercontent.com/6317076/27867143-bf05926e-6190-11e7-855f-a90ab71976fc.png)
-
-One of the most asked questions has been "how to load my own model in AR?".
-As I said before, ar.js controls the displacement of the camera, all the rest
-is classic a-frame. So you can load a model exactly as you would in 
-a-frame. 
-Here is an example of loading a [gltf](https://www.khronos.org/gltf) model, just add that in your a-scene.
-For more detail see [a-frame documentation about models](https://aframe.io/docs/0.5.0/introduction/models.html#sidebar).
-
-```html
-<!-- define your gltf asset -->
-<a-assets>
-	<a-asset-item id="tree" src="/path/to/tree.gltf"></a-asset-item>
-</a-assets>
-<!-- use your gltf model -->
-<a-entity gltf-model="#tree"></a-entity>
-```
-
-Another way to easily personalize your AR is to put a text or an image on top.
-To add a text, simply just use [a-text](https://aframe.io/docs/0.5.0/primitives/a-text.html) as below.
-
-```html
-<a-text value="Hello, World!"></a-text>
-```
-
-To add an image, [a-image](https://aframe.io/docs/0.5.0/primitives/a-image.html) is easy. Just paste this in your a-frame scene.
-
-```html
-<a-image src="another-image.png"></a-image>
-```
-
-# Customize your Marker
-![arjs marker training](https://user-images.githubusercontent.com/6317076/27867192-e55306b8-6190-11e7-9bd1-7a9dbf4fa76a.png)
-
-We understand that many people want to personalize the marker. It is possible to replace the Hiro pattern with your own image, as long as it is inside the black border.
-We have provided an easy way to this. It is called the [marker generator](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html).
-We even wrote a whole step by step [post](https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105) to help you get started. 
-
-First, you upload your own image and generate a pattern file ```pattern-marker.patt```.
-Second, you download the trained marker. And third, potentially print your marker.
-We provide a PDF file to make it easier for you.
-
-What to do with the generated pattern file?
-This file contains the encoded marker that you should reuse in your code.
-You specify you want a pattern marker and you provide the url to your own marker. 
-So in our case ```<a-marker-camera>``` should be replaced by the following.
-
-```html
-<a-marker-camera type='pattern' patternUrl='path/to/pattern-marker.patt'></a-marker-camera>
-```
-
-Simple enough.
-
-
-# Different Type of Markers : Pattern and Barcode
-Up to now, we use the 'pattern' marker. But AR.js supports another kind of marker, called barcode.
-Each of those markers contains a kind of binary code which encodes a number.
-For example below, you see one representing 5.
-
-![5](https://user-images.githubusercontent.com/252962/27870433-c18f6e10-619a-11e7-8479-4cb662798740.png)
-
-Barcode markers may be very useful for various type of applications, especially when you have many locations with various markers.
-For example, 
-[Marcel Freinbichler](https://twitter.com/fr3ino) and [Lisi Linhart](https://twitter.com/lisi_linhart)
-wanted to do a augmented reality application for their school: *"When you go to a room, you point your phone and it shows you in augmented reality the availability of this room."*
-     
-So they chosed to use barcode markers: one barcode per room. Thus when the AR application sees the marker, it converts that to into a number which matches the room. So you do a xmlhttprequest to get the current schedule of the room and display it on top of the marker. 
-
-I love this idea! It is useful for other people in the school. It has nice panash with AR. But most of all, it provides relevant informations directly where and when needed. This is a key principle for AR applications.
-
-# Add Barcode Marker in Your Project
-To add them in your project is rather straight forward.
-First you need to tell AR.js to start detecting them and their type of 
-binary code. So you modify a-scene as below.
-
-```html
-<a-scene arjs='detectionMode: mono_and_matrix; matrixCodeType: 3x3;'></a-scene>
-```
-
-Now that ar.js knows you want to use barcode markers, on each of your marker
-you need to specify which number you will use, e.g. for barcode 5.
-
-```html
-<a-marker type='barcode' value='5'></a-marker>
-```
-
-Here is [barcode marker generator](http://www.artoolworks.com/support/applications/marker/) to generate your own. Up to you to use the [type of matrix code](http://www.artoolworks.com/support/library/Using_2D-barcode_markers) matches you need.
-Sometimes such configurations may be painful so to simplify common cases, we used preset.
-
-# Markers Presets for Easier Configuration
-To make it easier and to avoid repeating ourselves, 
-it is possible to have preset to configure your markers. 
-Currently there are 2 presets "hiro" and "kanji"
-
-```html
-<!-- here is a hiro preset -->
-<a-marker preset='hiro'></a-marker>
-<!-- it is the same as the marker below -->
-<a-marker type='pattern' url='http://examples.org/hiro.patt'></a-marker>
-
-<!-- here is a kanji preset -->
-<a-marker preset='kanji'></a-marker>
-<!-- it is the same as the marker below -->
-<a-marker type='pattern' url='http://examples.org/kanji.patt'></a-marker>
-```
-
-![screen shot 2017-07-05 at 14 50 43](https://user-images.githubusercontent.com/6317076/27867388-64baee98-6191-11e7-9fbe-586fd79eba9d.png)
-
-# Move the Camera or the Marker ?
-
-When handling augmented reality, you need to decide if you want the 
-3d world origin to be the camera or the marker. Most people will use
-the marker as origin because it is more intuitive. Let's see the details
-of each mode.
-
-In one mode, you use ```<a-marker-camera>```. In this mode, the camera is moving and the marker is static, fixed at 0,0,0.
-This way to work is more common for 3d programmers, so it is the one I use in most examples.
-
-```html
-<a-marker-camera preset='hiro'></a-marker-camera>
-```
-
-
-In the other mode, you use ```<a-marker>```.
-It behaves the other way around: the camera is static at all times while the objects or markers are moving.
-The camera is fixed at 0,0,0 at all times and looks toward negative-z.
-Nevertheless this mode got a limitation, it can't handle multiple independent markers at once.
-So if you have multiple markers and want to handle them independently from each other 
-e.g. like in [this video](https://www.youtube.com/watch?v=dIEZwmjuaUA&list=PL2oSKUSmuoTECUCvHDvifRhztkOYduQsq&index=10).
-You will need to use ```<a-marker>```, and a simple camera instead. 
-
-
-```html
-<!-- define your markers -->
-<a-marker preset='hiro'>
-	<!-- here define the content to display on top of the marker -->
-	<a-box position='0 0.5 0' material='color: red;'></a-box>
-</a-marker>
-<!-- define a simple camera -->
-<a-entity camera></a-entity>
-```
-
-# How to handle multiple distinct markers
-Now that we have seen various possibilities of [AR.js](https://github.com/jeromeetienne/ar.js),
-let's end with a last example of multiple distinct markers. Those can be useful in various applications
-e.g. a 'measure it' like below.
-So we will have 3 markers, one with a preset, one with a custom pattern marker, and a barcode.
-
-[![screen shot 2017-07-05 at 14 53 43](https://user-images.githubusercontent.com/6317076/27867514-c85fefb6-6191-11e7-99c4-2091ab0a6fd1.png)](https://www.youtube.com/watch?v=dIEZwmjuaUA&list=PL2oSKUSmuoTECUCvHDvifRhztkOYduQsq&index=10)
-
-```html
-<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
-<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
-<body style='margin : 0px; overflow: hidden;'>
-	<a-scene embedded arjs='sourceType: webcam;'>
-		<!-- handle marker with your own pattern -->
-		<a-marker type='pattern' patternUrl='path/to/pattern-marker.patt'>
-			<a-box position='0 0.5 0' material='color: red;'></a-box>
-		</a-marker>
-
-		<!-- handle marker with hiro preset -->
-		<a-marker preset='hiro'>
-			<a-box position='0 0.5 0' material='color: green;'></a-box>
-		</a-marker>
-
-		<!-- handle barcode marker -->
-		<a-marker type='barcode' value='5'>
-			<a-box position='0 0.5 0' material='color: blue;'></a-box>
-		</a-marker>
-
-		<!-- add a simple camera -->
-		<a-entity camera></a-entity>
-	</a-scene>
-</body>
-```
-
-# Conclusion
-In this post we have seen how to do efficient Augmented Reality with AR.js, and how to add it to your A-Frame project. 
-We now know how to customize content in AR and make it more personal. 
-We've also learned that it's possible to create your own marker with an easy-to-use marker generator.
-Finally, we've learned how to handle the camera and use multiple distinct markers. 
-This is a lot! Congrats on getting to the end without quitting ;)
-
-I hope you all start creating amazing things with AR.js and A-Frame. Don't forget it's open source, so your imagination is the limit! 
-
-Thanks for reading. Cheers! 

docs/posts/post-iram.md

-https://medium.com/@sivaniram/c503e796a0c5
-
-TODO past the relevant section in the post
-
-
-There are good reasons to believe that web apps will begin to look more and more like native apps due to these technology trends:
-
-**Progressive Web Apps (PWA)** — PWA are a website building methodology that enables website to be treated by the browser like an app, rather than an old school website. It enables web sites to have live updates, push notifications, launch the web site from the home screen, SEO discoverability, offline usage and more. This circumvents many of the reasons why users prefer apps, which will make it easier for publishers to engage users without the high friction need for app download. Some notable companies who shifted to PWA are AliExpress, The Financial Times and Lyft. Check out the video below to learn more about PWA.
-
-**WebAssembly** — This is a new low level, Assembly-like, programming language that enables code written in non-javascript to run in the browser. 
-It is efficient, lightning fast, and backward compatible with asm.js. 
-Why is WebAssembly so important? Wasm enables to leverage code written for native environment and run it in the browser.
-So the web can reuse native code and run it faster than normal javascript.
-People like unity or unreal are obviously interested and are actively collaborating with browser makers to make it happen.
-
-**WebGL 2.0** — A javascript graphics API that enables rendering of high quality 3D graphics content on the browser. It is built on top of OpenGL ES (Embedded System) which allows it to use the mobile device’s GPU, which is a massive improvement compared to running it on the CPU. WebGL is supported by all major browsers which helps standardize web content creation.
-
-**WebRTC** — Web Real Time Communication is a well established standard that allows browsers to perform real time communications (in our case, access to the device’s camera and microphone). It works on all mobiles (IOS11 just added getUserMedia) and allow for a standardized way for developers to use Javascript libraries such as three.js and ar.js to enable real time AR experiences within a web app environment.
-
-**Shared Memory and Multi-Threading**:
-WebWorkers is a way to run code on multiple CPU cores at the same time. 
-Typically a modern phone got 4 CPU, to leverage all of them would greatly increase the CPU available to the application.
-WebWorkers exists for a long time, but recently shared memory and atomic got added.
-It definitly helps computer vision application. They can now use all CPU core, avoid unnecessary copy and handle
-shared rescources efficiently with atomic locks. 

docs/posts/post-update.md

-
-# Great stuff done by Community
-
-- AR.js app to search artist on spotify and play music - \[[tweet](https://twitter.com/jerome_etienne/status/878894697879654400)\]
-- [Marcel Freinbichler](https://twitter.com/fr3ino) and [Lisi Linhart](https://twitter.com/lisi_linhart)
-  did a nice WebAR application to book rooms in their school. It is part of their masters.
-  Very Cool!! - \[[tweet](https://twitter.com/fr3ino/status/880108156982108160)\]
-- Nice AR.js application to draw in augmented reality. [Thiery Michel](https://twitter.com/Hyriel_Mecrith)
-  and [Gildas Garcia](https://twitter.com/gildaspk) at [marmelab](https://marmelab.com/)
-  It is coming with a full tutorial explaining how to code a full application on phone!
-  Step by Steps, with explaination and videos. 
-  The perfect step if you want to start writing AR application 
-  today. - \[[tutorial](https://marmelab.com/blog/2017/06/19/augmented-reality-html5.html)\] \[[tweet](https://twitter.com/marmelab/status/876690506864054272)\]
-- [Nexus Studio](http://www.nexusstudios.com/) did WebAR experiments to see what was possible with AR.js.
-  There are beautifull! One can tell they are designers. My demo clealy comes from a coder :)
-  All their assets are imported from tilt brush - \[[tweet](https://twitter.com/nexuslondon/status/874662679700549632)\]
-- [ewparris](https://twitter.com/ewparris) is experimenting with AR.js to 
-  see how to use it for education. Kids will likely be more attentive with augmented reality. 
-  We can use it during classes, on their schoolbook even on their homework.
-  I can't wait to see what is happening in this field! - \[[tweet](https://twitter.com/ewparris/status/877669342086823938)\]
-
-### Augmented Website
-- Video on augmented Website with AR.js - \[[tweet](https://twitter.com/jerome_etienne/status/879360054662705153)\]
-- i wrote a post on medium about it - \[[post](https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8)\]
-- Added augmented-website to [webxr.io](http://webxr.io) website as an example.
-  It is the first website to be augmented, houray!! 
-  I did a video of it, recorded on ipad iso11. 
-  Works like a charm - \[[tweet](https://twitter.com/jerome_etienne/status/880019546358390785)\]
-
-- AR.js docs are now on [gitbook](https://github.com/GitbookIO/gitbook). It has a nice simple markdown format and it integrates very well 
-  with github. Each page got a 'Edit this page' button, Thus visitors can easily propose update on the documentation.
-  Good for community project!! - \[[link](https://jeromeetienne.github.io/AR.js/docs/)\]
-
-- Augmented slides!
-  I got this crazy idea of putting markers directly on slides..
-  Thus the whole audience can experience augmented reality by just pointing their phone at the screen. 
-  i did a talk at a [opensource event at microsoft](http://dublinoss.org/) where 
-  i applied this idea, it was a hit 👍 - \[[tweet](https://twitter.com/jerome_etienne/status/879471678623023105)\]
-
-- see nice snake in webgl... i would like to have this one on slides for my next talk :) - \[[tweet](https://twitter.com/jerome_etienne/status/879478562377650176)\]
-
-- I found AR.js mission: "Bring ar to the web" \[[tweet](https://twitter.com/jerome_etienne/status/879574765538869249)\]

three.js/arjs-utils.js

@@ -3,6 +3,7 @@ ARjs.Utils = {}
 
 /**
  * Create a default rendering camera for this trackingBackend. They may be modified later. to fit physical camera parameters
+ * 
  * @param {string} trackingBackend - the tracking to user
  * @return {THREE.Camera} the created camera
  */
@@ -26,12 +27,24 @@ ARjs.Utils.createDefaultCamera = function(trackingMethod){
  * @return {boolean} - true if running on tango, false otherwise
  */
 ARjs.Utils.isTango = function(){
+	// FIXME: this test is super bad
 	var isTango = navigator.userAgent.match('Chrome/57.0.2987.5') !== null ? true : false
 	return isTango
 }
 
 
+/**
+ * parse tracking method
+ * 
+ * @param {String} trackingMethod - the tracking method to parse
+ * @return {Object} - various field of the tracking method
+ */
 ARjs.Utils.parseTrackingMethod = function(trackingMethod){
+
+	if( trackingMethod === 'best' ){
+		trackingMethod = ARjs.Utils.isTango() ? 'tango' : 'area-artoolkit'
+	}	
+
 	if( trackingMethod.startsWith('area-') ){
 		return {
 			trackingBackend : trackingMethod.replace('area-', ''),

three.js/examples/arjs-session.html

@@ -16,11 +16,11 @@
 <script src='../vendor/chromium-tango/THREE.WebAR.js'></script>
 <!-- include ar.js -->
 <script src='../arjs-utils.js'></script>
-<script src='../arjs-session.js'></script>
-<script src='../arjs-anchor.js'></script>
-<script src='../arjs-hittester.js'></script>
-<script src='../arjs-tangovideomesh.js'></script>
-<script src='../arjs-tangopointcloud.js'></script>
+<script src='../src/newAPI/arjs-session.js'></script>
+<script src='../src/newAPI/arjs-anchor.js'></script>
+<script src='../src/newAPI/arjs-hittester.js'></script>
+<script src='../src/newAPI/arjs-tangovideomesh.js'></script>
+<script src='../src/newAPI/arjs-tangopointcloud.js'></script>
 <script src='../threex-artoolkitsource.js'></script>
 <script src='../threex-artoolkitcontext.js'></script>
 <script src='../threex-artoolkitprofile.js'></script>
@@ -60,28 +60,14 @@
 	/ 
 	<a href='#best' onclick='location.reload()'>best</a>
 	<br/>
-	<a href='javascript:void(0)' id='buttonTangoTogglePointCloud'>toggle point cloud</a>
-	-
-	<a href='javascript:void(0)' id='buttonToggleMarkerHelpers'>toggle marker helper</a>
-	-
-	<a href='javascript:void(0)' id='buttonMarkersAreaLearner'>Learn new marker area</a>
-	-
-	<a href='javascript:void(0)' id='buttonMarkersAreaReset'>Reset marker area</a>
+	<a href='javascript:void(0)' id='buttonTangoTogglePointCloud'>toggle-point-cloud</a>
+	<a href='javascript:void(0)' id='buttonToggleMarkerHelpers'>toggle-marker-helper</a>
+	<a href='javascript:void(0)' id='buttonMarkersAreaLearner'>Learn-new-marker-area</a>
+	<a href='javascript:void(0)' id='buttonMarkersAreaReset'>Reset-marker-area</a>
 </div><script>
 ;(function(){
-// TODO put that in a function
+	// get tracking method from location.hash
 	var trackingMethod = location.hash.substring(1) ? location.hash.substring(1) : 'best'
-
-	if( trackingMethod === 'best' ){
-		var trackingMethod = ARjs.Utils.isTango() ? 'tango' : 'area-artoolkit'
-	}
-	
-	if( trackingMethod.startsWith('area-') ){
-		var trackingBackend = trackingMethod.replace('area-', '')
-	}else{
-		var trackingBackend = trackingMethod
-	}
-	
 	document.querySelector('#trackingMethod').innerHTML = trackingMethod
 	
 	//////////////////////////////////////////////////////////////////////////////////
@@ -112,26 +98,19 @@
 	//////////////////////////////////////////////////////////////////////////////////
 
 	var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
-	scene.add(camera);
+	scene.add(camera)
 	
 	////////////////////////////////////////////////////////////////////////////////
-	//          handle arToolkitSource
+	//          	Set up Arjs.Profile
 	////////////////////////////////////////////////////////////////////////////////
 
-	var arProfile = new THREEx.ArToolkitProfile()
+	var arProfile = new ARjs.Profile()
 		.sourceWebcam()
 		.trackingMethod(trackingMethod)
+		// .changeMatrixMode('modelViewMatrix')
+		.changeMatrixMode('cameraTransformMatrix')
 		.defaultMarker()
-
-	// FIXME temporary placeholder - to reevaluate later
-	if( trackingMethod === 'tango' ){
-		arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
-	}	
-	
-	// honor changeMatrixMode
-	// arProfile.defaultMarkerParameters.changeMatrixMode = 'cameraTransformMatrix'
-	arProfile.defaultMarkerParameters.changeMatrixMode = 'modelViewMatrix'
-
+		.checkIfValid()
 
 	//////////////////////////////////////////////////////////////////////////////
 	//		build ARjs.Session
@@ -149,7 +128,7 @@
 	})
 	
 	////////////////////////////////////////////////////////////////////////////////
-	//          Create a ArMarkerControls
+	//          Create a ARjs.Anchor
 	////////////////////////////////////////////////////////////////////////////////
 
 	var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters)
@@ -158,7 +137,7 @@
 	})
 
 	//////////////////////////////////////////////////////////////////////////////
-	//                handle videoMesh for tango
+	//                handle Hit Tester
 	//////////////////////////////////////////////////////////////////////////////
 
 	
@@ -168,7 +147,7 @@
 	})
 
 	// tango only - picking to set object position
-        renderer.domElement.addEventListener("click", function(domEvent) {
+        renderer.domElement.addEventListener("click", function(domEvent){
 		var hitTestResults = hitTester.testDomEvent(domEvent)
 		if( hitTestResults.length === 0 )	return
 
@@ -176,21 +155,53 @@
 		arAnchor.applyHitTestResult(hitTestResult)
 	})
 
+	//////////////////////////////////////////////////////////////////////////////
+	//		tango specifics
+	//////////////////////////////////////////////////////////////////////////////
 	
 	if( trackingMethod === 'tango' ){
+		// init tangoVideoMesh
 		var tangoVideoMesh = new ARjs.TangoVideoMesh(arSession)
 		onRenderFcts.push(function(){
 			tangoVideoMesh.update()
 		})
-	}
-	
-	if( trackingMethod === 'tango' ){
+		// init tangoPointCloud
 		var tangoPointCloud = new ARjs.TangoPointCloud(arSession)
 		scene.add(tangoPointCloud.object3d)
 	}
 	
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object to the arAnchor
+	//////////////////////////////////////////////////////////////////////////////////
+	
+	var arWorldRoot = arAnchor.object3d
+	
+	var mesh = new THREE.AxisHelper()
+	arWorldRoot.add(mesh)
+	
+	// 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.y	= geometry.parameters.height/2
+	arWorldRoot.add( mesh );
+	
+	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,64,16);
+	var material	= new THREE.MeshNormalMaterial(); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	mesh.position.y	= 0.5
+	arWorldRoot.add( mesh );
+	
+	onRenderFcts.push(function(delta){
+		mesh.rotation.x += Math.PI*delta
+	})
+	
 	//////////////////////////////////////////////////////////////////////////////
-	//		Code Separator
+	//		Handle UI
 	//////////////////////////////////////////////////////////////////////////////
 	
 	if( trackingMethod === 'tango' ){
@@ -214,12 +225,14 @@
 
 
 		document.querySelector('#buttonMarkersAreaReset').addEventListener('click', function(){
+			var trackingBackend = arProfile.contextParameters.trackingBackend
 			THREEx.ArMultiMarkerUtils.storeDefaultMultiMarkerFile(trackingBackend)
 			location.reload()
 		})
 
 		document.querySelector('#buttonMarkersAreaLearner').addEventListener('click', function(){
 			var learnerBaseURL = 'multi-markers/examples/learner.html'
+			var trackingBackend = arProfile.contextParameters.trackingBackend
 			THREEx.ArMultiMarkerUtils.navigateToLearnerPage(learnerBaseURL, trackingBackend)
 		})		
 	}else{
@@ -228,34 +241,6 @@
 		document.querySelector('#buttonMarkersAreaLearner').style.display = 'none'
 	}
 
-	//////////////////////////////////////////////////////////////////////////////////
-	//		add an object in the scene
-	//////////////////////////////////////////////////////////////////////////////////
-	
-	var mesh = new THREE.AxisHelper()
-	arAnchor.object3d.add(mesh)
-	
-	// 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.y	= geometry.parameters.height/2
-	arAnchor.object3d.add( mesh );
-	
-	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,64,16);
-	var material	= new THREE.MeshNormalMaterial(); 
-	var mesh	= new THREE.Mesh( geometry, material );
-	mesh.position.y	= 0.5
-	arAnchor.object3d.add( mesh );
-	
-	onRenderFcts.push(function(delta){
-		mesh.rotation.x += Math.PI*delta
-	})
-	
 	//////////////////////////////////////////////////////////////////////////////////
 	//		render the whole thing on the page
 	//////////////////////////////////////////////////////////////////////////////////
@@ -265,7 +250,7 @@
 		// Render the see through camera scene
 		renderer.clear()
 		
-		// render videoMesh for tango
+		// render tangoVideoMesh
 		if( trackingMethod === 'tango' ){
 			tangoVideoMesh.render()
 		}

three.js/arjs-anchor.js → three.js/src/newAPI/arjs-anchor.js

@@ -50,7 +50,6 @@ ARjs.Anchor = function(arSession, markerParameters){
 				markerHelper.object3d.visible = visible
 			})
 		}
-
 	}
 	
 	this.object3d = new THREE.Group()
@@ -59,6 +58,7 @@ ARjs.Anchor = function(arSession, markerParameters){
 	//		THREEx.ArSmoothedControls
 	//////////////////////////////////////////////////////////////////////////////
 	
+	// TODO should be part of trackingMethod parsing
 	var shouldBeSmoothed = true
 	if( arContext.parameters.trackingBackend === 'tango' ) shouldBeSmoothed = false 
 

three.js/threex-artoolkitprofile.js

+var ARjs = ARjs || {}
+
 var THREEx = THREEx || {}
 
 /**
@@ -7,14 +9,14 @@ var THREEx = THREEx || {}
  * - you can use this class to understand how to tune your specific usecase
  * - it is made to help people to build parameters without understanding all the underlying details.
  */
-THREEx.ArToolkitProfile = function(){
+ARjs.Profile = THREEx.ArToolkitProfile = function(){
 	this.reset()
 
 	this.performance('default')
 }
 
 
-THREEx.ArToolkitProfile.prototype._guessPerformanceLabel = function() {
+ARjs.Profile.prototype._guessPerformanceLabel = function() {
 	var isMobile = navigator.userAgent.match(/Android/i)
 			|| navigator.userAgent.match(/webOS/i)
 			|| navigator.userAgent.match(/iPhone/i)
@@ -36,7 +38,7 @@ THREEx.ArToolkitProfile.prototype._guessPerformanceLabel = function() {
 /**
  * reset all parameters
  */
-THREEx.ArToolkitProfile.prototype.reset = function () {
+ARjs.Profile.prototype.reset = function () {
 	this.sourceParameters = {
 		// to read from the webcam 
 		sourceType : 'webcam',
@@ -60,7 +62,7 @@ THREEx.ArToolkitProfile.prototype.reset = function () {
 
 
 
-THREEx.ArToolkitProfile.prototype.performance = function(label) {
+ARjs.Profile.prototype.performance = function(label) {
 	if( label === 'default' ){
 		label = this._guessPerformanceLabel()
 	}
@@ -95,7 +97,7 @@ THREEx.ArToolkitProfile.prototype.performance = function(label) {
 //////////////////////////////////////////////////////////////////////////////
 
 
-THREEx.ArToolkitProfile.prototype.defaultMarker = function (trackingBackend) {
+ARjs.Profile.prototype.defaultMarker = function (trackingBackend) {
 	trackingBackend = trackingBackend || this.contextParameters.trackingBackend
 
 	if( trackingBackend === 'artoolkit' ){
@@ -117,20 +119,19 @@ THREEx.ArToolkitProfile.prototype.defaultMarker = function (trackingBackend) {
 //////////////////////////////////////////////////////////////////////////////
 //		Source
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitProfile.prototype.sourceWebcam = function () {
+ARjs.Profile.prototype.sourceWebcam = function () {
 	this.sourceParameters.sourceType = 'webcam'
 	delete this.sourceParameters.sourceUrl
 	return this
 }
 
-
-THREEx.ArToolkitProfile.prototype.sourceVideo = function (url) {
+ARjs.Profile.prototype.sourceVideo = function (url) {
 	this.sourceParameters.sourceType = 'video'
 	this.sourceParameters.sourceUrl = url
 	return this
 }
 
-THREEx.ArToolkitProfile.prototype.sourceImage = function (url) {
+ARjs.Profile.prototype.sourceImage = function (url) {
 	this.sourceParameters.sourceType = 'image'
 	this.sourceParameters.sourceUrl = url
 	return this
@@ -139,27 +140,36 @@ THREEx.ArToolkitProfile.prototype.sourceImage = function (url) {
 //////////////////////////////////////////////////////////////////////////////
 //		trackingBackend
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitProfile.prototype.trackingBackend = function (trackingBackend) {
-	console.warn('use profile.trackingBackend() obsolete function')
+ARjs.Profile.prototype.trackingBackend = function (trackingBackend) {
+	console.warn('stop profile.trackingBackend() obsolete function. use .trackingMethod instead')
 	this.contextParameters.trackingBackend = trackingBackend
 	return this
 }
 
+//////////////////////////////////////////////////////////////////////////////
+//		trackingBackend
+//////////////////////////////////////////////////////////////////////////////
+ARjs.Profile.prototype.changeMatrixMode = function (changeMatrixMode) {
+	this.defaultMarkerParameters.changeMatrixMode = changeMatrixMode
+	return this
+}
 
 //////////////////////////////////////////////////////////////////////////////
 //		trackingBackend
 //////////////////////////////////////////////////////////////////////////////
-THREEx.ArToolkitProfile.prototype.trackingMethod = function (trackingMethod) {
-
-	if( trackingMethod.startsWith('area-') ){
-		var trackingBackend = trackingMethod.replace('area-', '')
-		var markersAreaEnabled = true
-	}else{
-		var trackingBackend = trackingMethod
-		var markersAreaEnabled = false
-	}
+ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
+	var data = ARjs.Utils.parseTrackingMethod(trackingMethod)
+	this.defaultMarkerParameters.markersAreaEnabled = data.markersAreaEnabled
+	this.contextParameters.trackingBackend = data.trackingBackend
+	return this
+}
 
-	this.defaultMarkerParameters.markersAreaEnabled = markersAreaEnabled
-	this.contextParameters.trackingBackend = trackingBackend
+/**
+ * check if the profile is valid. Throw an exception is not valid
+ */
+ARjs.Profile.prototype.checkIfValid = function () {
+	if( this.contextParameters.trackingBackend === 'tango' ){
+		this.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
+	}
 	return this
 }