Chroma key shader in Unity

Hello everyone, welcome back.

Today, we will going to look at how to create a chroma key shader graph in unity. This will going to be a super simple, short and sweet post.

"What's chroma key?" I hear you ask.

Chroma key

Chroma key compositing, or chroma keying, is a visual-effects and post-production technique for compositing (layering) two or more images or video streams together based on colour hues (chroma range). The technique has been used in many fields to remove a background from the subject of a photo or video – particularly the newscasting, motion picture, and video game industries.

In simple terms Green screen remover.

For this I am using Unity version 2021.3 but it will work on any Unity LTS versions. I have a project in URP.

Creating a shader

First let's create a shader graph, right click > create > shader graph > URP > Now I am going to select Unlit but it can be used in Lit shader as well. Let's call it ChromaKeyShaderGraph.

In shader graph, let's setup our shader so go to Graph inspector, First check Allow material override then set the surface type transparent.

Let's create a property for our Texture, so select Texture2d, let's call it BaseTexture. Drag it in.

To work with Texture2d we need to sample it so we will feed its output to Sample texture 2d node.

Now let's create Color mask node. What it does is, as we can guess from the name, it returns 1 for the mask color and 0 for rest.

Mask Color will be the color that we want to remove.

Range is the hue range of the color we want to mask. Think of this as a threshold similar to "Selection by color" option of any Image manipulation program. Higher the value more shades of color to mask.

Lastly, Fussiness will soften the edges similar to anti aliasing.

Now in Color mask node we have value of 1 for the color we want to remove, we need to invert this.

To do that let's take its output and feed it into One minus node.

One minus node will subtract 1 from whatever value we feed in, in this context it will invert the colors.

Then we will take its output and feed it into Alpha block.

We inverted the colors because in Alpha block 1 or white means opaque and 0 or black means fully transparent.

Lastly, let's take the output of our Sample texture 2d node and feed it into BaseColor block.

Now we will specify the properties for the inputs of our Color mask node, so we can access them from the inspector. 1 Color, and 2 float properties. We we call it ChromaKeyColor, HueRange and Fuzziness respectively and assign them.

Our shader graph will look something like this at the end.

Save our graph. We can also use it in VideoPlayer by setting Render mode to MaterialOverride.

Since we have only one defined texture, it will automatically takes it and will output our video clip frames to that texture.

Trouble following along? Check out this video!

Thank you so much for reading!