Fixed final ie11 webGL masking issue
removed IE11 check in auto detect function Added AlphaMaskFilter
This commit is contained in:
Mat Groves
parent
c613ee2ae6
commit
68c476da25
6 changed files with 126 additions and 63 deletions
|
|
@ -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',
|
||||
|
|
|
|||
102
bin/pixi.dev.js
102
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
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -21,17 +21,15 @@ PIXI.AlphaMaskFilter = function(texture)
|
|||
// set the uniforms
|
||||
//console.log()
|
||||
this.uniforms = {
|
||||
displacementMap: {type: 'sampler2D', value:texture},
|
||||
scale: {type: '2f', value:{x:30, y:30}},
|
||||
offset: {type: '2f', value:{x:0, y:0}},
|
||||
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.mapDimensions.value.x = texture.width;
|
||||
this.uniforms.mapDimensions.value.y = texture.height;
|
||||
this.uniforms.mask.value.x = texture.width;
|
||||
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);',
|
||||
// 'const vec2 textureDimensions = vec2(750.0, 750.0);',
|
||||
'uniform vec2 mapDimensions;',
|
||||
|
||||
'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;',
|
||||
' 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;',
|
||||
' mapCords *= dimensions.xy / mapDimensions;',
|
||||
|
||||
//' gl_FragColor = texture2D(displacementMap, cord);',
|
||||
// ' gl_FragColor = gl_FragColor;',
|
||||
' vec4 original = texture2D(uSampler, vTextureCoord);',
|
||||
' 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.y = this.uniforms.displacementMap.value.height;
|
||||
this.uniforms.mapDimensions.value.x = this.uniforms.mask.value.width;
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue