Merge pull request #6 from rodrigocam/performance

Add resize function and fix image distortion
rodrigocam · Mar 7, 2019 · 0306f0a · 0306f0a
2 parents efc332a + 21f85df
commit 0306f0a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 37 deletions.
diff --git a/build/ar-gif.min.js b/build/ar-gif.min.js
diff --git a/example/ar-gif.min.js b/example/ar-gif.min.js
diff --git a/src/ARScene.js b/src/ARScene.js
@@ -6,7 +6,6 @@ class ARScene extends HTMLElement {
         super();
         this.htmlMarkers = []
         this.threeMarkers = {}
-        this.lastFrameVisibleMarkers = []
     }
 
     connectedCallback() {
@@ -17,45 +16,42 @@ class ARScene extends HTMLElement {
         this.init()
 
         if (window.ARController && ARController.getUserMediaThreeScene) {
-            ARThreeOnLoad();
+            ARThreeOnLoad()
         }
     }
 
     init() {
+        console.log('AR-GIF version 0.0.3')
         const self = this
         let config = {
-            maxARVideoSize: Math.max(document.body.clientHeight, document.body.clientWidth),
             cameraParam: CameraParam,
-            facingMode: 'environment',
-        }
-
-        if(document.body.clientWidth > document.body.clientHeight) {
-            config.width = {ideal: document.body.clientWidth},
-            config.height = {ideal: document.body.clientHeight}
+            facingMode: 'environment'
         }
 
         window.ARThreeOnLoad = () => {
             ARController.getUserMediaThreeScene({
                 maxARVideoSize: 640,
                 cameraParam: CameraParam,
                 facingMode: 'environment',
-                width: config.width,
-                height: config.height,
+
                 onSuccess: (arScene, arController, arCamera) => {
                     console.log("Initialized ar-scene")
-                    self.registerMarkers(arScene, arController);
+                    self.registerMarkers(arScene, arController)
 
                     let renderer = self.createRenderer(arScene, arController)
+                    renderer.domElement.setAttribute("id", "arCanvas")
                     document.body.appendChild(renderer.domElement)
 
+                    window.addEventListener("resize", this.resizeWindow)
+
                     let tick = () => {
                         arScene.process()
                         arScene.renderOn(renderer)
                         self.updateMarkersState(arController)
                         requestAnimationFrame(tick)
                     }
                     tick()
-                }
+                },
             })
         }
     }
@@ -67,7 +63,7 @@ class ARScene extends HTMLElement {
             if(single) {
                 console.log("Registering marker ", marker.patt)
                 arController.loadMarker(marker.patt, (id) => {
-                    marker.init(id, arScene, arController);
+                    marker.init(id, arScene, arController)
                     self.threeMarkers[id] = marker
                 })
             } else {
@@ -80,39 +76,39 @@ class ARScene extends HTMLElement {
         Object.keys(arController.threePatternMarkers).map((key, index) => {
             let marker = arController.threePatternMarkers[key]
             if(marker.visible) {
-                marker.children[0].material.needsUpdate = true;
-                marker.children[0].material.map.needsUpdate = true;
+                marker.children[0].material.needsUpdate = true
+                marker.children[0].material.map.needsUpdate = true
             }else if(marker.markerTracker.inPrevious && !marker.markerTracker.inCurrent){
                 this.threeMarkers[key].gifPlaying = false
             }
         })
     }
 
     createRenderer(arScene, arController) {
-        let renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
-
-        let width = arScene.video.videoWidth
-        let height = arScene.video.videoHeight
+        let renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true})
 
-        if (arController.orientation === 'portrait') {
-            /* Inverted because of portrait mode */
-            renderer.setSize(height, width);
-
-            renderer.domElement.style.transformOrigin = '0 0';
-            renderer.domElement.style.transform = 'rotate(-90deg) translateX(-100%)';
-
-            /* Inverted because of portrait mode */
-            renderer.domElement.style.width = document.body.clientHeight;
-            renderer.domElement.style.height = document.body.clientWidth;
-        } else {
-            renderer.setSize(width, height);
-            renderer.domElement.style.width = document.body.clientWidth;
-            renderer.domElement.style.height = document.body.clientHeight;
-        }
+        let width = window.innerWidth
+        let height = window.innerHeight
+
+		if (arController.orientation === 'portrait') {
+			renderer.setSize(height, width)
+			renderer.domElement.style.transformOrigin = '0 0'
+			renderer.domElement.style.transform = 'rotate(-90deg) translateX(-100%)'
+		} else {
+            renderer.setSize(width, height)
+		}
 
         return renderer;
     }
 
+    resizeWindow() {
+        let canvas = document.getElementById("arCanvas")
+        canvas.setAttribute("width", window.innerWidth)
+        canvas.setAttribute("height", window.innerHeight)
+        canvas.style.width = window.innerWidth
+        canvas.style.height = window.innerHeight
+    }
+
     set arScene(value) {
         this.setAttribute('arScene', value)
     }