title: How to make a wave warp effect in shader?
body: <p>I want to make a wave warp effect like this:</p>
  
  <p><img src="https://i.stack.imgur.com/54mHD.png" alt="wave1"></p>
  
  <p>But I can only create the normal sine wave.</p>
  
  <p>Here is my fragment shader:</p>
  
  <pre><code>precision mediump float;
  varying vec2 v_texCoord;
  uniform sampler2D s_baseMap;
  
  vec2 SineWave( vec2 p ){
      float pi = 3.14159;
      float A = 0.15;
      float w = 10.0 * pi;
      float t = 30.0*pi/180.0;
      float y = sin( w*p.x + t) * A; 
      return vec2(p.x, p.y+y);　
  }
  void main(){
      vec2 p = v_texCoord; 
      vec2 uv = SineWave( p ); 
      vec4 tcolor = texture2D(s_baseMap, uv); 
      gl_FragColor = tcolor; 
  }
  </code></pre>
  
  <p>and result is:</p>
  
  <p><img src="https://i.stack.imgur.com/CIq5G.png" alt="wave2"></p>
  
  <p>So the question is how to warp the wave on a specific direction?</p>
  
  <p>thanks.</p>
  
  <p>here is the origin texture:
  <a href="https://i.stack.imgur.com/DOtoJ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/DOtoJ.jpg" alt="origin texture"></a></p>
  
  <hr>
  
  <p>update:
  I distort x axis when compute y, but the result seems not right.</p>
  
  <pre><code>float x = p.x + p.y*tan( -0.5); 
  float y = sin( w*x + t) * A;
  return vec2(p.x, p.y+y); 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/tzzSD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tzzSD.png" alt="distort x axis"></a></p>