Looking for realistic water shader

Phaser 3
1

Hi,
I’m looking for realistic water shader… exactly like this one:
https://tympanus.net/Development/LiquidDistortion/index.html

I tried to google it but just found basic shaders which are not very realistic, can anyone help me with this?
Or is there some gallery of shaders?

2

https://www.shadertoy.com

3

I can run shader from Phaser LABS page… my code looks like this:
THIS WORKS

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: `
                
                
            // shader code start    
            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;

            } // shader code end



            `
            });
        }
});

This one is exactly what I need https://www.shadertoy.com/view/4slGRM
I tried to copy content of that to this fragShader property but I’m getting errors like:

Uncaught Error: Failed to compile Fragment Shader:
ERROR: 0:3: '' : No precision specified for (float)
ERROR: 0:4: '' : No precision specified for (float)
ERROR: 0:5: '' : No precision specified for (float)
ERROR: 0:7: '' : No precision specified for (float)
ERROR: 0:8: '' : No precision specified for (float)
ERROR: 0:9: '' : No precision specified for (float)
ERROR: 0:10: 'iChannel0' : syntax error

    at initialize.createProgram (main.js:114)
    at CustomPipeline.initialize (main.js:114)
    at CustomPipeline.initialize [as constructor] (main.js:114)
    at new CustomPipeline (main.js:122)
    at initialize.Game.preload (main.js:234)
    at initialize.bootScene (main.js:114)
    at initialize.start (main.js:114)
    at initialize.bootQueue (main.js:114)
    at h.emit (main.js:114)
    at initialize.texturesReady (main.js:114)

Is it even possible to use this Shader in Phaser 3?
It’s hard for me to understand how it works so I need a little help with this…

4

first you should use Shader gameobject (3.17.0+) instead of Pipeline which actually is not for effects.

and then, replace your uniform names with the Phaser built-ins:

1 Like
5

I’m terribly sorry for bumping this topic, but it is the only thing I found with reference to this issue.

Very important blog post: https://phaser.io/phaser3/devlog/146

On it, Shader Gameobject is explained.

But! since we are talking about ShaderToy,
all I had to do was

  • create a new file (e.g: my_shader.glsl)
  • add the following code:
precision mediump float;
uniform vec2 resolution;
uniform float time;
  • (copy paste the shadertoy code)
  • add a main function:
void main() {
    mainImage(gl_FragColor, gl_FragCoord.xy);
}

Now, the key thing that will make you save time. REFACTOR iResolution to resolution, iTime to time, etc. Then you have a very awesome, simple texture in modern phaser 3, without any pipelines.

1 Like