Merge pull request #32 from PixelsCommander/decomposition

Fixed memory leaks on RequestAnimationFrame

Author: PixelsCommander

dist/htmlgl.js

@@ -8531,7 +8531,6 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
         w.HTMLGL.context = this;
 
         this.createStage();             //Creating stage before showing it
-        console.log('context updated position');
         this.updateScrollPosition();    //Initialize scroll position for first time
         this.initListeners();
         this.elementResolver = new w.HTMLGL.GLElementResolver(this);
@@ -8589,7 +8588,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
         w.HTMLGL.scrollX = scrollOffset.left;
         w.HTMLGL.scrollY = scrollOffset.top;
 
-        this.stage.changed = true;
+        this.markStageAsChanged();
     }
 
     p.createViewer = function () {
@@ -8612,7 +8611,8 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
 
         this.renderer.resize(width, height);
         this.updateTextures();
-        this.stage.changed = true;
+
+        this.markStageAsChanged();
     }
 
     p.createStage = function () {
@@ -8621,11 +8621,10 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
         this.stage.addChild(w.HTMLGL.document);
     }
 
+    //Avoiding function.bind() for performance and memory consuming reasons
     p.redrawStage = function () {
-        requestAnimFrame(this.redrawStage.bind(this));
-
-        if (this.stage.changed) {
-            this.renderer.render(this.stage);
+        if (w.HTMLGL.stage.changed) {
+            w.HTMLGL.renderer.render(w.HTMLGL.stage);
             w.HTMLGL.stage.changed = false;
         }
     }
@@ -8649,6 +8648,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
     //We would like to rerender if something changed, otherwise stand by
     p.markStageAsChanged = function () {
         if (w.HTMLGL.stage && !w.HTMLGL.stage.changed) {
+            requestAnimFrame(this.redrawStage);
             w.HTMLGL.stage.changed = true;
         }
     }

dist/htmlgl.min.js

@@ -4,6 +4,7 @@ html, body {
     width: 100%;
     margin: 0;
     padding: 0;
+    min-width: 930px;
 }
 
 body {

page/css/style.css

@@ -123,28 +123,28 @@ var switchy = false;
 
 function animate() {
 
-    count += 0.1;
+    if (window.HTMLGL.scrollY > 1000) {
+        count += 0.1;
 
-    var blurAmount = Math.cos(count) ;
-    var blurAmount2 = Math.sin(count * 0.8)  ;
+        var blurAmount = Math.cos(count) ;
+        var blurAmount2 = Math.sin(count * 0.8)  ;
 
-    var filtersToApply = [];
+        var filtersToApply = [];
 
-    filtersSwitchs[0] ? overlay.visible = true : overlay.visible = false;
+        filtersSwitchs[0] ? overlay.visible = true : overlay.visible = false;
 
-    for (var i = 0; i < filterCollection.length; i++) {
-        if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
-    };
+        for (var i = 0; i < filterCollection.length; i++) {
+            if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
+        };
 
-    pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
+        pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
 
-    displacementFilter.offset.x = count * 10//blurAmount * 40;
-    displacementFilter.offset.y = count * 10
+        displacementFilter.offset.x = count * 10//blurAmount * 40;
+        displacementFilter.offset.y = count * 10
 
-    overlay.tilePosition.x = count * -10//blurAmount * 40;
-    overlay.tilePosition.y = count * -10
+        overlay.tilePosition.x = count * -10//blurAmount * 40;
+        overlay.tilePosition.y = count * -10
 
-    if (window.HTMLGL.scrollY > 1000) {
         renderer.render(stage);
     }
     requestAnimFrame( animate );

page/js/effects.js

@@ -24,7 +24,6 @@
         w.HTMLGL.context = this;
 
         this.createStage();             //Creating stage before showing it
-        console.log('context updated position');
         this.updateScrollPosition();    //Initialize scroll position for first time
         this.initListeners();
         this.elementResolver = new w.HTMLGL.GLElementResolver(this);
@@ -82,7 +81,7 @@
         w.HTMLGL.scrollX = scrollOffset.left;
         w.HTMLGL.scrollY = scrollOffset.top;
 
-        this.stage.changed = true;
+        this.markStageAsChanged();
     }
 
     p.createViewer = function () {
@@ -105,7 +104,8 @@
 
         this.renderer.resize(width, height);
         this.updateTextures();
-        this.stage.changed = true;
+
+        this.markStageAsChanged();
     }
 
     p.createStage = function () {
@@ -114,11 +114,10 @@
         this.stage.addChild(w.HTMLGL.document);
     }
 
+    //Avoiding function.bind() for performance and memory consuming reasons
     p.redrawStage = function () {
-        requestAnimFrame(this.redrawStage.bind(this));
-
-        if (this.stage.changed) {
-            this.renderer.render(this.stage);
+        if (w.HTMLGL.stage.changed) {
+            w.HTMLGL.renderer.render(w.HTMLGL.stage);
             w.HTMLGL.stage.changed = false;
         }
     }
@@ -142,6 +141,7 @@
     //We would like to rerender if something changed, otherwise stand by
     p.markStageAsChanged = function () {
         if (w.HTMLGL.stage && !w.HTMLGL.stage.changed) {
+            requestAnimFrame(this.redrawStage);
             w.HTMLGL.stage.changed = true;
         }
     }