I was going to place this on the asset store, but someone already has put something on there, so here you go for free, this shader simply removes a set colour with tolerance from a texture and makes its transparent. It is really useful when using video/movie textures with Qualcomm Vuforia plugin to cut out a person for instance on a blue screen / keyable background to then plant that character in an Augmented Reality setting:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
Shader "Unlit/Transparent Chroma" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _MaskCol ("Mask Color", Color) = (1.0, 0.0, 0.0, 1.0) _Sensitivity ("Threshold Sensitivity", Range(0,1)) = 0.5 _Smooth ("Smoothing", Range(0,1)) = 0.5 } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"} LOD 100 ZTest Always Cull Back ZWrite On Lighting Off Fog { Mode off } CGPROGRAM #pragma surface surf Lambert alpha struct Input { float2 uv_MainTex; }; sampler2D _MainTex; float4 _MaskCol; float _Sensitivity; float _Smooth; void surf (Input IN, inout SurfaceOutput o) { half4 c = tex2D (_MainTex, IN.uv_MainTex); float maskY = 0.2989 * _MaskCol.r + 0.5866 * _MaskCol.g + 0.1145 * _MaskCol.b; float maskCr = 0.7132 * (_MaskCol.r - maskY); float maskCb = 0.5647 * (_MaskCol.b - maskY); float Y = 0.2989 * c.r + 0.5866 * c.g + 0.1145 * c.b; float Cr = 0.7132 * (c.r - Y); float Cb = 0.5647 * (c.b - Y); float blendValue = smoothstep(_Sensitivity, _Sensitivity + _Smooth, distance(float2(Cr, Cb), float2(maskCr, maskCb))); o.Alpha = 1.0 * blendValue; o.Emission = c.rgb * blendValue; } ENDCG } FallBack "Diffuse" } |
As advised below, this shader should possibly tagged with the keywords IOS, Android, Alpha, Channel. Hope this helps.
84381 Total Views 5 Views Today
Hey Jon,
Thanks for this chroma Key code.
I have a video clip that I am able to key out the green, however I am left with a solid black background and a tiny rim around the actor of transparent video. Do you have a suggestion for how I can get this dialed in for keying out the green and not having the black in the background?
Thanks for any help! Great site!
Hi Phil, you could perhaps go into the shader and adjust the _Sensitivity and _Smooth floats min max and starting values to a closer range giving you more fine tuning, somewhere between transparent and non-transparent. I’ve normally gone with RGB value 0,0,255 on various green screen movies, however in many cases pre-keying treatment in after effects helped with this and got the green screening to the exact color value required, as opposed to putting the movie directly in, hope that helps.
Thank you so much for this shader. I’ve been search this for a week and I got nothing but this.
You make me smile John, thank you so much. Thank you.
But can you give me some advice, so the image above green screen is smooth and clean after I applying this shader.
Sorry for my bad english, I’m Indonesian.
Hi Rizky,
Generally when using this with any green screen or any other colour movie, I use After Effects or similar to pre process any filmed footage making sure any of the pixels I want to be transparent/masked/see-through are purely of one colour value of very close in RGB value, obviously this Shader isn’t perfect for professional grade keying and for shadows etc but is low cost and works on Android and IOS, also along with Vuforia. I tend to make sure any shadows in the movie are eliminated and that the screening is purely one colour with very little shade difference. Hope that helps.
Hi Jon,
Thanks a lot for the shader, it works on both IOS and Android with Vuforia. One issue was finding it, could you please include these keywords on this page to make finding it easier:
IOS, Android, Alpha, Channel
Cheers
Thanks Alexis have added the keywords, Yans yes you got it, but in case others do not:- to use create a new shader script in unity and add this code, save, then create a new material and select this shader from the inspector.
Thanks for this code Jon.
but I have a silly question, where should I put this code in vuforia?
well Jon, I did it..
do not need to answer my previous question 🙂
Thanks
Could you tell me how to get it to work?
Right click in your project window and click new shader, this will create an empty shader script, double click the new shader script to open your script editing software (normally monodevelop), replace the new existing shader code with the code above and save it, close your script editor, then right click once more in project window in unity and create a new material, select this material and then select the shader from the drop down shader menu, in this case it will be in the Unlit folder / called Transparent Chroma. Apply this material to your vuforia video object or whatever you want to key a colour out of a texture on , select and match the color in the material settings of the new material that you want to key out on that video and adjust the slider ranges, you will not see the video in the editor, I suggest you take a still from the video and use that as a place holder to adjust the keying by dragging it into the main texture slot. I hope this helps and I haven’t read your request for help wrong, but applying a shader is pretty fundamental part of unity.
Thanks, this shader works flawlessly 🙂
Hi,
I have attached this shader to the video prefab in Unity. But, still I am getting the video grey background. Do I need to tweak something?
Thanks,
BP
The movie format shouldn’t affect the shader, the shader was designed for Unity version 3-4 though and has not been tested on Unity 5. For movies I would suggest a .h264 Mp4 codec format and to make sure all is working start with a baseline 3 codec and make the video 640 * 480 pixels. You should make the parts that need keying to alpha have a constant RGB color for best effect before using the shader for best effect. Hope that helps!
Hey, any tips on how could one make this work on Unity 5? I know little about shaders and could use some help.
Yeah, i’ll take a look, apologies not really been in unity 5 till last month due to old projects etc. I’ll see what gives!
Hi Jon. We did everything as u wrote, but when i open the app… the green screen is still there, kind of semi transparent but the model ( woman ) it´s transparent. Kind of reverse me the real objective. What happened?
Best regards.
Need to fix this shader for unity 5 I think!
Hola, me funciona perfectamente, solo que me lo hace al reves. Es decir, hace transparente el area del video y el area verde la deja como está.
any news about unity5 script?
thanx anyway
Still works fine for me in 5, plus vuforia comes with it’s own chroma shaders now I think?
Hi Jon, thanks for your awesome shader! It works really nicely when applied to a even colored green screen. But when there are shadow it losses its quality. Do you have any idea how to improve the shader to better handle shadows on the green screen?
Not really bar better editing in post, unless you using a webcam/live view, you could also consider using a kinnect with windows to film your scene then you can keyout depth, but it really depends on what your doing.
Can i know how you get the value of masking like 0.2989 , 0.5866 , 0.1145 ?
Its in Lab space within the shader I think, you could set floats if you want LAB input. if its output you want you’d have to possibly run from Lab to RGB or HSB, not quite sure what you mean.
Hi Jon,
Many thanks for this shader.
Did you update it yet for Unity 5? I am asking before I attempt it as I’m a complete noob and want to ensure I’m using something that works before I tear my receding hair out.
Thanks again
Yes works for Unity 5, not sure about IOS metal yet, but believe it may work.