GLSL Shader with Camera Mask

Demonstrates applying a GLSL fragment shader to the background with real-time uniform updates while using internal camera filters to add a grunge mask effect.

800 × 600

GitHub

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

    preload()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.glsl('machineshaman', 'assets/shaders/machine-shaman.frag');
        this.load.image('logo', 'assets/sprites/phaser3-logo-small.png');
        this.load.image('mask', 'assets/tests/camera/grunge-mask.png');
    }

    create()
    {
        this.cameras.main.filters.internal.addMask('mask');

        this.add.shader({
            name: 'machineshaman',
            fragmentKey: 'machineshaman',
            setupUniforms: (setUniform, drawingContext) => {
                setUniform('time', this.game.loop.getDuration());
            },
        }, 400, 300, 800, 800);

        this.add.image(400, 300, 'logo');
    }
}

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

const game = new Phaser.Game(config);

More in Shaders5 examples

Loading and Manipulating ShadersDemonstrates how to load GLSL fragment shaders, pass uniforms from the game loop, and treat shader objects as GameObjects that can be tweened, scaled, and moved via input.

Shader and Camera MaskingDemonstrates applying different masks to both the main camera and an individual shader object simultaneously, while passing time uniforms to the fragment shader.

Shader Uniforms and AnimationDemonstrates how to load a custom fragment shader and pass dynamic data, such as time, to it using the setupUniforms callback.

Shader with Bitmap MaskDemonstrates applying an image-based bitmap mask to a shader. The example features a dynamic fragment shader that follows the mouse pointer while being constrained to the shape of a mask.