1

Instagramアプリケーションと同様のぼかし効果のためにGPUImageフレームワークを使用しました。ここでは、写真ライブラリから写真を取得するためのビューを作成し、それに効果を加えました。

効果の1つは、画像のごく一部だけが鮮明になり、残りはぼやける選択的ぼかし効果です。GPUImageGaussianSelectiveBlurFilterは、ぼやけないように画像の円形部分を選択します。

代わりに鋭い領域を長方形にするためにこれを変更するにはどうすればよいですか？

4

2 に答える 2

3

ギルの答えは正確には正しくなく、これは何度も尋ねられているように思われるので、上記の私のコメントを明確にします。

選択的ブラーのフラグメントシェーダーには、デフォルトで次のコードがあります。

 varying highp vec2 textureCoordinate;
 varying highp vec2 textureCoordinate2;

 uniform sampler2D inputImageTexture;
 uniform sampler2D inputImageTexture2; 

 uniform lowp float excludeCircleRadius;
 uniform lowp vec2 excludeCirclePoint;
 uniform lowp float excludeBlurSize;
 uniform highp float aspectRatio;

 void main()
 {
     lowp vec4 sharpImageColor = texture2D(inputImageTexture, textureCoordinate);
     lowp vec4 blurredImageColor = texture2D(inputImageTexture2, textureCoordinate2);

     highp vec2 textureCoordinateToUse = vec2(textureCoordinate2.x, (textureCoordinate2.y * aspectRatio + 0.5 - 0.5 * aspectRatio));
     highp float distanceFromCenter = distance(excludeCirclePoint, textureCoordinateToUse);

     gl_FragColor = mix(sharpImageColor, blurredImageColor, smoothstep(excludeCircleRadius - excludeBlurSize, excludeCircleRadius, distanceFromCenter));
 }

このフラグメントシェーダーは、元の鮮明な画像と画像のガウスぼかしバージョンの両方からピクセルカラー値を取り込みます。次に、最後の3行のロジックに基づいて、これらをブレンドします。

これらの線の1番目と2番目は、指定した中心座標（画像のデッドセンターのデフォルトでは正規化された座標で（0.5、0.5））から現在のピクセルの座標までの距離を計算します。最後の行は、smoothstep()GLSL関数を使用して、中心点からの距離が2つのしきい値、内側の透明な円と外側の完全にぼやけた円の間を移動するときに、0と1の間をスムーズに補間します。次に、mix()オペレーターはからの出力smoothstep()を取得し、ぼやけたカラーピクセルカラーとシャープなカラーピクセルカラーの間でフェードして、適切な出力を生成します。

これを変更して円形ではなく正方形を作成する場合は、フラグメントシェーダーの2つの中心線を調整して、中心点からのピタゴラス距離ではなく、線形XまたはY座標に基づいて距離を決定する必要があります。これを行うには、シェーダーを次のように変更します。

 varying highp vec2 textureCoordinate;
 varying highp vec2 textureCoordinate2;

 uniform sampler2D inputImageTexture;
 uniform sampler2D inputImageTexture2; 

 uniform lowp float excludeCircleRadius;
 uniform lowp vec2 excludeCirclePoint;
 uniform lowp float excludeBlurSize;
 uniform highp float aspectRatio;

 void main()
 {
     lowp vec4 sharpImageColor = texture2D(inputImageTexture, textureCoordinate);
     lowp vec4 blurredImageColor = texture2D(inputImageTexture2, textureCoordinate2);

     highp vec2 textureCoordinateToUse = vec2(textureCoordinate2.x, (textureCoordinate2.y * aspectRatio + 0.5 - 0.5 * aspectRatio));

     textureCoordinateToUse = abs(excludeCirclePoint - textureCoordinateToUse);
     highp float distanceFromCenter = max(textureCoordinateToUse.x, textureCoordinateToUse.y);

     gl_FragColor = mix(sharpImageColor, blurredImageColor, smoothstep(excludeCircleRadius - excludeBlurSize, excludeCircleRadius, distanceFromCenter));
 }

Gillが言及している行は、フィルターの入力パラメーターであり、その真円度をまったく制御していません。

これをさらに変更して、読者の演習として一般的な長方形を作成しますが、これは、これを行う方法の基礎と、このシェーダーの線が何をするかについてのもう少しの説明を提供するはずです。

于 2013-01-29T00:04:16.853 に答える
0

やりました...長方形の効果のコードはこれらの2行にあります

blurFilter = [[GPUImageGaussianSelectiveBlurFilter alloc] init];
        [(GPUImageGaussianSelectiveBlurFilter*)blurFilter      setExcludeCircleRadius:80.0/320.0];
        [(GPUImageGaussianSelectiveBlurFilter*)blurFilter setExcludeCirclePoint:CGPointMake(0.5f, 0.5f)];
       // [(GPUImageGaussianSelectiveBlurFilter*)blurFilter setBlurSize:0.0f];            [(GPUImageGaussianSelectiveBlurFilter*)blurFilter setAspectRatio:0.0f];
于 2012-09-18T06:15:08.697 に答える