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

Question

我是 GLSL 的新手，正在编写我的第一个着色器。着色器被编写为与 PIXIjs 一起使用。我几乎得到了我想要的效果，但它看起来像 iv 创建的效果被屏蔽并限制在我的 sprite 的大小。看图片 below.Can 谁能告诉我我做错了什么？欣赏

在此处查看完整代码：https://codepen.io/michell-morso/pen/dyMyxLd

我的着色器：

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);
}

Answer 1

我不确定你想要它的外观。我猜您希望效果更大，而不是被地板或其他东西剪裁。你的着色器看起来不错，但它只能像你说的那样影响精灵中的像素。要在该区域外渲染，您需要添加更多几何图形、放大精灵大小，甚至渲染全屏四边形，以便您可以自由支配整个屏幕。

祝着色愉快！喜欢南方公园！说到这里，看看这个：https://www.shadertoy.com/view/WlBcD3

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

How do i extend the area of effect on my GLSL shader?

javascript

glsl

pixi.js