Bloom Filter

[Squize]

Hey everyone,

 

Here's a pre-v3 bloom filter for pixi.

/** * @author Squize http://gamingyourway.com/ @GamingYourWay * Based, naturally enough, on code by Mat Groves http://matgroves.com/ @Doormat23 * v1.1 11/1/15 - Fixed bug with setting the blur values *//** * Creates a bloom type effect. The filter doesn't work "in place", it requires a duplicate * display object to be placed above the object you wish to have the bloom effect on * * @usage *      var mySprite=new PIXI.Sprite.fromFrame("yourSexySprite"); *      stage.addChild(mySprite); * *      var myBloomySprite=new PIXI.Sprite.fromFrame("yourSexySprite"); *      var bloom=new PIXI.BloomFilter(); *      bloom.threshold=0.2;     //Defaults to 0.5 *      myBloomySprite.filters=[bloom]; *      stage.addChild(myBloomySprite); * * @class BloomFilter * @extends AbstractFilter * @constructor */PIXI.BloomFilter = function(){    PIXI.AbstractFilter.call( this );    this.blurXFilter = new PIXI.BlurXFilter();    this.blurYFilter = new PIXI.BlurYFilter();    //3 passes, which may be costly for large textures    this.passes = [this,this.blurXFilter, this.blurYFilter];    // set the uniforms    this.uniforms = {        threshold: {type: '1f', value: 0.5}    };    this.fragmentSrc = [        'precision mediump float;',        'varying vec2 vTextureCoord;',        'varying vec4 vColor;',        'uniform sampler2D uSampler;',        'uniform float threshold;',        'void main(void) {',        '   vec4 colour = texture2D(uSampler, vTextureCoord);',        '   colour.rgb = mix(colour.rgb, vec3(0.2126*colour.r + 0.7152*colour.g + 0.0722*colour., 1.0);',        '   if(colour.r>=threshold) {',        '       gl_FragColor = vec4 (1,1,1,1);',        '   } else {',        '       discard;',        '   }',        '}'    ];};PIXI.BloomFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );PIXI.BloomFilter.prototype.constructor = PIXI.BloomFilter;/** * The strength of the threshold for the effect. * * @property threshold * @type Number * @default 0.5 */Object.defineProperty(PIXI.BloomFilter.prototype, 'threshold', {    get: function() {        return this.uniforms.threshold.value;    },    set: function(value) {        this.uniforms.threshold.value = value;    }});/** * Sets the strength of both the blurX and blurY properties simultaneously * * @property blur * @type Number * @default 2 */Object.defineProperty(PIXI.BloomFilter.prototype, 'blur', {    get: function() {        return this.blurXFilter.blur;    },    set: function(value) {        this.blurXFilter.blur = this.blurYFilter.blur = value;    }});/** * Sets the strength of the blurX property * * @property blurX * @type Number * @default 2 */Object.defineProperty(PIXI.BloomFilter.prototype, 'blurX', {    get: function() {        return this.blurXFilter.blur;    },    set: function(value) {        this.blurXFilter.blur = value;    }});/** * Sets the strength of the blurY property * * @property blurY * @type Number * @default 2 */Object.defineProperty(PIXI.BloomFilter.prototype, 'blurY', {    get: function() {        return this.blurYFilter.blur;    },    set: function(value) {        this.blurYFilter.blur = value;    }});

It should be simple enough to play with and have a tinker. Basically it runs a simple threshold test, any value above that ( Default is 0.5 ) it outputs as pure white.

After that it calls the standard blur filter to soften it all out.

 

It is destructive, so it's akin to using the knockout setting in Flash filters. Say for example you want to run it on your games logo, you'd need to create a duplicate sprite and add it on a higher depth then add the filter to that.

 

Hope it some use,

 

Squize.