Bad performance of PostFXPipeline on tilemap layers

Phaser 3
1

I’ve been struggling with bad PostFXPipeline performance on a tilemap’s layer.
It tanks my (and player’s) FPS when enabled.
Even if the pipeline does nothing but return the texture, it drops it by 30-50%; some players even reporting a 80% drop in FPS.

I think the issue lies with tilemap layers itself though, as I’ve tried it with a pipeline that does nothing but forward the texture2D and saw no notable improvements.

To further make sure it’s not specific to my pipeline, I’ve adjusted one of the Phaser PostFX pipeline examples.

I included an FPS counter and you can switch between no pipeline, tilemap layer pipeline and 100 images with a pipeline by clicking.
The single layer pipeline performs worse than the 100 images with pipelines.

// #module

import PlasmaPostFX from './assets/pipelines/PlasmaPostFX.js';

export default class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.image('tiles', 'assets/tilemaps/tiles/drawtiles-spaced.png');
        this.load.image('car', 'assets/sprites/car90.png');
        this.load.tilemapCSV('map', 'assets/tilemaps/csv/grid.csv');
    }

    create ()
    {
        this.fps = this.add.text(0, 0, '').setDepth(3);

        const map = this.make.tilemap({ key: 'map', tileWidth: 32, tileHeight: 32 });
        const tileset = map.addTilesetImage('tiles', null, 32, 32, 1, 2);
        const layer = map.createLayer(0, tileset, 0, 0);

        const cars = [];
        
        for (let x = 1; x <= 10; x++) {
            for (let y = 1; y <= 10; y++) {
                cars.push(this.add.image(x * 30, y * 30, 'car'));
            }
        }

        this.state = 0;

        this.input.on('pointerdown', () => {
            this.state = (this.state + 1) % 3;

            switch(this.state) {
                case 0: {
                    layer.removePostPipeline(PlasmaPostFX);
                    cars.forEach((car) => car.removePostPipeline(PlasmaPostFX));
                    break;
                }
                case 1: {
                    layer.setPostPipeline(PlasmaPostFX);
                    cars.forEach((car) => car.removePostPipeline(PlasmaPostFX));
                    break;
                }
                case 2: {
                    layer.removePostPipeline(PlasmaPostFX);
                    cars.forEach((car) => car.setPostPipeline(PlasmaPostFX));
                    break;
                }
            }
        });
    }

    update()
    {
        this.fps.setText('' + Math.floor(this.game.loop.actualFps));
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#1a1a2d',
    parent: 'phaser-example',
    scene: Example,
    pipeline: {  PlasmaPostFX }
};

let game = new Phaser.Game(config);

I’m fairly new to Phaser, so if someone could tell me what I’m doing wrong, or how I could improve performance here, I’d be delighted.

Thanks.

2

I think it’s similar on tilemap/tilelayer pipeline.

3

Yes, that’s the one I based my example on.