Chroma Key Shader / Material
Featured
Chroma Key Material
Have you ever said to yourself "This image sequence/Image is cool! I wish I could key out this background color."? Well you're in luck! Now you can import this nifty material into Lens Studio and key out any blue-screen and green-screen color in a texture.
Import Material
All you have to do is import the ChromaKey.lsmat file (link below) into your project. Just right click in the resources panel and navigate to Add, Import files and select the file from the location you downloaded it to. The file will come with the material and a sample texture for you to test with!
Chroma Key Material
Applying The Material
Now you can apply the material to any object you want. typically this is a 2D mesh like a plane or a billboard or a 2D Sprite. To do this, click on the material field in the Inspector tab for your object’s Mesh Visual component and choose the material from your Resources.
Material Parameters
So here's what you can do with the material.
- Key Color: This is the color you want to key out (remove) from the image
- Threshold: This slider controls how much of the color you want to remove. A higher number will remove a wider range of colors similar to the Key Color
- Slope: This slider smooths out the threshold and can soften the effect of the color removal
- Main Texture: This is the main texture for you material
- Green Suppress: This will desaturate remaining green values in the image
- Blue Suppress: This will desaturate remaining blue values in the image
Keying and Suppression
By sliding the Threshold slider and the Slope slider you can control how much of the color you want to remove. You can select the color you want to remove by clicking on the Key Color box and choosing the color from your image.
Suppression is used to desaturate any remaining color similar to the color you want removed. Sometimes pixels near the ones you want to keep have these subtle values that don't quite fall in the spectrum of the color you want keyed out. In this case a method of "color suppression" is used for these remaining pixels. It's important to note that setting this value too high will eventually desaturate the colors you want to keep, so watch out for that.
Wrap Up
And that's it! It's worth noting that this material is an unlit material and is primarily designed for flat textures that need some color keyed out of their source. This also works with animated textures such as image sequences. We hope you have fun with this!
Please make this work for video ... if it doesn't already.
Hi Stephen! This material works with videos and gifs too!
This is brilliant thank you so much!
This is brilliant thank you so much!
no link~
Hi Muneeb,
The link is https://storage.googleapis.com/snapchat-lens-assets/f1a09194-f02d-43ed-92b8-62e843179ff0/lensStudio/ChromaKeyPublic.lsmat.zip#asset:399
Hi All,
this is awesome. I am running into a problem, maybe you could hint me out:
I would like to access the videotexture (mp4) via script to control the play.
I cannot seem to address it like I usually do with Asset.Texture.videoTexture
Any Ideas?
Thank you people
eL.
Hi eL Be,
Can you show us your current script so i know what's missing or went wrong?
Hi n-mikael,
i messed around so much that in the end I have deleted the script; but basically i tried to access the videoTexture like this:
//var myAnimation = mySpriteVisual.mainMaterial.mainPass.baseTex.control;
Hey n-mikael,
I tried again today and prepared my Problem in some screenshots.
I applied the same script twice, one object has the chromaKeyMat
the other one has the default Mat. both carry the same mp4 Texture.
The Default VideoTexture is controllable, the other one not.Can you Please help me?
Here´s the script
// Control2DAnimation.js
// Version: 0.0.1
// Event: Lens Initialized
// Description: Plays VideoTextures on trigger with delayTimeOption
//@ui {"widget":"separator"}
// @input string animationTrigger = TouchStartEvent { "widget": "combobox", "values": [ { "label": "Brows Lowered", "value": "BrowsLoweredEvent" }, { "label": "Brows Raised", "value": "BrowsRaisedEvent" }, { "label": "Brows Returned To Normal", "value": "BrowsReturnedToNormalEvent" }, { "label": "Face Found", "value": "FaceFoundEvent" }, { "label": "Face Lost", "value": "FaceLostEvent" }, { "label": "Kiss Finished", "value": "KissFinishedEvent" }, { "label": "Kiss Started", "value": "KissStartedEvent" }, { "label": "Mouth Closed", "value": "MouthClosedEvent" }, { "label": "Mouth Opened", "value": "MouthOpenedEvent" }, { "label": "Smile Finished", "value": "SmileFinishedEvent" }, { "label": "Smile Started", "value": "SmileStartedEvent" }, { "label": "Touch Start", "value": "TouchStartEvent" }, { "label": "Touch End", "value": "TouchEndEvent" }, { "label": "Tap", "value": "TapEvent" } ] }
//@input SceneObject mySceneObject
//@input Component.Image myObject
//@input Asset.Texture myTex
//@input float delayTime
var loops = 1;
var myVideo = script.myTex.control;
var myScript = script.mySceneObject.getFirstComponent("ScriptComponent");
//print(myScript);
var delayEvent = script.createEvent("DelayedCallbackEvent");
delayEvent.bind(startAnimation);
//After Delay call startAnimation function
function startCountdown(){
delayEvent.reset(script.delayTime);
}
var animationTriggerEvent = script.createEvent(script.animationTrigger);
animationTriggerEvent.bind(startCountdown);
function startAnimation() {
//play 2D Animation
myVideo.play(loops);
killScript(); //<- so I put it here
if(myVideo.getStatus() == VideoStatus.Stopped){
print("stopped");
killScript(); //<-does not work
}
}
function killScript(){
myScript.destroy();
}
Hi,
Sorry for late response.
Can you try "behavior script" to see if that solves the problem?
https://lensstudio.snapchat.com/guides/scripting/helper-scripts/behavior/
Thanks for the tutorial! It was very helpful :D
Cheers,
SirQu3ntin
This is great, but how to apply this to the camera input?? It seems to only work with objects. I wanted to have chromakey on the camera.
I know I could use the segmentation template for a virtual chromakey, but that's too heavy on the CPU and I already have a green screen on my background.
I appreciate your help, thanks.