WebAR SDK Integration Guide

As part of our 3D Cloud by Marxent™, we have added the ability to take existing 3D assets and deploy them as WebAR assets within each product’s page on your website.

Integration Overview

This integration allows for product pages accessed from a mobile device to display an option (typically labeled “AR” or “View In Room”) for viewing a product within a consumer's room/environment in Augmented Reality (AR).

End-users can see your products in their homes/offices/friends houses using AR directly from their smartphone. This entire experience is mobile and web based without the need to download an app, making it accessible to both iOS and Android devices without any headaches over the App Store or Google Play.

We support all modern browsers (Chrome, Safari, Firefox, Edge) as well as in-app browsers on common Apps across a wide range of iOS and Android devices. See more details here.


WebAR Instructions

We will go over detailed instructions on the values that you need to collect, how to integrate and use the WebAR SDK in this documentation. When reviewed carefully, you are able to easily add WebAR functionality to your products on your website.

Before you get started, you need three pieces of information from your Marxent Account Director. If you already have them, you can dive right in.

  1. API key: The API key is your private access key for your products. Typically it has 39 characters and a format of “Alz………………”

  2. Client ID: Your company’s unique ID in the Marxent system.

  3. The list of SKUs for your products are available in AR

    1. We pre-generate the WebAR assets for optimal performance when customers go to your site, and they all have SKUs. You will need these when using the SDK.

This SDK will only work with your products that are already generated into WebAR format by Marxent. It will not support any/all products. Contact your Marxent Account Director if you have any questions related to that.


WebAR Demo

  • Before diving in, check out our demo page to play with the SDK.


Install & Use the WebAR SDK

The first step is installing the WebAR SDK into your own web application. Our NPM package includes Typescript definition files and is ES6 compliant. It is completely web based and lightweight, making it easy to install from NPM or CDN.

We have detailed instructions on installing this SDK.

CDN

Install from CDN

  • Here is where we dive deep into the technical ways to to install the SDK using CDN.

Use with CDN

  • Here is where we dive deep into the technical ways to to install the SDK using CDN.

NPM

Install from NPM

  • Here is where we dive deep into the technical ways to to install the SDK using NPM.

Use with NPM

  • Here is where we dive deep into the technical ways to to install the SDK using NPM.

We have detailed instructions on using this SDK whether you are using NPM or CDN as well as working examples to get you started with ease.


Technical Usage

Once you feel comfortable with the above documentation, review this page for some examples and getting started (further): https://marxent.atlassian.net/wiki/spaces/3CMP/pages/2435121225


Understanding How the WebAR SDK Works

Marxent supports both iOS and Android based devices, and here’s some general information about the platforms, but Marxent handles this functionality. This section is more for your knowledge.

iOS

For compatibility with Apple iOS-based mobile devices, Marxent will convert a predefined set of 3D assets to the USDZ file format in order to support WebAR.

What It Is - USDZ is a 3D file format that displays 3D and AR content on iOS devices without having to download special apps, including the ability to render via Web AR. Additionally, users can easily share this portable format, and developers can exchange it between applications in their 3D-creation pipeline.

Where It Works - The USDZ format enables iOS 12 or greater iPhone and iPad users to view and share AR files. USDZ offers portability and native support so users do not need to download a new app for each viewing situation. Users can easily share USDZ files with other iOS users. Currently, Android does not support USDZ and has its own equivalents, glTF and GLB (more on GLB support for WebAR below).

Benefits Of USDZs - The file format can render several objects and supporting files in one file, including data for mapping, textures, rigging, geometry, and more. Developed by Pixar and Apple and introduced at the Apple Worldwide Developers Conference (WWDC) in 2018, USDZ enhances USD to promote the exchange of 3D models for AR.

Android-based Devices

For compatibility with Google Android-based mobile devices, Marxent will convert a predefined set of 3D assets to the GLB file format in order to support WebAR.

What It Is - GLB is a 3D file format that’s used in virtual reality (VR), augmented reality (AR), games, and web applications because it supports motion and animation. Another advantage of the format is its small size and fast load times, making it well suited for Web AR on Android-based devices. GLB files are a binary version of the GL Transmission Format (glTF) file, which uses JSON (JavaScript Object Notation) encoding. So, supporting data (like textures, shaders, and geometry/animation) is contained in a single file.

Where It Works - The GLB format enables all windows and Android (Google Chrome) users to view and share AR files. GLB offers portability and native support so users do not need to download a new app for each viewing situation. Since Android doesn’t currently support UDSZ, read about the many places where you can use a GLB file for your WebAR experience!

Benefits of GLBs - GLB, like glTF, is a royalty-free way to encode 3D data. A GLB file will generally be smaller (approximately 33 percent) than a glTF file and its supporting files. It’s also easier to upload a single file to a server rather than two or three, so GLB has an advantage there too. Many developers find it easier to edit the objects and senses in the glTF format and then convert it to GLB to deliver the file.

Backgrounds on GLBs - The Khronos Group developed the GLB and glTF formats in 2015. They saw a need for formats that developers could open and edit in many graphics and 3D apps. Version 2.0 of the specification (released in 2017), added Physically Based Rendering (PBR), which allows shadows and light to appear more realistic and coding updates for speed and improvements in animation.


 

Technical Information To Integrate Our SDK