Hi. I have a problem with the big-size videos. I’m using video texture from this example: PlayCanvas 3D HTML5 Game Engine and it lags(video plays 3 sec, stops, and plays again). Also, I tried this example: Video Textures | Learn PlayCanvas, but same problem. I need the video to play smoothly. Any suggestion on how to fix it? Reducing video size will be the last option if I will not find any solution. The video size is 59 Mb.
What is your network speed?
What is the resolution, bit -rate and duration of the video? Would you be able to share the video?
Yeah, I will share the project.
Here is my project: https://playcanvas.com/editor/scene/1098047.
1 Like
Kapture 2021-02-25 at 20.17.19
It plays fine on my laptop and connection.
Several things to consider here:
It’s a 20 sec video at 1080p 30fps and 52MB. The bitrate is around 20 Mb/s which is really high. YouTube is usually around 4Mb/s.
It’s choppy/lagging for you potentially because of/or:
- It’s too high a bitrate and your PC/browser can’t handle it while rendering a 3D scene
- The connection that you are on is too slow for the bitrate as it is not preloaded before playing
What you can do to potentially fix this if not loading the file ahead of time (and/or):
- Re-encode at a lower bitrate (eg 5 Mb/s)
- Use a lower resolution of like 720p
If this is something that is being considered for production, do take into consideration of the user’s connection and offer different quality settings like YouTube.
1 Like
It plays choppy for me as well. I agree with @yaustar’s recommendations. Just dropping the size to 1280x720 will halve the number of pixels/frame that need to be displayed and calculated. That should help for browser performance issues. A lower bit rate will help for bandwidth related issues.
You might also try checking the “preload” option. That will slow down the start of the application, but the video will be all there before it attempts to play it. You might do that and then see how much longer it takes the app to load to give an idea of how well your bandwidth is handling that file size.
https://developer.playcanvas.com/en/user-manual/assets/preloading-and-streaming/
1 Like
Here’s a fork with a 4Mb/s bitrate as an example: https://playcanvas.com/editor/scene/1099342
I be interested to see if it lags for you both too.
Plays great here
1 Like
Thanks for your suggestions. Video plays well in your example.
1 Like
Thanks for advise. I’m already using preload.
It fixed a problem. Thank you for your help.
Any suggestion on how to make a video look better after removing the green screen? I mean edges. I tried to change some value in the shader and it helps but I need to make the edges look better.
@Leonidas Wrote the original shader. My guess is that you would have to tweak the tolerances in the shader a bit to allow for ‘nearly’ green areas
Yeah, you can try and tweak the shader values, though real-time chromakeying is a complex topic that normally involves using machine learning and lookup tables to get decent quality.
What values I can change for better quality? I changed weights and it helps a bit but I’m new to working with shaders.
Yes, that’s it and the backgroundColor depending on your green screen color. Basically it’s trial and error with those values.
And as I said you can’t get a perfect result with this solution.
Thanks for help.
I agree with Leonidas. Your results are actually pretty good for a realtime solution that isn’t using made-for-the-purpose hardware. Even slow, non-realtime solutions that use sophisticated algorithms seldom give “perfect” results. You usually just tweak until the flaws aren’t easily noticed. But if you pulled the matte, you know where the bodies are buried.
Your biggest issues are in fine details around the head. If you are shooting the footage yourself, you can help things by reducing those details. The original footage actually did a pretty good job. It was smart to tie the actor’s hair back, but they could have done a better job taming some of the stray strands. Extra bobby pins or even men’s hair gel can help with that. Then there’s green spill on what appear to be gray cables. If those cables were matte black, that would help. And finally, different backgrounds might help to hide the flaws.
1 Like
I was thinking about maybe doing some kind of pre-treatment to reduce the spill on fine details, so I forked @yaustar Yauster’s fork and downloaded his converted lower rate video. It appears to me that the green screen in that video was added after the fact. There are already imperfect matte artifacts in that video. You probably can’t improve on artifacts that are pretty much baked into the video.
It looks to me like someone pulled a matte (probably green screen) and then added a pure green screen back in. This pure green color probably makes it easier to do real time green screen. Most real green screens are not nearly as perfect, which is why we have sophisticated (and slow) software for pulling mattes. You can see this matte isn’t nearly as nice a saturated green. Though it is pretty darned good for even illumination - which is often much worse. Real green screens are always a compromise of some sort. For instance, a super bright/pure screen can create lots of spill.
Having that pure color probably makes it easier for the Chromakey shader to find the areas to matte. But doing this will limit your ability to tweak for better results. You need to do that in the initial matte pull. If you have the original footage, you might be able to repeat this “pull and replace” process for better results.
BTW, the use of red and blue side lights is an effective way to combat green screen spill. So whoever shot this clearly thought it through. The edges of the body look really good I think largely because they reduced green spill in this way, and the red/blue lights don’t look particularly odd in this “sci-fi” kind of scene.
2 Likes
Wow @wturber, that’s some in-depth analysis, many thanks for sharing.
1 Like
