Introduction

In this guide we will create an 8th Wall AR Camera app and view it on your phone.

8th Wall AR Camera apps enable you to place and interact with your 3D models in the real world. No coding required.

8th Wall AR Cameras are built upon 8th Wall Web, a complete implementation of 8th Wall’s Simultaneous Localization and Mapping (SLAM) engine, hyper-optimized for real-time AR on mobile browsers.

Tutorial Need Help?

Made with 8th Wall

Robot Cat Scandy Pro Dino Cam
Try Demo (mobile) Try Demo (mobile) Try Demo (mobile)

Requirements

What do I need to get started?

  • A 3D model. That's it!

Note:

  • We currently require models to be in .glb format - the binary version of the glTF 2.0 file format
  • 3D model requirements and instructions for converting to GLB format:

  • Make sure you own the appropriate rights/license for the 3D model and that it conforms to our terms of service:

Web Browser Requirements

To view AR Cameras, mobile browsers need to support the following functionality:

  • WebGL (canvas.getContext('webgl') || canvas.getContext('webgl2'))
  • getUserMedia (navigator.mediaDevices.getUserMedia)
  • deviceorientation (window.DeviceOrientationEvent)
  • Web-Assembly/WASM (window.WebAssembly)

This translates to the following for iOS and Android devices:

  • iOS:

    • OS: iOS 11 or newer
    • Supported Browsers:

      • Safari

        • Note: getUserMedia only returns video input devices directly in Safari, not in UIWebView or WKWebView.
  • Android:

    • Supported Browsers:

      • Chrome
      • Chrome-variants (e.g. Samsung Browser)
      • Firefox

Tutorial

This guide provides all of the steps required to get you up and running with with your own Web AR Camera.

Create or Obtain a 3D Model

See https://www.8thwall.com/glb.html for 3D model requirements and instructions for converting to GLB format

If you don't have a 3D model available, download tree.glb as an example from our GitHub repo.

Create a Console Account

New Users:

  1. Create a free account at https://console.8thwall.com/sign-up
  2. Select the "AR Camera" Workspace Type

SignUpWebWorkspace

Existing Users:

  1. Go to https://console.8thwall.com/workspaces
  2. If you already have an AR Camera workspace, select it. If not, create one by clicking the "Create a New Workspace" button.

Create New Camera

  1. If you have multiple workspaces associated with your console user, select your AR Camera workspace.

ConsoleSelectWorkspace

  1. Click "Dashboard" in the left hand navigation

  2. Click "Create new camera":

ConsoleCreateCamera

Upload Model

Locate your 3D model and either drag the file onto the Upload button, or click Upload and browse for it in the file chooser.

ConsoleUploadModel

Edit Scene

Use the sliders in Inspector Panel on the right side of the page to adjust:

  • Scale
  • Initial Distance
  • Movement Speed

To edit a value, either drag the slider bar or enter a value into the box on the right.

ConsoleEditScene

Publish

Click the Publish button to make your AR Camera publicly accessible on the web.

ConsoleCameraPublish

View on your phone

Scan the generated QR code on your mobile phone using your phone's camera app, a QR code scanner, or by visiting https://apps.8thwall.com/8w/scan in your phone's web browser.

ConsoleCameraPublishQR

Result:

ConsoleCameraResult

Console Overview

The 8th Wall Console is a web based portal that allows you to:

  • Create and Edit AR Cameras
  • View AR Camera usage
  • Manage plans and billing

To access the 8th Wall Console, go to https://console.8thwall.com

New Users:

  1. Create a free account at https://console.8thwall.com/sign-up
  2. Select the "AR Camera" Workspace Type

SignUpWebWorkspace

Existing Users:

  1. Go to https://console.8thwall.com/login and login with your email and password.

  2. If you have multiple workspaces associated with your console user, select your AR Camera workspace.

ConsoleSelectWorkspace

Console Dashboard

The 8th Wall AR Camera Dashboard is your hub for creating and managing AR Cameras as well as viewing usage and analytics.

ConsoleDashboard

Camera Management

This section decribes how to create, edit and publish AR Cameras

Create Camera

  1. If you have multiple workspaces associated with your console user, select your AR Camera workspace.

ConsoleSelectWorkspace

  1. Click "Dashboard" in the left hand navigation

  2. Click "Create new camera":

ConsoleCreateCamera

Edit Camera

Note: Disabling an AR Camera will cause it to be turned off and not viewable on the web. You can always re-enable it later.

  1. Click Dashboard in the left navigation

  2. Find the desired AR Camera in the list of "My Cameras" and click the Edit button

ConsoleCameraEdit

Camera Editor Capabilities

The AR Camera Editor page allows you to perform tasks such as:

  • Upload a model
  • Edit Scene properties
  • Edit User Interface (UI) Elements such as banners, icons, link out URL, etc.

Upload Model

Locate your 3D model and either drag the file onto the Upload button, or click Upload and browse for it in the file chooser.

ConsoleUploadModel

Edit Scene

