zwei-p's picture
+1

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

Comments

Thanks @jersmi for thinking

alexmitchellmus's picture
Submitted by

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!

2 Answers

alexmitchellmus's picture
+1

As per the request in the discussion, from @jersmi below, here is the ShaderToy from: https://www.shadertoy.com/view/4dX3WN

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.

jstrecker's picture
+0

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.

Couple things:

jersmi's picture
Submitted by

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.

I'd love to see a shadertoy

jersmi's picture
Submitted by

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.)

This comp has this shader:

alexmitchellmus's picture
Submitted by

Hey @jersmi, this comp has this shader: https://www.shadertoy.com/view/MtjGRV

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); }