원하는 결과를 얻기 위해 Webgl Shaders 구성 및 매개 변수에 명확성이 필요합니다.

Question

물 스프라이트 시트에 웨이브 효과를 적용하려면 위에서 아래 방향으로 움직이는 것처럼 보이게하십시오. 인터넷에서 코드 조각을 얻었지만 무작위로 효과를 내기도합니다. 내 요구 사항에 따라 그것을 제어하고 싶습니다. 물결 효과에 대한

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

      ` 
      ) 

     ); 

Answer 1

기본 기본 기능 sin 또는 cos, 그리고 당신이 자세히 보면, 당신은 당신의 슈퍼 복잡한 쉐이더가 가득한 것을 볼 수 있습니다 : 다음은 코드입니다. 역설적이게도 이것은 규칙적인 물결보다 규칙적인 무작위성에 훨씬 더 복잡합니다. 아니,

let frequency = 2.0; 
let amplitude = 1.0; 
let y_base = 0.0; 
for(x = 0.0; x < 1.0; x += 0.01) { 
    point.x = x; 
    point.y = y_base + (sin(x * frequency) * amplitude); 
} 

은 매우 간단 :

예를 들어, Y (세로) 축에 변화와 X (수평) 축을 따라 물결을, 그릴,이 기능을 사용해야합니까? 예를 들어 텍스처 샘플링과 같이이 개념을 쉐이더에 적용하기 만하면됩니다. 당신은 몇 가지 애니메이션을 추가하려는 경우, 당신은 단순히 시간 변수의 종류를 추가 할 필요가

float f = 5.0; 
float a = 0.05; 
vec4 waved = texture2D(sampler, vec2(coord.x, coord.y+(sin(coord.x*f)*a))); 

에 (: 당신이 원하는 경우에 따라서, 예를 들어, X 축을 따라 웨이브 효과를, 당신은 그런 일을 사용할 수 있습니다 셰이더,이) 현재 u_ctime, 그리고 의사 코드는 다음과 같이 표시됩니다

let time = clock(); 
let pitch = 0.5; 
let frequency = 2.0; 
let amplitude = 1.0; 
let y_base = 0.0; 

for(x = 0.0; x < 1.0; x += 0.01) { 
    point.x = x; 
    point.y = y_base + (sin((time * pitch) + x * frequency) * amplitude); 
} 

항목 : https://en.wikipedia.org/wiki/Sine#Unit_circle_definition