DEV Community

Cover image for How to Create an Augmented Reality App
echo3D for echo3D

Posted on • Updated on

How to Create an Augmented Reality App

Ever wondered how easy it could be to create an augmented reality (AR) experience? Ponder and wonder no longer! Hereโ€™s a step-by-step guide to quickly create and even share a cloud-connect AR experience!

Step 1: ๐Ÿ”‘ Get an API key

Learn how to get an access key to start building 3D applications.

This is the easy part. Head over to echoARโ€™s registration page.

  1. Fill out the form with your name and email address
  2. Choose a plan (all start free ๐ŸŽ‰)
  3. Set a password
  4. Check that you agree to our Term of Service.
  5. Click the register button.

Thatโ€™s it! Check your inbox for an automatic email with your key ๐Ÿ”‘.

  • Check your spam folder if you donโ€™t get an email within a few seconds

1.gif

Step 2:๐Ÿ’ป Access the console

Learn how to get to the console and load your API key.

Now that you have an API key, you are all set to start working with the console. Upon registration you will be redirected to the console or you can use the link in the registration email to get back to the console anytime.

Make sure your ๐Ÿ”‘ is set in the header or type and load it yourself.

2.gif

Step 3: ๐ŸŽฒ Add a 3D model

Learn how to add a 3D model to the console.

You can add content by clicking the โ€œAdd To Cloudโ€ button.

Click on one of the sample models, then โ€œNextโ€, โ€œNextโ€ again, and then โ€œDoneโ€. Wait for the model to upload and appear in the Content page.

3.gif

Step 4: ๐Ÿ‘€ See it in AR

Learn how to instantly see 3D models in AR through your phone.

Option 1: on the floor, instantly

Click on the โ€œ[ ]โ€ icon to generate and show the QR codes. Make sure the โ€œSee on the floorโ€ tab is selected and shows a QR code that can be detected by the camera.

  • If this tab does not exist, continue to the other options

4.gif

Scan the QR code with your phoneโ€™s camera app or with a QR reader app.

  • Latest iOS and Android phones are able to read QR code with their default camera apps.

Click the pop-up message to get redirected to our website.

5.png

Click the โ€œSee in ARโ€ button.

Move the phone around until it detects the surface around you and tap the screen to place the 3D model on the floor around you. You can scale the model by pinching the screen with two fingers.

6.gif

You did it! ๐ŸŽ‰

Option 2: on an image

Click on the โ€œ[ ]โ€ icon to generate and show the QR codes.

Choose the โ€œSee on an Imageโ€ tab to show a QR code that can be detected by the camera.

7.gif

Scan the QR code with your phoneโ€™s camera app or with a QR reader app.

  • Latest iOS and Android phones are able to read QR code with their default camera apps.

Click the pop-up message to get redirected to our website. Your browser should open.

  • You might need to allow camera access. In iOS, only Safari browsers are allowed to access the camera. In Android, Chrome browser is recommended as the default browser.

Your camera should open in the browser. Troubleshoot camera issues here.

Keep your camera pointed to the QR code to see the 3D model appear on top of the QR code.

8.gif

You did it! ๐ŸŽ‰

Option 3: on the floor, through the mobile console

Go to the console in your phoneโ€™s browser by typing console.echoAR.xyz or scan the QR code below get redirected automatically.

9.png

Scan to go to the console

Make sure you are logged in and that your key is loaded.

Click on the โ€œ[expand]โ€ icon next to the model preview.

10.jpeg

11.jpeg

You will get redirected to our website.

12.png

Click the โ€œSee in ARโ€ button.

Move the phone around until it detects the surface around you and tap the screen to place the 3D model on the floor around you. You can scale the model by pinching the screen with two fingers.

13.gif

You did it! ๐ŸŽ‰

Optional: ๐Ÿ’— Share it with others

Learn how to instantly share 3D models and allow others to see 3D models in AR through their phone.

You can generate a short link and share it with others so they can see the same 3D model you have in the console.

Click the โ€œ<โ€ icon to automatically copy a short link to the model into your clipboard. You are also able to automatically share it through WhatsApp, Twitter, Facebook, LinkedIn, and Reddit.

14.jfif

Paste and share the link with friends on social media or send it as text. Sharing this link will automatically give other access to the model and also show a QR code they can scan for easy access. For example:

15.jfif

Clicking the short link redirects to our website where they can click the โ€œSee in ARโ€ button to place the 3D model on the floor around them.

16.gif

โ” Troubleshooting

What to do when things donโ€™t work as expected.

Troubleshoot issues here. You can check out our full documentation for other useful tutorials here.


echoAR ( 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 3D apps and experiences.

17.png

Top comments (0)