Fixed final ie11 webGL masking issue

removed IE11 check in auto detect function
Added AlphaMaskFilter

Gruntfile.js

@@ -61,6 +61,7 @@ module.exports = function(grunt) {
             '<%= dirs.src %>/loaders/BitmapFontLoader.js',
             '<%= dirs.src %>/loaders/SpineLoader.js',
             '<%= dirs.src %>/filters/AbstractFilter.js',
+            '<%= dirs.src %>/filters/AlphaMaskFilter.js',
             '<%= dirs.src %>/filters/ColorMatrixFilter.js',
             '<%= dirs.src %>/filters/GrayFilter.js',
             '<%= dirs.src %>/filters/DisplacementFilter.js',

bin/pixi.dev.js

@@ -3707,13 +3707,15 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
                                 }
                             } )();
 
-    if(webgl)
+    // used to detect ie 11 - no longer required
+    /*  if(webgl)
     {
         var ie =  (navigator.userAgent.toLowerCase().indexOf('trident') !== -1);
         webgl = !ie;
     }
+    */
+
 
-    //console.log(webgl);
     if( webgl )
     {
         return new PIXI.WebGLRenderer(width, height, view, transparent, antialias);
@@ -5390,7 +5392,7 @@ PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession)
 
     this.maskStack.push(maskData);
     
-    gl.colorMask(false, false, false, false);
+    gl.colorMask(false, false, false, true);
     gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
 
     PIXI.WebGLGraphics.renderGraphics(maskData, renderSession);
@@ -11275,6 +11277,100 @@ PIXI.AbstractFilter = function(fragmentSrc, uniforms)
     this.fragmentSrc = fragmentSrc || [];
 };
 
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ *
+ * The AlphaMaskFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
+ * You can use this filter to apply all manor of crazy warping effects
+ * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y.
+ * @class AlphaMaskFilter
+ * @contructor
+ * @param texture {Texture} The texture used for the displacemtent map * must be power of 2 texture at the moment
+ */
+PIXI.AlphaMaskFilter = function(texture)
+{
+    PIXI.AbstractFilter.call( this );
+
+    this.passes = [this];
+    texture.baseTexture._powerOf2 = true;
+
+    // set the uniforms
+    //console.log()
+    this.uniforms = {
+        mask: {type: 'sampler2D', value:texture},
+        mapDimensions:   {type: '2f', value:{x:1, y:5112}},
+        dimensions:   {type: '4fv', value:[0,0,0,0]}
+    };
+
+    if(texture.baseTexture.hasLoaded)
+    {
+        this.uniforms.mask.value.x = texture.width;
+        this.uniforms.mask.value.y = texture.height;
+    }
+    else
+    {
+        this.boundLoadedFunction = this.onTextureLoaded.bind(this);
+
+        texture.baseTexture.on('loaded', this.boundLoadedFunction);
+    }
+
+    this.fragmentSrc = [
+        'precision mediump float;',
+        'varying vec2 vTextureCoord;',
+        'varying vec4 vColor;',
+        'uniform sampler2D mask;',
+        'uniform sampler2D uSampler;',
+        'uniform vec2 offset;',
+        'uniform vec4 dimensions;',
+        'uniform vec2 mapDimensions;',
+
+        'void main(void) {',
+        '   vec2 mapCords = vTextureCoord.xy;',
+        '   mapCords += (dimensions.zw + offset)/ dimensions.xy ;',
+        '   mapCords.y *= -1.0;',
+        '   mapCords.y += 1.0;',
+        '   mapCords *= dimensions.xy / mapDimensions;',
+
+        '   vec4 original =  texture2D(uSampler, vTextureCoord);',
+        '   float maskAlpha =  texture2D(mask, mapCords).r;',
+        '   original *= maskAlpha;',
+        //'   original.rgb *= maskAlpha;',
+        '   gl_FragColor =  original;',
+        //'   gl_FragColor = gl_FragColor;',
+        '}'
+    ];
+};
+
+PIXI.AlphaMaskFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
+PIXI.AlphaMaskFilter.prototype.constructor = PIXI.AlphaMaskFilter;
+
+PIXI.AlphaMaskFilter.prototype.onTextureLoaded = function()
+{
+    this.uniforms.mapDimensions.value.x = this.uniforms.mask.value.width;
+    this.uniforms.mapDimensions.value.y = this.uniforms.mask.value.height;
+
+    this.uniforms.mask.value.baseTexture.off('loaded', this.boundLoadedFunction);
+};
+
+/**
+ * The texture used for the displacemtent map * must be power of 2 texture at the moment
+ *
+ * @property map
+ * @type Texture
+ */
+Object.defineProperty(PIXI.AlphaMaskFilter.prototype, 'map', {
+    get: function() {
+        return this.uniforms.mask.value;
+    },
+    set: function(value) {
+        this.uniforms.mask.value = value;
+    }
+});
+
+
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */

src/pixi/filters/AlphaMaskFilter.js

