Make an Augmented Reality (AR) 360° portal in Snapchat & AR powered Business Card| with No Code

Image for post
Image for post

Today, I am going to teach you to create this:

Recommend to use this video guide as a visual reference for this article

The cool part is, this entire Augmented Reality experience is created with Snapchat Lens Studio free without writing a single line of codes or touching Unity or ARkit. So anyone can do it as long as you know how to capture 360 photos with one of these cameras. This is a really cool party trick, as well — an engaging way to showcase your 360 photography to your friends or strangers. I will also show you how to put this on a business card. So when people scan your business card with their Snapchat, the full AR experience will show on their phone without any third-party app download. Trust me, if you do that, your business card is the one they will keep in a busy conference. I generate so many new leads because of this trick. So, if you want to leverage AR without writing any codes — let’s get started!

Step 1, prepare your 360 photos

I assume you already know how to capture, stitch and create beautiful 360 photos. If not, start with this Photoshop tutorial on 360 photo editing with the Insta360 ONE X:

Or this tutorial on capture DNG 8 HDR 360 photo with Kandao Qoocam — which is still one of the best consumer 360 camera for 360 photo:

Go ahead and open photoshop. Import one of your finished 360 photos. I will suggest an HDR 360 photo captured with DSLR or high-end camera as we need to compress this a lot for Snapchat. Here I will import my Malibu sunset HDR 360 photo — capture with a drone and 360 camera. I want when people walk into my portal, they feel like flying. B/c 90% of the thing when I show this to people, they look down immediately when they walk into the portal. A drone shot with interesting ground usually is the best for this. If you don’t have a drone, I will suggest pointing the 360 camera out of a window in a tall building and capture high altitude 360 photo.
Then, we duplicate the background layer, delete the background layer as we don’t need that anymore. Go to edit, transform, Flip horizontal to flip the image as we are going to minor the image on Snapchat later. Then go to image, image size, and change the image size to 2048 by 1024. Snapchat has a size limit for 360 photos. Then go to File, Export, Export As, and save as jpg around 80% quality will be good. The goal here is to keep the file size as small as possible, so Snapchat will approve your creation.

Step 2, download Snapchat Lens Studio and My Portal template

So go ahead and follow the link: http://bit.ly/2OF7N7m

to download Snapchat Lens Studio and my portal template. Go ahead and open Lens Studio. And import my Snapchat template. The template I provided here is very bare minimum. If you want to create fancy 3D effects and motion-triggered animation, I will highly recommend reading this official document from Snapchat — so you can create a way better-looking portal than the one I created. If you do, send me the link in the comment below and let me download your creation.

After you open up my portal template, you see everything has already been created for you. You can click the hand icon to move around the scene. If you use your scroller on your mouse, you can zoom in or out to see what is really going on in this design.
Open Texture, go ahead, and replace the 360 photo. Click “change texture” button here, and pick a new 360 photo. I choose my Shanghai City night 360 photo instead. This photo BTW is one of my most popular 360 photos on Facebook with 53 thousand people reach and 220 likes. Follow me on Facebook if you have not already for 360 inspiration like this photo.
Now, go ahead and also replace your logo here. If you don’t want to bother, feel free to leave my logo to credit me or simply hide it here by unchecking the guided arrow module.
The last thing you need to do is replacing the right music for your photo. Remember in the demo, after you go into the portal, a sound effect starts to play to make you feel like you are there.
Click WorldObjectController right here. Then double click the audio track name to open up a new window. Hit add new to import your music. Choose your new music and hit add to close the window.

One thing you need to pay attention to is your app file size. If your app file size is more than 4Mb, Snapchat will not allow you to publish your lens. So make sure the audio file you import is as small as possible. Here the file I import is a wav file which is totally overkilled. So make to convert it into mp3 before you import.
Now we fix the file size problem, go ahead and pair your phone to the lens studio for local testing. Hit right here and generate a snapchat barcode. Open snapchat on your phone and point the camera to the barcode. Tap and hold your screen and pair your phone to the lens studio.
After your phone is connected, you can hit the Push Lens To Device to test your new build. As you see here, you can pinch and zoom the portal in real-world anywhere you want.

Before you publish your lens, make sure to go over Project Info here, and Add Lens Preview like so. This one looks good to me. Also give a lens name and change to your own lens icon. Hit apply and we are ready to publish your Snapchat AR lens.

Hit Publish Lens right here. Give some Tags for discovery and add a lens preview video if you have one. Then hit the big blue submit button, then you are done! It usually takes Snapchat 5–10 hours to approve your lens — depends on your file size.

As you see my lens is already published and you can scan it and load it up on to your phone.

Step 3, print AR onto your business card

To make it user-friendly, we are going to build a QR code and print it onto your Business Card like so. I like to add a splash page to show all my social media, especially my linkedin on my customed made profile — as you see right here. As after the fun AR experience, I still want people to connect me on Linkedin so we can do business later. I used QR code generator here. It allows me to add all my social media and nice loading animation with my face on it inside Snapchat. So it is all about user experience and presentation. The little thing count.
But you can use any other free QR Code solution. It will work just as well.

Thank you for watching this quick and fun tutorial. I hope you enjoy it. Give me a like and share this post with your friends. I will see you next time.

For more AR / VR tutorials, please subscribe CreatorUp YouTube Channel: http://bit.ly/2KoY9zT

Follow me on Social Media:
Facebook: https://facebook.com/xiaoyuhughhou
Instagram: https://instagram.com/hugh.hou
YouTube: https://youtube.com/creatorup

Image for post
Image for post

Written by

YouTuber at CreatorUp (https://www.youtube.com/creatorup)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store