How to Create an AR App for Your Business

© Designed by Freepik

Looking for a way to build an augmented reality (AR) app for your business or your clients while keeping development costs low? Try this simple step — moving your 3D assets to the cloud!

Businesses from different industries are adoption AR technology to drive up sales and, accordingly, AR is becoming prevalent in industries such as sports, retail, healthcare, workplace, interior design, education, tourism, policing, marketing, fashion, music, real estate, manufacturing, and food service. But many of these business are overwhelmed by the complexity of developing AR solutions — particularly, when it come to setting up a backend that can support the management and delivery of large-size three dimensional (3D) assets. 3D development costs are high and the 3D development cycle is long!

This is where echoAR, one of the newest members of the Unity Verified Solutions Partners program, comes in! Companies interested in creating AR experiences for there business can easily and quickly build and deploy enterprise-level 3D apps and content with echoAR, while saving an average of $25,000 in costs!

echoAR offers a 3D-first content management system (CMS) and delivery network (CDN) and a scalable cloud infrastructure that enables companies & developers to build an AR/VR app backend in minutes and easily manage and publish 3D content for a fraction of the price! echoAR’s cloud platform is specially built to handle, convert, and compress 3D models, videos, interactive content, and animations while providing interaction analytics & usage metrics.

Here are TWO step-by-step guides for creating an AR app with echoAR:

echoAR’s cross-platform system supports any AR/VR client-side SDK. Full documentation for how to use echoAR with ARCore, ARKit, Vuforia WebXR, AR.js, Swift for iOS, Android Studio, Flutter, Oculus SDK, Unity-based SDKs, Microsoft HoloLens, MagicLeap, and more can be found here.

1. WebAR-based App (no coding at all!)

🎲 Adding a 3D Model

• Once your register to the echoAR platform, you can add content by clicking the “Add To Cloud” button.

• You can upload your own models and also use the search bar to find free 3D models that you can instantly add to the console.

🔨 Using the WebAR Customizer

• You can now use our WebAR Customizer to generate no-code WebAR experiences. You can personalize all the experiences you create through the platform by adding buttons, actions, audio, and a custom background.

• This allows you to generate webAR experiences that are more engaging and interactive, and include your branding:

• Note that this feature is only available to enterprise clients.

🎨 Setting a Background Image

• Use the Background card to set a background image for the webAR experience. Click the “upload” button and choose an image file (.png or .jpg) or an HDR file (.hdr).

• Note that the image will only appear in the preview screen prior to clicking the “See in AR” button.

🎵 Adding Audio

• Use the Audio card to add an audio file to serve as background music for the webAR experience. Audio will only start playing after a user interaction of any type (screen touch gesture, click, etc.).

• Click the “upload” button and choose an audio file (.mp3 or .wav). You can also toggle the audio on and off by clicking the Audio card.

🤳 Including Camera Capture Functionality

• Use the Camera card to include a camera capture button in the webAR experience. It will allow viewers to grab a snapshot of the AR scene. You can toggle the camera capture on and off by clicking the Camera card.

🔢 Adding Buttons, Actions, and a Logo

• Use the Button and Logo card to introduce clickable buttons, actions, and your own logo to the WebAR experience.

• You can set up to nine (9) UI elements on screen at once (on the top right corner, top center, top left corner, middle right, center, middle left, bottom right corner, bottom center, and/or bottom left corner).

• See all the button type options here.

📊 Viewing Click Analytics and Click-through-Rates

• When buttons are configured, the number of button clicks and the overall click-through-rate (CRT) will display alongside each button.

• You did it! 🎉

2. Unity-based AR App (some coding required)

🔑 Get an API key

• Register for FREE at echoAR 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 echoAR 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 echoAR 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 + echoAR 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.

💫Frequently Asked Questions (FAQs):

What are the biggest differences between pricing models?

echoAR currently offers 4 product tiers at different price points. Each tier differs in the number of users, storage, downloads, and bandwidth it provides. Higher tiers also enjoy many priority support and premium features to streamline the 3D development process. Check out the tiers here!

How do I get access to the WebAR Customizer?

This feature is available to our enterprise clients. You can email us to be granted access.

Is White labeling of models possible?

Yes! For enterprise clients, white labeling is an option!

How do I upload my own content to echoAR?

You can upload a model by clicking “Add To Cloud” on echoAR’s main page. Check here for our documentation!

Is echoAR compatible with different AR/VR technologies?

Yes! Our cross-platform system supports any AR/VR client-side SDK for developers to choose to build their app, such as ARCore, ARKit, Vuforia, WebXR, AR.js, Swift, Flutter, Oculus SDK, Unity-based SDKs, Microsoft HoloLens, MagicLeap, and more. echoAR is also a Unity Verified Solutions Partner.

Where can I learn more?

Check out our AR/VR dev workshop recording on YouTube or our website. You can check out our full documentation for other useful tutorials here.

How do I get in touch?

If you have any other questions, join our Slack, send us an email, reach out on Facebook, connect on LinkedIn, or tweet to say hello.

---

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