GPUImage glsl正弦波photoshop效果

Question

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

附上照片的步骤。

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

我发现了一些产生水波纹的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);