Shader.ts for outline - using phaser version 3.16.2

Shader.ts

class OutlinePipelineRed extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {
    constructor(game: Phaser.Game) {
        //original phaser shader + border shading
        //0.001 is a magic value that workds for texture lookup on 1024 x 1024 textures
        //if a text-lookup-pixel on any side of a transparent pixel is not transperent, then render this pixel in red
        //requires a) 1 pixel transparent border on the sprites (as part of the sprite!)
        //requires a border of at least 1 pixel around the sprites on the sprite sheet (so the lookup doesn't check other sprites)
        //the else part makes the most outer pixels of the sprite slightly red tinted

        //tip von nitrixr: pass in texture size as uniforms

        let config = {
            game: game,
            renderer: game.renderer,
            fragShader: `
    precision mediump float;
    
    uniform sampler2D uMainSampler;
    
    varying vec2 outTexCoord;
    varying float outTintEffect;
    varying vec4 outTint;
    
    void main()
    {
        vec4 texture = texture2D(uMainSampler, outTexCoord);
        vec4 texel = vec4(outTint.rgb * outTint.a, outTint.a);
        vec4 color = texture;
    
        if (outTintEffect == 0.0)
        {
            //  Multiply texture tint
            color = texture * texel;
        }
        else if (outTintEffect == 1.0)
        {
            //  Solid color + texture alpha
            color.rgb = mix(texture.rgb, outTint.rgb * outTint.a, texture.a);
            color.a = texture.a * texel.a;
        }
        else if (outTintEffect == 2.0)
        {
            //  Solid color, no texture
            color = texel;
        }
    
        gl_FragColor = color;
        
        if (color.a == 0.0) {
            vec4 colorU = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y - 0.001));
            vec4 colorD = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y + 0.001));
            vec4 colorL = texture2D(uMainSampler, vec2(outTexCoord.x + 0.001, outTexCoord.y));
            vec4 colorR = texture2D(uMainSampler, vec2(outTexCoord.x - 0.001, outTexCoord.y));
            if (colorU.a != 0.0 || colorD.a != 0.0 || colorL.a != 0.0 || colorR.a != 0.0) {
                gl_FragColor = vec4(1.0, 0.0, 0.0, .2);
            }
        } else {
            vec4 colorU = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y - 0.001));
            vec4 colorD = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y + 0.001));
            vec4 colorL = texture2D(uMainSampler, vec2(outTexCoord.x + 0.001, outTexCoord.y));
            vec4 colorR = texture2D(uMainSampler, vec2(outTexCoord.x - 0.001, outTexCoord.y));
            if (colorU.a == 0.0 || colorD.a == 0.0 || colorL.a == 0.0 || colorR.a == 0.0) {
                gl_FragColor = vec4(color.r + 0.4, color.b, color.b, color.a);
            }                     
        }        
    }
`
        };
        super(config);
    }
}

class OutlinePipelineWhite extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {
    constructor(game: Phaser.Game) {
        //original phaser shader + border shading
        //0.001 is a magic value that workds for texture lookup on 1024 x 1024 textures
        //if a text-lookup-pixel on any side of a transparent pixel is not transperent, then render this pixel in red
        //requires a) 1 pixel transparent border on the sprites (as part of the sprite!)
        //requires a border of at least 1 pixel around the sprites on the sprite sheet (so the lookup doesn't check other sprites)
        //the else part makes the most outer pixels of the sprite slightly red tinted

        //tip von nitrixr: pass in texture size as uniforms

        let config = {
            game: game,
            renderer: game.renderer,
            fragShader: `
    precision mediump float;
    
    uniform sampler2D uMainSampler;
    
    varying vec2 outTexCoord;
    varying float outTintEffect;
    varying vec4 outTint;
    
    void main()
    {
        vec4 texture = texture2D(uMainSampler, outTexCoord);
        vec4 texel = vec4(outTint.rgb * outTint.a, outTint.a);
        vec4 color = texture;
    
        if (outTintEffect == 0.0)
        {
            //  Multiply texture tint
            color = texture * texel;
        }
        else if (outTintEffect == 1.0)
        {
            //  Solid color + texture alpha
            color.rgb = mix(texture.rgb, outTint.rgb * outTint.a, texture.a);
            color.a = texture.a * texel.a;
        }
        else if (outTintEffect == 2.0)
        {
            //  Solid color, no texture
            color = texel;
        }
    
        gl_FragColor = color;
        
        if (color.a == 0.0) {
            vec4 colorU = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y - 0.001));
            vec4 colorD = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y + 0.001));
            vec4 colorL = texture2D(uMainSampler, vec2(outTexCoord.x + 0.001, outTexCoord.y));
            vec4 colorR = texture2D(uMainSampler, vec2(outTexCoord.x - 0.001, outTexCoord.y));
            if (colorU.a != 0.0 || colorD.a != 0.0 || colorL.a != 0.0 || colorR.a != 0.0) {
                gl_FragColor = vec4(.680, .688, .327, .2);
            }
        } 
    }
`
        };
        super(config);
    }
}