Bloom with Parallel Filters

Demonstrates how to create a custom bloom effect by processing a camera through parallel filter tracks, applying threshold and blur filters to one track, and blending it back using additive blending.

Bloom with Parallel Filters, running
1280 × 720
GitHub
class Example extends Phaser.Scene
{
    image;

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('phaser-logo', 'assets/sprites/phaser3-logo-x2.png');
    }

    create ()
    {
        const image = this.add.image(640, 360, 'phaser-logo');

        const text = this.add.text(640, 500, 'Bloom with Parallel Filters', { font: '32px Arial', fill: '#88ffff' }).setOrigin(0.5);

        const parallelFilters = this.cameras.main.filters.internal.addParallelFilters();
        parallelFilters.top.addThreshold(0.5, 1);
        parallelFilters.top.addBlur();
        parallelFilters.blend.blendMode = Phaser.BlendModes.ADD;
        parallelFilters.blend.amount = 0;

        // Alternatively, instead of creating parallelFilters,
        // use Actions.AddEffectBloom:
        // const { parallelFilters } = Phaser.Actions.AddEffectBloom(this.cameras.main, { blendAmount: 0 });

        this.tweens.add({
            targets: parallelFilters.blend,
            amount: 2,
            duration: 1000,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'
        });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    width: 1280,
    height: 720,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Filters14 examples