물 스프라이트 시트에 웨이브 효과를 적용하려면 위에서 아래 방향으로 움직이는 것처럼 보이게하십시오. 인터넷에서 코드 조각을 얻었지만 무작위로 효과를 내기도합니다. 내 요구 사항에 따라 그것을 제어하고 싶습니다. 물결 효과에 대한원하는 결과를 얻기 위해 Webgl Shaders 구성 및 매개 변수에 명확성이 필요합니다.
function CustomFilter(customSprite, ambientColor, resolution) {
PIXI.Filter.call(
this,
null,
(
`
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform float u_ctime;
const int iterations = 1;
const float view = 3.;
void main()
{
vec2 fragCoord = vTextureCoord;
vec2 iResolution = vec2(1.0,1.0);
float iGlobalTime = u_ctime;
vec2 uv = fragCoord.xy;
uv *= view;
for (int i = 0; i < iterations; i++) {
float ang = atan(uv.y+cos(uv.y*2.+iGlobalTime)*.5,
uv.y+sin(uv.y*2.+iGlobalTime)*.5)-length(uv)*.1;
float sn = sin(ang);
mat2 m = mat2(sn,sn,sn,sn);
uv = uv*.15-abs(uv*.5*m);
}
float d = length(mod(uv,1.)-.5)-.4;
d *= 20.;
vec4 FragColor = vec4(sin(uv.x*d), sin(d+.5346), -sin(d+uv.x*1.63), 1.)*.5;
vec2 u_Scale = vec2(0.0,0.07)*sin(u_ctime);
vec3 displace = FragColor.rba;
displace.xy *= displace.z * u_Scale*(0.5-fragCoord.x);
gl_FragColor = texture2D(uSampler, vTextureCoord + displace.xy);
}
`
)
);