WebXR, AR and e-commerce: a Guide for Beginners

AR Chair DemoModel and textures created by Eric Chadwick, Copyright 2020 Wayfair LLC, CC-BY 4.0

Background on latest standards

Before getting into the details of the demo and the code, let’s start with a quick background and a few links for those who want to learn more.

Toy car model — Created by Guido Odendahl, visualized by the Stellar Path Tracer from Dassault Systèmes, distributed under CC0 license
Images representing different product variants — Khronos blog article

Demo scenario

In the demo of this article, the user goes through the following workflow when adding a 3D model in AR:

  • Go to the demo URL on a WebXR AR capable device (currently Android device with Chrome and “WebXR Incubation” flag enabled and AR Core installed)
  • Enter in AR mode (by clicking the headset icon on the bottom right corner)
  • Fix the floor with the mobile to have a pre-visualization of the model appear (a “ghost” version) and move it to the desired location
  • Touch anywhere on the screen to have the full model appear and repeat until finding a position that fits well in the living room
  • Change variant to check which one matches better (“Variant” button)
  • Finalize the position and move around it in the room to see how it fits overall (“Set” button)
25 seconds video showing the demo (playable demo available here)

Clone and variant

Let’s start with some features that we can check on a regular machine with this Babylon.js Playground example, before going into the AR side of the demo. The advantage of doing this separately is that testing is easier and faster since we don’t have to use the AR mobile device.

First Playground example — Clone the model and switch between its variant
Clone the mesh and change its material
Inspecting the variants of the model by loading it in the Babylon.js Sandbox.
Switch between the variants of a mesh

Setting-up the AR Scene

Finally, the time to get into the AR part of the code has come! Babylon.js makes it really easy to use WebXR.

Scene and “Enter XR” Button initialized by the Experience Helper
Initialization with WebXR Experience Helper

Positioning with hit-testing

The magic of WebXR and AR comes into play with the hit-testing feature. In the demo, it is used to position the model in the real world.

Positioning the model in the living room
Using hit-testing to position the 3D object in the real world

What’s next

Building this little demo was a lot of fun. How often is what we build so much connected to our daily life? It could be enhanced with shadows, which would further blur the lines between the two worlds. The 3D model would appear like it is casting a shadow on the real floor (this could be done using Plane Detection like in this Playground example, or by simply adding an invisible plane and a dark ellipse under the chair at the floor level). Another addition, much bigger, would be to take this JavaScript code and re-use it in native apps across devices. This is the promise of Babylon Native and, probably, one of my next demos!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

1.4K Followers

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/