Shader Uniforms and Animation

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

800 × 600

GitHub

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

    preload()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.glsl('hsl', 'assets/shaders/hsl.frag');
        this.load.image('logo', 'assets/sprites/phaser3-logo-small.png');
    }

    create()
    {
        const shader = this.add.shader({
            name: 'hsl',
            fragmentKey: 'hsl',
            setupUniforms: (setUniform, drawingContext) =>
            {
                setUniform('time', this.game.loop.getDuration());
            },
        }, 400, 300, this.scale.width, this.scale.width);
        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

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.

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

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.