Link to free assets at ProductionCrate
Hi everyone. Today we're going to be talking about Spark AR again. This is my third tutorial on the topic and this one is going to be a little bit more geared to people with a little bit more experience on the topic. If you have no experience in Spark AR, no problem, just check out my earlier post where it's really just a beginners dive into the program. Also, if you want the video tutorial for how to create a filter that's also on my YouTube and that one is also really easy to follow along. See it below.
So without further ado..
How To Create Face Filters With Video Assets
So today I'm going to be creating a fire filter through Spark AR that is going to be for Instagram. - @andrewbakervfx (follow me for more)
End result below..
I’m going after that sort of room on fire effect. You may have seen the meme around which says “this is fine.”, and it is a character sitting there sipping his coffee with the whole world on fire behind him, right? So I'm going for a similar sort of effect with this.
I'm going to be using free video assets from this amazing website called ProductionCrate. If you aren't familiar with ProductionCrate, you should check it out, it has a lot of great assets. Today we're going to be using their fire assets. So if you wanted to head over to their website and type in fire in the search menu. And another great thing about this website is they have a lot of free content. If you search and at the top you see the preview pro content, if you uncheck that, you're going to be left with all of their free assets. I'm not saying don't buy any of their assets, I'm just saying that I'm going to be using free assets for the video so you can feel free to do the same and you can open up Spark AR and get started.
Another key trick to mention is if you do have a ProductionCrate account, if you go into your settings and how you want to download the assets, I'm downloading mine as PNG image sequences because that's just going to make this a little bit faster because we're going to be working with image sequences, right?
So in Spark AR you're probably familiar
with setting up the canvas and the camera texture and segmentation and all that good stuff. (If not, check out the prior blog tutorial.) Once you set up your canvas, we're going to create a rectangle and you can set that to another layer if you wish. Or you can set the size to full width by clicking on the size there and go down to the materials there on the property side. You're going to have to create a new material. And the shader settings should pop up. If they don't, you'll see under your assets on the left hand side, under materials, all your materials are right there. So you're going to go in and shader type is defaulted to “standard”. You can play around with that. I have mine set to “flat”. Flat won't receive any lighting data from the scene and we don't need that because we're going to be using video assets. We don't need them to be affected by the lighting.
Next, in your material you're going to see the texture and this is one of the main settings we're going to have to pay attention to. We're going to create a new texture. And again, that should pop up a new asset property for you where you'll see your new texture’s settings. It's defaulted to single texture in the very top by type, you're going to want to click that drop down and select “texture sequence”. Once you hit texture sequence, it's going to prompt you to import an image sequence.
Okay, so this is where I'm going to have to diverge a little bit from Spark AR into just managing your assets since Spark AR has mandatory file size cap limits. I made this effect for Instagram. The max cap is 4 MB. Is that right? Four megabytes. It's super small, extremely small. Facebook is a little bit more forgiving. I think it's six or something, I can't recall off the top of my head. But it's also quite small. So we are going to need to compress the living crap out of our video assets from ProductionCrate, unfortunately. I'm using just a program that I'm familiar with, but anything that you can use that you're familiar with, whether it's Photoshop or After Effects, etc, whatever, you're just going to need to basically degrade the image sequences. In this case, since the, the files need to be so small, we're going to be using 4 methods of degradation. And that is simply cropping, size and quality. I also trimmed the amount of frames in each clip. This is depending on how many video assets you want to bring in. I am using over 10 video assets. I'm using a lot. Some of them also have multiple instances. So there's a lot going on in my scene. If you just want to use one or two videos, you probably aren't going to run into as many issues as I did, but I'm just going to go over it in case.
You'll see a lot of your videos have a lot of black empty space in the frame. We want to minimize that as much as possible using a crop feature or something like that. We're also going to downsize the images extensively in this case from, you know, around 1080p to extremely low numbers, like around 200 by 300 pixels, very small. Some of them you can get away with doing larger sizes if you want to go like 720p - you might be able to do that. It’s going to depend on what you're working with and trying to accomplish. Lastly, we're also going to render that out as a JPEG sequence because PNGs are larger and JPEGs are have more compression and we are going to turn the quality down quite a bit. I turned the quality down very low to get the smallest size possible. This is the only time you will every hear me telling you to degrade you images and trust me, it was painful.
Another good note to mention is in your program that you're using to edit these video assets you're probably going to want to either grade or color match the footage so that it will fit into the scene a little bit easier on the Spark AR side. What I did was use a contact sheet to get all of the fires looking similar and I made sure to render them out with similar settings and also take note of the frame rate.
Now back into spark AR. When you upload that image sequence under the texture settings, under texture sequence, multiple textures, you'll see the duration of the frames and the size. It will take a long time to calculate the size, the program is quite slow at calculating and things like that. You may want to keep tabs on your asset summary, a tab at the bottom because, quite frankly, I had to go back and re-export and recompress over and over again repeatedly to get the file small enough. Again, might not be an issue for you.
Once you upload that texture sequence, you are going to then create an animation sequence from it. An easy way to do this is just by going back to your material where you created the new texture and just say under that dropdown, “create new animation sequence” or you can just create one on the asset panel. From there you'll hit the dropdown by texture and you should see the image sequence texture there. It will show you a frame count and you just have to select it and it will play. In the animation sequence, you have loop settings, a randomize and you have the frames per second. I had everything at 24 frames per second. The default in Spark AR seems to be 25 frames per second, I don't know why because that's not a standard anywhere else that I know of.
At this point, you should see your video playing out. Some things that you may need to check is in your materials, the blend mode. You can mess with the alphas in your image sequence. I don't know if you're going to be using alphas or not. I didn't use alpha because mine is a fire, which is a form of light, so I just used the “add” function, which basically removes any black from the image sequence and only uses the brighter part of the image and adds it on top of what is underneath. The default there would be “alpha” so it thinks it needs to use the alpha and you may have to tweak around a little bit.
Some things may get messed up, some things might not match perfectly. I had to go back and re-export some of my fire elements at a higher setting or a lower setting just to get them to appear to be in the same scene together. You know, you don't want an element that is much sharper and crisper than the other ones. You're gonna either have to bring the other ones up or bring that one element down and degrade it more just to fit into the scene.
A final key note to remember is to name all of your materials and assets because if you are bringing a lot of files into Spark AR, or anything really, it can become quite confusing navigating the different textures and assets and animation sequences and making sure they're all paired up correctly. At the end, you can either test it on your device or just upload it straight to Spark AR Hub. It will go to calculate the file size. It could take a minute and it will let you know if you're able to or not. I had to do this several times to meet that threshold and that is why you're not viewing insanely high 4k fires behind me on that effect. The fires are actually considerably low res, but as you can see, it’s quite cool and I think accomplishes the effect I was going for.
Let me know if you have any other cool and exciting uses for these free elements that are available online!
Have at it guys and gals, thank you so much for reading. I appreciate it.
I'll catch you in the next one. Bye. Bye.