Filters / shaders?

Phaser 3
1

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:
0 - Is there any online generator of simple effects like water that can be applied to textures or a camera?
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?

1 Like
2

Hi,
I’m not a pro of shaders but like you i try to learn them.

  1. I’m not aware of an online generator of simple shaders…sadly
  2. idk
  3. idk
  4. you often must adapt the uniforms:
    iResolution to resolution
    iTime to time
    etc etc for each needed uniform
    or change you shader instance in your phaser code with the correct uniform name:
    this.customPipeline.setFloat2('iResolution', scene.game.config.width, scene.game.config.height);
// instead of
    this.customPipeline.setFloat2('resolution', scene.game.config.width, scene.game.config.height);
3

Shaders are highly specific programs that often depend on the inner workings of the renderer. There are libraries of shaders that you can adapt to Phaser, but I doubt you could generate them.

WebGL 1 has two types of shaders - vertex shaders and fragment shaders. Very simply put, vertex shaders run for each vertex of a shape to determine its position on the screen, while fragment shaders run for each fragment (i.e. pixel) to determine its color. For a more correct explanation, refer to a WebGL tutorial.

What you’re referring to are file extensions. Any text file can theoretically contain any type of shader. In Phaser, a glsl file can contain both types (GLSL stands for OpenGL Shading Language, the programming language that shaders are written in).

Pipelines are used to render game objects, while this.add.shader is a type of game object that shows a given shader. If you want to use a shader you’ve loaded in a pipeline, you can use this.cache.shader.get(key) from a Scene to get a BaseShader object containing the shader’s source code.

As I’ve said, shader code relies on the renderer. Unless a shader has specifically been written for Phaser 3, you’ll have to modify it manually. ShaderToy, for example, executes a different main function and passes the fragment’s coordinates as arguments; for Phaser, the fragment coordinates are available in a varying called outTexCoord and you have to directly write to gl_FragColor.

2 Likes
4

Thx you.

5

Thx a lot!

1 Like