jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Fixed final ie11 webGL masking issue

Browse source 
removed IE11 check in auto detect function
Added AlphaMaskFilter
This commit is contained in:
Mat Groves 2014-01-08 23:55:17 +00:00
parent c613ee2ae6
commit 68c476da25
6 changed files with 126 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

102
bin/pixi.dev.js
View file

@ -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
*/