Add: Screenshot for BackdropBlurFilter

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

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];
             }