better documentation; refactoring of video and xrviewer

+/******/ "use strict";
 /******/ var __webpack_modules__ = ([
 /* 0 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

        
 import ARCS from '../build/arcs.js';
 import * as THREE from '../deps/three.js/index.js';
-//import FrustumCamera from '../deps/three.js/frustumcamera.js';
+import ARButton from '../deps/three.js/ARButton.js';
         
 var XRViewer;
 
 /** 
-    * @class ARViewer 
-    * @classdesc Simple compositing viewer for augmented reality
+    * @class XRViewer 
+    * @classdesc Simple compositing viewer for augmented reality using WebXR
     */        
 XRViewer = ARCS.Component.create(
-    /** @lends ARViewer.prototype */
-    function () {
-        let renderer, scene3d, camera3d;
+    /** @lends XRViewer.prototype */
+    function (config) {
+        let renderer, scene, camera;
         let sceneId;
+        let container;
         
+        let _config = config || {};
         
-        // scenegraph initializations
-        scene3d = new THREE.Scene();
+        container = (_config.rootElement !== undefined)?
+            document.querySelector(_config.rootElement):document.body;
+        container = container || document.body;
 
-        /**
-            * Initializes the widgets (HTML elements) needed as a basis 
-            * for the viewer.
-            * @param cName {string} id of the container that will enclose the scene renderer
-            * @param vName {string} id of the element at the source of the video stream
-            * @slot
-            * @function ARViewer#setWidgets
-            */
-        this.setWidgets = function() {
+        // scenegraph initializations
+        scene = new THREE.Scene();
 
-            renderer = new THREE.WebGLRenderer();
-            renderer.setClearColor(0x000000, 1);
-            renderer.setSize(container.width, container.height);
-            container.appendChild(renderer.domElement);
+        renderer = new THREE.WebGLRenderer();
+        //renderer.setClearColor(0x000000, 1);
+        renderer.setSize(container.width, container.height);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.xr.enabled = true;
+        container.appendChild(renderer.domElement);
+        container.appendChild(ARButton.createButton(renderer));
 
-            var theta = 45;
-            camera3d = new THREE.PerspectiveCamera(theta, container.width / container.height, 0.01, 10);
-            scene3d.add(camera3d);
+        var theta = 45;
+        camera = new THREE.PerspectiveCamera(theta, container.width / container.height, 0.01, 10);
 
-            var _light = new THREE.DirectionalLight(0xffffff);
-            _light.position.set(0,5,5);
-
-            scene3d.add(_light);
-            updateAspectRatio();
-        };
+        var _light = new THREE.DirectionalLight(0xffffff);
+        _light.position.set(0,5,5);
 
+        scene.add(_light);
+        
         /**
             * Adds new objects to the current 3D scene
             * @param scene {object} 3D object as defined by Three.js to add to the scene.
             * @slot
-            * @function ARViewer#addScene
+            * @function XRViewer#addScene
             */
-        this.addScene = function (scene) {
-            scene3d.add(scene);
+        this.addScene = function (subScene) {
+            scene.add(subScene);
         };
     
         /**
             * Removes an object from the current 3D scene
             * @param scene {object} 3D object as defined by Three.js to remove from the scene.
             * @slot
-            * @function ARViewer#removeScene
+            * @function XRViewer#removeScene
             */
-        this.removeScene = function (scene) {
-            scene3d.remove(scene);
+        this.removeScene = function (subScene) {
+            scene.remove(subScene);
+        };
+        
+        
+        this.start = function() {
+            renderer.setAnimationLoop(render);
         };
         
         /**
             * Triggers the rendering of the composite scene
-            * @function ARViewer#render
+            * @function XRViewer#render
             * @slot
             */
-        this.render = function () {
-            renderer.autoClear = false;
-            renderer.clear();
+        let render = function (time, frame) {
+            this.emit("preRender",time, frame);
             renderer.render(scene3d, camera3d);
+            this.emit("postRender",time, frame);
         }
         
     },
     /** @lends ARViewer.slots */
     [
-        'setWidgets','setFocal','viewAll','setSize','addScene',
-        'resetCamera','removeScene','render','keepAspectRatio',
-        'setExtrinsics', 'setIntrinsics'
+        'setWidgets','addScene',
+        'removeScene','render',
         
     ],
-    []
+    ['preRender','postRender']
 );
 
 export default {XRViewer: XRViewer}; 

@@ -15,7 +15,7 @@
 
 <body>
 <header>
-<a href="index.html" style="font-size: 200%; text-decoration: none; font-weight: bold; color: #6F6FFF;"><img src="arcs_logo.png" alt="ARCS logo">.js</a> <span style="font-size: 250%; margin-left:2em; font-weight: bold; color: #6F6FBB;">Augmented Reality Component System</span>
+<a href="index.html" style="font-size: 200%; text-decoration: none; font-weight: bold; color: #6F6FFF;"><img src="../arcs_logo.png" alt="ARCS logo">.js</a> <span style="font-size: 250%; margin-left:2em; font-weight: bold; color: #6F6FBB;">Augmented Reality Component System</span>
 
 </header>
 <div id="main">