Integration in Web AR : Bring your products to life

Web AR refers to the insertion of 2D or 3D computer generated images onto real world images in real time directly on a website. This type of experience is accessed directly through the web browser rather than through an application. So you can access it from Google chrome, safari or Mozilla Firefox. This technology allows for live loading without the need for the user to go through a mobile or tablet app. Accessible to the largest number of people, this type of experience is deployed thanks to two AR Kit (iOS) & AR Core (Android) systems. It uses WebGL, WebVR, WebRTC. Through this the user can immerse themselves in scenes that include animations, video, 3D models & all in an interactive way. WebAR also supports image detection. In short, it breaks down barriers and makes augmented reality accessible from a QR code or a link.

AR has opened up the field of possibilities and is already present in the daily lives of many of us. Many applications use it and we use it without even realising it. This is the case on Instagram and Snapchat via filters & effects but also in applications like IKEA place or LEGO. However, these apps are very heavy to load and require a lot of actions. Web AR counteracts this by offering simple but accessible experiences with the least possible hindrance. Also, we can already search on Google (a lion for example) and have direct access to an animated 3D model in front of us. The use cases are wider: E-commerce, research, health, education, business & entertainment. For example, you can now try on a pair of glasses and directly change the colour to see what suits you best. You can also place a car in front of you if you don't have it in stock at your dealership. It is possible to directly represent body parts and show their function in an overlay for medical students. Another example, and not the least, is gaming. Thanks to web AR you will be able to play by interacting with real-life elements directly from your smartphone.

ARCore refers to the AR framework for Android, while ARKit is the same for Apple's iOS. These frameworks allow developers to exploit the most advanced AR tools to enable the most immersive and realistic experience possible. So it's through these tools that developers can add things like motion tracking and the like. This allows devices to better understand their relationship with the environment. Similarly, tools like ARCore and ARKit allow phones to appreciate the size and position of things like tables and chairs, for a more realistic feel in any environment. To achieve this, ARCore & ARkit use the smartphone's various sensors to detect horizontal surfaces but also to take into account the phone's movements, and estimate the light that enters the room so that virtual objects can be lit realistically according to the environment.

Both technologies use the following features to integrate virtual content into the real world:

• Motion tracking - to track position in the real world.
• Understanding the environment (sizes, locations, angles, shapes, points and plan)
• Light estimation - to detect lighting information.

Nevertheless, there are differences between ARKit and ARCore :

Google's SDK tracks more points & features but ARKit detects horizontal and vertical surfaces more accurately than ARCore. Also the latest updates have given ARKit several advantages (People Occlusion, Motion Capture, Simultaneous front and rear camera, Multiple face tracking, Collaborative sessions)

8th Wall is one of the leading web AR solutions on the market. 8th Wall provides development tools to create and deploy web-based augmented reality experiences for agencies, brands & content creators. Through its editor, 8th Wall offers powerful features such as world tracking, face effects and image recognition. These are deployed on the web, without the need for users to download an application. The 8th Wall Framework uses JavaScript and WebGL libraries and supports the most popular 3D frameworks including A-Frame, three.js, babylon.js, Amazon Sumerian and Play Canvas. The number of possibilities on 8th Wall is endless and allows for the creation of complex and in-depth experiences such as games, or AR artworks. 8th Wall also recently launched Curved Image Target technology, which gives developers new tools to bring curved surfaces like cups, cans and many other objects to life with web-based augmented reality.

When creating an augmented reality effect on the web, there are several components that go into estimating the price. For example, it is important to know if the experience will include 3D or 2D designs, animations, particles, a picker, special actions or any other element. This allows you to give an accurate estimate. Nevertheless, it is possible to give several prices and ranges depending on the type of effect:

• Simple 3D product integration -> between 500€ and 5000€.
• Face animation (8th wall) -> between 2000€ and 30 000€.
• AR games (8th wall) -> between 5000€ and 50 000€.
• Image recognition -> between 4000€ and 50 000€.
• Real time fitting of glasses or accessories -> between 1500€ and 35 000€.
• Colour/artistic/lighting effects -> between 1500€ and 20 000€.
• Make-up -> between 2500€ and 30 000€.

