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.

AR Cameras limit model size to a maximum of 15MB.

Note: For tips on creating/converting 3D models in .glb format, please see https://8thwall.com/glb.html

ConsoleUploadModel

Edit Scene

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

  • Interaction Mode:

    • None: Great for large scenes or objects. The user can always recenter the scene via the button at the bottom right.
    • Tap to move: Perfect for characters. Tap anywhere on the ground and the object will:

      • Orient to face the new location
      • Transition from “idle” (animation clip 0) to “motion” (animation clip 1) animations
      • Move to new location (based on object movement speed)
      • Transition back to “idle” (animation clip 0)
    • Hold to drag: Preferred for static objects. Tap and hold on the object to pick it up and move along x/z axis. Also includes “pinch to scale” and “two finger swipe to rotate”
  • Initial Distance
  • Light Intensity
  • Scale
  • 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:

  • Generate and manage app keys for both native and Web applications
  • Create new Web applications
  • Create new web-based AR Camera applications
  • View app analytics
  • Manage workspaces
  • Access downloads and documentation
  • Manage your plan 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 a new camera":

ConsoleCreateCamera

Edit Camera

  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.
  • Preview your AR Camera

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.

AR Cameras limit model size to a maximum of 15MB.

Note: For tips on creating/converting 3D models in .glb format, please see https://8thwall.com/glb.html

ConsoleUploadModel

Continue to add additional models by clicking “Add another model”

Edit Scene

The Scene tab of the Inspector Panel on the right side of the page allows you to edit:

  • Interaction Mode
  • Initial Distance
  • Light Intensity
  • Scale
  • Movement Speed
  • Add / Replace / Delete models

Details:

Interaction Mode Description
None Great for large scenes or objects. The user can always recenter the scene via the button at the bottom right.
Tap to move Perfect for characters. Tap anywhere on the ground and the object will:
  1. Orient to face the new location
  2. Transition from “idle” (animation clip 0) to “motion” (animation clip 1) animations
  3. Move to new location (based on object movement speed)
  4. Transition back to “idle” (animation clip 0)
Hold to drag Preferred for static objects. Tap and hold on the object to pick it up and move along x/z axis. Also includes “pinch to scale” and “two finger swipe to rotate”.
Setting Description
Initial Distance Sets the starting distance of the center of the scene from the camera (along z axis).
Light Intensity Adjusts both the ambient and directional light source in the scene.
Replace Replace the current model with an updated one without affecting object sort order.
Delete Clears the model.
Scale Auto scales on import to fit within screen parameters. Fully adjustable to any size.
Movement Speed Important when matching translation speed to animation clip playback (only available in “Tap to move” Interaction Mode)
Add another model Add another model to your AR Camera. Note: Each model counts toward a 15MB limit.

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.

Banner Images allow you to upload a 2D image (.png, .jpg) to sit atop your camera. Drag your image onto the banner image icon, or click and select your image via the file browser.

  • Recommended Resolution: 700x200
  • File Type: .png, .jpg
  • File Size Limit: 300 KB

Add a URL to activate the optional link out icon. The Link out button is great for using AR Cameras to direct viewers to the URL of your product or service. "https://" is already included - do not include this in your URL.

ConsoleEditbanner

Result:

ConsoleEditbanner

Sidebar

The side bar appears if your AR Camera contains:

  • A single model with multiple animation clips.
  • Multiple models.

The icons in the side bar can be customized. File requirements:

  • Recommended Resolution: 256 x 256
  • File Type: .png, .jpg
  • File Size Limit: 300 kb
  • Looks best with circle shape on transparent .png

Multiple Models:

To set a custom icon for each model in your sidebar, drag your image onto the photo icon or click and browse for it in the file chooser.

ConsoleEditSidebarMultipleModels

Single Model with multiple animation states:

Please refer to https://8thwall.com/glb.html for more information on required animation states.

  • Idle:

    • Always animation clip "0"
    • This is the default, looping idle state
    • This is always first on the list of sidebar animations
  • Motion:

    • Always animation clip "1"
    • Note: Because the “tap to move” interaction uses the motion clip, this is not an animation clip that appears in the sidebar with an image.

To set a custom icon for each animation state in your sidebar, drag your image onto the photo icon or click and browse for it in the file chooser.

ConsoleEditSidebarMultipleAnimations

Preview Camera

The AR Camera Editor is also a fully interactive preview window that enables you to simulate the selected interaction mode. Preview at world scale or table scale and select from multiple aspect ratios:

CameraPreviewSettings

World Preview Table Preview

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

IMPORTANT: Renaming your camera will also update the HTML page title, the URL and the associated QR Code. Keep this in mind when sharing the link to your AR Camera. Renaming will change the URL to “https://apps.8thwall.com/userstring/newCameraName”. The old URL will not redirect to the new URL.

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

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


























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