From 1a956f5e446a75bc2590793b4a7be2791ddeabae Mon Sep 17 00:00:00 2001 From: Matt Karl Date: Wed, 6 Mar 2024 19:38:32 -0500 Subject: [PATCH] Add: Screenshot for BackdropBlurFilter --- README.md | 2 ++ scripts/screenshots/config.json | 12 +++++++++ scripts/screenshots/index.html | 3 +++ scripts/screenshots/renderer.js | 43 +++++++++++++++++++++++++++------ 4 files changed, 52 insertions(+), 8 deletions(-) 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]; }