Shaders

[MadDogMayCry]

Hello.

I began to slowly study shaders, and ran into a problem of understanding.

I found two ways to add.
Through the function:

this.load.glsl ('fire', 'shaders / fire.glsl.js');

or:

var GrayscalePipeline = new Phaser.Class({

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

    initialize:

    function GrayscalePipeline (game)
    {
        Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
            game: game,
            renderer: game.renderer,
            fragShader:`
                precision mediump float;
                uniform sampler2D uMainSampler;
                varying vec2 outTexCoord;
                void main(void) {
                vec4 color = texture2D(uMainSampler, outTexCoord);
                float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
                gl_FragColor = vec4(vec3(gray), 1.0);
                }`
        });
    } 
});

btw this shader works veary well!

or load method:

this.add.shader ('fire', 400, 300, 512, 512);

or if we are talking about Pipelin then

.setRenderToTexture (customPipeline);

for cameera, or if we talking about game texture or object:

.setPipeline ("customPipelineName");

Questions:

1 - There are the following shaders that supports WebGL - .frag, lgsl, and vertex !? Is this really so, or am I missing something? What is the difference between them?

2 - Is it possible to use the shader added by the this.add.shader ('fire') method; as an effect for the camera for example?

.setPipeline ("fire");

3 - The shaders that I try to take from third-party resources very often cause an error. For example shader from here

this or shaders It just throws compilation errors. To get good understanding,- how to change this shaders code to get it works with phaser 3?