@@ -21,17 +21,15 @@ PIXI.AlphaMaskFilter = function(texture)
     // set the uniforms
     //console.log()
     this.uniforms = {
-        displacementMap: {type: 'sampler2D', value:texture},
+        mask: {type: 'sampler2D', value:texture},
-        scale:           {type: '2f', value:{x:30, y:30}},
-        offset:          {type: '2f', value:{x:0, y:0}},
         mapDimensions:   {type: '2f', value:{x:1, y:5112}},
         dimensions:   {type: '4fv', value:[0,0,0,0]}
     };
 
     if(texture.baseTexture.hasLoaded)
     {
-        this.uniforms.mapDimensions.value.x = texture.width;
+        this.uniforms.mask.value.x = texture.width;
-        this.uniforms.mapDimensions.value.y = texture.height;
+        this.uniforms.mask.value.y = texture.height;
     }
     else
     {
@@ -44,30 +42,25 @@ PIXI.AlphaMaskFilter = function(texture)
         'precision mediump float;',
         'varying vec2 vTextureCoord;',
         'varying vec4 vColor;',
-        'uniform sampler2D displacementMap;',
+        'uniform sampler2D mask;',
         'uniform sampler2D uSampler;',
-        'uniform vec2 scale;',
         'uniform vec2 offset;',
         'uniform vec4 dimensions;',
-        'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);',
+        'uniform vec2 mapDimensions;',
-        // 'const vec2 textureDimensions = vec2(750.0, 750.0);',
 
         'void main(void) {',
         '   vec2 mapCords = vTextureCoord.xy;',
-        //'   mapCords -= ;',
         '   mapCords += (dimensions.zw + offset)/ dimensions.xy ;',
         '   mapCords.y *= -1.0;',
         '   mapCords.y += 1.0;',
-        '   vec2 matSample = texture2D(displacementMap, mapCords).xy;',
+        '   mapCords *= dimensions.xy / mapDimensions;',
-        '   matSample -= 0.5;',
-        '   matSample *= scale;',
-        '   matSample /= mapDimensions;',
-        '   gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));',
-        '   gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);',
-        '   vec2 cord = vTextureCoord;',
 
-        //'   gl_FragColor =  texture2D(displacementMap, cord);',
+        '   vec4 original =  texture2D(uSampler, vTextureCoord);',
-     //   '   gl_FragColor = gl_FragColor;',
+        '   float maskAlpha =  texture2D(mask, mapCords).r;',
+        '   original *= maskAlpha;',
+        //'   original.rgb *= maskAlpha;',
+        '   gl_FragColor =  original;',
+        //'   gl_FragColor = gl_FragColor;',
         '}'
     ];
 };
@@ -77,10 +70,10 @@ PIXI.AlphaMaskFilter.prototype.constructor = PIXI.AlphaMaskFilter;
 
 PIXI.AlphaMaskFilter.prototype.onTextureLoaded = function()
 {
-    this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
+    this.uniforms.mapDimensions.value.x = this.uniforms.mask.value.width;
-    this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
+    this.uniforms.mapDimensions.value.y = this.uniforms.mask.value.height;
 
-    this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction);
+    this.uniforms.mask.value.baseTexture.off('loaded', this.boundLoadedFunction);
 };
 
 /**
@@ -91,39 +84,10 @@ PIXI.AlphaMaskFilter.prototype.onTextureLoaded = function()
  */
 Object.defineProperty(PIXI.AlphaMaskFilter.prototype, 'map', {
     get: function() {
-        return this.uniforms.displacementMap.value;
+        return this.uniforms.mask.value;
     },
     set: function(value) {
-        this.uniforms.displacementMap.value = value;
+        this.uniforms.mask.value = value;
     }
 });
 
-/**
- * The multiplier used to scale the displacement result from the map calculation.
- *
- * @property scale
- * @type Point
- */
-Object.defineProperty(PIXI.AlphaMaskFilter.prototype, 'scale', {
-    get: function() {
-        return this.uniforms.scale.value;
-    },
-    set: function(value) {
-        this.uniforms.scale.value = value;
-    }
-});
-
-/**
- * The offset used to move the displacement map.
- *
- * @property offset
- * @type Point
- */
-Object.defineProperty(PIXI.AlphaMaskFilter.prototype, 'offset', {
-    get: function() {
-        return this.uniforms.offset.value;
-    },
-    set: function(value) {
-        this.uniforms.offset.value = value;
-    }
-});

src/pixi/renderers/webgl/utils/WebGLMaskManager.js

@@ -29,7 +29,7 @@ PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession)
 
     this.maskStack.push(maskData);
     
-    gl.colorMask(false, false, false, false);
+    gl.colorMask(false, false, false, true);
     gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
 
     PIXI.WebGLGraphics.renderGraphics(maskData, renderSession);

src/pixi/utils/Detector.js

@@ -31,13 +31,15 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
                                 }
                             } )();
 
-    if(webgl)
+    // used to detect ie 11 - no longer required
+    /*  if(webgl)
     {
         var ie =  (navigator.userAgent.toLowerCase().indexOf('trident') !== -1);
         webgl = !ie;
     }
+    */
+
 
-    //console.log(webgl);
     if( webgl )
     {
         return new PIXI.WebGLRenderer(width, height, view, transparent, antialias);