diff options
Diffstat (limited to 'docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html')
| -rw-r--r-- | docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html | 103 |
1 files changed, 68 insertions, 35 deletions
diff --git a/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html b/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html index d3ed282..402f17e 100644 --- a/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html +++ b/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html @@ -2,14 +2,27 @@ <html lang="en"> <head> - <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> + <meta name="theme-color" content="#6a9fb5"> + + <title>Introduction to AR.js and Natural Feature Tracking</title> + + <!-- + <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" /> + --> + + <link rel="stylesheet" href="/assets/c-hyde.css" /> + + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface"> + <link rel="stylesheet" href="/assets/main.css" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Introduction to AR.js and Natural Feature Tracking</title> <meta name="og:site_name" content="Navan Chauhan" /> <link rel="canonical" href="https://web.navan.dev/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html" /> - <meta name="twitter:url" content="https://web.navan.dev/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html /> + <meta name="twitter:url" content="https://web.navan.dev/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html" /> <meta name="og:url" content="https://web.navan.dev/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html" /> <meta name="twitter:title" content="Introduction to AR.js and Natural Feature Tracking" /> <meta name="og:title" content="Introduction to AR.js and Natural Feature Tracking" /> @@ -26,26 +39,45 @@ <script data-goatcounter="https://navanchauhan.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> <script defer data-domain="web.navan.dev" src="https://plausible.io/js/plausible.js"></script> - <link rel="manifest" href="manifest.json" /> + <link rel="manifest" href="/manifest.json" /> </head> -<body> - <center><nav style="display: block;"> -| -<a href="/">home</a> | -<a href="/about/">about/links</a> | -<a href="/posts/">posts</a> | -<!--<a href="/publications/">publications</a> |--> -<!--<a href="/repo/">iOS repo</a> |--> -<a href="/feed.rss">RSS Feed</a> | -</nav> -</center> - -<main> +<body class="theme-base-0d"> + <div class="sidebar"> + <div class="container sidebar-sticky"> + <div class="sidebar-about"> + <h1><a href="/">Navan</a></h1> + <p class="lead" id="random-lead">Alea iacta est.</p> + </div> + + <ul class="sidebar-nav"> + <li><a class="sidebar-nav-item" href="/about/">about/links</a></li> + <li><a class="sidebar-nav-item" href="/posts/">posts</a></li> + <li><a class="sidebar-nav-item" href="/3D-Designs/">3D designs</a></li> + <li><a class="sidebar-nav-item" href="/feed.rss">RSS Feed</a></li> + <li><a class="sidebar-nav-item" href="/colophon/">colophon</a></li> + </ul> + <div class="copyright"><p>© 2019-2024. Navan Chauhan <br> <a href="/feed.rss">RSS</a></p></div> + </div> +</div> - <h1>Introduction to AR.js and Natural Feature Tracking</h1> +<script> +let phrases = [ + "Something Funny", "Veni, vidi, vici", "Alea iacta est", "In vino veritas", "Acta, non verba", "Castigat ridendo mores", + "Cui bono?", "Memento vivere", "अहम् ब्रह्मास्मि", "अनुगच्छतु प्रवाहं", "चरन्मार्गान्विजानाति", "coq de cheval", "我愛啤酒" + ]; + +let new_phrase = phrases[Math.floor(Math.random()*phrases.length)]; + +let lead = document.getElementById("random-lead"); +lead.innerText = new_phrase; +</script> + <div class="content container"> + + <div class="post"> + <h1 id="introduction-to-arjs-and-natural-feature-tracking">Introduction to AR.js and Natural Feature Tracking</h1> -<h2>AR.js</h2> +<h2 id="arjs">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> @@ -53,7 +85,7 @@ <p>It was initially created by Jerome Etienne and is now maintained by Nicolo Carpignoli and the AR-js Organisation</p> -<h2>NFT</h2> +<h2 id="nft">NFT</h2> <p>Usually for augmented reality you need specialised markers, like this Hiro marker (notice the thick non-aesthetic borders 🤢)</p> @@ -65,7 +97,7 @@ <p><img src="/images/me.jpeg" alt="" /></p> -<h2>Creating the Marker!</h2> +<h2 id="creating-the-marker">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> @@ -82,7 +114,7 @@ Resolving deltas: 100% (262/262), done. $ cd NFT-Makrer-Creator </code></pre> -<h3>Install the dependencies</h3> +<h3 id="install-the-dependencies">Install the dependencies</h3> <pre><code>$ npm install @@ -108,12 +140,12 @@ found 0 vulnerabilities </code></pre> -<h3>Copy the target marker to the folder</h3> +<h3 id="copy-the-target-marker-to-the-folder">Copy the target marker to the folder</h3> <pre><code>$ cp ~/CodingAndStuff/ARjs/me.png . </code></pre> -<h3>Generate Marker</h3> +<h3 id="generate-marker">Generate Marker</h3> <pre><code>$ node app.js -i me.png @@ -182,7 +214,7 @@ To run demo use: 'npm run demo' me.fset me.fset3 me.iset </code></pre> -<h2>Creating the HTML Page</h2> +<h2 id="creating-the-html-page">Creating the HTML Page</h2> <p>Create a new file called <code>index.html</code> in your project folder. This is the basic template we are going to use. Replace <code>me</code> with the root filename of your image, for example <code>NeverGonnaGiveYouUp.png</code> will become <code>NeverGonnaGiveYouUp</code>. Make sure you have copied all three files from the output folder in the previous step to the root of your project folder.</p> @@ -239,7 +271,7 @@ me.fset me.fset3 me.iset <p>In this we are creating a AFrame scene and we are telling it that we want to use NFT Tracking. The amazing part about using AFrame is that we are able to use all AFrame objects!</p> -<h2>Adding a simple box</h2> +<h2 id="adding-a-simple-box">Adding a simple box</h2> <p>Let us add a simple box!</p> @@ -279,7 +311,7 @@ Serving HTTP on 0.0.0.0 port 8000 ... <p>👏 Congratulations! You just built an Augmented Reality experience using AR.js and AFrame</p> -<h2>Adding a Torus-Knot in the box</h2> +<h2 id="adding-a-torus-knot-in-the-box">Adding a Torus-Knot in the box</h2> <p>Edit your <code>index.html</code> </p> @@ -294,13 +326,13 @@ Serving HTTP on 0.0.0.0 port 8000 ... <p><img src="/assets/posts/arjs/03-knot.png" alt="" /></p> -<h2>Where are the GIFs?</h2> +<h2 id="where-are-the-gifs">Where are the GIFs?</h2> <p>Now that we know how to place a box in the scene and add a torus knot in it, what do we do next? We bring the classic internet back!</p> <p><code>AFrame GIF Shader</code> is a gif shader for A-Frame created by mayognaise.</p> -<h3>First things first</h3> +<h3 id="first-things-first">First things first</h3> <p>Add <code><script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script></code> to <code><head></code></p> @@ -314,28 +346,29 @@ Serving HTTP on 0.0.0.0 port 8000 ... <p><img src="/assets/posts/arjs/04-nyan.gif" alt="" /></p> -<h2>Bonus Idea: Integrate it with GitHub's new profile Readme Feature!</h2> +<h2 id="bonus-idea-integrate-it-with-githubs-new-profile-readme-feature">Bonus Idea: Integrate it with GitHub's new profile Readme Feature!</h2> -<h3>1) Host the code using GitHub Pages</h3> +<h3 id="1-host-the-code-using-github-pages">1) Host the code using GitHub Pages</h3> -<h3>2) Create a new repository ( the name should be your GitHub username )</h3> +<h3 id="2-create-a-new-repository-the-name-should-be-your-github-username">2) Create a new repository ( the name should be your GitHub username )</h3> -<h3>3) Add QR Code to the page and tell the users to scan your profile picture</h3> +<h3 id="3-add-qr-code-to-the-page-and-tell-the-users-to-scan-your-profile-picture">3) Add QR Code to the page and tell the users to scan your profile picture</h3> -<h3>??) Profit 💸</h3> +<h3 id="profit">??) Profit 💸</h3> <p>Here is a screenshot of me scanning a rounded version of my profile picture ( It still works! Even though the image is cropped and I haven't changed any line of code )</p> <p><img src="/assets/posts/arjs/05-GitHub.jpg" alt="" /></p> + </div> <blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote> <script data-isso="https://comments.navan.dev/" src="https://comments.navan.dev/js/embed.min.js"></script> <section id="isso-thread"> <noscript>Javascript needs to be activated to view comments.</noscript> </section> -</main> + </div> <script src="assets/manup.min.js"></script> <script src="/pwabuilder-sw-register.js"></script> </body> |