Linear Gradient Shader

Demonstrates creating a linear gradient using the Shader Game Object by composing multiple GLSL fragments and configuring uniforms for positions, colors, and step counts.

1280 × 720

GitHub

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('touhou', 'assets/pics/touhou1.png');

        this.load.glsl('gradient-color', 'assets/shaders/gradients/gradient-color.glsl');
        this.load.glsl('gradient-process', 'assets/shaders/gradients/gradient-process.glsl');
        this.load.glsl('srgb', 'assets/shaders/gradients/srgb-color.glsl');
        this.load.glsl('value-linear', 'assets/shaders/gradients/value-linear.glsl');
    }

    create ()
    {
        const getSource = (key) => this.cache.shader.get(key).glsl;
        const gradientShader = this.add.shader(
            {
                name: 'Gradient',
                shaderAdditions: [
                    // This addition controls a linear gradient.
                    // It must be defined in the shader before the gradient function is called.
                    {
                        name: 'LINEAR',
                        additions: { fragmentHeader: getSource('value-linear') }
                    },
                    // This addition defines standard gradient functionality.
                    {
                        name: 'STANDARD',
                        additions: {
                            fragmentHeader: [
                                getSource('srgb'),
                                getSource('gradient-color')
                            ].join('\n'),
                            fragmentProcess: getSource('gradient-process')
                        }
                    }
                ],
                setupUniforms: (setUniform) => {
                    setUniform('positionFrom', [0, 0]);
                    setUniform('positionTo', [0, 1]);
                    setUniform('color1', [0, 1, 0, 1]);
                    setUniform('color2', [0, 0, 1, 1]);
                    setUniform('steps', 16);
                    setUniform('repeat', 1);
                }
            }, 640, 360, 1280, 720);

        const sprite = this.add.image(640, 360, 'touhou');
        sprite.enableFilters().filters.internal.addPixelate();
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 1280,
    height: 720,
    backgroundColor: '#000000',
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Shader9 examples

Perlin Noise Custom Shader DisplacementDemonstrates how to inject custom GLSL code into a shader using shader additions to generate Perlin noise. The resulting shader is rendered to a texture and applied as a real-time displacement filter to an image.

Random Noise Shader AdditionsDemonstrates how to use the shaderAdditions property to inject custom GLSL code into the default fragment shader, creating dynamic noise effects with time-based uniforms.

Shader Bilinear Gradient DisplacementCreate complex background effects by combining modular shader additions, render-to-texture, and displacement filters using bilinear and linear gradients.

Custom Shader Texture CoordinatesDemonstrates how to apply a custom shader to a specific frame from a texture atlas using setTextureCoordinatesFromFrame and building shaders using modular additions.