diff --git a/README.md b/README.md
index 3999d5892..2e1e9e443 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,7 @@ If all else failes, you can manually download the bundled file from the [release
| **AdjustmentFilter**
_pixi-filters/adjustment_
[View demo][Adjustment_demo] | ![adjustment](https://filters.pixijs.download/main/screenshots/adjustment.png?v=3) |
| **AdvancedBloomFilter**
_pixi-filters/advanced-bloom_
[View demo][AdvancedBloom_demo] | ![advanced-bloom](https://filters.pixijs.download/main/screenshots/advanced-bloom.png?v=3) |
| **AsciiFilter**
_pixi-filters/ascii_
[View demo][Ascii_demo] | ![ascii](https://filters.pixijs.download/main/screenshots/ascii.png?v=3) |
+| **BackdropBlurFilter**
_pixi-filters/backdrop-blur_
[View demo][BackdropBlur_demo] | ![backdrop-blur](https://filters.pixijs.download/main/screenshots/backdrop-blur.png?v=3) |
| **BevelFilter**
_pixi-filters/bevel_
[View demo][Bevel_demo] | ![bevel](https://filters.pixijs.download/main/screenshots/bevel.png?v=3) |
| **BloomFilter**
_pixi-filters/bloom_
[View demo][Bloom_demo] | ![bloom](https://filters.pixijs.download/main/screenshots/bloom.png?v=3) |
| **BulgePinchFilter**
_pixi-filters/bulge-pinch_
[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
diff --git a/scripts/screenshots/config.json b/scripts/screenshots/config.json
index 16ee0885b..7be193344 100644
--- a/scripts/screenshots/config.json
+++ b/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
+ }
}
]
}
diff --git a/scripts/screenshots/index.html b/scripts/screenshots/index.html
index f8382b971..832c2bd9b 100644
--- a/scripts/screenshots/index.html
+++ b/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;
diff --git a/scripts/screenshots/renderer.js b/scripts/screenshots/renderer.js
index 288449770..df6f00b08 100644
--- a/scripts/screenshots/renderer.js
+++ b/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];
}