ios - GPUImage glsl 正弦波 photoshop 效果

Question

我需要实现一个 iOS UIImage 滤镜/效果，它是 Photoshop 的 Distort Wave 效果的副本。波形必须有多个生成器，并在 CGRect 中以紧密的模式重复。

附上步骤照片。

我在创建 glsl 代码以重现正弦波模式时遇到问题。我还试图平滑效果的边缘，以便过渡到矩形以外的区域不会那么突然。

我发现了一些产生水波纹的 WebGL 代码。在中心点之前产生的波浪看起来接近我需要的，但我似乎无法正确地计算出去除水波纹(在中心点)并且只在它之前保持重复的正弦模式:

 varying highp vec2 textureCoordinate;
 uniform sampler2D inputImageTexture;

 uniform highp float time;
 uniform highp vec2 center;
 uniform highp float angle;

 void main() {
     highp vec2 cPos = -1.0 + 2.0 * gl_FragCoord.xy / center.xy;
     highp float cLength = length(cPos);

     highp vec2 uv = gl_FragCoord.xy/center.xy+(cPos/cLength)*cos(cLength*12.0-time*4.0)*0.03;
     highp vec3 col = texture2D(inputImageTexture,uv).xyz;

     gl_FragColor = vec4(col,1.0);
 }

我必须处理两个 Rect 区域，一个在顶部，一个在底部。因此，能够一次处理两个 Rect 区域将是理想的。加上边缘平滑。

在此先感谢您的帮助。

Answer 1

我过去通过在 CPU 上生成一个偏移表并将其作为输入纹理上传来处理这个问题。所以在 CPU 上，我会做类似的事情:

for (i = 0; i < tableSize; i++)
{
    table [ i ].x = amplitude * sin (i * frequency * 2.0 * M_PI / tableSize + phase);
    table [ i ].y = 0.0;
}

如果您有多个“发生器”，您可能需要添加更多正弦波。另外，请注意上面的代码偏移了每个像素的 x 坐标。您可以改为执行 Y，或两者都执行，具体取决于您的需要。

然后在 glsl 中，我将使用该表作为采样的偏移量。所以它会是这样的:

uniform sampler2DRect table;
uniform sampler2DRect inputImage;

//... rest of your code ...

// Get the offset from the table
vec2 coord = glTexCoord [ 0 ].xy;
vec2 newCoord = coord + texture2DRect (table, coord);

// Sample the input image at the offset coordinate
gl_FragColor = texture2DRect (inputImage, newCoord);