Merge branch 'main' into bugfix/shock-wave-filter

Author: bigtimebuddy

README.md

@@ -39,6 +39,7 @@ If all else failes, you can manually download the bundled file from the [release
 | **AdjustmentFilter**<br>_pixi-filters/adjustment_<br>[View demo][Adjustment_demo]                        | ![adjustment](https://filters.pixijs.download/main/screenshots/adjustment.png?v=3)                   |
 | **AdvancedBloomFilter**<br>_pixi-filters/advanced-bloom_<br>[View demo][AdvancedBloom_demo]              | ![advanced-bloom](https://filters.pixijs.download/main/screenshots/advanced-bloom.png?v=3)           |
 | **AsciiFilter**<br>_pixi-filters/ascii_<br>[View demo][Ascii_demo]                                       | ![ascii](https://filters.pixijs.download/main/screenshots/ascii.png?v=3)                             |
+| **BackdropBlurFilter**<br>_pixi-filters/backdrop-blur_<br>[View demo][BackdropBlur_demo]                 | ![backdrop-blur](https://filters.pixijs.download/main/screenshots/backdrop-blur.png?v=3)                             |
 | **BevelFilter**<br>_pixi-filters/bevel_<br>[View demo][Bevel_demo]                                       | ![bevel](https://filters.pixijs.download/main/screenshots/bevel.png?v=3)                             |
 | **BloomFilter**<br>_pixi-filters/bloom_<br>[View demo][Bloom_demo]                                       | ![bloom](https://filters.pixijs.download/main/screenshots/bloom.png?v=3)                             |
 | **BulgePinchFilter**<br>_pixi-filters/bulge-pinch_<br>[View demo][BulgePinch_demo]                       | ![bulge-pinch](https://filters.pixijs.download/main/screenshots/bulge-pinch.gif?v=3)                 |
@@ -120,6 +121,7 @@ API documention can be found [here](http://pixijs.io/filters/docs/).
 [Adjustment_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdjustmentFilter
 [AdvancedBloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdvancedBloomFilter
 [Ascii_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AsciiFilter
+[BackdropBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BackdropBlurFilter
 [Bevel_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BevelFilter
 [Bloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BloomFilter
 [BulgePinch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BulgePinchFilter

examples/src/DemoApplication.mjs

@@ -71,6 +71,7 @@ export default class DemoApplication extends PIXI.Application
             height: this.initHeight,
             autoStart: false,
             preference,
+            useBackBuffer: true,
         });
     }
 
@@ -96,7 +97,6 @@ export default class DemoApplication extends PIXI.Application
         // Setup the container
         this.pond = new PIXI.Container();
         this.pond.filterArea = this.filterArea;
-        this.pond.filters = this.pondFilters;
         this.stage.addChild(this.pond);
 
         // Setup the background image
@@ -208,8 +208,6 @@ export default class DemoApplication extends PIXI.Application
 
         this.events.emit('animate', delta, animateTimer);
 
-        this.pond.filters = this.pondFilters;
-
         if (!this.animating)
         {
             return;
@@ -224,7 +222,6 @@ export default class DemoApplication extends PIXI.Application
             const fish = this.fishes[i];
 
             fish.direction += fish.turnSpeed * 0.01;
-            fish.filters = this.fishFilters;
             fish.x += Math.sin(fish.direction) * fish.speed;
             fish.y += Math.cos(fish.direction) * fish.speed;
 
@@ -302,28 +299,45 @@ export default class DemoApplication extends PIXI.Application
         // https://github.com/orgs/pixijs/projects/2/views/4?pane=issue&itemId=48582986
         const toggleFilter = (enabled) =>
         {
-            if (enabled)
+            if (options.fishOnly)
             {
-                if (options.fishOnly)
+                const fishFilters = [...this.fishFilters];
+
+                if (enabled)
                 {
-                    this.fishFilters.push(filter);
+                    fishFilters.push(filter);
                 }
                 else
                 {
-                    this.pondFilters.push(filter);
-                }
-            }
-            else if (options.fishOnly)
-            {
-                const index = this.fishFilters.indexOf(filter);
+                    const index = fishFilters.indexOf(filter);
 
-                if (index !== -1) this.fishFilters.splice(index, 1);
+                    if (index !== -1) fishFilters.splice(index, 1);
+                }
+                this.fishFilters = fishFilters;
+                this.fishes.forEach((fish) =>
+                {
+                    fish.filters = fishFilters;
+                });
             }
             else
             {
-                const index = this.pondFilters.indexOf(filter);
+                const pondFilters = [...this.pondFilters];
+
+                if (enabled)
+                {
+                    pondFilters.push(filter);
+                }
+                else
+                {
+                    const index = pondFilters.indexOf(filter);
+
+                    if (index !== -1) pondFilters.splice(index, 1);
+                }
 
-                if (index !== -1) this.pondFilters.splice(index, 1);
+                this.pondFilters = pondFilters;
+                // TODO: seems like a bug, requiring invalidation
+                this.pond.filters = [];
+                this.pond.filters = pondFilters;
             }
         };
 

examples/src/filters/backdropBlur.mjs

@@ -0,0 +1,11 @@
+export default function ()
+{
+    this.addFilter('BackdropBlurFilter', {
+        fishOnly: true,
+        oncreate(folder)
+        {
+            folder.add(this, 'blur', 0, 100);
+            folder.add(this, 'quality', 1, 10);
+        },
+    });
+}

examples/src/filters/index.mjs

@@ -4,6 +4,7 @@ export { default as adjustment } from './adjustment.mjs';
 export { default as advancedBloom } from './advanced-bloom.mjs';
 export { default as alpha } from './alpha.mjs';
 export { default as ascii } from './ascii.mjs';
+export { default as backdropBlur } from './backdropBlur.mjs';
 export { default as bevel } from './bevel.mjs';
 export { default as bloom } from './bloom.mjs';
 export { default as blur } from './blur.mjs';

scripts/screenshots/config.json

@@ -572,6 +572,18 @@
                 ],
                 "alpha": 0.8
             }
+        },
+        {
+            "name": "BackdropBlurFilter",
+            "filename": "backdrop-blur",
+            "overlayOnly": true,
+            "overlayOptions": {
+                "alpha": 0.2,
+                "tint": "white"
+            },
+            "arguments": {
+                "strength": 4
+            }
         }
     ]
 }

scripts/screenshots/index.html

@@ -19,6 +19,9 @@
         display: grid;
         grid-template-columns: repeat(4, 1fr);
       }
+      body.only {
+        display: block;
+      }
       img, canvas {
         width: 100%;
         display: block;

scripts/screenshots/renderer.js

@@ -1,4 +1,4 @@
-const { Application, Assets, Container, Sprite, ...PIXI } = require('pixi.js');
+const { Application, Assets, Container, Sprite, Texture, ...PIXI } = require('pixi.js');
 const filters = require('../../lib');
 const assert = require('assert');
 const config = require('./config.json');
@@ -19,8 +19,6 @@ const outputOptions = {
     },
 };
 
-const indexCount = 0;
-
 const app = new Application();
 
 app.init({
@@ -29,6 +27,7 @@ app.init({
     backgroundColor: outputOptions.border.color,
     autoStart: false,
     preference: 'webgpu',
+    useBackBuffer: true,
     hello: true,
 }).then(() =>
 {
@@ -44,6 +43,7 @@ app.init({
     let preview;
     let bg;
     let fishes;
+    let overlay;
     let displacement;
     let lightmap;
     let colormap;
@@ -65,20 +65,39 @@ app.init({
 
         fishes = new Sprite(resources.previewFishes);
         bg = new Sprite(resources.previewBackground);
+        overlay = new Sprite(Texture.WHITE);
 
         fishes.scale.set(outputOptions.width / sourceAssetSize.width);
         bg.scale.set(outputOptions.width / sourceAssetSize.width);
+        overlay.setSize(outputOptions.width - 60, outputOptions.height - 60);
+        overlay.filterArea = new PIXI.Rectangle(
+            -overlay.width / 2,
+            -overlay.height / 2,
+            overlay.width,
+            overlay.height,
+        );
+        overlay.anchor.set(0.5);
+        overlay.x = outputOptions.width / 2;
+        overlay.y = outputOptions.height / 2;
 
         preview = new Container();
-        preview.addChild(bg, fishes);
+        preview.addChild(bg, fishes, overlay);
 
         app.stage.addChild(preview);
         next();
     });
 
+    const onlyImages = config.images.filter((obj) => obj.only);
+    const images = onlyImages.length ? onlyImages : config.images;
+
+    if (onlyImages.length)
+    {
+        document.body.classList.add('only');
+    }
+
     async function next()
     {
-        const obj = config.images[++index];
+        const obj = images[++index];
 
         if (obj)
         {
@@ -130,10 +149,18 @@ app.init({
             }
 
             // Render the filter
-            fishes.filters = [];
-            preview.filters = [];
+            fishes.filters = null;
+            preview.filters = null;
+            overlay.filters = null;
+            overlay.visible = false;
 
-            if (obj.fishOnly)
+            if (obj.overlayOnly)
+            {
+                overlay.filters = [filter];
+                overlay.visible = true;
+                Object.assign(overlay, obj.overlayOptions);
+            }
+            else if (obj.fishOnly)
             {
                 fishes.filters = [filter];
             }

src/backdrop-blur/BackdropBlurFilter.ts

@@ -0,0 +1,93 @@
+import {
+    BlurFilter,
+    BlurFilterOptions,
+    Filter,
+    FilterSystem,
+    GlProgram,
+    GpuProgram,
+    RenderSurface,
+    Texture,
+    TexturePool,
+} from 'pixi.js';
+import { vertex, wgslVertex } from '../defaults';
+import fragment from './backdrop-blur-blend.frag';
+import wgslFragment from './backdrop-blur-blend.wgsl';
+
+export type BackdropBlurFilterOptions = BlurFilterOptions;
+
+/**
+ * The BackdropBlurFilter applies a Gaussian blur to everything behind an object, and then draws the object on top of it.
+ *
+ * @class
+ * @extends BlurFilter
+ * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters}
+ */
+export class BackdropBlurFilter extends BlurFilter
+{
+    private _blendPass: Filter;
+
+    /**
+     * @param options - The options of the blur filter.
+     * @param options.strength - The strength of the blur filter.
+     * @param options.quality - The quality of the blur filter.
+     * @param options.kernelSize - The kernelSize of the blur filter.Options: 5, 7, 9, 11, 13, 15.
+     */
+    constructor(options?: BackdropBlurFilterOptions)
+    {
+        super(options);
+
+        this.blendRequired = true;
+        this.padding = 0;
+
+        this._blendPass = new Filter({
+            gpuProgram: GpuProgram.from({
+                vertex: {
+                    source: wgslVertex,
+                    entryPoint: 'mainVertex',
+                },
+                fragment: {
+                    source: wgslFragment,
+                    entryPoint: 'mainFragment',
+                },
+            }),
+            glProgram: GlProgram.from({
+                vertex,
+                fragment,
+                name: 'drop-shadow-filter',
+            }),
+            resources: {
+                uBackground: Texture.EMPTY,
+            },
+        });
+    }
+
+    /**
+     * Override existing apply method in `Filter`
+     * @override
+     * @ignore
+     */
+    public apply(
+        filterManager: FilterSystem,
+        input: Texture,
+        output: RenderSurface,
+        clearMode: boolean
+    ): void
+    {
+        // @ts-expect-error - this should probably not be grabbed from a private property
+        const backTexture = filterManager._activeFilterData.backTexture;
+
+        const blurredBackground = TexturePool.getSameSizeTexture(input);
+
+        super.apply(filterManager, backTexture, blurredBackground, true);
+
+        this._blendPass.resources.uBackground = blurredBackground.source;
+        this._blendPass.apply(filterManager, input, output, clearMode);
+
+        TexturePool.returnTexture(blurredBackground);
+    }
+
+    protected updatePadding(): void
+    {
+        this.padding = 0;
+    }
+}

src/backdrop-blur/backdrop-blur-blend.frag

@@ -0,0 +1,19 @@
+precision highp float;
+in vec2 vTextureCoord;
+out vec4 finalColor;
+
+uniform sampler2D uTexture;
+uniform sampler2D uBackground;
+
+void main(void){
+    vec4 front = texture(uTexture, vTextureCoord);
+    vec4 back = texture(uBackground, vTextureCoord);
+
+    if (front.a == 0.0) {
+        discard;
+    }
+    
+    vec3 color = mix(back.rgb, front.rgb / front.a, front.a);
+
+    finalColor = vec4(color, 1.0);
+}

src/backdrop-blur/backdrop-blur-blend.wgsl

@@ -0,0 +1,20 @@
+@group(0) @binding(1) var uTexture: texture_2d<f32>; 
+@group(0) @binding(2) var uSampler: sampler;
+@group(1) @binding(0) var uBackground: texture_2d<f32>; 
+
+@fragment
+fn mainFragment(
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv : vec2<f32>
+) -> @location(0) vec4<f32> {
+    var front: vec4<f32> = textureSample(uTexture, uSampler, uv);
+    var back: vec4<f32> = textureSample(uBackground, uSampler, uv);
+    
+    if (front.a == 0.0) {
+        discard;
+    }
+
+    var color: vec3<f32> = mix(back.rgb, front.rgb / front.a, front.a);
+
+    return vec4<f32>(color, 1.0);
+}

src/backdrop-blur/index.ts

@@ -0,0 +1 @@
+export * from './BackdropBlurFilter';

src/index.ts

@@ -1,6 +1,7 @@
 export * from './adjustment';
 export * from './advanced-bloom';
 export * from './ascii';
+export * from './backdrop-blur';
 export * from './bevel';
 export * from './bloom';
 export * from './bulge-pinch';