is there a way to realize a GreenScreen / Chroma Keying

[zwei-p (jens)]

is there a way to realize a GreenScreen / Chroma Keying ?

[jstrecker (Jaymie)]

You could do a pretty basic greenscreen effect with Mask Image with Brightness, as in the attached composition. Or maybe something better by writing GLSL in Make Image with Shadertoy.

greenscreen-mask.vuo (3.55 KB)

[alexmitchellmus]

There are quite a few greenscreen shadert toys online! But more advanced features like spill suppression are dependent on the GLSL code.

[alexmitchellmus]

As per the request in the discussion, from @jersmi below, here is the ShaderToy from: Shader - Shadertoy BETA

As ShaderToy does not accept custom datatypes, I am unable to easily send it the Color value of a selected point, (I added a red dot to get the custom color value of green screen). So simply find the correct color - and copy it into the shader (where it lists the BG color values).

Quite an impressive key!!! However many green screen effects pull more than one key- and also there is always an amount of spill, (as in the eyes), which needs to be fixed.

I hope this helps.  

GreenScreenTest2.vuo (6.64 KB)

[jersmi]

Very cool, thank you for this @alexmitchellmus!

[jersmi]

Couple things:

@alexmitchellmus: As ShaderToy does not accept custom datatypes, I am unable to easily send it the Color value of a selected point

• Using Append Texts to break apart the fragment shader opens this door. I used your first example and inserted a way to sample the background. Works great! Render the comp then use Cmd-click to sample. Changing sample size is useful, too.

• Added a couple nodes to clean up the mask a bit, which suggests there are more things possible using built-in nodes for clever spill suppression, cleaning up edges, etc. With Append Texts, probably could pile more features into one shader with real time adjustments.

GreenScreenTest3.vuo (9.66 KB)

[jersmi]

I’d love to see a shadertoy demo in Vuo doing something like this. GLSL is slow going for me. Like, how would someone get this chroma key shader up and running? https://www.shadertoy.com/view/4dX3WN

Btw, IIUC, using Mask Image with Brightness would essentially be a luma key. (Edit: I see your example, Jaymie – using the green channel on ‘Mask Image by Brightness’ is not a luma key. Works pretty well as is. Vuo should probably have a built-in Mask Image by Color, too.)

[alexmitchellmus]

Thanks @jersmi for thinking of a way to make it easy! (I was only thinking about getting data values into a custom shader node- so I didn’t think of cutting up the actual shader program itself! VERY COOL). Talk about collaborative coding! :-) There are also other color values as well for fine tuning the key, you may want to have a look at them to with the same trick!

[jstrecker (Jaymie)]

@jersmi, have you tried following @alexmitchellmus’s steps above for “translating a ShaderToy shader to Vuo” (actually it’s translating the new ShaderToy syntax back to the older syntax that Vuo currently expects), then pasting the code into the Fragment Shader input of Make Image with Shadertoy? Check Console for error messages.

[alexmitchellmus]

Hey @jersmi, this comp has this shader: Shader - Shadertoy BETA

The original shader had an effect on the BackGround (BG)- but I took it off to give you more freedom to play. This REALLY is a simple shader, and a better shader could provide VERY good results. Unless I am mistaken, GLSL should easily be able to pull a cinema quality green screen (given the right programming).

Linked to a random GreenScreen cat, whoever knew!

Translating a ShaderToy shader to Vuo can be easy or hard depending on the shader. If its a simple shader, (and simple doesn’t mean small either), then you can make it work by doing 3 steps:

• Change the void mainImage( out vec4 fragColor, in vec2 fragCoord ) function to void main() (no text in function brackets) some people do: void main(void) but it works in Vuo without.
• Change FragColor (or) fragColor to gl_FragColor
• Change FragCoord (or) fragCoord to gl_FragCoord

Those are the things I change right away. Also remember- don’t get worried when you see: fragCoord.xy, that simply means the XY component of fragCoord, which is simply the current pixel coordinate. Think of it like an old TV scanning, each line at a time across the X and down each line on the Y. You don’t need to use XY at the end of fragCoord all the time, but sometimes you do, it depends on what you are doing.

Other than that, as ShaderToy is GLSL ES, and I believe Vuo is FULL GLSL, then there will always be small issues- or differences. But most of the time a bit of a play gets it working lovely!

BEFORE:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy / iResolution.xy;
float time = iGlobalTime;
vec4 bg = vec4(sin(time+uv.x),sin((time+uv.x)*2.),sin((time+uv.x)*3.),1.);
vec4 texture1 = texture2D(iChannel0, uv);
vec4 texture2 = texture2D(iChannel1, uv);
bg += texture2;
float greens = clamp(clamp(((texture1.g-texture1.r)-texture1.b),0.,1.)*10.,0.,1.);
fragColor = mix(texture1,bg,greens);
}

AFTER:

void main()
{
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec4 texture1 = texture2D(iChannel0, uv);
vec4 texture2 = texture2D(iChannel1, uv);
vec4 bg = texture2;
float greens = clamp(clamp(((texture1.g-texture1.r)-texture1.b),0.,1.)*10.,0.,1.);
gl_FragColor = mix(texture1,bg,greens);
}

GreenScreenTest.vuo (2.93 KB)