Jump to content

Help with shader waterfall


Recommended Posts

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.



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...