How to make Phaser3 GlowFilterPostFx work in an ES6 project?

Question

I'm trying to apply a dynamic glow effect to some of my Phaser3 game objects.

There's no built-in glow effect, but the framework author publishes a separate package with a bunch of plugins that includes a glow effect. There's also a codepen demo of that plugin, although that code is unusable because it relies on direct download of the plugin at runtime.

There is also a separate doc page for that plugin which enumerates the recipes a dev might choose.

I have not been able to adapt a working version from any of this. The best I can do is to have my project build and run with no visible change, and zero proof that the glow tech is even engaged. The worst is that I get a fatal runtime error as soon as I attempt to reference the glow plugin.

Here's a version based on the recipes from "Notes of Phaser 3":

import Phaser from 'phaser'
import GlowFilterPostFx from 'phaser3-rex-plugins/plugins/glowfilterpipeline.js'

new Phaser.Game({
    type: Phaser.CANVAS,
    canvas,
    width: 550, height: 400,
    scene: [SceneWithGlow],
    pipeline: [GlowFilterPostFx]
})

class SceneWithGlow extends Phaser.Scene {

    preload() {
        this.load.image('shroom', '/shroom.png')
    }

    create() {
        let shroom = this.add.image(100, 100, 'shroom')
        this.add.existing(shroom)
        
        // this version runs but has no effect
        shroom.setPostPipeline(GlowFilterPostFx)
        
        // also no effect; I have no idea this signature is correct
        shroom.setPostPipeline(GlowFilterPostFx, { intensity: 1 })

        // also has no effect, and would affect things that shouldn't glow
        this.cameras.main.setPostPipeline(GlowFilterPostFx)
        
        // this version throws `pipelineInstance is null` when .add() is called
        let pipelineInstance = this.plugins.get('rexGlowFilterPipeline')
        pipelineInstance.add(shroom)
        pipelineInstance.intensity = 1
    }

}

And here's an alternative version based on a sample from the repo that publishes the effect, which appears to a module-based version of that codepen demo:

import Phaser from 'phaser'
import GlowFilterPipelinePlugin from 'phaser3-rex-plugins/plugins/glowfilterpipeline-plugin.js'

new Phaser.Game({
    type: Phaser.CANVAS,
    canvas,
    width: 550, height: 400,
    scene: [SceneWithGlow],
    plugins: {
        global: [{
            key: 'rexGlowFilterPostFx',
            plugin: GlowFilterPipelinePlugin,
            start: true
        }]
    }
})

class SceneWithGlow extends Phaser.Scene {

    preload() {
        this.load.image('shroom', '/shroom.png')
    }

    create() {
        let shroom = this.add.image(100, 100, 'shroom')
        this.add.existing(shroom)
        
        // this version throws `pipeline is undefined` when .add() is called
        let postFxPlugin = this.plugins.get('rexGlowFilterPostFx')
        postFxPlugin.add(shroom)
        postFxPlugin.intensity = 1
    }

}

It should be possible to apply a fixed-intensity glow effect without downloading the glow tech from github at runtime.

I don't think I care whether it's registered as a "pipeline" or a "plugin." I just want it to work, and despite what appears to be an abundance of help directly from the framework creator, none of the material online can be refactored in a working version.

Answer 1

TL;DR

I added type: Phaser.WEBGL to my gameConfig and also added GlowFilterPipelinePlugin as a GLOBAL plugin.

Works like a charm.

Summary

I'm not sure if you're still looking for an answer here, but for everyone having trouble implementing this on Typescript. Here's an issue I opened on the official repo This really helps me a lot.

Here is an example of the Typescript implementation.