PixelsCommander · PixelsCommander · Sep 25, 2015 · Sep 25, 2015 · Sep 25, 2015 · Sep 25, 2015
diff --git a/demo/assets/css/appstyle.css b/demo/assets/css/appstyle.css
@@ -42,7 +42,7 @@
 
 body {
     box-sizing: border-box;
-    padding: 20px 43px 0 43px;
+    /* padding: 20px 43px 0 43px; */
     margin: 0;
     font-family: Conv_InterstatePro-Regular;
     font-weight: normal;

diff --git a/demo/basic-dom.html b/demo/basic-dom.html
@@ -45,7 +45,7 @@ <h2>
             scaleX: 4,
             scaleY: 4,
             rotateZ: "360deg"
-        }, {duration: 1000})
+        }, {duration: 5000})
         .then(function () {
             Velocity(element, {
                 translateX: 0,
@@ -54,7 +54,7 @@ <h2>
                 scaleX: 1,
                 scaleY: 1,
                 rotateZ: "0"
-            }, {duration: 1000});
+            }, {duration: 5000});
         });
     }
 </script>

diff --git a/demo/basic-webgl.html b/demo/basic-webgl.html
@@ -53,14 +53,14 @@ <h2>
             scaleX: 4,
             scaleY: 4,
             rotateZ: "360deg"
-        }, {duration: 1000}).then(function () {
+        }, {duration: 5000}).then(function () {
             Velocity(element, {
                 translateX: 0,
                 translateY: 0,
                 scaleX: 1,
                 scaleY: 1,
                 rotateZ: "0"
-            }, {duration: 1000});
+            }, {duration: 5000});
         });
     }
 </script>

diff --git a/demo/js/vendor/html2canvas.js b/demo/js/vendor/html2canvas.js
@@ -2088,12 +2088,12 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
             canvas = renderer.canvas;
         } else {
             //If retina - increase bounds by two since we ve got 2x canvas from renderer
-            if (window.devicePixelRatio !== 1) {
+            /*if (window.devicePixelRatio !== 1) {
                 bounds.top = bounds.top * window.devicePixelRatio;
                 bounds.left = bounds.left * window.devicePixelRatio;
                 bounds.right = bounds.right * window.devicePixelRatio;
                 bounds.bottom = bounds.bottom * window.devicePixelRatio;
-            }
+            }*/
 
             canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset});
         }
@@ -4632,7 +4632,7 @@ exports.parseBackgrounds = function(backgroundImage) {
 };
 
 exports.getDeviceRatio = function() {
-    return window.devicePixelRatio;
+    return 1;//window.devicePixelRatio;
 };
 
 exports.applyRatio = function(value) {

diff --git a/demo/ripples.html b/demo/ripples.html
@@ -88,7 +88,7 @@
 <script src="../bower_components/promise-polyfill/Promise.min.js"></script>
 <script src="../bower_components/webcomponents.js/CustomElements.min.js"></script>
 <script src="./js/vendor/velocity.js"></script>
-<script src="../../html2canvas/dist/html2canvas.js"></script>
+<script src="./js/vendor/html2canvas.js"></script>
 <script src="../bower_components/pixi/bin/pixi.js"></script>
 <script src="../src/util.js"></script>
 <script src="../src/gl-element-resolver.js"></script>

diff --git a/dist/htmlgl-effects.js b/dist/htmlgl-effects.js
diff --git a/dist/htmlgl-effects.min.js b/dist/htmlgl-effects.min.js
diff --git a/dist/htmlgl.js b/dist/htmlgl.js
@@ -2112,12 +2112,12 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
             canvas = renderer.canvas;
         } else {
             //If retina - increase bounds by two since we ve got 2x canvas from renderer
-            if (window.devicePixelRatio !== 1) {
+            /*if (window.devicePixelRatio !== 1) {
                 bounds.top = bounds.top * window.devicePixelRatio;
                 bounds.left = bounds.left * window.devicePixelRatio;
                 bounds.right = bounds.right * window.devicePixelRatio;
                 bounds.bottom = bounds.bottom * window.devicePixelRatio;
-            }
+            }*/
 
             canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset});
         }
