merge between master and branch modules

 module.exports = function (grunt) {
 module.exports = function (grunt) {
     "use strict";
     "use strict";
     
     
+    let shim = function(obj) { return `\nexport default ${obj};\n`; };
+
 // Project configuration.
 // Project configuration.
     grunt.initConfig({
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
         pkg: grunt.file.readJSON('package.json'),
+        copy: {
+            dist: {
+                files:[
+                    {src: 'src/arcs_browser.js', dest: 'build/arcs_browser.js'},
+                    {src: 'src/arcs_node.mjs', dest: 'build/arcs_node.mjs'}
+                ]
+                
+            }            
+        },
         jsdoc: {
         jsdoc: {
             dist: {
             dist: {
                 src: ['src/*.js', 'docs/Readme.md'], //, 'components/*.js'],
                 src: ['src/*.js', 'docs/Readme.md'], //, 'components/*.js'],
@@ -43,16 +54,13 @@ module.exports = function (grunt) {
                 }
                 }
             }
             }
         },
         },
-        uglify: {
+        terser: {
             build: {
             build: {
-                options: {
-                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
-                },            
                 files: { 
                 files: { 
                     'build/arcs.min.js': [
                     'build/arcs.min.js': [
                         'build/arcs.js'
                         'build/arcs.js'
                     ],
                     ],
-                    'build/arcs_browser.js': [
+                    'build/arcs_browser.min.js': [
                         'src/arcs_browser.js'
                         'src/arcs_browser.js'
                     ],
                     ],
                     'build/arcseditor.min.js': [
                     'build/arcseditor.min.js': [
@@ -74,6 +82,37 @@ module.exports = function (grunt) {
             }
             }
             
             
         },
         },
+        file_append: {
+            default_options: {
+                files: [
+                    {
+                        append: shim('AR'),
+                        prepend: `import CV from '../cv/index.js';\n`,
+                        input: './deps/aruco/index.js'
+                    },
+                    {
+                        append: shim('CV'), 
+                        input: './deps/cv/index.js'
+                    }
+                ]
+            }            
+        },
+        'string-replace': {
+            dist: {
+                files: {
+                    'deps/objloader/objloader.js': 'deps/objloader/index.js',
+                    'deps/mtlloader/mtlloader.js': 'deps/mtlloader/index.js',
+                    'deps/ddsloader/ddsloader.js': 'deps/ddsloader/index.js'
+                },
+                options: {
+                    replacements:[{                      
+                        pattern: '../../../build/three.module.js',
+                        replacement: '../three.js/index.js'
+                    }]                    
+                }                
+                
+            }                        
+        },        
 	    concat: {
 	    concat: {
             dist: {
             dist: {
                 src: [
                 src: [
@@ -88,7 +127,6 @@ module.exports = function (grunt) {
                         'src/transitionnetwork.js',
                         'src/transitionnetwork.js',
                         'src/statemachine.js',
                         'src/statemachine.js',
                         'src/application.js',
                         'src/application.js',
-                        'src/arcs_module.js',
                         'src/exports.js'
                         'src/exports.js'
                     ],
                     ],
                 dest: 'build/arcs.js'
                 dest: 'build/arcs.js'
@@ -108,19 +146,22 @@ module.exports = function (grunt) {
 
 
 	    }
 	    }
 	
 	
-
     });
     });
 
 
-// Load the plugin that provides the "uglify" task.
-    grunt.loadNpmTasks('grunt-contrib-uglify');
+    // Load the plugin that provides the "uglify" task.
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-jsdoc');
     grunt.loadNpmTasks('grunt-jsdoc');
     grunt.loadNpmTasks('grunt-jslint');
     grunt.loadNpmTasks('grunt-jslint');
+    grunt.loadNpmTasks('grunt-terser');
     grunt.loadNpmTasks('grunt-bower-task');
     grunt.loadNpmTasks('grunt-bower-task');
+    grunt.loadNpmTasks('grunt-file-append');
+    grunt.loadNpmTasks('grunt-string-replace');
 
 
-
-// Default task(s).
-    grunt.registerTask('default', ['concat','uglify']);
+    // Default task(s).
+    grunt.registerTask('default', ['concat','copy','terser']);
     grunt.registerTask('lint', ['jslint']);
     grunt.registerTask('lint', ['jslint']);
     grunt.registerTask('doc', ['jsdoc']);
     grunt.registerTask('doc', ['jsdoc']);
+    grunt.registerTask('install-deps', ['bower', 'file_append', 'string-replace']);
+    
 };
 };

 {
 {
     "name": "ARCS",
     "name": "ARCS",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "Augmented Reality Component System in web browser and node environment",
     "description": "Augmented Reality Component System in web browser and node environment",
     "main": "build/arcs.js",
     "main": "build/arcs.js",
     "keywords": [
     "keywords": [
@@ -10,12 +10,11 @@
     "author": "Jean-Yves Didier",
     "author": "Jean-Yves Didier",
     "license": "GPL",
     "license": "GPL",
     "dependencies": {
     "dependencies": {
-        "requirejs": "*",
         "tracking.js": "*",
         "tracking.js": "*",
-        "three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r68/build/three.min.js",
-        "objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJLoader.js",
-        "mtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/MTLLoader.js",
-        "objmtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJMTLLoader.js",
+        "three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r116/build/three.module.js",
+        "objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/OBJLoader.js",
+        "mtlloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/MTLLoader.js",
+        "ddsloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/DDSLoader.js",
         "aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js",
         "aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js",
         "cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js",
         "cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js",
         "codemirror" : "*",
         "codemirror" : "*",

+{ "type": "module"}

-arcs_module(
-    function (ARCS) {
-        var Animator;
         
         
-        /**
+import ARCS from '../build/arcs.js';        
+        
+var Animator;
+
+/**
     * @class Animator
     * @class Animator
     * @classdesc A component that request new frames for animation.
     * @classdesc A component that request new frames for animation.
     * This component is useful when you want to create animations in the 
     * This component is useful when you want to create animations in the 
     * context of a web browser.
     * context of a web browser.
     */        
     */        
-        Animator = ARCS.Component.create( 
+Animator = ARCS.Component.create( 
     function() {
     function() {
         var paused = false;
         var paused = false;
         var self=this;
         var self=this;
@@ -49,8 +50,6 @@ arcs_module(
     },
     },
     ['start','stop'],
     ['start','stop'],
     'onAnimationFrame'
     'onAnimationFrame'
-        );
-
-        return {Animator: Animator};
-    }
 );
 );
+
+export default {Animator: Animator};

-arcs_module(
-    function (ARCS, CV, AR) {
-        var ARUCODetector;
+import ARCS from '../build/arcs.js';
+import CV from '../deps/cv/index.js';
+import AR from '../deps/aruco/index.js';
 
 
-        /**
+var ARUCODetector;
+        
+/**
     * @class ARUCODetector
     * @class ARUCODetector
     * @classdesc Component that detects ARUCO markers in images
     * @classdesc Component that detects ARUCO markers in images
     * This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library.
     * This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library.
     */        
     */        
-        ARUCODetector = ARCS.Component.create(
+ARUCODetector = ARCS.Component.create(
     function() {
     function() {
         var detector ;
         var detector ;
 
 
@@ -48,12 +50,6 @@ arcs_module(
     },
     },
     'detect',
     'detect',
     ['onMarkers']
     ['onMarkers']
-        );
-        
-        return {ARUCODetector: ARUCODetector};
-    },
-    [
-        {name:"deps/cv/index", exports:"CV"},
-        {name:"deps/aruco/index",exports:"AR"}
-    ]
 );
 );
+
+export default {ARUCODetector: ARUCODetector};

-arcs_module( 
-    function(ARCS, three) {
-        var ARViewer;
         
         
-        /** 
+import ARCS from '../build/arcs.js';
+import * as THREE from '../deps/three.js/index.js';
+import FrustumCamera from '../deps/three.js/frustumcamera.js';
+        
+var ARViewer;
+
+/** 
     * @class ARViewer 
     * @class ARViewer 
     * @classdesc Simple compositing viewer for augmented reality
     * @classdesc Simple compositing viewer for augmented reality
     */        
     */        
-        ARViewer = ARCS.Component.create(
+ARViewer = ARCS.Component.create(
     /** @lends ARViewer.prototype */
     /** @lends ARViewer.prototype */
     function () {
     function () {
         var container, sourceAspectRatio, sourceHeight;
         var container, sourceAspectRatio, sourceHeight;
@@ -131,6 +134,7 @@ arcs_module(
                         // put here the code to set orientation and position of object camera3d
                         // put here the code to set orientation and position of object camera3d
                         // see also documentation of Object3D (API Three.js)
                         // see also documentation of Object3D (API Three.js)
                         // since a camera is an Object3D
                         // since a camera is an Object3D
+                        console.log("viewing");
 
 
                     var rotation = markers[i].pose.rotation;
                     var rotation = markers[i].pose.rotation;
                     var translation = markers[i].pose.position;
                     var translation = markers[i].pose.position;
@@ -281,7 +285,9 @@ arcs_module(
             var box = new THREE.Box3();                    
             var box = new THREE.Box3();                    
             box.setFromObject(scene3d);
             box.setFromObject(scene3d);
             var center = box.center();
             var center = box.center();
-                    var radius = box.getBoundingSphere().radius;
+            var sphere = new THREE.Sphere();
+            box.getBoundingSphere(sphere);
+            var radius = sphere.radius;
             
             
             camera3d.position.x = center.x ;
             camera3d.position.x = center.x ;
             camera3d.position.y = center.y ;
             camera3d.position.y = center.y ;
@@ -302,6 +308,10 @@ arcs_module(
         }
         }
     
     
     },
     },
+<<<<<<< HEAD
+    [ 'deps/three.js/index','deps/three.js/frustumcamera']
+);
+=======
     /** @lends ARViewer.slots */
     /** @lends ARViewer.slots */
     [
     [
         'setWidgets','setFocal','viewAll','setSize','addScene',
         'setWidgets','setFocal','viewAll','setSize','addScene',
@@ -310,8 +320,8 @@ arcs_module(
         
         
     ],
     ],
     []
     []
-        );
-        return {ARViewer: ARViewer}; 
-    },
-    [ 'deps/three.js/index','deps/three.js/frustumcamera']
 );
 );
+
+export default {ARViewer: ARViewer}; 
+
+>>>>>>> modules

 /* ugly hack in order to display data in web page instead of console */
 /* ugly hack in order to display data in web page instead of console */
+import ARCS from '../build/arcs.js';
 
 
-
-arcs_module(
-    function(ARCS) {
-        var Console;
-        /**
+var Console;
+/**
     * @class Console
     * @class Console
     * @classdesc Redirects console messages to a given HTML element in the page.
     * @classdesc Redirects console messages to a given HTML element in the page.
     * @param id {string} id of the HTML element in which console messages will be added.
     * @param id {string} id of the HTML element in which console messages will be added.
     */
     */
-        Console = ARCS.Component.create(
+Console = ARCS.Component.create(
     function (id) {
     function (id) {
         if (id === undefined) {
         if (id === undefined) {
             return ;
             return ;
@@ -26,7 +24,7 @@ arcs_module(
                     s.style.color=color;
                     s.style.color=color;
                     var elapsed = (new Date().getTime() - this.timeRef);
                     var elapsed = (new Date().getTime() - this.timeRef);
 
 
-                            s.innerHTML = '<span class="marker">' + (elapsed/1000).toFixed(3) + '</span>' + Array.prototype.join.call(args, ' '); 
+                    s.innerHTML = '<span class="marker">' + (elapsed/1000).toFixed(3) + '</span> ' + Array.prototype.join.call(args, ' '); 
                     output.appendChild(s);
                     output.appendChild(s);
                     output.appendChild(document.createElement("br"));
                     output.appendChild(document.createElement("br"));
                 },
                 },
@@ -42,8 +40,7 @@ arcs_module(
             };
             };
         }
         }
     }
     }
-        );
-        return { Console: Console};
-    }
-
 );
 );
+
+
+export default { Console: Console};

@@ -5,16 +5,14 @@
  * @file
  * @file
  */
  */
 
 
-arcs_module(function (ARCS) {
-    var Loop, DisplayInt, Sum;
-    /** @exports loop */
-    //console.log("loop: ", ARCS);
-    /**
+import ARCS from '../build/arcs.js';
+
+/**
     * @class Loop
     * @class Loop
     * @classdesc loop component creation using a compact style.
     * @classdesc loop component creation using a compact style.
     * This component iterates for a given number of times
     * This component iterates for a given number of times
     */
     */
-    Loop = ARCS.Component.create(
+var Loop = ARCS.Component.create(
     function () {
     function () {
     /**
     /**
         * Sets the number of times the component should iterate.
         * Sets the number of times the component should iterate.
@@ -49,17 +47,17 @@ arcs_module(function (ARCS) {
     },
     },
     "setIterations", //slotList 
     "setIterations", //slotList 
     ["endLoop", "newIteration"] // signalList
     ["endLoop", "newIteration"] // signalList
-    );
+);
 
 
 
 
-    /** 
+/** 
     * @class DisplayInt 
     * @class DisplayInt 
     * @classdesc displayInt component creation using a variation with defined slots
     * @classdesc displayInt component creation using a variation with defined slots
     * in the constructor (a slot is a function). DisplayInt will display an integer
     * in the constructor (a slot is a function). DisplayInt will display an integer
     * received on its display slot.
     * received on its display slot.
     */
     */
-    DisplayInt = function () {
-    /**
+var DisplayInt = function () {
+/**
     * @param n {numeric} number to display
     * @param n {numeric} number to display
     * @function DisplayInt#display
     * @function DisplayInt#display
     * @slot
     * @slot
@@ -67,40 +65,39 @@ arcs_module(function (ARCS) {
     this.display = function (n) {
     this.display = function (n) {
         console.log("  DisplayInt : " + n);
         console.log("  DisplayInt : " + n);
     };
     };
-    };
+};
 
 
-    ARCS.Component.create(DisplayInt);
-    DisplayInt.slot("display");
+ARCS.Component.create(DisplayInt);
+DisplayInt.slot("display");
 
 
 
 
-    /**
+/**
     * @class Sum
     * @class Sum
     * @classdec Sum is a component summing integers passed to its slot "add" 
     * @classdec Sum is a component summing integers passed to its slot "add" 
     * and the result is sent back by signal "sum".
     * and the result is sent back by signal "sum".
     * This component is declared in two different phases: declaration of the 
     * This component is declared in two different phases: declaration of the 
     * constructor and declaration of the slot "add".
     * constructor and declaration of the slot "add".
     */
     */
-    Sum = function () {
+var Sum = function () {
     this.total = 0;
     this.total = 0;
-    };
+};
 
 
-    ARCS.Component.create(Sum);
-    /**
+ARCS.Component.create(Sum);
+/**
     * This slot adds its parameter to its internal sum and send it back by using 
     * This slot adds its parameter to its internal sum and send it back by using 
     * the signal "sum".
     * the signal "sum".
     * @param n {integer} add n to the internal sum of the component.
     * @param n {integer} add n to the internal sum of the component.
     * @function Sum#add
     * @function Sum#add
     * @slot
     * @slot
     */
     */
-    Sum.slot("add", function (n) {
+Sum.slot("add", function (n) {
     this.total = this.total + n;
     this.total = this.total + n;
     this.emit("sum", this.total); //console.log("  Total : " + this.total);
     this.emit("sum", this.total); //console.log("  Total : " + this.total);
-    });
-    Sum.signal("sum");
+});
+Sum.signal("sum");
 
 
-    // the anonymous function must return the components in one object:
-    // keys are factory names, value are actual constructors modified by 
-    // ARCS.Component.create
+// the anonymous function must return the components in one object:
+// keys are factory names, value are actual constructors modified by 
+// ARCS.Component.create
 
 
-    return {Loop: Loop, DisplayInt: DisplayInt, Sum: Sum};
-});
+export default {Loop: Loop, DisplayInt: DisplayInt, Sum: Sum};

+import ARCS from '../build/arcs.js';
+import POS from '../deps/pose/square_pose.js';
 
 
+var MarkerLocator;
 
 
-arcs_module(
-    function (ARCS, POS) {
-        var MarkerLocator;
 
 
-        
-        MarkerLocator = ARCS.Component.create(
+MarkerLocator = ARCS.Component.create(
     function () { 
     function () { 
         var square_pose = new POS.SquareFiducial();
         var square_pose = new POS.SquareFiducial();
         
         
@@ -44,10 +43,7 @@ arcs_module(
     },
     },
     ['locateMarkers','setFocalLength','setModelSize','setImageSource'],
     ['locateMarkers','setFocalLength','setModelSize','setImageSource'],
     ['onLocatedMarkers']
     ['onLocatedMarkers']
-        );
+);
 
 
 
 
-        return { MarkerLocator: MarkerLocator };
-    },
-    [ {name: "deps/pose/square_pose", exports: "POS"} ]
-);
\ No newline at end of file
+export default { MarkerLocator: MarkerLocator };

-arcs_module(
-    function(ARCS,_three) {
-        var ObjectTransform ;
+import ARCS from '../build/arcs.js';
+import * as THREE from '../deps/three.js/index.js';
 
 
-        /** 
+var ObjectTransform ;
+
+/** 
     * @class ObjectTransform
     * @class ObjectTransform
     * @classdesc Apply transformations to objects
     * @classdesc Apply transformations to objects
     */
     */
-        ObjectTransform = ARCS.Component.create(
+ObjectTransform = ARCS.Component.create(
     function() {
     function() {
         var objRoot;
         var objRoot;
         var refMat;
         var refMat;
@@ -115,11 +116,6 @@ arcs_module(
     },
     },
     ['setObject', 'setTransform', 'setId'],
     ['setObject', 'setTransform', 'setId'],
     []
     []
-        );
-
-
-
-        return { ObjectTransform : ObjectTransform };
-    },
-    [ "deps/three.js/index" ]
 );
 );
+
+export default { ObjectTransform : ObjectTransform };

-arcs_module(
-    function(ARCS, three, _objloader, _mtlloader, _objmtlloader) {
-        var OBJLoader;
+import ARCS from '../build/arcs.js';
+import * as THREE from '../deps/three.js/index.js';
+import { OBJLoader } from '../deps/objloader/objloader.js';
+import { MTLLoader } from '../deps/mtlloader/mtlloader.js';
+//import { DDSLoader } from '../deps/ddsloader/ddsloader.js';
 
 
 
 
-        OBJLoader = ARCS.Component.create(
+var internalOBJLoader;
+
+
+internalOBJLoader = ARCS.Component.create(
     function() {
     function() {
         var self = this;
         var self = this;
         var innerObject; 
         var innerObject; 
@@ -34,23 +39,31 @@ arcs_module(
             // we may use a string tokenizer to determine file types 
             // we may use a string tokenizer to determine file types 
             // then all would be in the same loading slot.
             // then all would be in the same loading slot.
             
             
+            //console.log("loading objects", objURL, mtlURL);
+            var manager = new THREE.LoadingManager();
+            //manager.addHandler( /\.dds$/i, new DDSLoader() );
             
             
-                    console.log("loading objects", objURL, mtlURL);
             if (mtlURL === undefined) {
             if (mtlURL === undefined) {
                 //console.log("using loader");
                 //console.log("using loader");
-                        loader = new THREE.OBJLoader();
+                loader = new OBJLoader(manager);
                 loader.load(objURL, onLoadWrapper, progress, error);                        
                 loader.load(objURL, onLoadWrapper, progress, error);                        
             } else {
             } else {
                 //console.log("using mtl loader");
                 //console.log("using mtl loader");
-                        loader = new THREE.OBJMTLLoader();
-                        loader.load(objURL, mtlURL, onLoadWrapper, progress, error);                        
+                loader = new MTLLoader(manager);
+                loader.load(mtlURL, function(materials) {
+                        materials.preload();
+                        console.log(materials);
+                        new OBJLoader(manager)
+                            .setMaterials(materials)
+                            .load(objURL, onLoadWrapper, progress, error);                        
+                    }, progress, error);                        
             }
             }
         };
         };
         
         
         this.loadJSON = function(jsonURL) {
         this.loadJSON = function(jsonURL) {
             var loader;
             var loader;
             //console.log("loading objects", jsonURL);
             //console.log("loading objects", jsonURL);
-                    loader = new THREE.JSONLoader();
+            loader = new THREE.ObjectLoader();
             loader.load(jsonURL, onLoadJSON); //, progress, error);                         
             loader.load(jsonURL, onLoadJSON); //, progress, error);                         
             
             
             
             
@@ -93,9 +106,6 @@ arcs_module(
     },
     },
     ["load","unitize", "resize"],
     ["load","unitize", "resize"],
     ["onLoad"]
     ["onLoad"]
-        );
-        
-        return { OBJLoader: OBJLoader}; 
-    },
-    [ 'deps/three.js/index', 'deps/objloader/index', 'deps/mtlloader/index','deps/objmtlloader/index' ]
 );
 );
+        
+export default { OBJLoader: internalOBJLoader}; 

+{ "type": "module"}

-arcs_module(function(ARCS) {
-    var TokenSender;
+import ARCS from '../build/arcs.js';        
 
 
-    TokenSender = ARCS.Component.create(
+var TokenSender;
+
+TokenSender = ARCS.Component.create(
     function( arr ) {
     function( arr ) {
         var i;
         var i;
         var self = this;
         var self = this;
@@ -20,7 +21,6 @@ arcs_module(function(ARCS) {
     }, 
     }, 
     [],
     [],
     ['sendToken']
     ['sendToken']
-    );
+);
 
 
-    return { TokenSender : TokenSender };
-});
\ No newline at end of file
+export default { TokenSender : TokenSender };

-arcs_module(function(ARCS) {
-    var LiveSource, VideoSource;
-    LiveSource = ARCS.Component.create(
+import ARCS from '../build/arcs.js';    
+        
+var LiveSource, VideoSource;
+LiveSource = ARCS.Component.create(
     function () {
     function () {
         var context, canvas, video, imageData;
         var context, canvas, video, imageData;
         var defaultWidth = 320;
         var defaultWidth = 320;
@@ -8,6 +9,7 @@ arcs_module(function(ARCS) {
         var self = this;
         var self = this;
         
         
         var handleMediaStream = function(stream) {
         var handleMediaStream = function(stream) {
+            console.log(video,stream);
             if (window.webkitURL) {
             if (window.webkitURL) {
                 video.src = window.webkitURL.createObjectURL(stream);
                 video.src = window.webkitURL.createObjectURL(stream);
             } else if (video.mozSrcObject !== undefined) {
             } else if (video.mozSrcObject !== undefined) {
@@ -17,8 +19,8 @@ arcs_module(function(ARCS) {
             } else {
             } else {
                 video.src = stream;
                 video.src = stream;
             }                
             }                
-                video.videoWidth=defaultWidth;                
-                video.videoHeight=defaultHeight;
+            /*video.videoWidth=defaultWidth;                
+            video.videoHeight=defaultHeight;*/
             self.emit("onReady");
             self.emit("onReady");
         };
         };
         
         
@@ -27,18 +29,13 @@ arcs_module(function(ARCS) {
         };
         };
         
         
         var setUserMedia = function() {
         var setUserMedia = function() {
-                console.log("video test");
             if (navigator.mediaDevices !== undefined) {
             if (navigator.mediaDevices !== undefined) {
-                    navigator.mediaDevices.getUserMedia({video:{facingMode : "environment"}})
+                navigator.mediaDevices.getUserMedia({video: {facingMode: "environment", width: defaultWidth, height: defaultHeight}})
                     .then(handleMediaStream)
                     .then(handleMediaStream)
                     .catch(errorMediaStream);
                     .catch(errorMediaStream);
             } else {                    
             } else {                    
                 var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
                 var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
                 if (getUserMedia !== undefined) {
                 if (getUserMedia !== undefined) {
-											console.log(getUserMedia(), handleMediaStream, errorMediaStream); 
-                        /*getUserMedia({video:true}, handleMediaStream,
-                            errorMediaStream
-                        );*/
                     getUserMedia({video:true}).then(handleMediaStream);
                     getUserMedia({video:true}).then(handleMediaStream);
                 }
                 }
             }
             }
@@ -75,10 +72,10 @@ arcs_module(function(ARCS) {
     },
     },
     ['grabFrame','setWidgets'],
     ['grabFrame','setWidgets'],
     ['onReady','onImage']
     ['onReady','onImage']
-    );
+);
 
 
 
 
-    VideoSource = ARCS.Component.create(
+VideoSource = ARCS.Component.create(
     function() {
     function() {
         var context, canvas, video, imageData;    
         var context, canvas, video, imageData;    
         var defaultWidth=320;
         var defaultWidth=320;
@@ -124,8 +121,6 @@ arcs_module(function(ARCS) {
     },
     },
     ['grabFrame', 'setWidgets'],
     ['grabFrame', 'setWidgets'],
     ['onReady', 'onImage']        
     ['onReady', 'onImage']        
-    );
-    
+);
         
         
-    return {LiveSource: LiveSource, VideoSource: VideoSource};
-});
+export default {LiveSource: LiveSource, VideoSource: VideoSource};

-arcs_module(
-    function (ARCS) {
-        var WindowEvent;
+import ARCS from '../build/arcs.js';        
 
 
-        WindowEvent = ARCS.Component.create( 
+let WindowEvent;
+
+WindowEvent = ARCS.Component.create( 
     function () {
     function () {
-                var self= this;
+        let self= this;
                         
                         
         window.onresize = function() { 
         window.onresize = function() { 
             self.emit("onResize",window.innerWidth, window.innerHeight);
             self.emit("onResize",window.innerWidth, window.innerHeight);
@@ -12,8 +12,7 @@ arcs_module(
     },
     },
     [],
     [],
     ["onResize"]
     ["onResize"]
-        );
-        
-        return { WindowEvent: WindowEvent};
-    }
 );
 );
+        
+
+export default { WindowEvent: WindowEvent};

@@ -493,3 +493,5 @@ Mat3.prototype.row = function(index){
   
   
   return new Vec3( m[index][0], m[index][1], m[index][2] );
   return new Vec3( m[index][0], m[index][1], m[index][2] );
 };
 };
+
+export default POS;

@@ -529,3 +529,5 @@ POS.Pose = function(error1, rotation1, translation1, error2, rotation2, translat
   this.alternativeRotation = rotation2;
   this.alternativeRotation = rotation2;
   this.alternativeTranslation = translation2;
   this.alternativeTranslation = translation2;
 };
 };
+
+export default POS;

@@ -130,3 +130,5 @@ POS.SimplePose = function(pos, rot) {
     this.position = pos;
     this.position = pos;
     this.rotation = rot;
     this.rotation = rot;
 };
 };
+
+export default POS;

@@ -281,3 +281,5 @@ SVD.pythag = function(a, b){
 SVD.sign = function(a, b){
 SVD.sign = function(a, b){
   return b >= 0.0? Math.abs(a): -Math.abs(a);
   return b >= 0.0? Math.abs(a): -Math.abs(a);
 };
 };
+
+export default SVD;

-arcs_module(function(ARCS) {
-THREE.FrustumCamera = function (  left, right, bottom, top, near, far ) {
+import * as THREE from './index.js';
+
+let FrustumCamera = function (  left, right, bottom, top, near, far ) {
 
 
     THREE.Camera.call( this );
     THREE.Camera.call( this );
 
 
@@ -17,22 +18,22 @@ THREE.FrustumCamera = function (  left, right, bottom, top, near, far ) {
 
 
 };
 };
 
 
-THREE.FrustumCamera.prototype = Object.create( THREE.Camera.prototype );
-THREE.FrustumCamera.prototype.constructor = THREE.FrustumCamera;
+FrustumCamera.prototype = Object.create( THREE.Camera.prototype );
+FrustumCamera.prototype.constructor = FrustumCamera;
 
 
 
 
 
 
 
 
-THREE.FrustumCamera.prototype.updateProjectionMatrix = function () {
+FrustumCamera.prototype.updateProjectionMatrix = function () {
 
 
     this.projectionMatrix.makeFrustum(
     this.projectionMatrix.makeFrustum(
         this.left, this.right, this.bottom, this.top, this.near, this.far
         this.left, this.right, this.bottom, this.top, this.near, this.far
     );
     );
 };
 };
 
 
-THREE.FrustumCamera.prototype.clone = function () {
+FrustumCamera.prototype.clone = function () {
 
 
-    var camera = new THREE.FrustumCamera();
+    var camera = new FrustumCamera();
 
 
     THREE.Camera.prototype.clone.call( this, camera );
     THREE.Camera.prototype.clone.call( this, camera );
 
 
@@ -51,6 +52,4 @@ THREE.FrustumCamera.prototype.clone = function () {
 
 
 };
 };
 
 
-return {};
-}, ['deps/three.js/index']
-);	
+export default FrustumCamera;

@@ -11,14 +11,17 @@
     "Reality"
     "Reality"
   ],
   ],
   "author": "Jean-Yves Didier",
   "author": "Jean-Yves Didier",
-  "license": "GPL",
+  "license": "GPL-3.0-or-later",
   "devDependencies": {
   "devDependencies": {
     "bower": ">=1.3.9",
     "bower": ">=1.3.9",
     "grunt": ">=0.4.5",
     "grunt": ">=0.4.5",
     "grunt-jslint": ">=1.1.12",
     "grunt-jslint": ">=1.1.12",
-    "grunt-contrib-uglify": ">=0.5.1",
+    "grunt-terser": "*",
     "grunt-jsdoc": ">=0.5.6",
     "grunt-jsdoc": ">=0.5.6",
     "grunt-bower-task": ">=0.4.0",
     "grunt-bower-task": ">=0.4.0",
-    "grunt-contrib-concat": ">=0.5.0"
+    "grunt-contrib-concat": ">=0.5.0",
+    "grunt-contrib-copy": ">=1.0.0",
+    "grunt-file-append": ">=0.0.7",
+    "grunt-string-replace": ">=1.3.1"
   }
   }
 }
 }

@@ -199,7 +199,7 @@ ARCS.Application = function () {
      * Starts the application
      * Starts the application
      */
      */
     this.start = function () {
     this.start = function () {
-        console.log("[ARCS] Starting application");
+        console.log("[ARCS] Starting application...");
         context.instanciate().then(preProcess);
         context.instanciate().then(preProcess);
     };
     };
 };
 };

@@ -22,7 +22,6 @@ var ARCS =  ARCS || {};
  * Helper functions to determine environment
  * Helper functions to determine environment
  * ***************************************************************************/
  * ***************************************************************************/
 
 
-
 /**
 /**
  * @return {boolean} true if ARCS is run in a node.js environment
  * @return {boolean} true if ARCS is run in a node.js environment
  */
  */
@@ -31,10 +30,3 @@ ARCS.isInNode = function () {
 };
 };
 
 
 
 
-/**
- * @return {boolean} true if ARCS is run with require.js
- */
-ARCS.isInRequire = function () {
-    return (typeof define === 'function' && define.amd);
-};
-

@@ -6,43 +6,31 @@ import ARCS from './arcs.js';
  * It relies on require.js to get the job done.
  * It relies on require.js to get the job done.
  * @file
  * @file
  */
  */
+"use strict";
+
+// basically, here we start by importing the module ARCS
+import ARCS from './arcs.js';
 
 
-console.log("Bootstrapping ARCS...");
+
+console.log("[ARCS] Bootstrapping...");
 
 
 var baseUrl, appDescription, requireMarkup, xhr;
 var baseUrl, appDescription, requireMarkup, xhr;
 
 
-requireMarkup = document.querySelector('[data-main]');
+requireMarkup = document.querySelector('[data-arcsapp]');
 if (requireMarkup !== undefined) {
 if (requireMarkup !== undefined) {
         baseUrl = requireMarkup.dataset.baseUrl ;
         baseUrl = requireMarkup.dataset.baseUrl ;
         appDescription = requireMarkup.dataset.arcsapp || "arcsapp.json";    
         appDescription = requireMarkup.dataset.arcsapp || "arcsapp.json";    
 }
 }
 
 
-// do not move these lines: xhr.open must be performed before require
-// changes paths.
-xhr = new XMLHttpRequest();
-xhr.open('GET',appDescription,true);
-xhr.overrideMimeType("application/json");
-xhr.onerror = function (e) { 
-    console.error("[ARCS] Failed to get app description (",appDescription,"):",e.target.status,e.message); 
-};
-
-xhr.onreadystatechange = function() {
-    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
-        try {
-            console.log("ARCS application description loaded");
-            var applicationObject = JSON.parse(xhr.responseText);
-            if (baseUrl) {
-                // TODO change this line below 
-                require.config( { baseUrl: baseUrl });
-            }
-            var aap = new ARCS.Application();
-            aap.import(applicationObject);
-            console.log("Starting application...");
-            aap.start();
-        } catch (e) {
-            console.error("[ARCS] Error while parsing JSON:",e); 
-        }
-    }
-};
-    
-xhr.send();
+
+(async function toto() {
+var description = await(fetch(appDescription));
+var applicationObject = await(description.json());
+
+
+console.log("[ARCS] Application description loaded");
+
+var aap = new ARCS.Application();
+aap.import(applicationObject);
+aap.start();
+})();

-/**
- * definition of the main module function: 
- * it takes an anonymous function as a parameter
- * the anonymous function has one parameter: the object encompassing 
- * ARCS definitions (in order to able to use ARCS.Component.create, ...)
- * @param moduleDefinition {function} main function of the module. 
- * It should return a list of components
- * @param deps {mixed[]} dependencies
- */
-
-// TODO remove dependency handling
-
-
-// reimplementation using native promises
-arcs_module = function(moduleDefinition) {
-    var storeComponents, i;
-    
-    // TODO verify if this is still needed
-    if (typeof module !== 'undefined') {
-        if (module.parent.exports) {
-            ARCS = module.exports; 
-        }
-    }
-    
-    
-    storeComponents = function () {
-        var mdef, p;
-        // we should insert ARCS at the beginning of deps !
-        
-        mdef = (typeof moduleDefinition === 'function') ?
-                moduleDefinition.apply(this) : moduleDefinition;
-
-        if (mdef === undefined) {
-            throw new Error("[ARCS] Your module is undefined. Did you forget to export components?\nCode of module follows:\n" +moduleDefinition);
-        }
-
-        for (p in mdef) {
-            if (mdef.hasOwnProperty(p) && ARCS.Context.currentContext != null) {
-                ARCS.Context.currentContext.setFactory(p,mdef[p]); //.setFactory(ARCS.Application.currentApplication, p, mdef[p]);
-            }
-        }
-        
-        return Promise.resolve();
-    };
-    // until now, it is the very same code.
-    
-    
-        ARCS.Context.currentContext.addLibraryPromise(
-            storeComponents,
-            function(reason) { console.error("[ARCS] Failed to load dependency ", reason ); })
-        
-        );
-    
-}

-#!/usr/bin/env node
-
-var ARCS = require('./arcs.js');
-var application = require('./appli.json');
-var aap = new ARCS.Application();
-aap.import(application);
-aap.start();

+#!/usr/bin/env -S node --experimental-modules --experimental-json-modules
+
+import ARCS from './arcs.js';
+import process from 'process';
+import path from 'path';
+import fs from 'fs';
+//import application from './appli.json';
+
+function usage() {
+    let sp = process.argv[1].lastIndexOf(path.delimiter);
+    console.log("usage:");
+    console.log("\t",
+        process.argv[1],
+        "description.json"
+    );
+}
+
+if (process.argv.length < 3) {
+    usage();
+    process.exit(1);
+}
+
+
+var appDescription = fs.readFileSync(process.argv[2]);
+if (appDescription === '') {
+    console.error("File '"+process.argv[2]+"' is empty.");
+    process.exit(2);
+}
+
+var application = JSON.parse(appDescription);
+
+var aap = new ARCS.Application();
+aap.import(application);
+aap.start();

@@ -9,7 +9,7 @@ ARCS.Context = function( ctx ) {
     var constants = {};
     var constants = {};
     var factories = {};
     var factories = {};
     var libraries = [];
     var libraries = [];
-    var depLibPromises=[];
+    //var depLibPromises=[];
     var self = this;
     var self = this;
     var loadLibraries;
     var loadLibraries;
     var loadDataFile;
     var loadDataFile;
@@ -23,6 +23,7 @@ ARCS.Context = function( ctx ) {
     if (ctx !== undefined) {
     if (ctx !== undefined) {
         libraries = ctx.libraries;
         libraries = ctx.libraries;
     
     
+        var p;
         for (p in ctx.components) {
         for (p in ctx.components) {
             if (ctx.components.hasOwnProperty(p)) {
             if (ctx.components.hasOwnProperty(p)) {
                 components[p] = ctx.components[p];
                 components[p] = ctx.components[p];
@@ -39,8 +40,7 @@ ARCS.Context = function( ctx ) {
         
         
     }
     }
 
 
-    
-    loadDataFile = function(fileName) {
+    var loadDataFile =async function(fileName) {
         var dataPromise ;
         var dataPromise ;
                 
                 
         if (ARCS.isInNode()) {
         if (ARCS.isInNode()) {
@@ -53,59 +53,12 @@ ARCS.Context = function( ctx ) {
                 }
                 }
             });
             });
         } else {
         } else {
-            return new Promise(function(resolve, reject) {
-                var client = new XMLHttpRequest();
-                client.open('GET',fileName,true);
-                client.overrideMimeType("application/json");
-                client.send();
-                
-                client.onload = function() {
-                    if (this.status >= 200 && this.status < 300) {
-                        resolve(JSON.parse(this.responseText));
-                    } else {
-                        console.error(this.statusText);
-                        reject(this.statusText);
+            var client = await fetch(fileName);
+            return client.json();
         }
         }
     };
     };
-                client.onerror = function() {
-                    console.error(this.statusText);
-                    reject(this.statusText);
-                };
-            });
-        }
-    };
-    
-    this.addLibraryPromise = function(p) {
-        depLibPromises.push(p);
-    };
-            
-    promiseLibrary = function(libName) {
-        return new Promise(function(resolve, reject) {
-            if (libName.substr(-3) === '.js') {
-                reject(libName);
-            }            
         
         
-            if (ARCS.isInNode()) {
-                if (require("./" + libraries[i] + ".js") === undefined) {
-                    reject(libName);
-                } else {
-                    resolve();
-                }                
-            } else {
-                require([libName], 
-                        function() {
-                            resolve(); 
-                        }, 
-                        function(err) { 
-                            reject(libName,err); 
-                            
-                        }
-                );
-            }            
-        });        
-    };
-    
-    loadLibraries = function () {
+    var loadLibraries = function () {
         var i;
         var i;
         // we will use different instances of require either the one of node 
         // we will use different instances of require either the one of node 
         // or the one from require.js
         // or the one from require.js
@@ -113,14 +66,13 @@ ARCS.Context = function( ctx ) {
         
         
         var res=[];
         var res=[];
         for(i=0; i < libraries.length; i++) {
         for(i=0; i < libraries.length; i++) {
-            res.push(promiseLibrary(libraries[i]));
+            res.push(self.loadLibrary(libraries[i]));
         }
         }
         return Promise.all(res);        
         return Promise.all(res);        
     };
     };
     
     
-    instanciateComponents = function() {
+    var instanciateComponents = function() {
         var p, promises=[];
         var p, promises=[];
-        console.log(components);
         
         
         for (p in components) {
         for (p in components) {
            if (components.hasOwnProperty(p)) {
            if (components.hasOwnProperty(p)) {
@@ -129,7 +81,7 @@ ARCS.Context = function( ctx ) {
                     console.error("[ARCS] Context dump follows: ", libraries, components, constants);
                     console.error("[ARCS] Context dump follows: ", libraries, components, constants);
                     return ;
                     return ;
                 }                    
                 }                    
-                factory = factories[components[p].type];
+                var factory = factories[components[p].type];
                 //console.log("instanciating ", p);
                 //console.log("instanciating ", p);
                 try {
                 try {
                 if (components[p].value !== undefined || components[p].url !== undefined || components[p].ref !== undefined) {                
                 if (components[p].value !== undefined || components[p].url !== undefined || components[p].ref !== undefined) {                
@@ -140,11 +92,12 @@ ARCS.Context = function( ctx ) {
                         // we need currying here !
                         // we need currying here !
                         var delayInstanciation = function(p,factory) {
                         var delayInstanciation = function(p,factory) {
                             return function(obj) { 
                             return function(obj) { 
+                                console.log("instanciating from data file");
                                 components[p].instance = new factory(obj);
                                 components[p].instance = new factory(obj);
                                 return Promise.resolve();                                
                                 return Promise.resolve();                                
                             }
                             }
                         };
                         };
-
+                        console.log("loading data file", components[p].url);
                         promises.push(
                         promises.push(
                             loadDataFile(components[p].url).then(delayInstanciation(p,factory))
                             loadDataFile(components[p].url).then(delayInstanciation(p,factory))
                         );
                         );
@@ -178,12 +131,22 @@ ARCS.Context = function( ctx ) {
             libUrl = libName.url;
             libUrl = libName.url;
         }
         }
 
 
+        if (libraries.indexOf(libActualName) < 0) {
             libraries.push(libActualName);
             libraries.push(libActualName);
-        promiseLibrary(libUrl).then( function() {
+        }
+        // TODO promisify call to cbFunction
+        return import(libUrl).then( function(module) {
+            // TODO insert here component factories
+            for (p in module.default) {
+                if (module.default.hasOwnProperty(p)) {
+                    ARCS.Context.currentContext.setFactory(p,module.default[p]);
+                }
+            }
+
             if (cbFunction !== undefined) {
             if (cbFunction !== undefined) {
                 cbFunction();
                 cbFunction();
             }
             }
-        });
+        }).catch( function(msg) { console.error("[ARCS] Trouble loading '",libUrl,"' with reason -", msg) });
     };
     };
     
     
     /**
     /**
@@ -300,9 +263,9 @@ ARCS.Context = function( ctx ) {
 
 
     // this should return a promise  !
     // this should return a promise  !
     this.instanciate = function () {
     this.instanciate = function () {
-        return loadLibraries().then(function() { return Promise.all(depLibPromises); })
-                              .then(instanciateComponents)
-                              .catch(function(msg) { console.log("[ARCS] Trouble instanciating context", msg); });
+        //! TODO
+        return loadLibraries().then(instanciateComponents)
+                    .catch(function(msg) { console.error("[ARCS] Trouble instanciating context", msg); });
         
         
     };
     };
     
     

+// no longer needed with the use of imports
 
 
-// ARCS is then defined as a node.js module
-if (!ARCS.isInNode()) {
-    var exports = {};
-}
-
-exports.Component = ARCS.Component;
-exports.Connection = ARCS.Connection;
-exports.Invocation = ARCS.Invocation;
-exports.Statemachine = ARCS.Statemachine;
-exports.Sheet = ARCS.Sheet;
-exports.Application = ARCS.Application;
-exports.EventLogicParser = ARCS.EventLogicParser;
-exports.TransitionSystem = ARCS.TransitionSystem;
-exports.isInNode = ARCS.isInNode;
-exports.isInRequire = ARCS.isInRequire;
-
-// hack for require.js
-// ARCS is then defined as a require.js module.
-if (ARCS.isInRequire()) {
-    //console.log("module ARCS in require.js");
-    define(exports);
-}
+export { ARCS as default};
\ No newline at end of file

@@ -35,7 +35,7 @@ ARCS.TransitionNetwork.build = function(tree, tokenEvents) {
     }
     }
     
     
     res = ARCS.TransitionNetwork.build(tree[0],tokenEvents);
     res = ARCS.TransitionNetwork.build(tree[0],tokenEvents);
-    
+    var i;
     for (i=1; i < tree.length; i++) {
     for (i=1; i < tree.length; i++) {
         if (tree[i].hasOwnProperty('and')) {
         if (tree[i].hasOwnProperty('and')) {
             rightTN = ARCS.TransitionNetwork.build(tree[i]['and'], tokenEvents); 
             rightTN = ARCS.TransitionNetwork.build(tree[i]['and'], tokenEvents); 

 {
 {
   "context": {
   "context": {
     "libraries": [
     "libraries": [
-      "components/arviewer","components/animator",
-      "components/objloader","components/video",
-      "components/arucodetector", "components/markerlocator",
-      "components/windowevent", "components/tokensender", "components/objecttransform"
+      "../components/arviewer.js","../components/animator.js",
+      "../components/objloader.js","../components/video.js",
+      "../components/arucodetector.js", "../components/markerlocator.js",
+      "../components/windowevent.js", "../components/tokensender.js", "../components/objecttransform.js"
     ],
     ],
     "components": {
     "components": {
       "viewer": { "type": "ARViewer"},
       "viewer": { "type": "ARViewer"},

@@ -2,15 +2,15 @@
     <head>
     <head>
         <title>ARCS: marker experiment</title>
         <title>ARCS: marker experiment</title>
             <link type="text/css" rel="stylesheet" href="arcs.css">
             <link type="text/css" rel="stylesheet" href="arcs.css">
-                <script data-main="../../build/arcs_browser" 
+                <script src="../../build/arcs_browser.js" 
                         data-base-url="../.." 
                         data-base-url="../.." 
                         data-arcsapp="arcsapp.json" 
                         data-arcsapp="arcsapp.json" 
-                        src="../../deps/requirejs/require.js">
+                        type="module">
                 </script>
                 </script>
             <meta charset="UTF-8"> 
             <meta charset="UTF-8"> 
     </head>
     </head>
     <body>
     <body>
-        <video id="video" width=320 height=240 autoplay="true" style="display: none;"></video>
+        <video id="video" width=640 height=480 autoplay="true" style="display: none;"></video>
         <canvas id="canvas"></canvas>
         <canvas id="canvas"></canvas>
         <div id="container" ></div>
         <div id="container" ></div>
         <div id="contents">
         <div id="contents">

 {
 {
   "context" : {
   "context" : {
-    "libraries" : [ "components/loop","components/console"],
+    "libraries" : [ "../components/loop.js","../components/console.js"],
     "components" : {
     "components" : {
       "loop": { "type": "Loop" },
       "loop": { "type": "Loop" },
       "dint": { "type": "DisplayInt" }, 
       "dint": { "type": "DisplayInt" }, 

 <html>
 <html>
 	<head>
 	<head>
 		<title>ARCS engine</title>
 		<title>ARCS engine</title>
-		<script data-main="../../build/arcs_browser" 
-                        data-base-url="../.." 
+		<script data-base-url="../.." 
                 data-arcsapp="arcsapp.json" 
                 data-arcsapp="arcsapp.json" 
-                        src="../../deps/requirejs/require.js">
+                type="module"
+                src="../../build/arcs_browser.js">
         </script>
         </script>
+        <style>
+            body {
+                font-family: sans-serif;
+            }
+        </style>
 	</head>
 	</head>
 	<body>
 	<body>
 		<h1>ARCS in Web Browser</h1>
 		<h1>ARCS in Web Browser</h1>
-                <div style="height:100px; overflow: auto; border: solid 1px navy;">
-                    <p id="output" style="margin: 5px; padding: 5px;"></p>
+                <div style="height:80vh; overflow: auto; border: solid 1px navy;">
+                    <p id="output" style="margin: 5px; padding: 5px; font-family: monospace;"></p>
                 <div>
                 <div>
 	</body>
 	</body>
 </html>
 </html>