Documentation | echoAR - Build scalable AR apps
LINKS

company

echoAR, Inc. © 2018-2019. Made in NYC.

ABOUT

info@echoAR.xyz 

63 Flushing Ave.

Building 22, 3rd Floor

Brooklyn, NY 11205

SOCIAL
  • Facebook
  • Twitter
  • LinkedIn
  • Medium
  • Slack

Dive in to our documentation.

Here are some quick instructions to get you building your app.

How to use our Unity SDK

(1) Open a new or existing project in Unity.

(2) Double click on the echoAR-Unity package and import it into your project.


(3) Open the sample scene under Assets/echoAR/Examples/sample and click the echoAR game object OR create a new empty game object and attach the script echoAR/echoAR.cs to it.


(4) In the Inspector view for the echoAR game object or empty game object that you created, update the public API Key field with your key.


(5) Go to the console and load the same API key, or go directly to https://console.echoAR.xyz/?key=<KEY>


(6) In step 1, select BRICK. In step 2, select MODEL and upload all the files associated with a .OBJ 3D model (.obj, .mtl, and texture image file).


(7) Press Finish. After a successful upload, go back to the console and see a new entry posted below.


(8) Go back to Unity, and press Play.


(9) The 3D model you uploaded will shortly appear.


(10) Next steps should include integrating any AR SDK into the Unity project, e.g., ARCore, Vufroia, etc.

Additional instructions: 


(11) Each instantiated model that appears has the CustomBehaviour.cs script attached to it. This script includes a rotation example. Feel free to edit this script however you'd like to affect the behavior of the models.


(12) By scrolling down in the console you may add additional data to each entry that represents a model. Add as many key/value pairs of data to each model.


(13) Transformation support is already build-in for the following keys: 
-
x: Translation on the x axis
-
y: Translation on the y axis
-
z: Translation on the z axis
-
scale: uniform scale of the model
-
xAngle: Rotation about the x axis
-
yAngle: Rotation about the x axis
-
zAngle: Rotation about the x axis
For example, add a key called scale with the value 0.5 to make the model automatically load smaller, half its original size.


(14) You can access these additional data tag in the CustomBehaviour.cs script by using the entry.getAdditionalData() which returns an object that acts as a map/dictionary of keys and values. For example, entry.getAdditionalData().TryGetValue("direction", out value) will load the value associated with the key "direction" into a string variable called value.

How to use our AR.js example

(1) Go to the console and load your API key, or go directly to https://console.echoAR.xyz/?key=<KEY>


(2) In step 1, select IMAGE and upload an image file. In step 2, select MODEL and upload all the files associated with the .OBJ 3D model (.obj and .mtl).


(3) Press Finish. After a successful upload, go back to the console and see a new entry posted below.


(4) Download the target image by clicking on the name of the image file uploaded in the entry below.


(5) On your phone, open a browser (Chrome on Android or Safari on iOS should work best).


(6) Now got to https://console.echoAR.xyz/arjs?key=<KEY>


(7) Allow camera access if a prompt message appears.


(8) Move the phone in front of the image target. The model should appear on the target.

Note: If the model's scale is too big or too small, go back to the console and add a key called "scale" to the entries. Go to https://console.echoAR.xyz/arjs?key=<KEY> again to refresh the scene.

How to use our WebXR example

(1) Go to the console and load your API key, or go directly to https://console.echoAR.xyz/?key=<KEY>

 

(2) In step 1, select BRICK. In step 2, select MODEL and upload all the files associated with the .OBJ 3D model (.obj, .mtl, and texture image file).

 

(3) Press Finish. After a successful upload, go back to the console and see a new entry posted below.

 

(4) On your Android phone, open Chrome Canary.

 

(5) In chrome://flags, make sure the WebXR Device API (#webxr) flag and the WebXR Hit Test (#webxr-hit-test) flag are set to Enabled.

 

(6) Now got to https://console.echoAR.xyz/webxr?key=<KEY>

 

(7) If your browser is configured correctly on a WebXR supported device, you should see the "Start Augmented Reality" button. Press it.

 

(8) Move the phone around until an anchor is found. Press the anchor to place the 3D model you uploaded.

Note: If the model's scale is too big or too small, go back to the console and add a key called "scale" to the entries. Go to https://console.echoAR.xyz/webxr?key=<KEY> again to refresh the scene.