For someone who doesn’t smoke, I’ve always loved this absurd shot of Mac DeMarco surrounded by cigarettes by Danny Cohen. With Facebook’s AR platform, Spark AR, now letting anyone create filters for Facebook and Instagram, I thought it was a good idea to crack open Spark AR for the first time and see if I could recreate this effect.
Breaking down the composition here, we have Mac standing in front of an orange (#ff9702) background with what I assume is falling cigarettes surrounding him. Let’s start by attempting to get our subject in front of an orange backdrop. Start up a new project in Spark AR and delete the two lights since we’ll be recreating this effect in 2D using a Particle System.
Transparent User with Backdrop
Before we start creating objects, let’s create some of the materials we’ll need to recreate the backdrop effect. If you click Camera in the scene panel, you’ll notice the Camera properties will appear in the Inspector panel on the right. We’re going to wait to extract the camera as a texture as well as the segmentation data for composition building. To do this, we simply must click the
+ sign next to each in the Inspector panel. This will create two textures:
We’ll then create a new Canvas which will hold both the image of our user and the backdrop. To do this click
+ Add Object and choose Canvas. Before we forget, let’s also head into the layers section and rename
background_layer. Since this layer was our only layer, it was automatically associated with our new Canvas object. Nestled with
canvas0, we’ll want to add two rectangle objects for our user and backdrop, but first let’s create materials for each.
In the assets panel click
+ Add Asset and choose material. Name it
user_mat. This material will contain the video of our user. In the Inspector panel, first set the Shader Type to
Flat. Then, under Shader Properties, set the Diffuse texture to
cameraTexture0. In order to remove the user’s own background from our final composition, we’ll turn on the Alpha option and choose
personSegmentationMaskTexture0 as the Texture. Nice, you’ve created your first material. Let’s create the background material next.
Back in the assets panel click
+ Add Asset and choose material once again, this time naming it
background_mat. The Shader Type will also be
Flat for this material and we can set the Diffuse color to be orange or more precisely: #ff9702. And you’re done. Now let’s create the rectangles in our scene which will use these materials.
+ Add Object in the Scene Panel, and choose Rectangle. Then, rename it
user. In the Inspector Panel, let’s change its Layer to a new layer. Then jump to the layer panel, rename
user_layer, and drag it on top of
background_layer. Jump back to the Scene Panel and click the
user Rectangle once again. Click on each Size and you’ll see a dropdown option to go full width or height. Choose this option to make your Rectangle fill the screen. Finally, set your material to be
user_mat. Your transparent user is complete. Let’s add a background Rectangle next.
Insert another Rectangle into your scene and name it
background. In the Inspector Panel, make sure its layer is set to
background_layer. Then, once again, set its Size to be full width and height. Finally, set its material to be the
background_mat you created earlier.
Now we can focus on those smokes. The cigarettes in the original photo are three dimensional objects but we’re going to see how far 2D can get us to keep performance of our filter up. Let’s first open up the Layers Panel and create a new layer called
foreground_layer. Then make sure that layer is placed on top of the
Next, we’ll want to prepare and import our cigarette image as a texture. I created a 256x256 transparent cigarette PNG in Figma. You can then add this texture by clicking
+ Add Asset, choosing
Import From Computer..., and selecting your cigarette image.
We’ll then want to create a material which will use this new texture. Click
+ Add Asset once again and choose
Material. Then name this new material
cigarette_mat. Set its Shader Type to
Flat and choose the cigarette texture as its Texture.
We’ve finally come to the point where we add our cigarettes to the scene! In order to create the effect of falling smokes, we’re going to be using a particle system. Click
+ Add Object in the Scene Panel and choose
Particle System at the bottom. You can rename
cigarettes and drag it above the
canvas0 Canvas. Then make sure it’s Layer is set to
foreground_layer in the Inspector Panel.
At the moment, the particle system will be spraying checkerboard boxes so we’ll update those to cigarettes. With
cigarettes selected in the Scene Panel, update the Material to be
cigarette_mat in the Inspector Panel. Alright, we finally have cigarettes appearing in our Scene now we must simply tweak the particle system to match the original photos composition. We’ll do this from the Inspector Panel and starting from the top, work our way down.
First, in Transformations, we’ll set the Position to have a y of
0.25 so cigarettes originate above the composition. Next, let’s set Rotation to an x of
-180 so it sprays down instead of up.
At the moment our Emitter is spraying from a single point. Lets instead have it spray from a large Plane by selecting
Place as the Emitter
Type and setting the
0.4 for both. We’ll then set the Birthrate to
15 with a variation of
30% to emit more cigarettes. I’m keeping all my spray angles set to
0 because they work fine this way. The Speed will be set to
0.004 with a variation of
40% to reduce the speed of the fall. And that takes care of our Emitter properties.
Next we’ll adjust a few Particle properties. We’ll set the Scale to
0.03 with a variation of
30% for bigger cigs. In order for the cigarettes particles to persist within the scene for the duration of the fall, we’ll need to adjust the Lifespan to
15 sec. We’ll then set all of the Spin and Tilt options to be
And finally, in order for the cigarettes to have a sense of heavenly gravity, we’ll adjust some of the Force properties. Turn Acceleration on and you can leave the y Strength at
-0.05. Then, turn on Drag and set the Linear drag to
1 and Rotation drag to
These are the settings I think worked but feel free to experiment. If all goes well, you should see something like this.