How to Create an AR App for Your Business
Tags: unity3d, augmentedreality, programming, startup
Published: 2021-09-13 18:28:21


![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631555442691/PnLPIetkd.png)
© 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](https://medium.com/echoar/all-the-ways-augmented-reality-and-virtual-reality-are-shaping-sports-ef91b6f4423f), [retail](https://medium.com/echoar/how-augmented-reality-is-redefining-online-shopping-and-my-own-shopping-experience-125fa42e921c), [healthcare](https://medium.com/echoar/how-augmented-reality-and-virtual-reality-are-revolutionizing-healthcare-db46c462d8bf), [workplace](https://medium.com/echoar/augmented-reality-and-the-future-of-the-work-environment-4549b95976ba), [interior design](https://medium.com/echoar/why-you-should-start-building-ar-apps-for-the-furniture-industry-c0da505b6d57), [education](https://medium.com/echoar/how-augmented-and-virtual-reality-ar-vr-can-transform-education-bf55ceae25a), [tourism](https://medium.com/echoar/how-augmented-reality-will-improve-your-next-travel-experience-81bc966b6e8c), [policing](https://medium.com/echoar/augmented-and-virtual-reality-ar-vr-and-the-future-of-policing-25cd92a78494), [marketing](https://medium.com/echoar/how-augmented-reality-is-changing-the-marketing-world-fda7cae59760), [fashion](https://medium.com/echoar/augmented-reality-virtual-reality-fashion-try-before-you-buy-fcd281ef6d4b), [music](https://medium.com/echoar/how-virtual-reality-is-changing-the-music-industry-9b874ee166ab), [real estate](https://medium.com/echoar/how-ar-vr-are-transforming-the-real-estate-industry-25d183d7e5), [manufacturing](https://medium.com/echoar/how-augmented-reality-ar-is-transforming-manufacturing-ff350e48a1d9), and [food service](https://medium.com/echoar/how-augmented-reality-ar-is-reshaping-the-food-service-industry-a558039badad). 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](https://www.echoar.xyz/), 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](https://docs.echoar.xyz/).

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

#### 🎲 Adding a 3D Model

* Once your [register](https://console.echoar.xyz/#/auth/register) to the echoAR platform, you can add content by clicking the “**Add To Cloud**” button.

![2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556300883/8tvqgZT0c.gif)

* You can upload your own models and also use the [search](https://docs.echoar.xyz/quickstart/add-a-3d-model) 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](https://console.echoar.xyz/#/pages/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.

![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556373905/wIvfqdpj8.png)

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


![4.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556421015/5ehvHuAUb.gif)

* Note that this feature is only available to [enterprise clients](https://www.echoar.xyz/pricing).

#### 🎨 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).

![5.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556454916/lZEFac5X2.gif)

* 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.

![6.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556467788/QZ2-h01wm.jpeg)

#### 🤳 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.

![7.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556489952/GJabE4BD6.jpeg)

####  🔢 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).

![8.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556565322/D-vzzgjZ6.jpeg)

* See all the button type options [here](https://docs.echoar.xyz/web-console/compute-pages/customize-page#adding-buttons-actions-and-a-logo).

####  📊 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.

![9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556603543/peWj3RJZX.png)

* You did it! 🎉

![10.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556649076/R1b56onPV.gif)

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

####  🔑 Get an API key
* Register for FREE at [echoAR](https://console.echoar.xyz/#/auth/register) 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!

![11.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556691328/oUPpcThQ5.gif)

* You did it! 🎉

####  🔨 Install the Unity SDK
You can easily use echoAR as a backend for your [Unity](https://unity3d.com/) 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.


![12.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556737117/dlhhlj231.jpeg)

* **Open a Unity Project**: Create a new or open an existing project in Unity (make sure your Unity version is [up to date](https://docs.unity3d.com/Manual/index.html) 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.

![13.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556795827/xWvRP0EeW.gif)

* That’s it! 🎉

####  🧰 Using the SDK
* **Streaming 3D holograms into Unity**: Either open the sample scene under `Assets/echoAR/Examples/sample`

![14.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556839860/hVW3lXSpS.gif)

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

![15.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556867511/bH6tzzyCQr.gif)

* 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.

![16.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556897021/qCQwPRxN7.gif)

* [Add a 3D model](https://docs.echoar.xyz/quickstart/add-a-3d-model) through the [console](https://console.echoar.xyz/) (here’s [how](https://docs.echoar.xyz/quickstart/add-a-3d-model))


![17.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631556946179/Iql80KHvw.gif)

* 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](https://docs.echoar.xyz/web-console/manage-pages/data-page/how-to-add-data#adding-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](https://medium.com/web-console/manage-pages/data-page/how-to-add-data#adding-metadata) with the key `direction` and the value `right`.


![18.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1631557031218/mXAXZASSKw.jpeg)

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

![19.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631557049392/X6cJig6wq.gif)

* **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](https://docs.echoar.xyz/unity/transforming-content). While built-in keywords will be suggested through a drop-down list in the console, **you can [add](https://docs.echoar.xyz/web-console/manage-pages/data-page/how-to-add-data#1-adding-a-data-entry) 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](https://docs.echoar.xyz/unity/edit-code). You can also query and post metadata and listen for metadata changes.

![20.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631557155153/f6I5RyENK.gif)

* 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](https://unity.com/unity/features/arfoundation). 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](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-example) 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](https://docs.echoar.xyz/unity/adding-ar-capabilities).


![21.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1631557276906/ExKdHT_RX.gif)

* If the model is too big or too small, go back to the console and [add metadata](https://docs.echoar.xyz/web-console/manage-pages/data-page/how-to-add-data#adding-metadata) to affect its scale. After adding metadata the model should change automatically.

* You did it! 🎉

### ❔ Troubleshooting
Troubleshoot issues [here](https://docs.echoar.xyz/unity/troubleshooting). You can check out our full documentation for other useful tutorials [here](https://docs.echoar.xyz/) and also reach out to our support team [here](http://go.echoar.xyz/join).

### 💫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](https://www.echoar.xyz/pricing)!

**How do I get access to the WebAR Customizer?**

This feature is available to our [enterprise clients](https://www.echoar.xyz/pricing). You can [email us](enterprise@echoAR.xyz) 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](https://docs.echoar.xyz/quickstart/add-a-3d-model)!

**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](https://www.youtube.com/watch?v=J_h_ygpxqbg&list=PLlNGTOzDSLPMaoyhYpoOm_nKPx3BHsBje) or our [website](https://www.echoar.xyz/). You can check out our full documentation for other useful tutorials [here](https://docs.echoar.xyz/).

**How do I get in touch?**

If you have any other questions, join our [Slack](http://go.echoar.xyz/join), send us an [email](support@echoar.xyz), reach out on [Facebook](https://www.facebook.com/echoARInc/), connect on [LinkedIn](https://www.linkedin.com/company/echoar/), or [tweet](https://twitter.com/_echoAR_) 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.

![111111111111.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631557488961/gnGK9CD0i.png)