@@ -4656,7 +4656,7 @@ exports.parseBackgrounds = function(backgroundImage) {
 };
 
 exports.getDeviceRatio = function() {
-    return window.devicePixelRatio;
+    return 1;//window.devicePixelRatio;
 };
 
 exports.applyRatio = function(value) {
@@ -8774,7 +8774,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
             height = w.innerHeight;
 
         //Update pixelRatio since could be resized on different screen with different ratio
-        HTMLGL.pixelRatio = window.devicePixelRatio || 1;
+        HTMLGL.pixelRatio = w.HTMLGL.getPixelRatio();
 
         console.log(HTMLGL.pixelRatio);
 
@@ -8915,7 +8915,11 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
         w.HTMLGL.enabled = false;
     }
 
-    w.HTMLGL.pixelRatio = window.devicePixelRatio || 1;
+    w.HTMLGL.getPixelRatio = function() {
+        return 1;//window.devicePixelRatio || 1;
+    }
+
+    w.HTMLGL.pixelRatio = w.HTMLGL.getPixelRatio();
 
     w.HTMLGL.GLContext = GLContext;
     new GLContext();
@@ -9283,8 +9287,8 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
         jQuery.fn[HTMLGL.JQ_PLUGIN_NAME] = function () {
             return this.each(function () {
                 if (!jQuery.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME)) {
-                    var propellerObj = HTMLGL.GLElement.createFromNode(this);
-                    jQuery.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME, propellerObj);
+                    var htmlGLobj = HTMLGL.GLElement.createFromNode(this);
+                    jQuery.data(this, 'plugin_' + HTMLGL.JQ_PLUGIN_NAME, htmlGLobj);
                     jQuery[HTMLGL.JQ_PLUGIN_NAME].elements.push(propellerObj);
                 }
             });

