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

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

  • 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

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

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

Positioning with hit-testing

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

What’s next

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Symphony of Widgets

Google Cloud IAM and AWS IAM — similarities and differences

What is the Semantic Web?

AWS Mac instances with Terraform

Automate your gadgets with Voice Assistant on Your Smart Phone (4 Simple Steps)

DojoFarm Layer 2: Kunai Token

Intersystem Cache — High Performence and Operations DBMS

Meet our G{Code} Mentors!

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

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

More from Medium

Creating an ARCore powered indoor navigation application in Unity

Augmented Reality Subway Map with Unity 3D

Get started with Augmented Reality on the web using Three.js and WebXR | Part 1

The Simplest Start to AR: An Extremely Profitable Skill