GPUImage CannyEdgeDetectionFilter with color and overlay

Question

I am able to run single filters and create multiple filter chains. My trouble starts when I need to blend the result from multiple operations. My current use case is to overlay a CannyFilter over the original image. Both the canny and the original are part of separate filter chains. What I am looking to do is overlay the Canny result (with red or green lines) over the a 50% alpha of the original image.

The original image with 50% opacity is coming from:

GPUImageSolidColorGenerator * white = [[GPUImageSolidColorGenerator alloc] init];
[white setColorRed:255 green:255 blue:255 alpha:1.0];
[white forceProcessingAtSize:self.view.frame.size];

[sourcePicture addTarget:alphaFilter];
[white addTarget:alphaFilter];
[sourcePicture processImage];

How can I blend the result from above with an inverted Canny? Bonus points if my Canny output can be red or green.

Answer 1

For this, I'd recommend creating a custom variant of the Canny edge detection filter, or using a custom filter to modify the output from it.

Right now, the last stage in the current implementation of the filter outputs opaque black if no edge is present and opaque white if one is. This makes it a little tricky to blend or overlay that on something else.

To modify the Canny edge detector, you could copy it from the framework, renaming it to whatever you want to call it, copy the GPUImageWeakPixelInclusionFilter (the last stage in that filter) and rename that as well. Modify the new Canny filter to point to your tweaked and renamed GPUImageWeakPixelInclusionFilter at the last stage. Within the new GPUImageWeakPixelInclusionFilter, change the color output so that it no longer sends out white, but whatever color you want for your edges, and replace the black with whatever color and opacity you want for non-edges.

A simpler alternative, although slightly less performant, would be to create a custom filter that merely changes white and black to whatever colors you want. It could use a simple step function to switch based on one color component (red, for example) and output one color if that passes and another color if that fails. You'd just need a custom shader and an instance of GPUImageFilter to do that. You might even be able to avoid the need for a blend if all you want to do is modify the colors this outputs.