Making a Blur Filter in Effect House
In case you don’t know — Effect House is the AR effect creation app for TikTok. It’s young in comparison to others like Spark AR or Lens Studio, so naturally it has a limited feature set. Currently, it doesn’t allow for custom shaders, which means you can’t create effects that use UV distortions, chromatic aberration, God rays, etc. Fortunately, we CAN create a blur effect (without custom shaders)!
Here’s our “Blurry Background” effect that got honorable mention in the TikTok Effect House x TIFF Future of Filmmaking Challenge
Abusing the System
I’ll show you how to create a blur effect by using some simple capabilities that we DO have in Effect House. The solution is surprisingly simple, albeit a lot of manual work to put together. It uses a series of cameras, render targets, and stacks of offset transparent images.
Ultimately, I ended up with a bucket of cameras, images, render targets, and a big mess of nodes for controlling it all procedurally.
Stacks of Transparent Images
First, let’s take a look at a simple image with a single black pixel.
The first step of the blur is going to be to copy this image, lower the opacity to 33%, and offset it by one pixel to the left. Then we do the same in the other direction. This essentially gives us a one pixel linear blur.
You can repeat this process as many times as you want, and it will give you a stronger blur effect. Keep in mind that you will need to adjust the opacity to match the total number of layers (e.g. 2px blur is a total of 5px distance, which would mean 20% opacity).
Two-Pass Linear Blurring
Instead of copying the image and offsetting it in a grid pattern, as you would expect to do at this point, we are initially only going to blur in one direction (horizontally). Now we are going to take a snapshot of that directional blur stack and use the flattened image in a vertical blur.
The result is that we only need to copy and move two images to end up with a square grid of pixels, which completes the blur effect!
Here’s an exaggerated one-pixel blur example, using some big offsets just to illustrate the process. If you step back and squint your eyes, you can see the blur effect starting to take shape!
I learned this trick as a method of optimizing blur shaders, which is especially useful in Effect House since this blur effect is such a manual process. The two-pass optimization will save us time, and the GPU won’t need to work as hard. Neat!
Building the Blur in Effect House
Cameras, Render Targets, and Layers, OH MY!
We’re off to see the wizard! Let’s start by creating an orthographic camera for our horizontal blur. Click Add object > Scene > Camera and set the camera type to “orthographic.”
The camera will need a render target to draw onto. You can create it in the assets panel in the bottom-left. Click Add asset > Texture > Render Texture, rename it, and assign it to the blur camera (screenshot below).
Now we need a canvas to draw our images onto. Add a canvas to the horizontal blur camera by clicking Add object > 2D > Canvas, then drag it into the camera hierarchy. It’s not strictly necessary to nest the objects like this, but I find it helpful for understanding the scene.
Set the camera and canvas to use layer 1. This tells the camera to only render stuff on layer 1, and sets the canvas to layer 1 so that is the only thing that will render into this camera.
That’s all for the camera and canvas setup!
Offset Transparent Image Stacks
Now we just need a bunch of transparent images, offset in the manner I described before. I went with a four pixel blur, so I needed a total of nine images (one in the center and four on either side).
Set the texture on the image to the camera texture.
Now determine what your image opacity will be. This is sort of a guessing game since we don’t know how the blending math works, under the hood. I took the total number of transparent layers and did 1/x to find the transparency (e.g. 1/8 = .125).
You can do pixel-perfect offsets, but I decided to use a factor of two for my blur, to make it a little stronger. I offset the image positions by +-2, +-4, +-6, +-8.
Move the first image to the bottom of the stack and set the opacity to 1. This will serve as the background layer for the canvas. Sometimes weird stuff will happen if you don’t set the opacities correctly and end up with a slightly transparent render target texture.
Again!
You need to do all of the steps again for the vertical blur camera. Fortunately, you can save a lot of time by duplicating the camera and all of its children.
- Duplicate the horizontal blur camera and rename it.
- Set the new camera AND canvas to use Layer 2.
- Create and set a render texture for vertical blur camera.
- Change the image position offsets to use the y position.
- Change the image sources to the horizontal blur render target, instead of the camera texture.
- Check “Flip Y” on all of the vertical blur images. For some reason the render targets become flipped upside down, so you need to rectify them. 🤷♂
Debugging
It’s always hard to develop procedural systems without knowing exactly what is going on between the beginning and the end. A small change, or something out of place in the beginning of the process can have a big effect in the end.
The problem with this setup is that we are rendering to render targets, which are offscreen by default, which means we can’t see them! Only the “Final Render Output” render target shows up on the screen.
This is simple enough to fix. Just add a small image on the screen and assign the render target you want to see. That way you can see what you are working on, as well as the final result. I set up a “display” camera for doing my final compositing, in addition to debugging.
It’s Blurry… Now What?
Now that you hopefully have a function blur effect, what can you do with it? I’m sure you came here with an idea in mind, but here are some other paths that might inspire you to explore more options:
- Combine the blur with segmentations
- Try making a sharpening effect
- Experiment with blend modes
- Control the blur amount with a slider, or other input (face position, screen pan, etc)
- Create a skin smoothing effect
- Hopefully you understand cameras and render targets now. Try coming up with other uses for them (there are a lot)
Stuck?
This system is admittedly very fragile and inflexible, but this is the world we live in! If you get stuck on something or your blur effect just isn’t working, you can take the easy road and just grab the project files from our site.
Download the project 💾
Technical / Emotional Support
Do you have questions about the blur technique, or anything else related to XR tech? Join our community on the Lab and let’s chat!
🖖
