Create Portals Using SparkAR

Create Portals Using SparkAR

Β·

5 min read

Introduction

Have you always wondered if you can create portals similar to what were in Dr.Strange? Well, you can create something similar to that using SparkAR with no coding required.

Prerequisites

  • You must have SparkAR installed on your machine.

But before moving ahead, let us first understand what exactly is SparkAR

What is SparkAR πŸ€”

SparkAR is a powerful AR platform by Facebook, which helps you to create filters for Instagram and Facebook. It is available for Free and can run on both Windows and MacOS.

Now let's get Started.

Open SparkAR

After you download SparkAR , then you have to login with your Facebook account. After you login, you will see a screen something like thisπŸ‘‡

ezgif.com-video-to-gif.gif There are some really amazing pre made templates provided by SparkAR to help you get started, but we will make it from scratch.

Click on create new project

  • Select Plane Tracking

After that you will see a screen something like thisπŸ‘‡ Screenshot 2021-05-24 at 11.21.45 PM.png

To learn about each of these windows, do visit SparkAR website, here you will find detailed explanation for each and every window in the scene.
If you are new to SparkAR, I would highly recommend you to first check out this so that you can be familiar with the SparkAR Studio interface.

Now let's get started πŸ˜ƒ

To create a portal, the first thing you require is a cube with a door opening that will act as a door to the new place ;)

For that I have already created a cube using Maya, you can download it from here. After downloading, import the model to SparkAR as shownπŸ‘‡

ezgif.com-gif-maker.gif

You can also drag and drop the model to the assets folder.

After that drag the cube model to the scene tab as the child of the placer as shown πŸ‘‡

ezgif.com-video-to-gif-2.gif

Now, you can see the cube in your workspace as well.

Now, let's add a background in the camera so that it becomes easy for us to see the position of the object.

To do that click on camera logo in the Toolbar panel and select the background with house in it.

ezgif.com-video-to-gif-3.gif

Now, let's change the properties of our Cube!

Click on the cube in the workspace and firstly rotate it by 180 degrees so that the door can face the camera. Then change the scale of the cube so that it is visible to the user in the camera.

After doing this, it would look something like this πŸ‘‡

Screenshot 2021-05-27 at 12.50.16 AM.png You are free to change the scale and position properties according to you :)

Make sure, the cube remains on the ground while you are changing the scale and position.

Now click on Cube in Assets and expand it by clicking on drop-down button and select lambert1, then in the Render Options click on Double Sided and change blend mode to Alpha.

Screenshot 2021-05-27 at 12.57.25 AM.png

Lambert1 is the material name for the cube.

Now again drag the cube from the Assets window to the placer in the scene view as done perviously and change the name of the cube0 to cube_int.

ezgif.com-video-to-gif-4.gif

Now, copy and paste all the properties of the cube (Position, Scale, Rotation) to the cube_int and make it a little smaller than the first cube. Screenshot 2021-05-27 at 1.14.39 AM.png

Copy the pCube1 properties of the cube.

Now , let's create a material for the cube_int.

To Create a new material, click on Add Assets, then select Material and let us name it cube_int. You can name it whatever you want.

ezgif.com-video-to-gif-5.gif

Make sure, Double Sided is checked under Render Options.

Now, to add this material to cube_int, click on cube_int in the scene view, expand it and click on pCube1. There on the right side, you can see the materials tab and change the material to cube_int πŸ‘‡

ezgif.com-video-to-gif-6.gif

After the change in material, I can see that there is some white space coming out of the door space, so let's try to adjust the cube such that we don't see any white space.

After adjusting, this is how it looks nowπŸ‘‡

Screenshot 2021-05-31 at 5.16.55 PM.png

Awesome, Now we are almost done with our work.

Now, let's add Texture to our cube_int material.

Under Assets, click on cube_int and under shader properties, in texture, click on Choose File and select the texture. You can download any image from the internet that you want to add.

ezgif.com-video-to-gif-7.gif

Now you can see something like this πŸ‘‡

Screenshot 2021-05-31 at 5.37.45 PM.png

If you want to add any model such that when a person enters there, they see that model, then simply add the model as the child of cube_int and that would work.

Now to make the outer cube disappear, we will go to cube in Assets expand it, and select lambert1 and under Render Options change opacity to 0.

ezgif.com-video-to-gif-8.gif

Now time to test this on the device.

To test the filter, download Spark AR Player from App Store or Play Store and connect it to your Laptop or PC via USB Cable. As soon as you connect your device you can see something like this πŸ‘‡

Screenshot 2021-05-31 at 5.52.43 PM.png

After clicking on this, you can see your device in that menu.

Screenshot 2021-05-31 at 5.56.15 PM.png

Now, open Spark AR Player on your mobile and click on send.

After that you can see that you have the filter on your device, you can test it there.

You can easily resize the cube according to you by pinching in or out and taping on the screen wherever you want to place the gate!

If you want to have the bigger size of portal when the user opens your filter, then simply select both the cubes in the Scene and resize them in the workspace.

You can view the filter that I created using this on Instagram, Facebook

Β