3D Cloud supports the deployment of Web-Based Augmented Reality (WebAR). This integration allows for product web pages accessed from a mobile device to display an option (typically labeled “AR” or “View In Room”) for viewing that product within a consumer's room/environment. End-users can access AR experiences directly from their smartphone using the native camera and mobile web browser without the need for downloading an app, making it accessible to both iOS and Android devices.

Companies can license as part of our 3D Cloud for the ability to take existing 3D assets and deploy them as WebAR assets within each product’s page on the website. The first step of the process is the conversion of files appropriate for iOS and Android consumption.

WebAR File Creation

iOS-based Devices

For compatibility with Apple iOS-based mobile devices, 3D Cloud 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.
- Background On USDZs - These file types are based on the Universal Scene Descriptor (USD) format that comprises 3D models or animations. Created by Pixar, the format allows for extensive collections of assets in one scene. USD layers for assets mean that multiple artists can work on the same scene simultaneously and appears in some animated Pixar movies created using the Hydra Engine.

Android-based Devices

For compatibility with Google Android-based mobile devices, 3D Cloud will convert a predefined set of 3D assets to the GLB file format in order to support WebAR.
- What Is It - 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 -
- 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.

WebAR Product Manifest

Once files are prepared, it is necessary to understand which products within the product catalog have assets ready for deployment on the website. The catalog of SKUs, download URLs and other metadata about all WebAR products are archived in a manifest file called manifest.json for that purpose.

Resource commands

Download URL - https://webar.3dcloud.io/{CLIENT ID}/manifest.json
Base URL - https://webar.3dcloud.io
Retrieve URL to glb or usdz from SKU**
-- Latest: {base url}/{client id}/latest/{sku}/{lod}/{version}/{sku}(.glb)(.usdz)
-- Stage: {base url}/{client id}/staging/{sku}/{lod}/{version}/{sku}(.glb)(.usdz)
-- Active: {base url}/{client id}/active/{sku}/{lod}/{version}/{sku}(.glb)(.usdz)

{
  "skus": {
    "sku1": {
      "mxt_pid": "###ABC",
      "date": "2021-03-31 13:40:11.612111",
      "urls": [
        "https://webar.3dcloud.io/CLIENTID/active/SKU/512/YYYYMMDDHH/SKU.glb",
        "https://webar.3dcloud.io/CLIENTID/active/SKU/512/YYYYMMDDHH/SKU.usdz",
        "https://webar.3dcloud.io/CLIENTID/active/SKU/256/YYYYMMDDHH/SKU.glb",
        "https://webar.3dcloud.io/CLIENTID/active/SKU/256/YYYYMMDDHH/SKU.usdz"
      ]
    },
    "sku2": {
      "mxt_pid": "###123",
      ...
    }
  }
}

