OpenGL ES Green Screen... But I want to use black

Question

This works great for green screen, my background is green and using this code it makes green = alpha.

lowp vec4 textureColor = texture2D(u_samplers2D[0], vTextu);

lowp float rbAverage = textureColor.r * 0.5 + textureColor.b * 0.5;
lowp float gDelta = textureColor.g - rbAverage;
textureColor.a = 1.0 - smoothstep(0.0, 0.25, gDelta);
textureColor.a = textureColor.a * textureColor.a * textureColor.a;
gl_FragColor = textureColor;

How do I change the code so that it use a black background instead of green? I'm thinking I could get values for the dark red, green, blues then use that as the alpha? Any pointers would be kind.

Am I right in that with this computation the minimum alpha you can achieve (i.e. for pure green) would be `0.42`? Strange, since I would expect pure green to be completely transparent (i.e. give an alpha of `0`). This minimum alpha would already be achieved for yellow and even orange. So I have strong doubt in this being a good color key function in the first place. — Christian Rau, Jul 03 '13 at 14:41
You could try to just set alpha on dark pixels, it might work, but will not be as good as chroma key unless you can guarantee that foreground is lit. — Vasaka, Jul 03 '13 at 17:16
Thank Vasaka, sounds like an idea. How would I do that? (still learning about the shader language). — Ian Clay, Jul 03 '13 at 20:55

Vasaka · Answer 1 · 2013-07-03T21:38:59.750

0

You can calculate how close value to black, simplest way is to take maximum of the r g and b values, then set some threshold when you consider color opaque, and map your alpha values to [0..1] in pseudo code:

float brightness = max(textureColor.r, textureColor.g, textureColor.b);
float threshold = 0.1;
float alpha = brightness > threshold ? 1 : (threshold - brightness) / threshold;
gl_FragColor = vec4(textureColor.rgb, alpha);

edited Jul 03 '13 at 21:38

answered Jul 03 '13 at 14:15

Vasaka

1,953
1
19
30

Huh, how would that help? What he want's to do is use a black as transparency key instead of green, as his current code does. – Christian Rau Jul 03 '13 at 14:35
@ChristianRau misunderstood the question, fixed the answer. – Vasaka Jul 03 '13 at 21:39
Thank you @Vasaka I will try your idea, wasn't sure how to use max as from what I've read it only takes 2 values? – Ian Clay Jul 05 '13 at 12:24
@IanClay just call it twice storing intermediate value, I wrote it like that to spare trivial details. – Vasaka Jul 05 '13 at 12:37

score 0 · Accepted Answer · answered Jul 05 '13 at 12:21

lowp vec4 textureColor = texture2D(u_samplers2D, vTextu);
lowp float gtemp =  smoothstep(0.0, 0.5, textureColor.r);
gl_FragColor = vec4(1.0, 1.0, 1.0, gtemp);

This works for my situation. I was using a greyscale image with black background and just needed the white elements. The problem I had was that I was applying the alpha to grey pixels, but now Im using white and applying the alpha to that. I can adjust the smoothstep values to change the effect. And also add another alpha to fade in or out the image.

OpenGL ES Green Screen... But I want to use black

2 Answers2