Added inverted alpha to bitmap mask

This commit is contained in:
Felipe Alfonso 2018-02-23 14:09:27 -03:00
parent e0b85dd3f2
commit 9dbb4db4c6
4 changed files with 35 additions and 5 deletions

View file

@ -89,7 +89,7 @@ var BitmapMask = new Class({
* [description]
*
* @name Phaser.Display.Masks.BitmapMask#mainFramebuffer
* @type {[type]}
* @type {WebGLFramebuffer}
* @since 3.0.0
*/
this.mainFramebuffer = null;
@ -98,11 +98,20 @@ var BitmapMask = new Class({
* [description]
*
* @name Phaser.Display.Masks.BitmapMask#maskFramebuffer
* @type {[type]}
* @type {WebGLFramebuffer}
* @since 3.0.0
*/
this.maskFramebuffer = null;
/**
* [description]
*
* @name Phaser.Display.Masks.BitmapMask#invertAlpha
* @type {boolean}
* @since 3.1.2
*/
this.invertAlpha = false;
if (renderer.gl)
{
var width = renderer.width;

View file

@ -1,7 +1,16 @@
var RenderTextureWebGL = {
fill: function (color)
fill: function (rgb)
{
var ur = ((rgb >> 16)|0) & 0xff;
var ug = ((rgb >> 8)|0) & 0xff;
var ub = (rgb|0) & 0xff;
this.renderer.setFramebuffer(this.framebuffer);
var gl = this.gl;
gl.clearColor(ur / 255.0, ug / 255.0, ub / 255.0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
this.renderer.setFramebuffer(null);
return this;
},

View file

@ -194,6 +194,7 @@ var BitmapMaskPipeline = new Class({
renderer.setTexture2D(mask.maskTexture, 1);
renderer.setTexture2D(mask.mainTexture, 0);
renderer.setInt1(this.program, 'uInvertMaskAlpha', mask.invertAlpha);
// Finally draw a triangle filling the whole screen
gl.drawArrays(this.topology, 0, 3);

View file

@ -5,12 +5,23 @@ precision mediump float;
uniform vec2 uResolution;
uniform sampler2D uMainSampler;
uniform sampler2D uMaskSampler;
uniform bool uInvertMaskAlpha;
void main()
{
vec2 uv = gl_FragCoord.xy / uResolution;
vec4 mainColor = texture2D(uMainSampler, uv);
vec4 maskColor = texture2D(uMaskSampler, uv);
float alpha = maskColor.a * mainColor.a;
float alpha = mainColor.a;
if (!uInvertMaskAlpha)
{
alpha *= (maskColor.a);
}
else
{
alpha *= (1.0 - maskColor.a);
}
gl_FragColor = vec4(mainColor.rgb * alpha, alpha);
}