filters
filters copied to clipboard
pixijs
Add backdrop blur filter
Adds a backdrop blur filter which will blur the background behind an object and then draw the object on top of it, creating a frosted glass-like look.
The filter tries to reuse as much of the original BlurFilter as possible. Currently it needs to access a private field of FilterSystem to get ahold fo the backTexture, so a change in pixi.js exposing the backTexture as public is probably required.
For the demo, this filter relies on the objects being transparent, so it won't have an effect without lowering the fish' alpha. Also missing a screenshot config for the docs currently since that relies on the transparent fish.
blendRequired in combination with padding will currently crash the webgpu renderer, so I'm setting padding to 0 right now, once that's fixed that can be removed.
The final blend probably needs some adjustments, I'm pretty sure it won't work with a transparent background currently. The final blend pass uses the input texture as a mask, discarding every pixel with an alpha of 0, there may be a better way of doing that.
The only other missing piece is adding a screenshot (see ./scripts/screenshots/) and adding it to the Readme. These are useful thumbnails in the docs too. If you don't want to do that, I can add it later.
I'm not entirely sure on how to do the screenshots since I need the fish to be transparent for the filter to show up. Should I add an extra config option to the screenshots script to lower the opacity?
Yeah, I think we need to add some other option to the screenshots that involves adding another surface on-top. Maybe just drawing a circle or something and adding the filter to that.
@minetoblend thanks for this. I was messing around with this filter and noticed something interesting. For rectangular shapes, it creates this inner drop-shadow. I did not expect that here.
https://jsfiddle.net/bigtimebuddy/wjkd8gra/
Applying a filterArea seems to help: https://jsfiddle.net/bigtimebuddy/nshq51v6/
Weirdest timing 😆 https://github.com/pixijs/pixijs/discussions/10201#discussioncomment-8430078
