GPUImageVideoCamera with blur and circular mask filter

Question

I am trying to build a UI for recording and playing videos. I am using the GPUImage framework and would like to apply a mask filter and the GPUImageiOSBlurFilter to the camera.

Goal:

I am struggling with how to set everything up so that my input (camera) goes through unfiltered in the circle, but the blur filter is masked around the centre and applied to the camera output.

When I construct the chain like this:

[_camera addTarget:_maskFilter];
[_maskPicture processImage];
[_maskPicture addTarget:_maskFilter];
[_maskFilter addTarget:_blurFilter];
[_blurFilter addTarget:_screen];

The blur filter blurs everything in the view and the mask cuts out the video in all but the centre. My Mask image is a black rectangle with a white circle.

Result:

How can I construct a chain of filters that help me achieve the UI in the picture above - I am looking for a nudge in which direction I should go. I am currently looking at GPUImageFilterGroups and the video buffer to try and "route" parts of my input around some filters, but I am having trouble finding resources.

Answer 1

You can do this fairly easily by modifying the GPUImageGaussianSelectiveBlurFilter.

Take the code for that filter and create a new filter based on it. In your new filter, replace the GPUImageGaussianBlurFilter with the GPUImageiOSBlurFilter. In the fragment shader, swap the sharpImageColor and blurredImageColor within the final mix() command . That should be it for replicating this effect.

The GPUImageGaussianSelectiveBlurFilter is a filter group that masks off and blurs things within a circle, and you want to invert that and use the stronger GPUImageiOSBlurFilter, so the above modifications will do that. This will be more performant than trying to apply a mask as a separate filter, and should be simple enough to implement.