{"id":582,"date":"2023-08-02T12:58:40","date_gmt":"2023-08-02T12:58:40","guid":{"rendered":"https:\/\/threeaces.co.uk\/insights\/?p=582"},"modified":"2023-08-11T17:49:42","modified_gmt":"2023-08-11T17:49:42","slug":"web-ar-8th-wall","status":"publish","type":"post","link":"https:\/\/threeaces.co.uk\/insights\/trend-analysis\/web-ar-8th-wall\/","title":{"rendered":"Web AR \/ 8th Wall"},"content":{"rendered":"\n<p>AR on the web is relatively recent. It\u2019s a technical challenge to achieve it using the browser\u2019s native APIs. In 2016, <a href=\"https:\/\/www.8thwall.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">8th Wall<\/a> was released, enabling developers to create AR content in the browser, which is supported by over 5 billion mobile devices. While other WebAR platforms exist, it&#8217;s the one that we&#8217;ve found gets the best results and is most popular with our clients in both the UK and the USA.<\/p>\n\n\n\n<p>As of today, it supports:<\/p>\n\n\n\n<ul>\n<li>Ground tracking ( SLAM )<\/li>\n\n\n\n<li>Image tracking for both flat, cylindrical and conical targets<\/li>\n\n\n\n<li>Location specific content ( VPS )&nbsp;<\/li>\n\n\n\n<li>Sky segmentation&nbsp;<\/li>\n\n\n\n<li>Face tracking&nbsp;<\/li>\n\n\n\n<li>Hand tracking<\/li>\n<\/ul>\n\n\n\n<p>It is the simplest way to get AR content across to a user, as all they need is to click a link or scan a QR code pointing to a web page in order to view it.<\/p>\n\n\n\n<h2>Features \/ Content<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"596\" src=\"https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/XFinity-1024x596.jpg\" alt=\"\" class=\"wp-image-630\" srcset=\"https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/XFinity-1024x596.jpg 1024w, https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/XFinity-300x175.jpg 300w, https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/XFinity-768x447.jpg 768w, https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/XFinity-1536x895.jpg 1536w, https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/XFinity.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The Xfinity Olympics AR experience used image tracking to bring posters to life<\/figcaption><\/figure>\n\n\n\n<p>The most popular features for our clients are image tracking and ground tracking. A typical experience will start at a real world location, with the user scanning a QR code to load the AR content, then scanning one or more posters with image targets in order to reveal the associated content.<\/p>\n\n\n\n<p>Some examples of what that content could be, all coded by ourselves:<\/p>\n\n\n\n<ul>\n<li>Creating a photo opportunity, eg <a href=\"https:\/\/www.8thwall.com\/hfinteractive\/xfinity-olympigrams-demo\" target=\"_blank\" rel=\"noreferrer noopener\">Xfinity Olympics<\/a> project: scan the poster to bring some athletes into your camera\u2019s virtual space, so you can pose among them and take a picture&nbsp;<\/li>\n\n\n\n<li>showcasing a product, eg <a href=\"https:\/\/www.dailymail.co.uk\/sciencetech\/article-10671767\/EE-launches-worlds-augmented-reality-SUPERSTORE-Wembley-Stadium.html\" target=\"_blank\" rel=\"noreferrer noopener\">EE 5G AR Superstore<\/a>: reveal a product with a nice article animation when scanning the poster, then let the user walk around it and \/ or pinch and grab their phone screen to rotate it&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>Show an entertaining animation followed by a call to action at the end, eg <a href=\"https:\/\/www.8thwall.com\/poplar\/doritosxdice\" target=\"_blank\" rel=\"noreferrer noopener\">Doritos x Dice<\/a> campaign: a music reactive animation plays before the user can enter their details for a chance to win festival tickets and goodies&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>Show an educational animation taking advantage of the AR space to make it more immersive than a film, eg Red Bull Cliff Diving: various animations explain the sport, and put you on top of the cliff so you get an idea of what it feels like to dive from 27 meters height (this triggered my fear of heights, so it\u2019s definitely immersive!)<\/li>\n<\/ul>\n\n\n\n<h2>Ground Tracking<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"467\" src=\"https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/Doritos_mobile.jpg\" alt=\"Screenshots from the Doritos x Dice ARexperience\" class=\"wp-image-622\" srcset=\"https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/Doritos_mobile.jpg 800w, https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/Doritos_mobile-300x175.jpg 300w, https:\/\/threeaces.co.uk\/insights\/wp-content\/uploads\/2023\/08\/Doritos_mobile-768x448.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">The Doritos x Dice AR experience used ground tracking to position a portal above the ground<\/figcaption><\/figure>\n\n\n\n<p>Ground tracking is the other most used feature, often in conjunction with image tracking.<\/p>\n\n\n\n<p>The typical use is to allow a user to tap the ground ( or a table )&nbsp; on their phone screen in order to position AR content on it.<\/p>\n\n\n\n<p>This is great for product showcases ( we did that for the Ford Mustang ), as 8th Wall now has a \u2018real world scale\u2019 feature which means you can show content at a consistent size so that it has the same size as it would in the real world. That way you can check if a car will fit in your garage, or if a pair of sneakers has good proportions.&nbsp;<\/p>\n\n\n\n<p>We\u2019ve also used this feature to position 3D holographic avatars of Trent Alexander Arnold (UK footballer ) for the EE 5G AR superstore, so people could see him speaking in front of them, and take a picture with him.<\/p>\n\n\n\n<h2>Location Based Content<\/h2>\n\n\n\n<p>Location specific content (VPS) is a recent addition to 8th Wall\u2019s capabilities. After scanning a location, developers get access to a 3D model of that location. When the user visits that location, the 3D model can be precisely positioned on their phone to match the real world features it corresponds to. This opens possibilities for adding 3D content to specific parts of the real world, such as adding a character on top of a building, creating a portal into another universe on the wall of a building\u2026 And since we have access to the 3D model, we can occlude 3D content with the real world content to increase immersiveness,eg you could have an animation happen around a statue and you wouldn\u2019t see the parts behind the statue.<\/p>\n\n\n\n<p>The drawback is that the location must be scanned, and since the experience is so strongly tied to it, you will usually need a developper on site to test it and iron out any kinks.<\/p>\n\n\n\n<h2>Face And Hand Tracking<\/h2>\n\n\n\n<p>Face tracking is something most of us are familiar with, through the multitude of Snapchat \/ Instagram \/ Facebook\u2026 filters. This is something our clients have less of an interest in.<\/p>\n\n\n\n<p>Hand tracking was recently released on 8th Wall. We hope to soon be able to use it on a project, as it opens a lot of interesting possibilities for user interaction.<\/p>\n\n\n\n<h2>Challenges<\/h2>\n\n\n\n<p>In today\u2019s world of remote work, it\u2019s quite rare that we meet our clients face to face. However, for a number of AR projects we have gone on to site to make sure any issues are quickly addressed. In all honesty, this is usually more to reassure the client than because it is absolutely necessary.&nbsp;<\/p>\n\n\n\n<p>We usually find that for image tracking experiences ( the bulk of our work so far), the lighting on location can be an issue, as shadows or reflections on image targets can compromise the quality of the tracking. Other factors such as the air temperature can also come into play, as the hotter it gets the harder it is for a phone to perform well. During our recent work on the\u00a0 Red Bull Cliff Diving project, we had a typical case of everything working fine when testing at home with controlled lighting and at standard indoor temperatures. But when we tested on site, the tracking suddenly wouldn&#8217;t work! The area was very sunny and the temperature was above 30 degrees Celsisus, so the conditions were much worse than the ones we developed in. But this was easily solved by changing a number from 500 to 2000 in a config file.<\/p>\n\n\n\n<h2>Open Source Solutions<\/h2>\n\n\n\n<p>There are two noteworthy open source WebAR libraries:<\/p>\n\n\n\n<ul>\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/\" target=\"_blank\">MindAR<\/a>: supports image and face tracking<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/ar-js-org.github.io\/AR.js-Docs\/\" target=\"_blank\">AR.js<\/a>: supports image tracking and location based AR (which works differently from 8th Wall&#8217;s VPS and is noticeably less precise)<br><br>Watch this space, as we are planning on adding demos of these open source libraries soon!<\/li>\n<\/ul>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>WebAR is a challenging yet rewarding field to work with. It&#8217;s a great way to stand out from the competition, and lets you impress and\/or educate your audience. It also has more pragmatic uses, allowing you to showcase products to your users within their space.<\/p>\n\n\n\n<p>If you want to find some inspiration, check out the list of 8th Wall client projects <a href=\"https:\/\/www.8thwall.com\/discover\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AR on the web is relatively recent. It\u2019s a technical challenge to achieve it using the browser\u2019s native APIs. In 2016, 8th Wall was released, enabling developers to create AR content in the browser, which is supported by over 5 billion mobile devices. While other WebAR platforms exist, it&#8217;s the one that we&#8217;ve found gets [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":612,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/posts\/582"}],"collection":[{"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/comments?post=582"}],"version-history":[{"count":10,"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/posts\/582\/revisions"}],"predecessor-version":[{"id":729,"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/posts\/582\/revisions\/729"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/media\/612"}],"wp:attachment":[{"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/media?parent=582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/categories?post=582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/threeaces.co.uk\/insights\/wp-json\/wp\/v2\/tags?post=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}