Load Shader

Learn how to load an external GLSL fragment shader file and display it in your scene using a Shader Game Object.

800 × 600

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.glsl('fireball', 'assets/shaders/shader0.frag');
    }

    create ()
    {
        this.add.shader('fireball', 400, 300, 800, 600);
    }
}

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 Shaders15 examples

Render Shader to TextureDemonstrates how to render a fragment shader directly to a texture, which can then be used by standard Game Objects like Images and Sprites throughout your scene.

Setting Shader UniformsDemonstrates how to define custom uniform variables within a BaseShader and update their values at runtime using the setUniform method.

Shader Arcade PhysicsThis example demonstrates how to apply Arcade Physics to Shader Game Objects, including dynamic bodies with velocity and bounce, as well as static body collisions.

Shader as a MaskDemonstrates how to use a custom GLSL shader as a dynamic mask for an image. It shows how to create a shader object and apply it to a Game Object through the filters system to create animated masking effects.