Augmented Reality

Augmented Reality (AR) is a virtual reality experience that allows users to preview configured 3D products in their own space using a tablet or smartphone.

Dopple supports web-based AR experiences out of the box for AR-enabled devices and browsers, such as iOS Safari and Chrome on Android. For devices or browsers that do not support AR, a QR code may be generated and displayed on your page for users to scan and launch AR directly instead.

Launching AR

The startAR() method allows you to launch a new Augmented Reality experience on AR-supported devices, such as smartphones or tablets.

const dopple = new DoppleXR({
  /* ... */
});

// Launch AR automatically (if the device supports AR)
await dopple.startAR();

Generating Shareable Links

On devices that do not support AR, the startAR() method will instead return a shareable URL along with a QR code image (to that same URL) that can be used to launch the AR experience on a supported device.

{
  "qrCode": "data:image/png;base64,iVBORw0KGe...JgCAAAAAElFTkSuQm5C",
  "url": "https://ar.dopple.io/?arMode=true&owner=my-org&workspace=my-workspace&projectName=my-project&productVersion=1&selection={}"
}

This data can then be used to create any QR codes and links to the AR experience needed in your UI, and will automatically include information about the product’s configuration in it.

<img id="qr-code" /> <a id="ar-link">Link to AR experience</a>

// Generate the QR code & shareable link data
const arData = await dopple.startAR();

if (arData) {
  // Create the QR code image for AR
  const img = document.getElementById("qr-code");
  img.src = arData.qrCode;

  // Create the anchor link for AR
  const link = document.getElementById("ar-link");
  link.href = arData.url;
}

Manually Generating Links

Behind the scenes, startAR() relies on another method to create the QR code data and shareable link that gets returned: generateShareURL(). You can call this method directly, passing in additional options to further customize the final link.

const arData = await dopple.generateShareURL({
  baseUrl: "https://www.example.com",
  arMode: true,
  qrCode: true,
});

generateShareURL() accepts the following options:

Option	Type	Description
`baseUrl`	`string`	The base URL to use for the shareable link. If not specified, the current page’s URL will be used. Query parameters containing info about the product will be appended to this URL.
`arMode`	`boolean`	Whether or not the link will will trigger the AR experience to launch automatically when opened. (default: `false`).
`qrCode`	`boolean`	Whether or not to generate a QR code image for the shareable link (default: `false`).

Dedicated AR Pages

The generated link and QR code default to the current page, but this may not be ideal for your end user experience for a number of reasons. For example, if it was generated on a page with lots of large images or other heavy assets, users will have to re-download the full page on their new device before automatically launching into AR, which may take longer than some users would prefer to wait.

Because of this, you may decide a more ideal user experience is would be to have a dedicated AR page, which loads only your 3D product for the sake of preview and launching AR much quicker.

Live Demo

Launch Augmented Reality

(QR code will show here)

Shareable URL Base URL: AR Mode QR Code

(QR code will show here)

Generated URL:
N/A

Full Code Example

<html>
  <head>
    <script type="module">
      import { DoppleXR } from "https://builds.dopple.io/packages/dopple-sdk@latest/dopple-sdk.js";

      // Initialize Dopple
      const dopple = new DoppleXR({
        container: document.getElementById("dopple-container"),
        owner: "my-org",
        workspace: "my-workspace",
        projectName: "My Project",
        productVersion: "1",
        selection: {},
      });

      await dopple.load();
      dopple.resize({ trackParentSize: true });
      dopple.run();

      // Launch into AR mode when the "Launch AR" button is clicked
      const launchButton = document.getElementById("launch-ar");
      launchButton.addEventListener("click", async () => {
        await dopple.startAR();
      });

      // Generate a shareable link & QR code when the "Generate Link" button is clicked
      const generateLinkButton = document.getElementById("generate-link");
      generateLinkButton.addEventListener("click", async () => {
        const { url, qrCode } = await dopple.generateShareURL({
          baseUrl: "https://www.example.com",
          arMode: true,
          qrCode: true,
        });

        const img = document.createElement("img");
        img.src = qrCode;
        document.body.appendChild(img);

        const link = document.createElement("a");
        link.href = url;
        link.target = "_blank";
        link.textContent = "Click to view in AR";
        document.body.appendChild(link);
      });
    </script>
    <style>
      #dopple-container {
        aspect-ratio: 16 / 9;
        position: relative;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="dopple-container"></div>
    <button id="launch-ar">Launch AR</button>
    <button id="generate-link">Generate Link</button>
  </body>
</html>