mkaouri Posted January 16, 2018 Share Posted January 16, 2018 Hi BabylonJs lovers, Now you can apply transparent background on videos with chromakey (green background). Check the demo here: http://www.babylonjs-playground.com/#P75330 Enjoy... jerome 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 16, 2018 Share Posted January 16, 2018 Excellent! mkaouri 1 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted January 16, 2018 Share Posted January 16, 2018 Like I said in the other post, it needs a tolerance value in your algo to be effective; but great start! mkaouri 1 Quote Link to comment Share on other sites More sharing options...
Gijs Posted January 16, 2018 Share Posted January 16, 2018 The video doesn't show in Firefox, I can only hear the sound mkaouri 1 Quote Link to comment Share on other sites More sharing options...
mkaouri Posted January 17, 2018 Author Share Posted January 17, 2018 9 hours ago, Pryme8 said: Like I said in the other post, it needs a tolerance value in your algo to be effective; but great start! There's no perfect chroma key colors in videos on the web. Those videos requires to have the exact chroma key background with RGB 0,255,0. This is why I added a conditional algorithm to check the variance of green color. This condition should work with most of light green colors. if (r >= 0 && g >= 230 && b <= 100) Quote Link to comment Share on other sites More sharing options...
mkaouri Posted January 17, 2018 Author Share Posted January 17, 2018 13 hours ago, Gijs said: The video doesn't show in Firefox, I can only hear the sound Maybe this will work with Firefox: http://www.babylonjs-playground.com/#P75330#5 But it's flickering. There should be a workaround. Hope someone can find a solution to avoid that flickering. Gijs and NasimiAsl 2 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted January 17, 2018 Share Posted January 17, 2018 very nice idea i try it in GPU http://www.babylonjs-playground.com/#P75330#8 alpha http://www.babylonjs-playground.com/#P75330#9 discard https://www.babylonjs-playground.com/#P75330#12 shaderBuilder (parametric 249 in 255) mkaouri, Gijs and Pryme8 3 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted January 17, 2018 Share Posted January 17, 2018 I did not realize this was CPU, I would stick with @NasimiAsl solution and run with that. mkaouri 1 Quote Link to comment Share on other sites More sharing options...
mkaouri Posted January 17, 2018 Author Share Posted January 17, 2018 2 hours ago, NasimiAsl said: very nice idea i try it in GPU http://www.babylonjs-playground.com/#P75330#8 alpha http://www.babylonjs-playground.com/#P75330#9 discard https://www.babylonjs-playground.com/#P75330#12 shaderBuilder (parametric 249 in 255) Excellent.. You made it so great. Thanks. I will use your solution too.. Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted January 17, 2018 Share Posted January 17, 2018 i use your idea so thanks Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted January 17, 2018 Share Posted January 17, 2018 http://www.babylonjs-playground.com/#P75330#17 How to do tolerance. (or a likeness of it). And now its a true ChromaKey cause it can handle any color you tell it now. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.