diff options
Diffstat (limited to 'posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html')
| -rw-r--r-- | posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html | 2 |
1 files changed, 1 insertions, 1 deletions
diff --git a/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html b/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html index fcc90c7..d6e1f73 100644 --- a/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html +++ b/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html @@ -1,4 +1,4 @@ -<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="og:site_name" content="Navan Chauhan"/><link rel="canonical" href="https://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJS"/><meta name="twitter:url" content="https://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJS"/><meta name="og:url" content="https://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJS"/><title>Introduction to AR.js and Natural Feature Tracking | Navan Chauhan</title><meta name="twitter:title" content="Introduction to AR.js and Natural Feature Tracking | Navan Chauhan"/><meta name="og:title" content="Introduction to AR.js and Natural Feature Tracking | Navan Chauhan"/><meta name="description" content="An introduction to AR.js and NFT"/><meta name="twitter:description" content="An introduction to AR.js and NFT"/><meta name="og:description" content="An introduction to AR.js and NFT"/><meta name="twitter:card" content="summary"/><link rel="stylesheet" href="/styles.css" type="text/css"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="shortcut icon" href="/images/favicon.png" type="image/png"/><link rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan"/><meta name="twitter:image" content="https://navanchauhan.github.io/images/logo.png"/><meta name="og:image" content="https://navanchauhan.github.io/images/logo.png"/></head><head><script>var _paq=window._paq=window._paq||[];_paq.push(['trackPageView']),_paq.push(['enableLinkTracking']),function(){var a='https://navanspi.duckdns.org:6969/analytics/';_paq.push(['setTrackerUrl',a+'matomo.php']),_paq.push(['setSiteId','1']);var e=document,t=e.createElement('script'),p=e.getElementsByTagName('script')[0];t.type='text/javascript',t.async=!0,t.src=a+'matomo.js',p.parentNode.insertBefore(t,p)}();</script></head><head><script src="https://www.googletagmanager.com/gtag/js?id=UA-108635191-1v"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-108635191-1');</script></head><body class="item-page"><header><div class="wrapper"><a class="site-name" href="/">Navan Chauhan</a><nav><ul><li><a href="/about">About Me</a></li><li><a class="selected" href="/posts">Posts</a></li><li><a href="/publications">Publications</a></li><li><a href="/assets/résumé.pdf">Résumé</a></li><li><a href="https://navanchauhan.github.io/repo">Repo</a></li></ul></nav></div></header><div class="wrapper"><article><div class="content"><span class="reading-time">20 minute read</span><span class="reading-time">Created on August 1, 2020</span><h1>Introduction to AR.js and Natural Feature Tracking</h1><h2>AR.js</h2><p>AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location based AR and Marker tracking. It is the easiest option for cross-browser augmented reality.</p><p>The same code works for iOS, Android, Desktops and even VR Browsers!</p><p>It weas initially created by Jerome Etienne and is now maintained by Nicolo Carpignoli and the AR-js Organisation</p><h2>NFT</h2><p>Usually for augmented reality you need specialised markers, like this Hiro marker (notice the thick non-aesthetic borders 🤢)</p><img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Hiro_marker_ARjs.png"/><p>This is called marker based tracking where the code knows what to look for. NFT or Natural Feature Tracing converts normal images into markers by extracting 'features' from it, this way you can use any image of your liking!</p><p>I'll be using my GitHub profile picture</p><img src="/images/me.jpeg"/><h2>Creating the Marker!</h2><p>First we need to create the marker files required by AR.js for NFT. For this we use Carnaux's repository 'NFT-Marker-Creator'.</p><pre><code><div class="highlight"><span></span>$ git clone https://github.com/Carnaux/NFT-Marker-Creator +<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="og:site_name" content="Navan Chauhan"/><link rel="canonical" href="https://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJS"/><meta name="twitter:url" content="https://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJS"/><meta name="og:url" content="https://navanchauhan.github.io/posts/2020-08-01-Natural-Feature-Tracking-ARJS"/><title>Introduction to AR.js and Natural Feature Tracking | Navan Chauhan</title><meta name="twitter:title" content="Introduction to AR.js and Natural Feature Tracking | Navan Chauhan"/><meta name="og:title" content="Introduction to AR.js and Natural Feature Tracking | Navan Chauhan"/><meta name="description" content="An introduction to AR.js and NFT"/><meta name="twitter:description" content="An introduction to AR.js and NFT"/><meta name="og:description" content="An introduction to AR.js and NFT"/><meta name="twitter:card" content="summary"/><link rel="stylesheet" href="/styles.css" type="text/css"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="shortcut icon" href="/images/favicon.png" type="image/png"/><link rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan"/><meta name="twitter:image" content="https://navanchauhan.github.io/images/logo.png"/><meta name="og:image" content="https://navanchauhan.github.io/images/logo.png"/></head><head><script>var _paq=window._paq=window._paq||[];_paq.push(['trackPageView']),_paq.push(['enableLinkTracking']),function(){var a='https://navanspi.duckdns.org:6969/analytics/';_paq.push(['setTrackerUrl',a+'matomo.php']),_paq.push(['setSiteId','2']);var e=document,t=e.createElement('script'),p=e.getElementsByTagName('script')[0];t.type='text/javascript',t.async=!0,t.src=a+'matomo.js',p.parentNode.insertBefore(t,p)}();</script></head><head><script src="https://www.googletagmanager.com/gtag/js?id=UA-108635191-1v"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-108635191-1');</script></head><body class="item-page"><header><div class="wrapper"><a class="site-name" href="/">Navan Chauhan</a><nav><ul><li><a href="/about">About Me</a></li><li><a class="selected" href="/posts">Posts</a></li><li><a href="/publications">Publications</a></li><li><a href="/assets/résumé.pdf">Résumé</a></li><li><a href="https://navanchauhan.github.io/repo">Repo</a></li></ul></nav></div></header><div class="wrapper"><article><div class="content"><span class="reading-time">20 minute read</span><span class="reading-time">Created on August 1, 2020</span><h1>Introduction to AR.js and Natural Feature Tracking</h1><h2>AR.js</h2><p>AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location based AR and Marker tracking. It is the easiest option for cross-browser augmented reality.</p><p>The same code works for iOS, Android, Desktops and even VR Browsers!</p><p>It weas initially created by Jerome Etienne and is now maintained by Nicolo Carpignoli and the AR-js Organisation</p><h2>NFT</h2><p>Usually for augmented reality you need specialised markers, like this Hiro marker (notice the thick non-aesthetic borders 🤢)</p><img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Hiro_marker_ARjs.png"/><p>This is called marker based tracking where the code knows what to look for. NFT or Natural Feature Tracing converts normal images into markers by extracting 'features' from it, this way you can use any image of your liking!</p><p>I'll be using my GitHub profile picture</p><img src="/images/me.jpeg"/><h2>Creating the Marker!</h2><p>First we need to create the marker files required by AR.js for NFT. For this we use Carnaux's repository 'NFT-Marker-Creator'.</p><pre><code><div class="highlight"><span></span>$ git clone https://github.com/Carnaux/NFT-Marker-Creator Cloning into <span class="s1">'NFT-Marker-Creator'</span>... remote: Enumerating objects: <span class="m">79</span>, <span class="k">done</span>. |