Use the sliders in the Scene tab of the Inspector Panel on the right side of the page to adjust:

  • Scale
  • Initial Distance
  • Movement Speed

To edit a value, either drag the slider bar or enter a value into the box on the right.

ConsoleEditScene

Edit User Interface

Click the Interface tab of the Inspector Panel on the right side of the page

Add a banner image to the top of the AR Camera by dragging your image onto the banner image icon, or click and select your image via the file browser.

Add a URL to the Link out button to direct viewers to a URL after viewing your AR Camera.

ConsoleEditbanner

Result:

ConsoleEditbanner

Clone Camera

  1. Click Dashboard in the left navigation

  2. Find the desired AR Camera in the list of "My Cameras" and click the Clone button

  3. Click OK.

ConsoleCameraClone

Delete Camera

Note: Deleting an AR Camera will cause it to no longer be viewable on the web. You cannot undo this operation.

  1. Click Dashboard in the left navigation

  2. Find the desired AR Camera in the list of "My Cameras" and click the Delete button

  3. Type "DELETE" to confirm and then click OK.

ConsoleCameraDelete

Disable Camera

Note: Disabling an AR Camera will cause it to be turned off and not viewable on the web. You can always re-enable it later.

  1. Click Dashboard in the left navigation

  2. Find the desired Camera in the list of "My Cameras" and click on the name to expand

  3. Click the Status slider to the OFF position

  4. Click OK to confirm.

ConsoleCameraDisable

Enable Camera

To re-enable an AR Camera after it has been disabled:

  1. Click Dashboard in the left navigation

  2. Find the desired Camera in the list of "My Cameras" and click on the name to expand

  3. Click the Status slider to the ON position

  4. Click OK to confirm.

ConsoleCameraEnable

Rename Camera

  1. Click on the name of your Camera at the top left of the Camera Editor page.

ConsoleCameraRename

  1. Enter a new name
  2. Hit Enter to save your changes.

ConsoleCameraRename2

Publish Camera

Click the Publish button to make your AR Camera publicly accessible on the web.

ConsoleCameraPublish

View Camera

Scan the generated QR code on your mobile phone using your phone's camera app, a QR code scanner, or by visiting https://apps.8thwall.com/8w/scan in your phone's web browser.

ConsoleCameraPublishQR

Workspaces

A Workspace is a logical grouping of Users and Applications. Grouping Applications under the same Workspace allows you to view consolidated usage and billing. Workspaces can contain one or more Users, each with different permissions. Users can belong to multiple Workspaces.

There are 3 types of Workspaces:

  • Web Developer: Create and manage App Keys for 8th Wall Web - 8th Wall's JavaScript SDK for creating rich AR experiences that run directly in a mobile web browser.
  • XR Developer: Create and manage App Keys for 8th Wall XR for Unity® - 8th Wall's cross-platform Unity SDK for building mobile AR apps that can be deployed on iOS and Android devices.
  • AR Camera: Upload your 3D models and instantly create AR Cameras that run on the web.

Initial Workspace

When signing up for a new 8th Wall account, you must select an inital workspace type. You can create additional workspaces later.

  1. Create a free account at https://console.8thwall.com/sign-up
  2. Select the "AR Camera" Workspace Type

SignUpCameraWorkspace

Managing Workspaces

The Workspaces page in the console allows you to view and manage the Workspaces you are a member of.

Use one of the following methods to access the Workspaces page:

  1. Click the workspace switcher menu at the top of the left navigation and select Manage All

AccountSwitcherManageAll

  1. Or click on your name at the top-right of the page and select Workspaces

ConsoleWorkspaceMenu

  1. Or go directly to https://console.8thwall.com/workspaces to view and manage your workspaces.

Create Workspace

NOTE: You can have a maximum of one FREE Web Developer workspace and one FREE AR Camera workspace.

  1. Go to https://console.8thwall.com/workspaces
  2. Click "Create a New Workspace"
  3. Select Workspace Type
  4. Click Create

ConsoleWorkspaceCreate

Switching Workspaces

  1. The workspace switcher menu can be found at the top of the left navigation. Click it to select your desired Workspace:

AccountSwitcherManageAll

Manage Plans

  1. Click Manage Plans in the left navigation
  2. Click Upgrade to Pro to enter your billing information and upgrade to the AR Camera Pro plan.

Please refer to https://8thwall.com/pricing.html for detailed information on plans and pricing.

ManagePlans

Changelog

Release 9.2:

Release 9.1:

  • New Features:

    • Added support for Amazon Sumerian in 8th Wall Web
    • Improved tracking stability and eliminated jitter

Release 9:

  • Initial release of 8th Wall Web!

Help & Support

Need some help? 8th Wall is here to help you succeed. Contact us directly, or reach out to the community to get answers.

Ways to get help:

Slack Email Support GitHub
Join our public Slack channel to discuss and ask questions with members of the 8th Wall community Email support@8thwall.com to get help directly from our support team Download sample code and view step-by-step setup guides on our GitHub repo


























[1] Intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for 8th Wall’s products remain at the sole discretion of 8th Wall, Inc.