Portals are one of the most popular use cases for AR. Portals offer users a mixed reality experience by transporting them into another dimension while still tied to the real world. To experience AR portals for yourself, download Figment AR from the iOS App Store for free.

AR Portal

This tutorial is a step by step guide for developing AR Portals with Viro AR, an AR development platform. Our goal by the end of this tutorial is to:

Add a portal with a 360 image to our scene Add a portal with a 360 video to our scene

** If this is your first time as a Viro developer, use our Quick Start guide to get setup with Viro before continuing with this tutorial. Viro is free and easy to set up! **

PREREQUISITES

OSX computer iOS Device with A9 chip or higher and running iOS 11 Viro AR -> Quick Start guide for setting up Viro Assets for this tutorial (DOWNLOAD) -> click on link to download assets.

Adding a Portal with 360 Photo

Create a new folder <path_to>/ViroSample/js/ARPortals and a new JS file <path_to>/ViroSample/js/ARPortals/MainScene.js in that folder. Unzip the assets you downloaded in step 4 above and copy them to <path_to>/ViroSample/js/ARPortals . Open MainScene.js and copy and paste the code below. (We will explain what we are doing with the code afterwards.)

Save your file and reload your testbed app. (Make sure line 33 in your App.js file is pointing to the MainScene.js file as shown below.)

var InitialARScene = require(‘./js/ARPortals/MainScene.js’);

You should see a ship portal containing an island scene in front of you. Walk through the portal, look around and then walk out.

AR Portal with 360 Photo

We created AR Portals by adding ViroPortal and ViroPortalScene into our AR Scene (lines 27–36).

ViroPortalScene is a component that allows the set up of a sub-scene only rendered and accessible through the use of a ViroPortal component.

<ViroPortalScene passable={true} dragType="FixedDistance" onDrag={()=>{}}>

For ViroPortalScene, we set the prop “passable = true” so that the user can walk through the portal into another scene. If passable is set to false, the user walks through the portal rather than into the portal. We set dragType = FixedDistance so that the portal remains at a constant radius when we move it around.

Within ViroPortalScene, we add a ViroPortal. This is a component that represents the entry way into a ViroPortalScene. A Viro3DObject must be provided with an opacity around [0,0,0] in model coordinates in order for the portal to behave properly.

For this tutorial, we added a 3D ship portal (portal_ship.vrx) to represent the doorway. (You can download more free 3D portals from our documentation page -> 3D Portals)

Finally, we added a 360 image to our ViroPortalScene in line 35. This represent the environment for the other side of the portal. To learn more about 360 photos, read our guides: How to Take Better 360 Photos and Editing a 360 Photo. We provide some free 360 photos at our documentation page -> 360 Photos. Or check out 5 Best 360 Photo Sites.

Note: Don’t forget to add lighting to your scene as we did in line 26. Lighting is required to make objects visible. (Read our guide on Lighting and Materials to learn more about how lighting can enhance your scene.)

Adding a Portal with 360 Video

Depending on the content you have available to you or the experience you want to build, 360 videos and 3D models can create a more immersive experience with portals. ViroPortal supports both 360 videos and 3D models. Let’s replace our 360 photo from above with a 360 video (included in the assets you downloaded earlier). Replace line 35 in your file with the following:

<Viro360Video source={require("./portal_res/360_surf.mp4")} loop={true} />

Save your file and reload the testbed app. You should now have a 360 surfing video inside your portal. We loop the video so the experience within the portal is continuous.

AR Portal with 360 Video

Next Steps

That’s it! You can now add AR Portals into your app. Check out our Code Samples for other AR examples or try another tutorial like “How to build an interactive AR app in 5 mins w/ React Native & Viro AR”.

You can also continue adding functionality to this scene. For example: