Quick Start - AR with 8thwall

This tutorial covers how to use wonderland-ar-tracking together with 8thwall.

You can use any of 8thwall’s supported tracking capabilities:

• SLAM tracking
• Image tracking (flat and cylindrical)
• Face tracking
• VPS (world tracking with pre-scanned mesh for occlusion)

Install Project Templates 

Download the wonderland-ar-tracking repository, either as ZIP (<> Code > Download ZIP), or clone it with git.

Extract the folder and copy the “SLAM-camera” folder from examples into your templates folder. The templates folder will be located in the following location, depending on your operating system:

• Windows: %APPDATA%/WonderlandEngine (%APPDATA% can be typed in the path bar of Windows Explorer and resolves to C:\Users\<Username>\AppData\Roaming)
• MacOS: ~/Library/Application Support/WonderlandEngine (~ is your home folder)
• Linux: ~/.WonderlandEngine/

Creating a Project 

If you set up the template correctly, you should see the following when creating a new project in Wonderland Editor:

With the new template selected, you can create a project.

Testing 

To test the project locally, 8thwall requires you to set up local certificates, since they block serving without HTTPS.

Set Up SSL Certificates 

To generate your own SSL certificates for localhost, you will need to generate them with OpenSSL:

1openssl req -x509 -out localhost.crt \
2  -keyout localhost.key \
3  -newkey rsa:4096 -nodes -sha256 \
4  -subj '/CN=localhost' -extensions EXT -config <( \
5   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Now, set the key file and certificate file in Views > Preferences > Server.

Finally, restart the server: Stop the server by clicking on “localhost:8080” at the top of the editor window, clicking “Stop Server”. Then click on “not running”, then “Start Server” to start the server again.

View on Smartphone 

For Android:

1. Ensure you have “USB Debugging” enabled on your device.
2. Connect your device via USB.
3. Select “Local Device” to trigger the “Allow USB Debugging” dialog on your device.
4. Once approved, you can select the device in the dropdown.
5. Check the “SSL” checkbox.
6. Hit the green arrow to launch the browser with the page on your smartphone.

For iOS:

1. Connect your iOS device and Mac to the same Wi-Fi network.
2. On your Mac, find your Mac’s name: Go to System Preferences > Sharing to find your Mac’s name.
3. (optional) Install the SSL certificates we generated above on your iOS device: Either email the certificate to yourself and install it via the Mail app, or by using Apple Configurator.
4. (optional) Trust the installed certificate on your iOS device by navigating to Settings > General > About > Certificate Trust Settings.
5. Open Safari on your iOS device: Type the URL http://YourMacName.local:8080 or https://YourMacName.local:8081 if using SSL.

Publishing 

To publish your 8thwall-based experience, you will need to replace the 8thwall API Token in src/index.js.

Create an 8thwall Project 

1. Create an account at 8thwall.com. On your 8th Wall Dashboard, click “Start a new project”.
2. Select “Self-Hosted”.
3. Set a project name and a “License Type” that matches your needs.
4. Click “Create”.
5. Add domains you host on at “Setup Domains”.
6. Go to “Settings” (Cog symbol on the left)
7. Copy the app key from the “My App Key” section.

Paste the app key in the src/index.js file: Replace the value of window.API_TOKEN_XR8 = '<here>';.