Jump to content

Bloom Filter


Squize
 Share

Recommended Posts

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...