希望の結果を得るためにWebglシェーダの設定とパラメータを明瞭にする必要があります

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（横）軸に沿って波を描くために、あなたはこの機能を使用するのでしょうか？このコンセプトは、テクスチャサンプリングなどのシェーダに適用するだけです。あなたは、例えば、X軸に沿って波効果を作成したいのであれば、あなたはそのようなものを使用することができます。

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

あなたには、いくつかのアニメーションを追加したい場合は、単に時間変数の種類を追加する必要があります（中あなたのシェーダは、これは）現在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