{"id":27801,"date":"2022-03-21T19:23:50","date_gmt":"2022-03-21T19:23:50","guid":{"rendered":"http:\/\/Building-an-AR-App-with-Markers"},"modified":"2022-03-21T19:23:50","modified_gmt":"2022-03-21T19:23:50","slug":"building-an-ar-app-with-markers","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/","title":{"rendered":"Building an AR App with Markers"},"content":{"rendered":"

Adding virtual things to the real world is something that\u2019s made a huge leap in popularity, especially with QR codes. With augmented reality (AR), we can take images in the real world and display digit things on top of them, kind of like the Nintendo DS used to do with those game cards.<\/p>\n

In this tutorial, we\u2019ll make a browser-based AR app that displays interesting things on top of images. By the end of this, you\u2019ll know how to work with AR in a Redwood app.<\/p>\n

Set up the Redwood app<\/h2>\n

We\u2019ll start by creating a new Redwood app. In a terminal, run the following command.<\/p>\n

$ yarn create redwood-app ar-demo\n<\/code><\/span><\/pre>\n
This will generate a lot of files you can work with on both the front-end and back-end, but our focus will be on the front-end. You can find all of the code for the React front-end in the web<\/code> directory.<\/p>\n
There are a few libraries we\u2019ll need to add to our app in order to get the AR functionality we need and we\u2019ll be doing that in a slightly different way.<\/p>\n
Add the libraries you need<\/h3>\n
There aren\u2019t a lot of pre-built JavaScript AR libraries out there and the ones available have their own unique set of challenges, but we\u2019ll use AR.js<\/a> since many of the others are built on top of this.<\/p>\n
You\u2019ll also find that JavaScript AR systems commonly use Three.js<\/a> or A-frame<\/a> to handle rendering objects. The app we\u2019re making is a little unique in that it\u2019s built around the browser. Most AR apps are built for use on mobile devices, but this is a way that all JavaScript developers can play with AR without needing mobile development knowledge.<\/p>\n
The tricky part about working with AR in the browser is that the libraries we have available want to be in the <body><\/code> of the app, which is hard to do with any of the frameworks. So we\u2019ll start by adding the libraries we\u2019re working with to the <head><\/code> of our index.html<\/code> file in the web > src<\/code> directory.<\/p>\n
<script<\/span> src<\/span>=\"https:\/\/aframe.io\/releases\/1.0.4\/aframe.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<!-- we import arjs version without NFT but with marker + location based support --><\/span>\n<script<\/span> src<\/span>=\"https:\/\/raw.githack.com\/AR-js-org\/AR.js\/master\/aframe\/build\/aframe-ar.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We\u2019re using the A-frame version of the AR.js library. Now that we have the libraries imported, let\u2019s add the elements we need inside the <body><\/code>.<\/p>\n
Setting up the AR elements<\/h2>\n
This will feel odd to anyone who\u2019s been working in a framework because we typically don\u2019t add anything to the DOM like this. It\u2019s a quirk to this AR library because it requires the elements to be directly inside the <body><\/code>, not in a component. I did some digging trying to find ways to make this into a component and took a look at some other libraries, but couldn\u2019t find anything ready to use.<\/p>\n
There are ways to componentize this, but it will take some time and craftiness! For now, it\u2019s important to see how this works so that you at least know how to work with AR.<\/p>\n
So inside the <body><\/code>, add the following code.<\/p>\n
<a-scene<\/span> embedded<\/span> arjs<\/span>><\/span>\n    <a-marker<\/span> type<\/span>=\"pattern\"<\/span> url<\/span>=\"https:\/\/raw.githubusercontent.com\/flippedcoder\/blog-examples\/main\/clear-world\/pattern-check.patt\"<\/span>><\/span>\n        <a-sphere<\/span> radius<\/span>=\"1\"<\/span> color<\/span>=\"#EF2D5E\"<\/span>><\/span><\/a-sphere<\/span>><\/span>\n    <\/a-marker<\/span>><\/span>\n    <a-entity<\/span> camera<\/span>><\/span><\/a-entity<\/span>><\/span>\n<\/a-scene<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This gives you an AR environment that will let you detect when a certain picture is displayed in the camera. These pictures are called markers. So anytime you are running this app and you point to a marker, you\u2019ll get some kind of interaction in the browser.<\/p>\n
Since we\u2019re using A-frame, that interaction could be any number of things from a simple object being displayed on top of the marker to an entire game being created on top of the marker. You can have a lot of fun playing around with A-frame and what you want to display on your marker.<\/p>\n
Whenever the correct marker image is found and it matches the pattern we have, then the <a-sphere><\/code> is displayed on top of the marker. Anything that you build inside of the <a-marker><\/code> tag will display on top of the marker image so feel free to get more creative!<\/p>\n
Lastly, we have the <a-camera><\/code> tag. This is what opens the webcam or the camera on your phone so that you can target the marker image in real life.<\/p>\n
That\u2019s actually all for the code part! Now we need to make a marker image. There\u2019s a tool available that lets us do that easily.<\/p>\n
Make a marker image<\/h2>\n
To make a marker image and the associated pattern file, go to this site: https:\/\/jeromeetienne.github.io\/AR.js\/three.js\/examples\/marker-training\/examples\/generator.html<\/a>. You can upload an image of your choosing, but keep in mind that there needs to be high contrast between the background and foreground and simple images work the best. You can also use the example image that\u2019s displayed.<\/p>\n
\"marker<\/p>\n
You\u2019ll need to download the image and the marker. The marker is your pattern file and the image is the file that you will point your camera at. When you have the marker file, you can upload it to your own GitHub repo and replace the link in the code above.<\/p>\n
Now that you have your marker file and the image ready, we can start the app and see what this looks like!<\/p>\n
Running the AR app<\/h2>\n
In a terminal, run the following command.<\/p>\n
$ yarn redwood dev\n<\/code><\/span><\/pre>\n
This will start up the Redwood app and you should see something like this in your browser.<\/p>\n
\"app<\/p>\n
Now if you open the image on your mobile device, you should see a pink ball on top of it in the browser.<\/p>\n
\"showing<\/p>\n
Now you\u2019re working with AR directly in your browser and if you scroll down the page you\u2019ll see the rest of the app at the bottom. This is super useful if the AR portion of your app is just a small part of what a user needs.<\/p>\n
Finished code<\/h2>\n
You can check out the full code in the clear-world<\/code> folder of this repo<\/a> or you can take a look in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201cdivine-firefly-qmisc\u201d\nid=\u201cdivine-firefly-qmisc\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
Adding AR to the web is actually still a pretty tricky thing to do considering most libraries have been built around the mobile experience. There\u2019s still a lot of room to grow and create web-based AR apps for people projects that might need more than just the AR interface and they need a full-stack web app supporting it.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27802,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,202,371],"class_list":["post-27801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-mobile","tag-under-review"],"acf":[],"yoast_head":"\nBuilding an AR App with Markers<\/title>\n<meta name=\"description\" content=\"Bringing AR to web apps seems like something that's pretty common, but it still takes some custom work to get things going. In this post, we'll go through how you can add AR.js to a Redwood app to enable AR functionality.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building an AR App with Markers\" \/>\n<meta property=\"og:description\" content=\"Bringing AR to web apps seems like something that's pretty common, but it still takes some custom work to get things going. In this post, we'll go through how you can add AR.js to a Redwood app to enable AR functionality.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T19:23:50+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building an AR App with Markers\",\"datePublished\":\"2022-03-21T19:23:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"Mobile\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/\",\"name\":\"Building an AR App with Markers\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA\",\"datePublished\":\"2022-03-21T19:23:50+00:00\",\"description\":\"Bringing AR to web apps seems like something that's pretty common, but it still takes some custom work to get things going. In this post, we'll go through how you can add AR.js to a Redwood app to enable AR functionality.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA\",\"width\":6048,\"height\":3402},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building an AR App with Markers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building an AR App with Markers","description":"Bringing AR to web apps seems like something that's pretty common, but it still takes some custom work to get things going. In this post, we'll go through how you can add AR.js to a Redwood app to enable AR functionality.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/","og_locale":"en_US","og_type":"article","og_title":"Building an AR App with Markers","og_description":"Bringing AR to web apps seems like something that's pretty common, but it still takes some custom work to get things going. In this post, we'll go through how you can add AR.js to a Redwood app to enable AR functionality.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-21T19:23:50+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/"},"author":{"name":"","@id":""},"headline":"Building an AR App with Markers","datePublished":"2022-03-21T19:23:50+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA","keywords":["Guest Post","Javascript","Mobile","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/","name":"Building an AR App with Markers","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA","datePublished":"2022-03-21T19:23:50+00:00","description":"Bringing AR to web apps seems like something that's pretty common, but it still takes some custom work to get things going. In this post, we'll go through how you can add AR.js to a Redwood app to enable AR functionality.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA","width":6048,"height":3402},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-an-ar-app-with-markers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building an AR App with Markers"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926236\/Web_Assets\/blog\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a\/020b2b0d26c37fcba44ffed48734b3343da0a3cc-6048x3402-1_27802c124a.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27801"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27801\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27802"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
There are a few things to note in the code. Everything is contained within the <a-scence><\/code> which is an A-frame tag that creates the virtual environment. The <a-marker><\/code> tag is how we enable AR functionality in the app. We tell the app to look for an image that has a pattern type<\/a> and give it an absolute link to the pattern file.<\/p>\n