wenwu Posted February 12, 2019 Share Posted February 12, 2019 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) Quote Link to comment Share on other sites More sharing options...
Exca Posted February 12, 2019 Share Posted February 12, 2019 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. Quote Link to comment Share on other sites More sharing options...
jonforum Posted February 12, 2019 Share Posted February 12, 2019 sprite.filterArea = new PIXI.Rectangle(x,y,w,h); Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 12, 2019 Share Posted February 12, 2019 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. wenwu 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 12, 2019 Share Posted February 12, 2019 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? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 12, 2019 Share Posted February 12, 2019 Alternativelyif your background is just one sprite, make another one, apply a filter and specify filterArea at the right top Quote Link to comment Share on other sites More sharing options...
wenwu Posted February 13, 2019 Author Share Posted February 13, 2019 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. Quote Link to comment Share on other sites More sharing options...
wenwu Posted February 13, 2019 Author Share Posted February 13, 2019 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? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 13, 2019 Share Posted February 13, 2019 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 13, 2019 Share Posted February 13, 2019 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 13, 2019 Share Posted February 13, 2019 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 and jonforum 1 1 Quote Link to comment Share on other sites More sharing options...
wenwu Posted February 14, 2019 Author Share Posted February 14, 2019 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 14, 2019 Share Posted February 14, 2019 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] Quote Link to comment Share on other sites More sharing options...
wenwu Posted February 18, 2019 Author Share Posted February 18, 2019 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) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.