Merge pull request #5 from rodrigocam/performance

Improve performance
rodrigocam · Mar 7, 2019 · efc332a · efc332a
2 parents a80ca74 + 35631b1
commit efc332a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 17 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/ARMarker.js b/src/ARMarker.js
@@ -14,48 +14,45 @@ class ARMarker extends HTMLElement {
     init(markerId, arScene, arController) {
         this.markerId = markerId
         this.textureCanvas.setAttribute('id', markerId)
+
+        let texture = new THREE.CanvasTexture(this.textureCanvas)
+        this.material = new THREE.MeshBasicMaterial({map: texture, transparent: true});
+
         let threeMarker = this.create3DMarker(markerId, arController)
         arScene.scene.add(threeMarker)
         const self = this
 
         arController.addEventListener('getMarker', (ev) => {
+            // supress wanings
+            console.warn = function(){}
             if(ev.data.marker.id == markerId) {
                 if(!self.gifLoaded) {
                     self.gif = gifler(self.content).animate(self.textureCanvas)
                     self.gifLoaded = true;
                 }
                 self.gifPlaying = true
-                self.updateMarkerTexture(self.get3DMarker(markerId, arScene))              
+                texture.needsUpdate = true
             }
         })
         console.log("Initialized marker ", markerId, this.textureCanvas)
     }
 
-    updateMarkerTexture(threeMarker) {
-        let texture = new THREE.CanvasTexture(this.textureCanvas);
-        let material = new THREE.MeshBasicMaterial({map: texture, transparent: true});
-        threeMarker.children[0].material = material;
-    }
-
     get3DMarker(markerId, arScene) {
         let arController = arScene.arController;
         return arController.threePatternMarkers[markerId];
     }
 
     create3DMarker(markerId, arController) {
         let threeMarker = arController.createThreeMarker(markerId)
-        let plane = this.create3DPlane(this.textureCanvas)
+        let plane = this.create3DPlane()
 
         threeMarker.add(plane)
         return threeMarker
     }
 
-    create3DPlane(textureCanvas) {
+    create3DPlane() {
         let geometry = new THREE.PlaneGeometry()
-        let texture = new THREE.CanvasTexture(textureCanvas)
-        let material = new THREE.MeshBasicMaterial({map: texture, transparent: true})
-
-        return new THREE.Mesh(geometry, material)
+        return new THREE.Mesh(geometry, this.material)
     }
 
     static get observedAttributes() {

diff --git a/src/ARScene.js b/src/ARScene.js
@@ -33,10 +33,10 @@ class ARScene extends HTMLElement {
             config.width = {ideal: document.body.clientWidth},
             config.height = {ideal: document.body.clientHeight}
         }
-            
+
         window.ARThreeOnLoad = () => {
             ARController.getUserMediaThreeScene({
-                maxARVideoSize: config.maxARVideoSize,
+                maxARVideoSize: 640,
                 cameraParam: CameraParam,
                 facingMode: 'environment',
                 width: config.width,