GPUImage glsl 正弦波 photoshop 效果答案

【问题标题】：GPUImage glsl sine wave photoshop effectGPUImage glsl 正弦波 photoshop 效果
【发布时间】：2014-02-22 19:41:18
【问题描述】：

我需要实现一个 iOS UIImage 过滤器/效果，它是 Photoshop 的扭曲波效果的副本。波浪必须有多个发生器，并在 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 区域将是理想的。加上边缘平滑。

提前感谢您的帮助。

【问题讨论】：

标签： ios glsl gpuimage trigonometry

【解决方案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);

【讨论】：