diff --git a/dist/htmlgl.min.js b/dist/htmlgl.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -12,7 +12,7 @@ gulp.task('default', function () {
         .pipe(gulp.dest('dist'));
 
     //Effects add-on
-    gulp.src(['bower_components/tween.js/build/tween.min.js', 'src/effects/ripples.js', 'src/gl-effects-manager.js'])
+    gulp.src(['bower_components/tween.js/build/tween.min.js', 'src/effects/*.js', 'src/gl-effects-manager.js'])
         .pipe(concat(BUNDLE_NAME + '-effects.js'))
         .pipe(gulp.dest('dist'))
         .pipe(uglify(BUNDLE_NAME + '-effects.min.js'))

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-gl",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Get as many FPS as you need by rendering HTML/CSS in WebGL",
   "main": "index.js",
   "scripts": {

diff --git a/src/effects/ascii.js b/src/effects/ascii.js
@@ -0,0 +1,18 @@
+(function (w) {
+
+    var Ascii = function (element) {
+        this.element = element;
+        this.filter = new PIXI.filters.AsciiFilter();
+        this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter);
+    }
+
+    var p = Ascii.prototype;
+
+    p.destroy = function () {
+        var filterIndex = this.element.sprite.filters.indexOf(this.filter);
+        this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1);
+    }
+
+    w.HTMLGL.effects = w.HTMLGL.effects || {};
+    w.HTMLGL.effects.ascii = Ascii;
+})(window);
diff --git a/src/effects/bloom.js b/src/effects/bloom.js
@@ -0,0 +1,18 @@
+(function (w) {
+
+    var Bloom = function (element) {
+        this.element = element;
+        this.filter = new PIXI.filters.BloomFilter();
+        this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter);
+    }
+
+    var p = Bloom.prototype;
+
+    p.destroy = function () {
+        var filterIndex = this.element.sprite.filters.indexOf(this.filter);
+        this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1);
+    }
+
+    w.HTMLGL.effects = w.HTMLGL.effects || {};
+    w.HTMLGL.effects.bloom = Bloom;
+})(window);
diff --git a/src/effects/diagonal-blur.js b/src/effects/diagonal-blur.js
@@ -0,0 +1,20 @@
+(function (w) {
+
+    var DiagonalBlur = function (element) {
+        this.element = element;
+        this.filter = new PIXI.filters.BlurDirFilter(2, 2);
+        this.filter.passes = 2;
+        this.filter.blur = 3;
+        this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter);
+    }
+
+    var p = DiagonalBlur.prototype;
+
+    p.destroy = function () {
+        var filterIndex = this.element.sprite.filters.indexOf(this.filter);
+        this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1);
+    }
+
+    w.HTMLGL.effects = w.HTMLGL.effects || {};
+    w.HTMLGL.effects.diagonalblur = DiagonalBlur;
+})(window);
diff --git a/src/effects/dotscreen.js b/src/effects/dotscreen.js
@@ -0,0 +1,20 @@
+(function (w) {
+
+    var DotScreen = function (element) {
+        this.element = element;
+        this.filter = new PIXI.filters.DotScreenFilter();
+        this.filter.scale = parseInt(this.element.getAttribute('dotScreenScale')) || 1;
+        this.filter.angle = parseInt(this.element.getAttribute('dotScreenAngle')) || 1;
+        this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter);
+    }
+
+    var p = DotScreen.prototype;
+
+    p.destroy = function () {
+        var filterIndex = this.element.sprite.filters.indexOf(this.filter);
+        this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1);
+    }
+
+    w.HTMLGL.effects = w.HTMLGL.effects || {};
+    w.HTMLGL.effects.dotscreen = DotScreen;
+})(window);
diff --git a/src/effects/invert.js b/src/effects/invert.js
@@ -0,0 +1,18 @@
+(function (w) {
+
+    var Invert = function (element) {
+        this.element = element;
+        this.filter = new PIXI.filters.InvertFilter();
+        this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter);
+    }
+
+    var p = Invert.prototype;
+
+    p.destroy = function () {
+        var filterIndex = this.element.sprite.filters.indexOf(this.filter);
+        this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1);
+    }
+
+    w.HTMLGL.effects = w.HTMLGL.effects || {};
+    w.HTMLGL.effects.invert = Invert;
+})(window);
diff --git a/src/effects/noise.js b/src/effects/noise.js
@@ -0,0 +1,18 @@
+(function (w) {
+
+    var Noise = function (element) {
+        this.element = element;
+        this.filter = new PIXI.filters.NoiseFilter();
+        this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter);
+    }
+
+    var p = Noise.prototype;
+
+    p.destroy = function () {
+        var filterIndex = this.element.sprite.filters.indexOf(this.filter);
+        this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1);
+    }
+
+    w.HTMLGL.effects = w.HTMLGL.effects || {};
+    w.HTMLGL.effects.noise = Noise;
+})(window);
diff --git a/src/effects/pixelate.js b/src/effects/pixelate.js
@@ -0,0 +1,20 @@
+(function (w) {
+
+    var Pixelate = function (element) {
+        this.element = element;
+        this.filter = new PIXI.filters.PixelateFilter();
+        this.filter.size.x = parseInt(this.element.getAttribute('pixelSizeX')) || 2;
+        this.filter.size.y = parseInt(this.element.getAttribute('pixelSizeY')) || 2;
+        this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter);
+    }
+
+    var p = Pixelate.prototype;
+
+    p.destroy = function () {
+        var filterIndex = this.element.sprite.filters.indexOf(this.filter);
+        this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1);
+    }
+
+    w.HTMLGL.effects = w.HTMLGL.effects || {};
+    w.HTMLGL.effects.pixelate = Pixelate;
+})(window);
diff --git a/src/effects/rgbsplit.js b/src/effects/rgbsplit.js
@@ -0,0 +1,18 @@
+(function (w) {
+
+    var RGBSplit = function (element) {
+        this.element = element;
+        this.filter = new PIXI.filters.RGBSplitFilter();
+        this.element.sprite.filters = (this.element.sprite.filters || []).concat(this.filter);
+    }
+
+    var p = RGBSplit.prototype;
+
+    p.destroy = function () {
+        var filterIndex = this.element.sprite.filters.indexOf(this.filter);
+        this.element.sprite.filters = this.element.sprite.filters.splice(filterIndex, 1);
+    }
+
+    w.HTMLGL.effects = w.HTMLGL.effects || {};
+    w.HTMLGL.effects.rgbsplit = RGBSplit;
+})(window);
diff --git a/src/effects/ripples.js b/src/effects/ripples.js