3.18.0 Shader error - Cannot read property 'TRIANGLES' of undefined at CustomPipeline.initialize

Phaser 3
1

Hi,
I’m trying to use distort shader in my project… it works but only on desktop, if I switch to mobile or tablet version I’m getting “Uncaught TypeError: Cannot read property ‘TRIANGLES’ of undefined at CustomPipeline.initialize [as constructor]” error,

var CustomPipeline = new Phaser.Class({

    Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,

    initialize:

        function CustomPipeline (game)
        {
            Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
                game: game,
                renderer: game.renderer,
                fragShader: `
            precision mediump float;
            uniform float     time;
            uniform vec2      resolution;
            uniform sampler2D uMainSampler;
            varying vec2 outTexCoord;

            void main( void ) {

                vec2 uv = outTexCoord;
                uv.y += (sin((uv.x + (time * 0.5)) * 5.0) * 0.1) + (sin((uv.x + (time * 0.7)) * 10.0) * 0.01);
                vec4 texColor = texture2D(uMainSampler, uv);
                gl_FragColor = texColor;

            }`
            });
        }

});

in preload state I do this:

customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline(game));
customPipeline.setFloat2('uResolution', game.config.width, game.config.height);
this.load.image('water-shader', 'assets/particles/water-shader.png');

and in create I do this:

waterShader = this.physics.add.image(3200, 3400,'water-shader');
waterShader.setOrigin(1, 1);
waterShader.setDisplaySize(1460, 1125);
waterShader.setDepth(6);
waterShader.alpha = 0.1;
waterShader.setPipeline('Custom');    // this will run shader
waterShader.setBlendMode('screen');
waterShader.setAlpha(0.1);

It works but only on desktop, any advice how to fix this?

2

When initialized, a Texture Tint Pipeline accesses the Renderer’s WebGL context to read constants - in this case, gl.TRIANGLES. If you initialize a Texture Tint Pipeline in a game which uses the Canvas Renderer, there will be no WebGL context, which will cause that error.

What’s probably happening here is that your mobile devices don’t support WebGL and instead fall back to the Canvas Renderer. Custom pipelines will only work in devices which support WebGL. To prevent the error, you should check which renderer is being used (for example, by checking game.renderer.type, which will be equal to Phaser.WEBGL in a WebGL game) and skip all of the pipeline operations (especially construction) if you’re running in Canvas.