Video as Shader Texture

Demonstrates how to use a playing video as a dynamic input texture for a GLSL shader. It shows how to register a video stream as a texture and pass it as a uniform into a shader object for real-time visual effects.

Video as Shader Texture, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.video('trainSequence', 'assets/video/train512x256.mp4', true);
        this.load.image('noise', 'assets/tests/rgba-noise-medium.png');
        this.load.glsl('hue-shift', 'assets/shaders/hue-shift.frag');
    }

    create ()
    {
        const video = this.add.video(400, 300, 'trainSequence').setVisible(false);

        //  We're using this texture as a shader input.
        video.saveTexture('train');

        video.play(true);

        video.once('textureready', () => {

            this.add.shader({
                name: 'Hue Shift',
                fragmentKey: 'hue-shift',
                initialUniforms: {
                    resolution: [ this.scale.width, this.scale.height ],
                    iChannel0: 0,
                    iChannel1: 1
                },
                setupUniforms: (setUniform, drawingContext) => {
                    setUniform('time', this.game.loop.getDuration());
                }
            }, 400, 300, 800, 600, [ 'train', 'noise' ]);

        });
    }
}

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

let game = new Phaser.Game(config);

More in Video17 examples