Transcription

Hey, did you know that you can already use transparent videos on the web? In this video I'm going to show you all the ways how to do that. First, why would you need transparent videos on the web anyway? Well, usually it is the cheapest alternative to WebGL, because when you don't have any interactivity in your animation, you can just get away with the video. And when your video has a transparency, everybody just assumes it's WebGL or just an animation, whereas you don't have to code it, it's just a video. So how to create transparent video? Let's start from the end. This is the HTML we need to achieve video transparency. And the reason is there is no single video codec which supports transparency, which is supported in all the browsers. So we'll need to use two. One for the Safari browsers, which is HEVC codec, and the other one for the rest of the browsers, which is VP9 codec or usually WebM format for the video. So usually you're going to get transparency as an image sequence, like PNGs or a web piece coming from a blender or any other software. For example, these ones I rendered myself with the JavaScript. There's 108 frames of transparent PNGs. And to create a video from them, we're going to use open source utility called ffmpeg and this simple, short and obvious command. I know it might look like a black magic, but let's break it down. So basically, we just run ffmpeg application with some parameters. And the first one is about how many frames per second do we have in our sequence. Next one says that we are picking up the group of images, well, the sequence. And then we are stating which images are we picking up. So the image is going to have three digits in the file name with the leading zero. That's our image sequence. Then we are saying that we're going to encode it in the VP9 codec, which is the codec with the transparency that we want to use. And lastly, we're just saying that we're going to save this whole thing into the video file with a vp9.webm name. So essentially, we're just creating a video file out of the sequence. Of course, you don't have to remember all those parameters yourself. You always can Google them or just save it as a snippet. So after running this command, we're going to get a file encoded with the VP9 codec. And if we open it in the browsers, we're going to see this. So it's going to be transparent in Chrome and all the other browsers, except Safari. In Safari, it's going to have the black background. So let's see how we're going to fix it and create a video for Safari. Unfortunately, it is not as easy as video for Safari. It'll take two steps to get there. First, we're going to use intermediate codec called ProRes 4444, created by Apple, which is also supporting alpha channels, but doesn't work in any of the browsers. Apple created it specifically as a high quality solution for exchanging motion graphics, which is exactly how we're going to use it. To create this ProRes version of the video, we're going to use ffmpeg again. The command is a bit longer, but it's built in a similar way as the previous one. And just one other thing that I've added here, you're actually able to change the bitrate of the video which you create, which is essentially a compression quality of the video. And just so you get an idea about the file sizes here, VP9 will compress my sequence into roughly one megabyte of a file, and ProRes will get me like 50 megabytes of a file. High quality. So now that we have our ProRes version of a video, we can just open it in a quick time. We're not going to see any transparency. It's going to be just the black background. But it's now easy to create an actual HEVC file, finally. So to do that, we're going to go just to file, export as 1080p, which is the size of my video. And then make sure that you choose HEVC down here and preserve transparency. When you hit save, you're going to finally get a transparent video that is supported in Safari. And yay! With these two files, it's going to be working across all the browsers. The only real drawback of this particular technique, we are not really in control of HEVC file size. And it could get really big. In this example, it's almost three times bigger than the VP9 version. Another super easy way of creating HEVC comes from Rotata company. The guys actually specialize in creating promotional and cool special effects videos. And they also happen to have a perfect guide about creating alpha channel videos on their website. I really recommend you to check out both the application and the guide. And they also have a small application to make a conversion. So let's check out that application. It's really just that. You should drag and drop video and get the result. So I can drag and drop any video which has a transparency inside of it. And we already have a ProRes version which happens to have transparency inside. And if I drag and drop it, we're going to see the conversion process happening. And in the end, we're going to just get two files. So it created for us both WebM, which is VP9 version, and HEVC version for Safari. And you can already see that the sizes are actually the same that we got from a FFmpeg conversion. The process is that simple, but we are missing compression quality again. Another good way of creating HEVCs is with a compressor application by Apple. It is the one integrated with Final Cut Pro application, but you can also get it as a separate one on the App Store for 50 USD. So it only makes sense if you do a lot of video conversion, or maybe you have a friend with a Final Cut Pro anyway. So let's see how this one works for us. This is how the application looks like. On the left, we have different presets for the video conversion. And I'm going to just look for the HEVC here. And let's track our file, ProRes version of a video with the transparency, and let's try to convert it to HEVC here. So this is how it looks like so far. And now I need to choose the preset and drag it on my video. So I'm going to choose the best quality HEVC here. I'm going to pick the tab with the video settings. But let's just convert it as is. Let's see what the filesets we're going to get. There's a preserve alpha checkbox, which I obviously need to check. And let's start batch. And let's see, we got the 4.5 megabyte file size, which is even bigger than what we got with the previous methods. So let's try to change some settings now and see how it could change the file size for us. So I'm going to drag again the video. I'm going to drag again the preset. But this time, I'm going to change a bit more settings. So once I choose preserve alpha here, I get this quality slider right here. So I can change the quality of the file. Let's drag it all the way down. And here in the preview, we're going to see how it changes the quality of the video, the actual quality of the image. So we could drag and compare two video files. I don't see a lot of difference here, just a minor one. So let's try this conversion with the lowest quality for my video. I'm going to call it low. Let's start batch. And we got a one megabyte file size, which is even smaller than what we have with the VP9 codec. And this is how you can achieve smaller file size for the HEVC and more flexibility in conversion for the HEVCs. So you can pick whichever method suits you best out of those. I'd suggest that the compressor is the best way to actually compress HEVCs. But then again, you can also play with the ffmpeg bitrate option, which we mentioned when we converted to the ProRes version of a video. But there are actually some other approaches that could help in your particular case to achieve video transparency. Two more that I want to mention here. In some cases, the only reason that you want video transparency is just to fit your video into the solid background. Because there is a difference in color profile implementations across browsers and systems. In a lot of cases, you're going to get this slight difference between the page background set in CSS and the actual video background rendered by the browser. So there's a fix for that. There's a really nice write-up on Sanchez Studio website about it. So essentially, we're going to draw our video into the canvas element. And once we have it inside the canvas, like really small canvas element, we can get the pixel color in there. And using that color information, we can set it for the parent background element. So essentially, the color will be different in all the different browsers and systems. But it will be in line with the video background. So using this method, you can avoid creating two video files. And using transparency, you'll get away with just one file, usual non-transparent video file. Transparent videos do work in WebGL. For example, here we could see a transparent video we just created in a 3GS scene. And I'm using it as a usual HTML video for the source. And creating from this HTML source a video texture with a 3GS module video texture. So it does work in WebGL, but it's not quite reliable across all the systems. So usually, the different approach is used. The mask videos. Two non-transparent videos are used. One for the color, and the other one is a mask for transparency. Black is for transparent areas in the original video. Both videos are then combined in the WebGL to create a real transparent video. And they are usually stacked together into one video file to avoid synchronization issues between the video. So you can create this video in the video editing software, or you could use FFmpeg again. Here's how to do that. We can take our ProRes transparent video and apply AlphaExtract filter to it. This will create a black and white mask video. And now we can use another FFmpeg filter called HStack to actually stack two videos together into one file. Non-transparent original video and black and white mask video. And this can be used to achieve bulletproof video transparency in WebGL. So these are all my tricks with transparent videos for today. As you can see, there are a lot of different approaches. And the more you know, the better. Thank you for watching. Let me know if you like it or share your approach in the comments. And see you in the next one. Stay safe and Slava Ukraini!