DEV Community

Cover image for How to Build a Portal to Another World in AR in 15 Minutes or Less
echo3D for echo3D

Posted on • Updated on

How to Build a Portal to Another World in AR in 15 Minutes or Less

Always wanted to create portal to other dimensions and locations but didn’t know how? Here’s a step-by-step guide to quickly create a simple AR portal with Unity, AR Foundation, and echoAR ! The full demo can also be found on echoAR’s GitHub.

Alt Text

Register

Don’t have an API key? Make sure to register for FREE at echoAR.

Setup
Follow the instructions on our documentation page to set your API key.

  • Clone this project and open the project in Unity.
  • In the Portals folder, open up the Portal.unity scene (same as sample scene, but includes tags ‘portal’, ‘portalVideo’ and ‘skyDome’, and a box collider on the Main Camera).
  • In Portal < Prefabs, drag portalController into the Hierarchy.
  • Click on portalController in the Hierarchy and drag SkyDome and PortalPlane into their respective fields in the Portal Controller script in the Inspector.
  • Click the echoAR prefab and enter your API key.

How to Create a Portal

  1. Upload one of the portal models the Models folder.
  2. Add in the metadata from metadata.csv in the Models folder.
  3. Upload a 360 video to the console (e.g. ‘Beach Sunrise’ in the Portals folder).
  4. In the uploaded video’s metadata, assign it the key-value pair, ‘name: “portalVideo”’.
  5. At this point, the portal plane and skyDome will be created, the video will be projected on the inside of the skyDome, and you should be able to get a peek into the skyDome through the portal plane.
  6. Going through the portal plane will unmask the rest of the video sphere, going back through the portal will mask it again.

Alt Text

Run

Simply press the Play button in Unity.

Using Different Portal Models and Videos

  • If you would like to use a portal model other than the one provided, you can upload it to the console and assign it the name ‘portal’ in the object’s metadata. Just make sure there is only one named portal in the console!
  • Similarly, if you would like to use a different portal video, you can upload it to the console and assign it the name ‘portalVideo’.

Adjusting the Portal Plane

  • Since different models are configured in different ways, you may need to align or scale the portal plane with your model manually. There are a number of parameters for the portal plane that can be tweaked through its metadata.
  • Translation: portalPlaneX, portalPlaneY, portalPlaneZ
  • Rotation: portalPlaneXAngle, portalPlaneYAngle, portalPlaneZAngle
  • Scale: portalPlaneScale

Alt Text

Special Cases

  • If a model and video are uploaded without “portal” or “portalVideo” names: Model and video plane just get instantiated as normal.
  • If a model has a “portal” name, but there is no video with “portalVideo” name: A skyDome and portalPlane will be instantiated as children of the model, but the skyDome will not have a videoPlayer, until a “portalVideo” can be detected.
  • If a video with a “portalVideo” name is found, but no model with a “portal” name: Video just gets displayed on a plane until a model with the “portal” name can be found.

Notes

  • The portal project relies on tags. Checks are made for models tagged as “portal” and “portalVideo” in order to be able to fuse these together to create the portal if both are present.
  • The project works best if the portal model used is one with a gap or open space, such as an open door or window.
  • Sometimes the model used as the portal may not have (0, 0, 0) as its origin (not aligned properly).

Component Explanation

  • Portal model: This could be an obj file of an open door, window, etc.
  • portalPlane: This acts as the “window” into the portal (its material is what makes it act like a portal). The camera needs to go through this plane in order to enter the portal.
  • skyDome: This is the large sphere that acts as the actual portal world. The 360 video is projected onto the inside of this sphere. It’s hidden until the camera penetrates the portalPlane.
  • portalVideo: This is just a VideoPlayer component that gets added to the skyDome once a video with the name “portalVideo” is added to the console.

Learn more

Refer to our documentation to learn more about how to use Unity and echoAR.

Support
Feel free to reach out at support@echoAR.xyz or join our support channel on Slack.


echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

Alt Text

Top comments (0)