Javascript 需要明确Webgl着色器配置和参数，以实现所需的结果

我想从上到下在水精灵表上应用波浪效果，使其看起来像动画。我从网上得到了一些代码，但它产生了一些效果，但是随机的。我想按照我的要求控制它。代码如下：

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

            `
            )

        );

函数CustomFilter（customSprite、ambientColor、分辨率）{
PIXI.Filter.call(
这
无效的
(
`
可变向量2 vTextureCoord；
均匀取样器；
均匀浮动时间；
常数int迭代次数=1；
常量浮点视图=3。；
void main（）
{
vec2 fragCoord=vtexturecord；
vec2 iResolution=vec2（1.0,1.0）；
float iGlobalTime=u_ctime；
vec2 uv=fragCoord.xy；
uv*=视图；
对于（int i=0；i

波浪效果的基本函数是

sin

或

cos

，如果你仔细观察，你会发现你的超复杂着色器充满了这些。自相矛盾的是，实现随机性要比实现规则波浪复杂得多

例如，要沿X（水平）轴绘制波浪，并在Y（垂直）轴上进行变化，可以使用以下功能：

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

如果要添加一些动画，只需添加一种时间变量（在着色器中，当前为

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

让时间=时钟（）；
让螺距=0.5；
设频率=2.0；
设振幅=1.0；
设y_基=0.0；
对于（x=0.0；x<1.0；x+=0.01）{
点x=x；
点y=y_基+（sin（（时间*基音）+x*频率）*振幅）；
}

另见：

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