如何在着色器中制作波形扭曲效果？

Question

我想像这样制作波浪扭曲效果：

但我只能制作正常的正弦波。

这是我的片段着色器：

precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D s_baseMap;

vec2 SineWave( vec2 p ){
    float pi = 3.14159;
    float A = 0.15;
    float w = 10.0 * pi;
    float t = 30.0*pi/180.0;
    float y = sin( w*p.x + t) * A; 
    return vec2(p.x, p.y+y);　
}
void main(){
    vec2 p = v_texCoord; 
    vec2 uv = SineWave( p ); 
    vec4 tcolor = texture2D(s_baseMap, uv); 
    gl_FragColor = tcolor; 
}

结果是：

所以问题是如何在特定的方向上扭曲波浪？

感谢。

这里是原始纹理：

更新： 我在计算y时扭曲x轴，但结果似乎不正确。

float x = p.x + p.y*tan( -0.5); 
float y = sin( w*x + t) * A;
return vec2(p.x, p.y+y); 

Answer 1

好的我尝试重新创建你的效果所以我用它作为纹理：

我拍摄了您的图片并将其调整为512x512，因此它的强度为2，用黑色填充边框。由于您不共享Vertex着色器，因此我创建了自己的着色器。 GL 渲染单个四元组<-1,+1>，没有纹理坐标或矩阵glVertex2f()，单个 2D 纹理绑定到单位0。我略微重写你的片段以匹配输出。我还添加了tx,ty制服，以便用鼠标位置轻松设置效果<0,1>以下是着色器的第一个顶点：

// Vertex
varying vec2 v_texCoord;
void main()
    {
    v_texCoord=gl_Vertex.xy;
    gl_Position=gl_Vertex;
    }

然后片段化：

// Fragment
varying vec2 v_texCoord;        // holds the Vertex position <-1,+1> !!!
uniform sampler2D s_baseMap;    // used texture unit
uniform float tx,ty;            // x,y waves phase

vec2 SineWave( vec2 p )
    {
    // convert Vertex position <-1,+1> to texture coordinate <0,1> and some shrinking so the effect dont overlap screen
    p.x=( 0.55*p.x)+0.5;
    p.y=(-0.55*p.y)+0.5;
    // wave distortion
    float x = sin( 25.0*p.y + 30.0*p.x + 6.28*tx) * 0.05;
    float y = sin( 25.0*p.y + 30.0*p.x + 6.28*ty) * 0.05;
    return vec2(p.x+x, p.y+y);
    }

void main()
    {
    gl_FragColor = texture2D(s_baseMap,SineWave(v_texCoord));
    }

这是tx=0.3477,ty=0.7812的输出，其视觉上或多或少与您的示例匹配：

正如你所看到的，我在sin波中增加了几个术语，因此它也会扭曲变形。

如果v_texCoord已在范围<0,1>中，则忽略

    p.x=( 0.55*p.x)+0.5;
    p.y=(-0.55*p.y)+0.5;

或将其重写为（所以缩小和系数保持原样）

    p.x=(1.1*p.x)-0.05;
    p.y=(1.1*p.y)-0.05;

如果使用不同的纹理（不是我的），则需要重新缩放所有系数。

[edit1]系数含义

首先我从你的开始：

float x = sin( 10.0*p.y) * 0.15;
float y = sin( 10.0*p.x) * 0.15;

0.15是波幅，似乎太大，所以我把它降低到0.05。然后10.0是频率，数字越大，沿轴的波越多。通过纯试验和错误，我确定它们对于y轴应为30.0，对于x轴应为25.0，因此波数与您想要的输出匹配。

float x = sin( 25.0*p.y) * 0.05;
float y = sin( 30.0*p.x) * 0.05;

在此之后，我发现波浪应该有点偏斜，所以在经过一些调整发现这个等式之后，我也增加了对另一个轴的依赖性：

float x = sin( 25.0*p.y + 30.0*p.x) * 0.05;
float y = sin( 25.0*p.y + 30.0*p.x) * 0.05;

其中两个系数在轴之间是相同的（奇怪但工作我期望我需要在轴之间具有不同的系数）。在这之后只需要为每个轴找到正确的相位，所以我添加了由鼠标位置(tx,ty) <0.0,1.0>控制的相移，所以我得到了最终结果：

float x = sin( 25.0*p.y + 30.0*p.x + 6.28*tx) * 0.05;
float y = sin( 25.0*p.y + 30.0*p.x + 6.28*ty) * 0.05;

然后我玩鼠标（打印它的位置），直到我足够接近你所需的输出，这是tx=0.3477,ty=0.7812所以你可以硬编码

float x = sin( 25.0*p.y + 30.0*p.x + 6.28*0.3477) * 0.05;
float y = sin( 25.0*p.y + 30.0*p.x + 6.28*0.7812) * 0.05;