GPUImage glsl正弦波photoshop效果

Question

我有一個要求，實施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區域，一個在頂部，一個在底部。所以能夠一次處理兩個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);