Javascript 如何扩展GLSL着色器上的效果区域？

我是GLSL的新手，我正在写我的第一个着色器。着色器编写为与PIXIjs一起使用。我几乎得到了我想要的效果，但是看起来效果iv被屏蔽了，并且限制在我的精灵大小之内。请看下图。有人能告诉我我做错了什么吗？感激

请参见此处的完整代码：

我的着色器：

precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform vec2 u_resolution;
uniform float progress; 
  
void main(){
   vec2 uv = gl_FragCoord.xy/u_resolution.xy;
  float rnd = fract(sin(dot(uv.xy,vec2(12.9898,78.233)))*43758.5453123);
  vec2 cordi = vec2(vTextureCoord.x, vTextureCoord.y-rnd*progress);
  cordi = progress > 0. ? vec2(cordi.x+0.02*sin(cordi.y*52.0+progress*20.0),cordi.y):cordi;
  gl_FragColor = texture2D(uSampler, cordi);
}

---

我不知道你想让它看起来怎么样。我猜你希望效果更大，而不是被地板或其他东西剪掉。您的着色器看起来不错，但它只能影响精灵中的像素，如您所说。若要在该区域之外进行渲染，您需要添加更多几何体，放大精灵大小，甚至渲染全屏四边形，以便在整个屏幕上自由支配

快乐！爱南方公园！说到这里，看看这个：