chore: v2.0.0, enhanced readme

CHANGELOG.md

+# 2.0.0
+
+- Introduced Location Based Augmented Reality: new `aframe` custom components. Added also documentation, examples and cleaned some code
+
 # 1.7.8
 
 # 1.7.7

README.md

@@ -10,12 +10,9 @@
 <span class="badge-patreon"><a href="https://patreon.com/jerome_etienne" title="Donate to this project using Patreon"><img src="https://img.shields.io/badge/patreon-donate-yellow.svg" alt="Patreon donate button" /></a></span>
 [![Twitter Follow](https://img.shields.io/twitter/follow/jerome_etienne.svg?style=plastic&label=Twitter&style=plastic)](https://twitter.com/jerome_etienne)
 
-I am focusing hard on making AR for the web a reality.
-This repository is where I publish the code.
-Contact me anytime [@jerome_etienne](https://twitter.com/jerome_etienne).
-Stuff is still moving fast, we have reached a good status though.
-An article has been published on [uploadvr](https://uploadvr.com/ar-js-efficient-augmented-reality-for-the-web/).
-So I wanted to publish this so people can try it and have fun with it :)
+AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Marker based and Location based AR.
+
+Welcome to the official repository!
 
 🚀For more updated stuff about AR.js, new versions and more, you can follow [@nicolocarp](https://twitter.com/nicolocarp) and Watch this repo!
 
@@ -27,6 +24,13 @@ So I wanted to publish this so people can try it and have fun with it :)
 - **Open Source** : It is completely open source and free of charge!
 - **Standards** : It works on any phone with [webgl](http://caniuse.com/#feat=webgl) and [webrtc](http://caniuse.com/#feat=stream)
 
+# AR.js v2.0.0 is out!🌍
+
+AR.js v2.0.0 introduce for the first time another type of Augmented Reality: **Location Based**.
+
+AR.js can now be used with its Marker Based feature, with Location Based or both combined.
+
+See the project that has been integrated into AR.js: [GeoAR.js](https://github.com/nicolocarpignoli/GeoAR.js).
 
 # Try it on Mobile
 
@@ -39,7 +43,7 @@ To try it on your phone, it is only 2 easy steps, check it out!
 
 **You are done!** It will open a webpage which read the phone webcam, localize a hiro marker and add 3d on top of it!
 
-# What "Marker based" means
+# What "Marker Based" means
 AR.js uses `artoolkit`, and so it is marker based.
 `artoolkit` is a software with years of experience doing augmented reality. It is able to do a lot!
 
@@ -51,6 +55,34 @@ More details about markers:
 * [Artoolkit Open Doc](https://github.com/artoolkit/artoolkit-docs/tree/master/3_Marker_Training)
 * [Detailed Article about markers](https://medium.com/@nicolcarpignoli/ar-js-the-simplest-way-to-get-cross-browser-augmented-reality-on-the-web-10cbc721debc) by [@nicolocarpignoli](https://twitter.com/nicolocarp)
 
+# What 'Location Based' means
+
+AR.js, on its `aframe` implementation, comes with custom components that make possible to integrate data from GPS sensors.
+
+asically, you can add `gps-entity-place` - custom `aframe` entities that have a specific longitude/latitude values. You can add them with a script, loading them from APIs (Foursquare, Google Maps, and so on) or just add them statically on your HTML. You can also load them dynamically as you move to a wider area using APIs. Choice is yours and possibilities are endless with Javascript.
+
+Once you have added one or more gps-entities, and added the `gps-camera` on the `camera` entity, the system calculates, at every frame, your position and the distance of places from you.
+
+Using your phone sensors for orientation/position, it is able to show on your camera a content for each place on its 'physical' place (so if you point the camera toward the place in real life, you will see the content near it).
+
+If you move the camera, it calculates again orientation and position. If places are far, it shows smaller content. If places are near you, it shows it bigger.
+
+🌍Click on the example name for the online version.
+📲Open from mobile phone.
+
+- [Click Places](https://nicolo-carpignoli.herokuapp.com/examples/basic.html)
+
+    Show place icon for every place. Clicking on the icon will show the place name.
+
+    <img height="569" width="320" src="https://github.com/nicolocarpignoli/GeoAR.js/blob/master/docs/click-places.gif?raw=true">
+
+- [Places Name](https://nicolo-carpignoli.herokuapp.com/examples/places-name)
+
+    Show icon and place name above. Clicking on places will redirect to a certain URL (now mocked up).
+
+  <img height="569" width="320" src="https://github.com/nicolocarpignoli/GeoAR.js/blob/master/docs/places-name.gif?raw=true">
+
+
 # Index
 * [Get Started](#Get-Started)
 * [Guides for Beginners](#Guides-for-beginners)
@@ -69,13 +101,13 @@ More details about markers:
 
 #  Get Started
 
-## Augmented reality for the web in less than 10 lines of html
+## Augmented Reality for the Web in less than 10 lines of HTML
 
 ```html
 <!doctype HTML>
 <html>
 <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
-<script src="https://raw.githack.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
+<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.0/aframe/build/aframe-ar.js"></script>
   <body style='margin : 0px; overflow: hidden;'>
     <a-scene embedded arjs>
       <a-marker preset="hiro">

aframe/README.md

@@ -17,15 +17,15 @@ Augmented reality for a-frame.
 # Show, Don't Tell
 Here are the demos
 
-- [basic.html](https://jeromeetienne.github.io/AR.js/aframe/examples/basic.html) 
+- [basic.html](https://jeromeetienne.github.io/AR.js/aframe/examples/basic.html)
 basic minimal examples. Good to get started
-<!-- - [demo.html](https://jeromeetienne.github.io/AR.js/aframe/examples/demo.html) 
+<!-- - [demo.html](https://jeromeetienne.github.io/AR.js/aframe/examples/demo.html)
 shows you all the possibilities of aframe-ar. You can play around -->
 - [marker-camera.html](https://jeromeetienne.github.io/AR.js/aframe/examples/marker-camera.html):
 Move the camera instead of using the usual "camera looking toward negative-z and modelViewMatrix"
 - [multiple-independent-markers.html](https://jeromeetienne.github.io/AR.js/aframe/examples/multiple-independent-markers.html):
 Handle multiple indepant markers in a single scene.
-<!-- - [hatsune-minecraft.html](https://jeromeetienne.github.io/AR.js/aframe/examples/minecraft.html): 
+<!-- - [hatsune-minecraft.html](https://jeromeetienne.github.io/AR.js/aframe/examples/minecraft.html):
 include a hatsune miku or minecraft avatar on the marker -->
 - [marker-events.html](https://jeromeetienne.github.io/AR.js/aframe/examples/marker-events.html):
 Emit events when markers are found and lost, and register the respective event listeners.
@@ -67,7 +67,7 @@ Here are the attributes for this entity
 
 
 # \<a-marker-camera\>
-Usually the model used in augmented reality is about changing the modelViewMatrix 
+Usually the model used in augmented reality is about changing the modelViewMatrix
 based on the marker position. the camera being static in 0,0,0 looking toward negative z.
 
 We define as well a model where we move the camera, instead of the object.
@@ -78,13 +78,13 @@ cameraTransform would fit well a room-scale setup, with *multiple markers connec
 modelView is able to provide multiple *independent* markers.
 
 ```html
-<!-- add artoolkit into your scene -->
-<a-scene artoolkit>
+        <!-- add artoolkit into your scene -->
+        <a-scene artoolkit>
         <!-- define your scene as usual -->
         <a-box></a-box>
         <!-- define a camera inside the <a-marker-camera> -->
         <a-marker-camera preset='hiro'><a-marker-camera>
-</a-scene>
+        </a-scene>
 ```
 
 # Links
@@ -95,8 +95,8 @@ modelView is able to provide multiple *independent* markers.
 - [artoolkit5](https://github.com/artoolkit/artoolkit5/)
 - good collection of [marker patterns](https://github.com/artoolkit/artoolkit5/tree/master/doc/patterns)
 
-# Futures
-- DONE port that into a threex. it is more general. nothing is aframe specific 
+# Future
+- DONE port that into a threex. it is more general. nothing is aframe specific
 - webar-artoolkit: webvr api with artoolkit as positional tracking
   - demo with a simple scene at 0,0,0 and the camera handled as the phone
   - may be related to the threex thing

package.json

 {
   "name": "ar.js",
-  "version": "1.7.8",
+  "version": "2.0.0",
   "description": "Efficient Augmented Reality for the Web",
   "main": "",
   "scripts": {
@@ -24,7 +24,9 @@
     "AR",
     "VR",
     "three.js",
-    "augmented reality"
+    "aframe",
+    "augmented reality",
+    "location based"
   ],
   "author": "jerome.etienne@gmail.com",
   "license": "MIT",

three.js/contribs/npm-obsolete/Makefile

-watch: build
-	fswatch -0 ../../build/ar.js scripts/prefix.js scripts/suffix.js | xargs -0 -n 1 -I {} make build
-
-build:
-	cd ../../ && make build
-	cat scripts/prefix.js ../../build/ar.js scripts/suffix.js > build/ar.js
-
-publish:
-	npm publish
-
-.PHONY: build

three.js/contribs/npm-obsolete/README.md

-# experimentation to export ar.js in npm
-
-- very incomplete and obsolete. i dunno enougth about the npm ecosystem to do it
-- there is a very partial index.d.ts for typescript grammars

three.js/contribs/npm-obsolete/examples/manual.html

-<!-- include three.js -->
-<script src='../../../examples/vendor/three.js/build/three.js'></script>
-<!-- include ar.js -->
-<script src='../build/ar.js'></script>

three.js/contribs/npm-obsolete/index.d.ts

-// TODO: continue and replace 'any'-s to exact types.
-
-export class ARClickability {
-  constructor(sourceElement: any);
-
-  computeIntersects: (DOMEvent: any, objects: any) => any;
-  onResize: () => any;
-  update: () => any;
-};
-
-export class ArBaseControls {
-  constructor(object3d: any);
-
-  addEventListener: (type: any, listener: any) => {};
-  hasEventListener: (type: any, listener: any) => {};
-  removeEventListener: (type: any, listener: any) => {};
-  dispatchEvent: (event: any) => {};
-  name: () => {};
-  update: () => {};
-};
-
-export class ArMarkerCloak {
-  constructor(videoTexture: any);
-
-  fragmentShader: any;
-  markerSpaceShaderFunction: any;
-  vertexShader: any;
-}
-
-export class ArMarkerControls {
-  constructor(context: any, object3d: any, parameters: any);
-}
-
-export class ArMarkerHelper {
-  constructor(markerControls: any);
-}
-
-export class ArMultiMakersLearning {
-  constructor(arToolkitContext: any, subMarkersControls: any);
-}
-
-export class ArMultiMarkerControls {
-  constructor(arToolkitContext: any, object3d: any, parameters: any);
-}
-
-export const ArMultiMarkerUtils = {
-}
-
-export class ArSmoothedControls {
-  constructor(object3d: any, parameters: any);
-}
-
-export class ArToolkitContext {
-  constructor(parameters: any);
-}
-
-export class ArToolkitProfile {
-  constructor();
-}
-
-export class ArToolkitSource {
-  constructor(parameters: any);
-}
-
-export class ArVideoInWebgl {
-  constructor(videoTexture: any);
-}
-
-
-
-export as namespace THREEx;
\ No newline at end of file

three.js/contribs/npm-obsolete/package.json

-{
-  "name": "ar.js",
-  "version": "1.0.1",
-  "description": "Augmented Reality for the Web",
-  "main": "build/ar.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jeromeetienne/ar.js.git"
-  },
-  "keywords": [
-    "augmented reality"
-  ],
-  "bugs": {
-    "url": "https://github.com/jeromeetienne/ar.js/issues"
-  },
-  "homepage": "https://github.com/jeromeetienne/ar.js",
-  "dependencies": {
-    "three": "0.86.0"
-  }
-}
\ No newline at end of file

three.js/contribs/npm-obsolete/scripts/prefix.js

-(function(root, factory) {
-	if (typeof define === 'function' && define.amd) {
-		// AMD. Register as an anonymous module.
-		define([], factory);
-	} else if (typeof module === 'object' && module.exports) {
-		// Node. Does not work with strict CommonJS, but
-		// only CommonJS-like environments that support module.exports,
-		// like Node.
-		module.exports = factory();
-	} else {
-		// Browser globals (root is window)
-		root.THREEx = factory();
-	}
-}(this, function() {

three.js/contribs/npm-obsolete/scripts/suffix.js

-  // Your actual module
-  return THREEx;
-}));

three.js/contribs/portableAR.js/Makefile

-watch: build
-	fswatch -0 src/*.js ../../src/*/*.js | xargs -0 -n 1 -I {} make build
-	
-.PHONY: build
-build:
-	(cd ../../ && make build)
-	cat 	\
-		../../examples/vendor/three.js/build/three.js	\
-		../../build/ar.js					\
-		src/portable-ar.js				\
-		> build/portable-ar.js 
-
-minify: build
-	uglifyjs build/portable-ar.js > build/portable-ar.min.js

three.js/contribs/portableAR.js/README.md

-# AR.js repackaged to be easy to port
-
-This is a repackaged AR.js specifically repackaged to be super easy to port.
-
-There is a [babylon.js example](examples/babylon.js/)
-([demo](https://jeromeetienne.github.io/AR.js/three.js/contribs/portableAR.js/examples/babylon.js/basic.html))
-
-# How to use
-
-First create the class
-
-```js
-// create a portableARjs instance
-var portableARjs = new PortableARjs(webglCanvas, {
-	// debugUI : true,
-	// renderThreejs: true
-})
-```
-
-Second update it on every frame
-
-```js
-// on every frame, be sure to update portableARjs
-portableARjs.update()
-
-// now portableARjs.cameraProjectionMatrix is the projection matrix for the camera
-// - it is a matrix4x4 as an Array(16)
-
-// now portableARjs.cameraTransformMatrix is the tranform matrix for the camera
-// - it is a matrix4x4 as an Array(16)
-```

three.js/contribs/portableAR.js/TODO.md

-- fix subMarkerControls visibility in babylon.js
-  - put subMarkerControls visibility into an external file. with 2 handling for three.js and babylon.js
-- still visible when marker out of screen
-- Tango isnt yet supported
-- babylon forum - http://www.html5gamedevs.com/topic/31654-babylonaugmented-reality-in-arjs/?tab=comments&_fromLogin=1
-- can i do a babylon.js playground version ?
-
-# Remaining issue
-- DONE resize to handle
-- DONE camera projection matrix to set
-- FIXED babylon.js object very shacky - while three.js super stable - reason unkonwn
-- DONE put the gatefunctions in a babylon-ar.js 
-- DONE port it to new api ar-session.js

three.js/contribs/portableAR.js/examples/babylon.js/README.md

-This folder is showing how to use AR.js on babylon.js

three.js/contribs/portableAR.js/examples/babylon.js/babylon-boilerplate.html

-
-<!DOCTYPE html>
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	
-	<title>Babylon.js sample code</title>
-	<!-- Babylon.js -->
-	<script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
-	<script src="https://preview.babylonjs.com/cannon.js"></script>
-	<script src="https://preview.babylonjs.com/oimo.js"></script>
-	<script src="https://preview.babylonjs.com/babylon.js"></script>
-	<style>
-	html, body {
-		overflow: hidden;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		padding: 0;
-	}
-	
-	#renderCanvas {
-		width: 100%;
-		height: 100%;
-		touch-action: none;
-	}
-	</style>
-</head>
-<body>
-	<div id="canvasZone">
-		<canvas id="renderCanvas"></canvas>
-	</div>
-	<script>
-	var canvas = document.getElementById("renderCanvas");
-	var engine = new BABYLON.Engine(canvas, true);
-	
-	var createScene = function () {
-		
-		// Set the scene and background color
-		var scene = new BABYLON.Scene(engine);
-		scene.clearColor = new BABYLON.Color3(0,0,0.2);
-		
-		// Create a camera
-		var camera = new BABYLON.ArcRotateCamera("Camera", 1.0,
-		1.0, 12, BABYLON.Vector3.Zero(), scene);
-		
-		// Attach camera to canvas
-		camera.attachControl(canvas, false);
-		
-		// Add a light
-		var light = new BABYLON.HemisphericLight("hemi",
-		new BABYLON.Vector3(0, 1, 0), scene);
-		
-		// Reflect the light off the ground to light the mesh bottom
-		light.groundColor = new BABYLON.Color3(0.5, 0, 0.5);
-		
-		// Create a builtin shape
-		var box = BABYLON.Mesh.CreateBox("mesh", 3, scene);
-		box.showBoundingBox = true;
-		
-		// Define a material
-		var material = new BABYLON.StandardMaterial("std", scene);
-		material.diffuseColor = new BABYLON.Color3(0.5, 0, 0.5);
-		
-		// Apply the material
-		box.material = material;
-		
-		return scene;
-	};
-	
-	
-	var scene = createScene();
-	
-	engine.runRenderLoop(function () {
-		scene.render();
-	});
-	
-	// Resize
-	window.addEventListener("resize", function () {
-		engine.resize();
-	});
-	</script>
-</body>
-</html>

three.js/contribs/portableAR.js/examples/babylon.js/basic.html

-
-<!DOCTYPE html>
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	
-	<title>Babylon.js sample code</title>
-	<!-- include babylon.js -->
-	<script src="vendor/babylon.max.js"></script> 
-
-	<!-- babylon-ar.js -->
-	<script src="../../build/portable-ar.js"></script>
-	<script>ARjs.Context.baseURL = '../../../../'</script> 
-
-	<style>
-	html, body {
-		overflow: hidden;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		padding: 0;
-	}
-	
-	#renderCanvas {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		touch-action: none;
-	}
-	</style>
-</head>
-<body><div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
-	<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - 
-	Support for <a href=''>babylon.js</a>
-	- by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
-	<br/>
-	<a href='../examples/multi-markers/markers-page/' target='_blank'>Markers page</a>
-</div>
-	
-	<div id="canvasZone">
-		<canvas id="renderCanvas"></canvas>
-	</div>
-	<script>
-;(function(){
-	//////////////////////////////////////////////////////////////////////////////
-	//		initialize babylon.js engine
-	//////////////////////////////////////////////////////////////////////////////
-
-	var canvas = document.getElementById("renderCanvas");
-	var engine = new BABYLON.Engine(canvas, true);
-
-	//////////////////////////////////////////////////////////////////////////////
-	//		create babylon.js scene 
-	//////////////////////////////////////////////////////////////////////////////
-		
-		
-	function createScene(){
-		// Set the scene and background color
-		var scene = new BABYLON.Scene(engine);
-		scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)
-		
-		// Create a camera
-		var camera = new BABYLON.ArcRotateCamera("Camera", 1.0, 1.0, 12, BABYLON.Vector3.Zero(), scene);
-		
-		// Attach camera to canvas
-		// camera.attachControl(canvas, false);
-		
-		// Add a light
-		var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
-		
-		// Reflect the light off the ground to light the mesh bottom
-		light.groundColor = new BABYLON.Color3(0.5, 0, 0.5);
-		
-		// Create a builtin shape
-		var box = BABYLON.Mesh.CreateBox("mesh", 1, scene);
-		box.position.y = 0.5
-		box.showBoundingBox = true;
-		
-		// Define a material
-		var material = new BABYLON.StandardMaterial("std", scene);
-		material.diffuseColor = new BABYLON.Color3(0.5, 0, 0.5);
-		material.alpha = 0.3
-
-		// Apply the material
-		box.material = material;		
-
-		return scene
-	}
-
-	var scene = createScene()
-	scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)
-		
-	////////////////////////////////////////////////////////////////////////////////
-	//          	Set up EasyARjs
-	////////////////////////////////////////////////////////////////////////////////
-	// create a portableARjs instance
-	var portableARjs = new PortableARjs(canvas, {
-		debugUI : true,
-		// renderThreejs: true
-	})
-	// run on every iteration of babylon.js engine
-	engine.runRenderLoop(function(){
-
-		// update portableARjs
-		portableARjs.update()
-
-		// update babylon camera with portableARjs cameraProjectionMatrix
-		var babylonCamera = scene.cameras[0]
-		var babylonMatrix = BABYLON.Matrix.FromArray(portableARjs.cameraProjectionMatrix)
-		babylonCamera.freezeProjectionMatrix(babylonMatrix)
-
-		// update babylon camera with portableARjs cameraTransformMatrix
-		var babylonMatrix = BABYLON.Matrix.FromArray(portableARjs.cameraTransformMatrix);
-		babylonCamera._computedViewMatrix = babylonMatrix
-		babylonCamera._computedViewMatrix.invert()
-	})
-
-	//////////////////////////////////////////////////////////////////////////////
-	//		Code Separator
-	//////////////////////////////////////////////////////////////////////////////
-	engine.runRenderLoop(function () {
-		scene.render();
-	});
-	
-	// Resize
-	window.addEventListener("resize", function () {
-		engine.resize();
-	});
-})()
-	</script>
-</body>
-</html>

three.js/contribs/portableAR.js/src/TODO.md

-# easy-ar.js
-- provide cameraProjection matrix
-
-- whenever tracking is happening, notified thru event
-  - tracking-started
-  - tracking-stopped
-
-- https://github.com/jeromeetienne/microevent.js/blob/master/microevent.js#L12-31
-  
-
-```js
-var portableARjs = new PortableARjs()
-
-portableARjs.addEventListener('ready', function(){
-	// portableARjs.cameraProjectionMatrix = array(16)
-})
-
-portableARjs.addEventListener('tracking-updated', function(cameraTransform){
-	
-})
-
-portableARjs.addEventListener('tracking-stopped', function(){
-	
-})
-portableARjs.addEventListener('tracking-started', function(){
-	
-})
-```

three.js/contribs/portableAR.js/src/portable-ar.js

-var PortableARjs = function(canvasEl, options){
-	// handle default options
-	options = options || {}
-	options.debugUI = options.debugUI !== undefined ? options.debugUI : false
-	options.renderThreejs = options.renderThreejs !== undefined ? options.renderThreejs : false
-	this.options = options
-	
-	//////////////////////////////////////////////////////////////////////////////
-	//		create arjsProfile
-	//////////////////////////////////////////////////////////////////////////////
-	
-	var trackingMethod = 'area-artoolkit'
-	var arjsProfile = new ARjs.Profile()
-		.sourceWebcam()
-		.trackingMethod(trackingMethod)
-		.changeMatrixMode('cameraTransformMatrix')
-		.defaultMarker()
-		.checkIfValid()
-
-	//////////////////////////////////////////////////////////////////////////////
-	//		init three.js scene/camera
-	//////////////////////////////////////////////////////////////////////////////
-	// init scene and camera
-	var threejsScene= new THREE.Scene()
-
-	var threejsCamera = ARjs.Utils.createDefaultCamera(trackingMethod)
-	threejsScene.add(threejsCamera)
-
-	//////////////////////////////////////////////////////////////////////////////
-	//		init three.js renderer - never rendered except if options.renderThreejs === true
-	//////////////////////////////////////////////////////////////////////////////
-	// init threejsRenderer
-	// NOTE: can i avoid to have a renderer ?
-	var threejsRenderer	= new THREE.WebGLRenderer({
-		antialias: true,
-		alpha: true
-	})
-	threejsRenderer.setClearColor(new THREE.Color('lightgrey'), 0)
-	threejsRenderer.setSize( 640, 480 )
-	threejsRenderer.domElement.style.position = 'absolute'
-	threejsRenderer.domElement.style.top = '0px'
-	threejsRenderer.domElement.style.left = '0px'
-
-
-	//////////////////////////////////////////////////////////////////////////////
-	//		build ARjs.Session
-	//////////////////////////////////////////////////////////////////////////////
-
-	var arjsSession = new ARjs.Session({
-		scene: threejsScene,
-		renderer: threejsRenderer,
-		camera: threejsCamera,
-		sourceParameters: arjsProfile.sourceParameters,
-		contextParameters: arjsProfile.contextParameters		
-	})
-	
-
-	////////////////////////////////////////////////////////////////////////////////
-	//          Create a ARjs.Anchor
-	////////////////////////////////////////////////////////////////////////////////
-	var arjsAnchor = new ARjs.Anchor(arjsSession, arjsProfile.defaultMarkerParameters)
-
-	this.cameraProjectionMatrix = []
-	this.cameraTransformMatrix = []
-
-	//////////////////////////////////////////////////////////////////////////////
-	//		update function
-	//////////////////////////////////////////////////////////////////////////////
-	this.update = function(){
-		// update arjsSession
-		arjsSession.update()
-
-		// update the arjsAnchor
-		arjsAnchor.update()
-
-		// resize babylon canvas
-		arjsSession.arSource.copyElementSizeTo(canvasEl)
-	
-		// copy camera projectionMatrix and transformMatrix
-		this.cameraProjectionMatrix = threejsCamera.projectionMatrix.toArray()
-		this.cameraTransformMatrix = threejsCamera.matrix.toArray()
-	}
-
-	
-	//////////////////////////////////////////////////////////////////////////////
-	//		add options
-	//////////////////////////////////////////////////////////////////////////////
-
-	// add debugUI
-	if( this.options.debugUI === true ){
-		this._initOptionsDebugUI(arjsSession, arjsAnchor)
-	}
-
-	// add three.js debug
-	if( this.options.renderThreejs === true ){
-		this._initOptionRenderThreejs(treejsRenderer, threejsScene, threejsCamera, arjsAnchor)
-	}
-
-}
-
-
-
-//////////////////////////////////////////////////////////////////////////////
-//		Code Separator
-//////////////////////////////////////////////////////////////////////////////
-
-PortableARjs.prototype._initOptionsDebugUI = function(arjsSession, arjsAnchor){
-	// create arjsDebugUIContainer if needed
-	if( document.querySelector('#arjsDebugUIContainer') === null ){
-		var domElement = document.createElement('div')
-		domElement.id = 'arjsDebugUIContainer'
-		domElement.setAttribute('style', 'position: fixed; bottom: 10px; width:100%; text-align: center; z-index: 1;color: grey;')
-		document.body.appendChild(domElement)
-	}
-
-
-	var sessionDebugUI = new ARjs.SessionDebugUI(arjsSession)
-	document.querySelector('#arjsDebugUIContainer').appendChild(sessionDebugUI.domElement)
-
-	var anchorDebugUI = new ARjs.AnchorDebugUI(arjsAnchor)
-	document.querySelector('#arjsDebugUIContainer').appendChild(anchorDebugUI.domElement)		
-}
-
-//////////////////////////////////////////////////////////////////////////////
-//		Code Separator
-//////////////////////////////////////////////////////////////////////////////
-
-// function initRenderThreejs
-PortableARjs.prototype._initOptionRenderThreejs = function(renderer, scene, camera, arjsAnchor){
-	// array of functions for the rendering loop
-	var onRenderFcts= [];
-
-	var arWorldRoot = arjsAnchor.object3d
-
-	//////////////////////////////////////////////////////////////////////////////////
-	//		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.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
-	})
-	
-	//////////////////////////////////////////////////////////////////////////////////
-	//		render the whole thing on the page
-	//////////////////////////////////////////////////////////////////////////////////
-	
-	if( true ){
-		document.body.appendChild( renderer.domElement )
-		onRenderFcts.push(function(){
-			renderer.render( scene, camera )
-		})		
-	}
-
-	// 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)
-		})
-	})	
-}

three.js/src/threex/threex-artoolkitcontext.js

@@ -76,7 +76,7 @@ Object.assign( ARjs.Context.prototype, THREE.EventDispatcher.prototype );
 // ARjs.Context.baseURL = '../'
 // default to github page
 ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/'
-ARjs.Context.REVISION = '1.7.8';
+ARjs.Context.REVISION = '2.0.0';
 
 /**
  * Create a default camera for this trackingBackend