Jump to content

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


wenwu
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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]

 

Link to comment
Share on other sites

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)

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...