Edge detection overlay with lines - ios

Question

I need to overlay the edges detected in live video preview with a color of my choice (as is done in Lightroom CC app when you adjust focus). What's the easiest way to draw those lines in real time using Metal or CoreImage? I can use Sobel edge detection to detect the edges using Metal Performance Shader but not sure how to overlay the edges with a color of my choice.

Answer 1

Here is a edge detect shader for metal
kernel void edge_detect(texture2d<half, access::read> inTexture [[ texture(0) ]],
texture2d<half, access::write> outTexture [[ texture(1) ]],
uint2 gid [[ thread_position_in_grid ]]) {
constexpr int kernel_size = 3;
constexpr int radius = kernel_size / 2;
half3x3 horizontal_kernel = half3x3(-1./8., -1./8., -1./8.,
-1./8., 1., -1./8.,
-1./8., -1./8., -1./8.);
half3x3 vertical_kernel = half3x3(-1./8., -1./8., -1./8.,
-1./8., 1., -1./8.,
-1./8., -1./8., -1./8.);
half3 result_horizontal(0,0,0);
half3 result_vertical(0,0,0);
for(int j = 0; j <= kernel_size - 1; j++) {
for(int i = 0; i <= kernel_size - 1; i++) {
uint2 texture_index(gid.x + (i - radius), gid.y + (j - radius));
result_horizontal += horizontal_kernel[i][j] * inTexture.read(texture_index).rgb;
result_vertical += vertical_kernel[i][j] * inTexture.read(texture_index).rgb;
}
}
half3 bt601 = half3(0.299, 0.587, 0.114);
half gray_horizontal = dot(result_horizontal.rgb, bt601);
half gray_vertical = dot(result_vertical.rgb, bt601);
half magnitude = length(half2(gray_horizontal, gray_vertical));
outTexture.write(half4(half3(magnitude), 1), gid);
}

Answer 2

I know this is late, but if anyone still needs it I figured it out just now. It's very easy to find an edge detection shader, but not easy to figure out how to change the color of the detected edges, especially if you are new to this. Here is my kernel:
typedef struct {
simd_float3 rgb;
} AppliedColor;
kernel void edgeEffect(texture2d<half, access::read> inputTexture [[ texture(0) ]],
texture2d<half, access::read_write> outputTexture [[ texture(1) ]],
constant float &edgeStrength [[ buffer(0) ]],
constant AppliedColor &newColor [[ buffer(1) ]],
uint2 gid [[thread_position_in_grid]]) {
constexpr int kernelSize = 3;
constexpr int radius = kernelSize / 2;
half3x3 horizontalKernel = half3x3(-1, -2, -1,
0, 0, 0,
1, 2, 1);
half3x3 verticalKernel = half3x3(1, 0, -1,
2, 0, -2,
1, 0, -1);
half3 horizontalResult(0, 0, 0);
half3 verticalResult(0, 0, 0);
for(int j = 0; j <= kernelSize - 1; j++) {
for(int i = 0; i <= kernelSize - 1; i++) {
uint2 textureIndex(gid.x + (i - radius), gid.y + (j - radius));
horizontalResult += horizontalKernel[i][j] * inputTexture.read(textureIndex).rgb;
verticalResult += verticalKernel[i][j] * inputTexture.read(textureIndex).rgb;
}
}
half horizontalWhite = dot(horizontalResult.rgb, half3(1.0));
half verticalWhite = dot(verticalResult.rgb, half3(1.0));
half magnitude = length(half2(horizontalWhite, verticalWhite)) * edgeStrength;
outputTexture.write(half4(half3(newColor.rgb * magnitude), 1), gid);
}//edgeEffect
This is using Sobel kernels to calculate the derivatives.