Help with shader waterfall

[Gle6]

Hello guys,

I'm stuck with shaders. May be you can help me. The objective to make waterfall with shader. As for now I have this frag shader:

precision mediump float;

varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform vec4 filterArea;
uniform vec2 dimensions;
uniform float speed;
uniform float time;


#pragma glslify: noise = require("glsl-noise/simplex/3d")


vec2 cartToIso(vec2 pos) {
    vec2 res = pos;
    res.x = pos.x - pos.y;
    res.y = (pos.x + pos.y) / 2.0;
    return res;
}

void main() {

    vec2 pixelCoord = vTextureCoord * filterArea.xy;
    vec2 coord = pixelCoord / dimensions;

    vec2 iso = cartToIso(pixelCoord);

    float x = pixelCoord.x * 0.1;
    float y = dimensions.y / pixelCoord.y + (speed * time * 10.0);
    float z = time;

    vec3 vector = vec3(x, y, z);
    vec3 noise = vec3(noise(vector));

    gl_FragColor = vec4(noise, 1.0);

}

It gives me nice waterfall result (video in attach). But the target is to make it isometric (in reality dimetric). Look at pic in the attach. Is there a way to make this?

I'll be appreciate for any help.

waterfall.mp4

[ivan.popelyshev]

More if's to if's god!  Also, that might help you if you want to use v4-shader instead of v4-filter.

Just make a skewed sprite and change "sprite.pluginName = 'myPlugin'", and that'll work.

 

[Gle6]

Thanks for reply. For this case I think it will work. Will try it today.

But, in case like this (attach) I think if's is only option, right? The main problem for me is how to make smooth transition between direction of noise with if statments.

[ivan.popelyshev]

More ifs for the god of ifs!

[Gle6]

3 hours ago, ivan.popelyshev said:

More if's to if's god!  Also, that might help you if you want to use v4-shader instead of v4-filter.

Just make a skewed sprite and change "sprite.pluginName = 'myPlugin'", and that'll work.

 

Can I use this spite.texture as texture for PIXI.mesh.Rope? It will be really ease to define river geometry with path.

[ivan.popelyshev]

Yes, you need to make alternative to MeshRenderer: https://github.com/pixijs/pixi.js/tree/dev/src/mesh/webgl, and specify "rope.pluginName='myPlugin'". Example of renderer is here: https://github.com/pixijs/pixi-plugin-example , but it cant work with meshes, sorry  you have to copy MeshRenderer. I know its pain, but right now there's no other way. At least in v4.

You can try v5-alpha, its much easier: http://dev.goodboydigital.com/client/goodboy/geometry/examples/index.html#/mesh/sharing-geometry.js , build is here: https://pixijs.download/next/pixi.js , branch is here: https://github.com/pixijs/pixi.js/tree/next

If you build a shader there, and it works, try to port that shader to v4 using my example.