How to create waves in shader?

Cocos Creator
#1

:city_sunrise:

I have a sprite (a regular line) and I wanted to apply a wave effect to it.

this task :fist_left: tormented me. :broken_heart:

it doesn’t work properly.

vec2 uv = uv0;
      float iTime = cc_time[0];
      uv /= sin(iTime);
      o = CCSampleWithAlphaSeparated(cc_spriteTexture, uv);

I don’t even understand what I see. It looks like a wave, but it goes beyond the texture area.

I tried to normalize by passing the dimensions of the sprite (line) to the shader like this
mat.setProperty("iRsolutetion", new Vec2(1.0 / this.node.getComponent(UITransform).contentSize.width, 1.0 / this.node.getComponent(UITransform).contentSize.height));

and in the shader do this

vec2 uv = uv0;
      uv = uv/iRsolutetion;
      float iTime = cc_time[0];
      uv /= sin(iTime);
      o = CCSampleWithAlphaSeparated(cc_spriteTexture, uv);

but this did not help to ensure that the waves did not go beyond the edge of the sprite area.

#2

I run your code it look strange. Try this one?

This project has many wonderful cocos shaders.

1 Like