How to make PixelateFilter take effects in a specific area of a PIXI.Sprite?

[wenwu]

I have a huge sprite that contains many sub sprites, I want to add mosaic to a specific area of this sprite. I have tried the PixelateFilter but it takes effect on the whole sprite.

The attachment is what I want (see top-right corner)

[Exca]

Set the filterArea property of that sprite to apply filter only to given area.

Though that makes it so that the only area visible is the area where filter is drawn. One option to prevent that would be to have 2 sprites, one with filter and another one without. Or render a separate texture of the sprite from the wanted region and then blur that and add that blurred part on top of sprite. Or you could adjust the way how pixi works with filterarea.

To the latest part I dont know for sure how it would be done.

[jonforum]

sprite.filterArea = new PIXI.Rectangle(x,y,w,h);

[ivan.popelyshev]

This plugin allows to create filters that affect only certain area of BACKGROUND, that is under that container: https://github.com/pixijs/pixi-picture

Demo:  https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js

You can enable that for pixelateFilter if you specify " filter.backdropUniformName='uSampler' "  .  Put that filter on a fake sprite that will cover that corner, sprite can be obtained by " sprite = new PIXI.Sprite(PIXI.Texture.WHITE); sprite.width = 100; sprite.height = 100; "

I'll try it in a few minutes and confirm if it works.

 

[ivan.popelyshev]

Nope, it doesnt work. I'm afraid you have to fix the plugin itself or modify PixelateFilter that way it has another uniform for backdrop. Can you do that, or should I do it?

[ivan.popelyshev]

Alternativelyif your background is just one sprite, make another one, apply a filter and specify filterArea at the right top

[wenwu]

5 hours ago, ivan.popelyshev said:

Alternativelyif your background is just one sprite, make another one, apply a filter and specify filterArea at the right top

It's a huge sprite that contains many sub sprites, so it's not easy to make a copy of it.

[wenwu]

6 hours ago, ivan.popelyshev said:

Nope, it doesnt work. I'm afraid you have to fix the plugin itself or modify PixelateFilter that way it has another uniform for backdrop. Can you do that, or should I do it?

I think change the PixelateFilter should work, just like the displacement map that only affects the area same as displacementSprite. But I don't have any relevant knowledge about GLSL, so could please help me out?

[ivan.popelyshev]

Filter code: https://github.com/pixijs/pixi-filters/blob/master/filters/pixelate/src/PixelateFilter.js

Frag shader: https://github.com/pixijs/pixi-filters/blob/master/filters/pixelate/src/pixelate.frag , put it instead of FRAGMENT param in filter. 

You don't need VERTEX param, pass undefined there, pixi has default vertex shader.

Now, the idea is that we need extra sampler, uBackdropSampler, and we should specify it both in frag shader and in constructor:

super( undefined, myFragmentShaderCode, {
    uBackdropSampler: PIXI.Texture.WHITE.baseTexture // default value, just a pure baseTexture, nothing special, we dont use it
} );

this.backdropUniformName = 'uBackdropSampler';

That should work with pixi-picture plugin, of course you need to include it just after pixi.js. 

Also, we can use defualt uSampler to get alpha of whatever you mask that way it pixelates stuff only when alpha is not zero.. OK, I know I want to do it right now, wait a few minutes.

 

[ivan.popelyshev]

Hm, its not that easy, backdrop has different size than uSampler.. a few more minutes  I think I'll make article based on that hack after we test it.

UPDATE: false alarm, its easy as i thought, give me two more minutes.

[ivan.popelyshev]

PixelateFilter example: https://www.pixiplayground.com/#/edit/Co68RDM9MbIf5lqcsAjHP

OK, what did I do.

1. put PixelateFilter in the example

2. add backdropSampler, that'll be our background, and take color from it , not from the uSampler

3. take only alpha channel of uSampler, without pixelation , multiply result by it

4. in renderer constructor manually specify two uniforms - backdropSampler, and size. pixi-picture doesn't work if we dont specify it manually

5. put a fullscreen filter on stage. pixi-picture requires that background is rendered inside a framebuffer, i mean Filter or RenderTexture, otherwise "copySubTexImage2D" wont work.

[wenwu]

15 hours ago, ivan.popelyshev said:

PixelateFilter example: https://www.pixiplayground.com/#/edit/Co68RDM9MbIf5lqcsAjHP

OK, what did I do.

1. put PixelateFilter in the example

2. add backdropSampler, that'll be our background, and take color from it , not from the uSampler

3. take only alpha channel of uSampler, without pixelation , multiply result by it

4. in renderer constructor manually specify two uniforms - backdropSampler, and size. pixi-picture doesn't work if we dont specify it manually

5. put a fullscreen filter on stage. pixi-picture requires that background is rendered inside a framebuffer, i mean Filter or RenderTexture, otherwise "copySubTexImage2D" wont work.

Solved perfectly! Thanks man!

And, I want to do the same thing with KawaseBlurFilter, then I modified it according your example but it doesn't work as my expected. Could you please take a look for me?

My code here: https://www.pixiplayground.com/#/edit/QJmhXecEMr3eysCC63keg

[ivan.popelyshev]

Kawase is multi-pass filter, swap textures magic breaks everything. 

For that kind of filter we need actually secondary mask filter that deals with backdrop - apply mask before or after kawase, we dont need to modify kawase fragment shader at all. I'll make the demo later.

You can try to do it yourself - make a very stupid filter that takes backdrop and just multiplies it by sampler alpha, like pixelate one but no pixelate() at all. Take Kawase as second

spriteFilters = [myStupidMask, kawase]

 

[wenwu]

On 2/14/2019 at 4:26 PM, ivan.popelyshev said:

Kawase is multi-pass filter, swap textures magic breaks everything. 

For that kind of filter we need actually secondary mask filter that deals with backdrop - apply mask before or after kawase, we dont need to modify kawase fragment shader at all. I'll make the demo later.

You can try to do it yourself - make a very stupid filter that takes backdrop and just multiplies it by sampler alpha, like pixelate one but no pixelate() at all. Take Kawase as second

spriteFilters = [myStupidMask, kawase]

 

It works!

Online demo here: https://codepen.io/WenWu92/pen/aXPLjE (pixiplayground cannot save with a 500 error)