In addition to this production part, there is a subscription fee on 8th wall between 1250$ and 5000$ depending on the number of views. Maintenance fees may also be applied. These figures are approximate and may vary depending on the project, deadline and assets provided. For more details, please visit our Prices and rates ! 

Although it offers more possibilities to smartphone users, WebAR experiences have rather limited features. AR performance is simply better on applications. Nevertheless, the memory limitation of the web page that displays an AR image is one of the obstacles to improving the performance of web-based AR. In addition, the functionality is also more limited than that of app-based AR. For example, it will be more difficult to place objects on the wall or to make measurements. Compared to the development process of application-based AR, during the creation of the WebAR experience, developers cannot access all the capabilities and features of the devices they are designing it for. Therefore, they can only work with the basic functionality. Another factor that can affect the quality of the experience is the speed of the internet: it needs to be as fast as possible and run without interruption, as browser-based AR requires a constant connection to the internet. However, it seems that with the arrival of 5G, this problem will no longer be an issue.

Web AR allows you to showcase and sell your products using 3D and augmented reality. With this type of medium, you can offer a whole new experience to your customers. They can personalise your products, see them from every possible angle and, with a single click, they can visualise the product in their environment with breathtaking realism that brings that wow effect! This gives them the opportunity to answer their questions:

"Will this furniture fit in our living room?

"Will this colour be suitable for the interior of our room?

"What does the interior of this new car look like?"

These are questions that customers can answer to make a better buying decision, increasing sales by at least 50 %. These efforts also help the environment by reducing return rates & logistics in the process.

Filtermaker automatically generates scripted snippets (small code snippets) that contain information and variables about your products. The files are displayed in USDZ and GLB formats that are compatible with all browsers. They are visible on your page as a WebAR and 3D configurator/viewer. These features can be added to your product page in seconds. So whether you need products to be displayed in AR on a wall, the floor or in an open space, we provide you with the right code for your experience.

In order to view 3D models on a website, the most common technology is an iFrame. This is a frame that loads a page within another page. 

Nowadays, the Google robots that check sites are smart enough to understand that what is inside the frame is not associated with the website and is the property of another website. Thus, they consider that the content belongs to the owner of the configurator and/or viewer and not to the website owner. 3D models therefore do not negatively impact the loading and SEO of a website, in fact quite the opposite. 

The 3D visualization of the products allows users to discover them from every angle. They can zoom in for a closer look and see every detail. On average, future customers interact with a 3D configurator for more than 20 seconds, and more than 30 % of them do so for more than 30 seconds. This high level of interactivity not only increases the time spent on the model, but also the time spent on the site, up to 200%.

In conclusion, each additional second spent on a page of a website reduces the bounce rate, i.e. the percentage of visitors who leave the site without going on to other pages. In the eyes of Google, this type of data means that the content is very relevant and therefore implies better referencing.

The implementation of a configurator leads to better results in terms of sales and is an undeniable argument for consumers in search of the product that suits them best. In order to meet their expectations and lead them to an ever more precise choice, a number of functionalities have been developed in the configurators. These include, in particular

• The choice of colour
• The choice of the 3D model (and its variants)
• The addition of customisable options
• Adding text and features related to a certain part of the game
• Links to an external page
• An export of the chosen options (colours, model) in PDF
• Saving the configuration in your gallery
• A module leading to a payment interface (like Apple pay)

In addition to this, the models can respond to actions via gestures such as clicks and taps on the screen. These actions can trigger visual animations (particles, appearances etc) but also physical animations (opening a vehicle door). Each of these actions is customisable and depends on the model & the experience itself.

Quick Look is an innovative feature that Apple launched in 2018. This tool allows e-tailers to display a preview of their products in augmented reality. The Apple brand has since rolled out a new feature of its Quick Look augmented reality (AR) tool in early 2020. Now, every iPhone and iPad user can shop online and enjoy an augmented reality preview of their future purchases to see if they fit in well with their surroundings. Following this process, they are invited to click on a button at the bottom of their screen. This button, if their payment method is registered, allows them to validate their purchase and pay the amount indicated. This facilitates the purchasing process and reduces the number of actions required from product discovery to the purchase. The button is customisable and can be used for a variety of purposes. It can also be used to add a live chat so that customers can ask any questions they may have about a product directly to the sales staff.