{"skus":{"APS01SE04":{"mxt_pid":"###APS01SE04","date":"2021-07-07 17:38:21.779493 UTC","urls":["https://webar.3dcloud.io/######/active/APS01SE04/1024/2021070713/APS01SE04.glb","https://webar.3dcloud.io/######/active/APS01SE04/256/2021070713/APS01SE04.glb","https://webar.3dcloud.io/######/active/APS01SE04/512/2021070713/APS01SE04.glb","https://webar.3dcloud.io/######/active/APS01SE04/1024/2021070713/APS01SE04.usdz","https://webar.3dcloud.io/######/active/APS01SE04/256/2021070713/APS01SE04.usdz","https://webar.3dcloud.io/######/active/APS01SE04/512/2021070713/APS01SE04.usdz"]},"ERA71LM06":{"mxt_pid":"###ERA71LM06","date":"2021-07-06 19:07:00.640133 UTC","urls":

WebAR Retrieval

For all products contained within the product manifest, 3D Cloud will setup a WebAR specific endpoint that when used in conjunction with an API key, allows for a button on the product page to supply a SKU to 3D Cloud, and in return receive a URL to the USDZ or GLB product that enables Web AR to display.

URL

https://mxt-client-services.3dcloud.io/v1/ar/{sku}?export-type={usdz,glb}&lod={256,512}&api_key={api_key}

Usage

Make a GET request passing 2 required params and 1 optional parameter. Your API-Key can be provided on the query string as shown above or sent as a request header called X-API-Key.

Required Parameters

SKU: The SKU for the product
Export Type: The type to return; either USDZ or GLB

Optional Parameter

lod: The Level Of Detail (lod) of the product; this is also the texture dimension (512x512 or 256x256 pixels)

HTTP Sample

https://mxt-client-services.3dcloud.io/v1/ar/INC60MB04?export-type=usdz&lod=256&api_key=AIza......04

Example Response

{
"url": "https://webar.3dcloud.io/00003a/active/INC60MB04/256/2021070713/INC60MB04.usdz?Expires=1640207609&KeyName=webar2&Signature=ule5dVNedXnd123EUpSu8cNK9is="
}

import requests

url = "https://mxt-client-services.3dcloud.io/v1/ar/INC60MB04?export-type=usdz&lod=256&api_key=AI...04"

payload={}

response = requests.request("GET", url, data=payload)

print(response.text)

Example Files

Below are examples of WebAR files.

View in AR Code Examples

<script>
    const viewInRoomButton = document.createElement('a');
    if (viewInRoomButton.relList && viewInRoomButton.relList.supports && viewInRoomButton.relList.supports('ar')) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onload = function() {  
            if (xmlhttp.status >= 200 && xmlhttp.status < 400) {
                viewInRoomButton.innerHTML = "View in Room";
                viewInRoomButton.href = xmlhttp.responseText;
                document.getElementsByTagName("body")[0].insertBefore(viewInRoomButton,document.getElementsByTagName("body")[0].firstChild);              
            }
        };
        var _isAndoidDevice = false; 
        // Device detection
        const detect = navigator.userAgent || navigator.vendor || window.opera;
        const ua = 'android';
        if (detect.toLowerCase().indexOf(ua) > -1) {
            _isAndoidDevice = true;
        }
        const isIOS = !!navigator.platform.match(/iP(ad|hone|od)/i);
        if (isIOS) {
            xmlhttp.open("GET", "https://us-central1-project-scorpion-web.cloudfunctions.net/webar-gen-url/?sku=798054424&export-type=usdz", true);
            xmlhttp.send();
        }
    }
</script>

<button type="button" onclick="get_post_ajax();">Generate</button>
</div>

<div class="product-container"><model-viewer id="model" src="" poster="" camera-orbit="0.9677rad 1.2427rad auto" shadow-intensity="1" camera-controls alt="3D model"></model-viewer><span id="sku"></span><a id="link" href="">View in your space</a></div>
<p id="demo"></p>

<script type="text/javascript">
  function update_progress(e)
  {
    if (e.lengthComputable)
    {
      var percentage = Math.round((e.loaded/e.total)*100);
      console.log("percent " + percentage + '%' );
    }
    else 
    {
      console.log("Unable to compute progress information since the total size is unknown");
    }
  }
  function transfer_complete(e){console.log("The transfer is complete.");}
  function transfer_failed(e){console.log("An error occurred while transferring the file.");}
  function transfer_canceled(e){console.log("The transfer has been canceled by the user.");}
  function get_post_ajax()
  {
      var sku = document.getElementById("skuField").value;
      var xhttp;
      if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}//code for modern browsers} 
    else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5     
      xhttp.onprogress = update_progress;
    xhttp.addEventListener("load", transfer_complete, false);
    xhttp.addEventListener("error", transfer_failed, false);
    xhttp.addEventListener("abort", transfer_canceled, false);      
      xhttp.onreadystatechange = function()
      {
        if (xhttp.readyState == 4 && xhttp.status == 200)
        {
            document.getElementById("model").src = xhttp.responseText;
            document.getElementById("sku").innerHTML = sku;
            document.getElementById("link").href = "intent://arvr.google.com/scene-viewer/1.0?file=" + xhttp.responseText.replace(/&/g, "%26") + "#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;";
        }
      };
    xhttp.open("GET", <?= url ?> + "/webar-gen-url/?sku=" + sku + "&export-type=" + <?= type ?>, true);
    xhttp.send();
  }
</script>

static isAndroidDevice():boolean {
if (this._isAndoidDevice === undefined) {
// Initiate as false
this._isAndoidDevice = false;
// Device detection
const detect = navigator.userAgent || navigator.vendor || (window as any).opera;
const ua = 'android';
if (detect.toLowerCase().indexOf(ua) > -1) {
this._isAndoidDevice = true;
}
}
return this._isAndoidDevice;
}
const isIOS = !!navigator.platform.match(/iP(ad|hone|od)/i);