如何修改GPUImageGaussianSelectiveBlurFilter以在矩形而不是圆上操作？ [英] How do I modify a GPUImageGaussianSelectiveBlurFilter to operate over a rectangle instead of a circle?

问题描述

我已经使用了GPUImage框架来获得类似于Instagram应用程序的模糊效果，在那里我已经制作了从照片库中获取图片的视图，然后我对其进行了设置。

I have used the GPUImage framework for a blur effect similar to that of the Instagram application, where I have made a view for getting a picture from the photo library and then I put an effect on it.

其中一个效果是选择性模糊效果，其中只有一小部分图像清晰，其余部分模糊。 GPUImageGaussianSelectiveBlurFilter选择图像的圆形部分不模糊。

One of the effects is a selective blur effect in which only a small part of the image is clear the rest is blurred. The GPUImageGaussianSelectiveBlurFilter chooses the circular part of the image to not be blurred.

如何更改此项以使尖锐区域成为矩形？

How can I alter this to make the sharp region be rectangular in shape instead?

推荐答案

因为Gill的答案并不完全正确，而且因为这似乎一遍又一遍地被问到，所以我会在上面澄清我的评论。

Because Gill's answer isn't exactly correct, and since this seems to be getting asked over and over, I'll clarify my comment above.

默认情况下，选择性模糊的片段着色器具有以下代码：

The fragment shader for the selective blur by default has the following code:

 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));
 }

此片段着色器从原始清晰图像中获取像素颜色值高斯模糊版图像。然后根据最后三行的逻辑将它们混合在一起。

This fragment shader takes in a pixel color value from both the original sharp image and a Gaussian blurred version of the image. It then blends between these based on the logic of the last three lines.

这些行中的第一行和第二行计算距您指定的中心坐标的距离（（0.5） ，0.5）在图像的死点中的标准化坐标中）到当前像素的坐标。最后一行使用 smoothstep（） GLSL函数，当距中心点的距离在两个阈值，内部清晰圆和外部之间移动时，在0和1之间平滑插值完全模糊的圈子。然后 mix（）运算符从 smoothstep（）获取输出，并在模糊和锐利的颜色像素颜色之间淡入淡出产生适当的输出。

The first and second of these lines calculate the distance from the center coordinate that you specify ((0.5, 0.5) in normalized coordinates by default for the dead center of the image) to the current pixel's coordinate. The last line uses the smoothstep() GLSL function to smoothly interpolate between 0 and 1 when the distance from the center point travels between two thresholds, the inner clear circle, and the outer fully blurred circle. The mix() operator then takes the output from the smoothstep() and fades between the blurred and sharp color pixel colors to produce the appropriate output.

如果你只是想修改它以产生方形而不是圆形，你需要调整片段中的两条中心线着色器将距离设置在线性X或Y坐标上，而不是距离中心点的毕达哥拉斯距离。要执行此操作，请将着色器更改为：

If you just want to modify this to produce a square shape instead of the circular one, you need to adjust the two center lines in the fragment shader to base the distance on linear X or Y coordinates, not a Pythagorean distance from the center point. To do this, change the shader to read:

 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提及的行只是过滤器的输入参数，并且不要t完全控制它的圆形度。

The lines that Gill mentions are just input parameters for the filter, and don't control its circularity at all.

我进一步修改这个以产生一个通用的矩形形状作为读者的练习，但这应该为你如何能够提供基础这样做以及对该着色器中的线条的更多解释。

I leave modifying this further to produce a generic rectangular shape as an exercise for the reader, but this should provide a basis for how you could do this and a bit more explanation of what the lines in this shader do.

这篇关于如何修改GPUImageGaussianSelectiveBlurFilter以在矩形而不是圆上操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！