How to Create Your Own AR App

© Designed by Freepik

“How do I make an AR app?”

“How do I build my own AR app?”

“How to create AR apps?”

These questions repeat themselves in many forms as developers are looking to adopt augmented reality (AR) technologies and are searching for a way to easily build their own augmented reality (AR) app.

This is where echo3D comes in! Developers interested in creating AR apps on their own can easily and quickly build and deploy AR apps and 3D content, by using echo3D’s 3D-first content management system (CMS) and delivery network (CDN), scalable BaaS infrastructure and best-in-class tools to set up an AR app backend in minutes. echo3D’s cloud platform supports any AR client-side SDK for developers to choose to build their app, such as ARCore, ARKit, Vuforia, WebXR, AR.js, Swift for iOS, Android Studio, Flutter, Unity-based SDKs, Microsoft HoloLens, MagicLeap, and more.

Below are TWO step-by-step guides to creating an AR app with echo3D:

• The #1 is a simple AR app using only echo3D with no coding at all
• The #2 one is an AR app using both echo3D and Unity.
• All other guides (echo3D + Flutter, echo3D + React Native, echo3D + Java, etc.) are available here.

Ready to start building? Set up your app with only a few simple steps!

More tutorials and open source demos for creating specific AR apps can be found on our Medium and GitHub, (like AR art wall, face filters, more face filters, face tracking, makeup, body occlusion, AR portals, virtual store, virtual town, AR solar system, AR racing game, and more).

Tutorial #1: Building an AR app with echo3D (a step-by-step guide)

🔑 Register for free

Register for FREE at echo3D and get your own API key (also check your inbox for an automatic email with your key).

💻 Access 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 key is set in the header or type and load it yourself.

🎲 Upload a 3D model

You can add content by clicking the “Add To Cloud” button.

• You did it! 🎉

Use the search bar to find free 3D models that you can instantly add to the console.

You can find additional free 3D models on Sketchfab, TurboSquid, Sketchup’s 3D Warehouse, Clara.io, Thangs, and Archive3D.

You can create your own 3D models with Tinkercad, Blender, Fusion 360, MagicaVoxel, Maya, Maya LT, Maxon Cinema4D or use 3D scanning apps.

Learn more about the types of supported 3D content (e.g, models, videos, and image) here.

👀 See it in AR

You can instantly see 3D models in AR through your phone by using any of these options (all options are available here):

Option A: See on the floor, instantly

• Step 1: Click on the “[ ]” icon to generate and show the QR codes. Make sure the “See on the floor” tab is selected.

• Step 2: Scan the QR code with your phone’s camera app or with a QR reader app, click the pop-up message to get redirected to our website, and then click the “See in AR” button.
• Step 3: 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.

• You did it! 🎉

Option B: See on an image

• Step 1: Click on the “[ ]” icon to generate a QR code. Choose the “See on an Image” tab to show a QR code that can be detected by the camera.

• Step 2: Scan the QR code with your phone’s camera app or with a QR reader app, click the pop-up message to get redirected to our website. Your camera should open in the browser (you might need to allow camera access. Troubleshoot camera issues here.)
• Step 3: Keep your camera pointed to the QR code to see the 3D model appear on top of the QR code.

• You did it! 🎉

Other options to view your 3d model in AR

• For a step-by-step guide to how to see your 3D model on the floor through your mobile device see here.
• For a step-by-step guide for how to see your 3D model on the floor through a mobile app see here.

💗 Share it with others

You can instantly share a 3D model and allow others to see them in AR through their phone by:

• Step 1: Click the “share” icon and generate a short link (which is automatically copied to your clipboard and should look something like https://go.echo3D.co/ABCD)
• Step 2: Share the link directly through WhatsApp, Twitter, Facebook, LinkedIn, and Reddit, OR paste the link and send it to friends via other social media or text.

• Step 3: After sharing the link, others can access the 3D model and even scan a QR code for easy access. 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.

• You did it! 🎉

Tutorial #2: Building an AR app with echo3D + Unity (a step-by-step guide)

🔑 Get an API key

• Register for FREE at echo3D and get your own API key (also check your inbox for an automatic email with your key).
• Upon registration you will be redirected to the console (you can also use the link in the registration email to get back to the console anytime.) Make sure your key is set in the header or type and load it yourself!

• You did it! 🎉

🔨 Install the Unity SDK

You can easily use echo3D as a backend for your Unity project by following these steps:

• Download Unity SDK: Click the “Downloads” button in the top header bar to directly download the echo3D SDK for Unity.

• Open a Unity Project: Create a new or open an existing project in Unity (make sure your Unity version is up to date and has the required modules to build an app on your platform of choice!)
• Integrate Unity SDK: Double click on the echoAR-Unity.unitypackage file to import it into your Unity project. Alternativity, click Assets > Import Package > Custom Package... in the top menu bar and choose the echoAR-Unity.unitypackage file to import it into your Unity project.

• That’s it! 🎉

🧰 Using the SDK

• Streaming 3D holograms into Unity: Either open the sample scene under Assets/echoAR/Examples/sample

• or create a new empty game object and attach the script echoAR/echoAR.cs to it.

• In the Inspector View for the echoAR game object or the empty game object that you created, update the API Key field with your API key.

• Add a 3D model through the console (here’s how)

• Go back to Unity and hit the Play button. The SDK will stream the 3D model into Unity.
• Great work! 🎉

📐 Transforming Content

• Real-time updates and animations: You can go back to the console to add more 3D models, delete 3D models, add metadata, or change existing metadata associated with your entry and instantly see the changes in Unity even while the Unity project is running.
• For example, lets add metadata with the key direction and the value right.

• This will make the 3D model rotated to the right.

• Build-in keywords: Certain metadata keys are already pre-defined for you for easy control of real-time transformations (such as, scale, direction, shader, height, width). See the full list here. While built-in keywords will be suggested through a drop-down list in the console, you can add any key and any value!

👩‍💻 Edit code

• Now that you are able to successfully stream the 3D model into Unity, you can also make custom adjustments to it.
• Each hologram will be instantiated with a script named CustomBehaviour.cs attached.
• You can edit this script to create any behavior you would like while referencing additional data streamed from the cloud.
• Learn how to add code to your Unity project while getting data from the cloud here. You can also query and post metadata and listen for metadata changes.

• Great work! 🎉

🤳 Adding AR capabilities

• Now that you are successfully able to stream 3D content into Unity and know how to change content, you might consider adding AR capabilities to your cloud-connected Unity project.
• Unity provides a framework purpose-built for AR development called AR Foundation. It allows you to build across multiple mobile and wearable AR devices, such as Android with ARCore and iOS with ARKit.
• Clone the open-source Unity + AR Foundation + echo3D example project on GitHub and open it in Unity.
• Setup a simple AR application with your API key and then build and run the AR application. Learn how here.

• If the model is too big or too small, go back to the console and add metadata to affect its scale. After adding metadata the model should change automatically.
• You did it! 🎉

❔ Troubleshooting

Troubleshoot issues here. You can check out our full documentation for other useful tutorials here and also reach out to our support team here.

💫 What does echo3D offer AR developers?

• Build your backend in minutes
• Integrate dynamic content via RESTful API
• Choose any AR client-side SDK to build your app
• Save time and money on building & maintaining your backend
• Quickly go from development, to test, and to production
• Register for FREE today

echo3D (www.echo3D.co; Techstars 19’) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content.