Introduction to AR.js and Natural Feature Tracking

AR.js

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.

@@ -54,7 +54,7 @@

It was initially created by Jerome Etienne and is now maintained by Nicolo Carpignoli and the AR-js Organisation

NFT

Usually for augmented reality you need specialised markers, like this Hiro marker (notice the thick non-aesthetic borders 🤢)

@@ -66,7 +66,7 @@

Creating the Marker!

First we need to create the marker files required by AR.js for NFT. For this we use Carnaux's repository 'NFT-Marker-Creator'.

@@ -83,7 +83,7 @@ Resolving deltas: 100% (262/262), done. $ cd NFT-Makrer-Creator -

Install the dependencies

$ npm install
 
@@ -109,12 +109,12 @@ found 0 vulnerabilities

Copy the target marker to the folder

$ cp ~/CodingAndStuff/ARjs/me.png .

Generate Marker

$ node app.js -i me.png
 
@@ -183,7 +183,7 @@ To run demo use: 'npm run demo'
 me.fset  me.fset3 me.iset

Creating the HTML Page

Create a new file called index.html in your project folder. This is the basic template we are going to use. Replace me with the root filename of your image, for example NeverGonnaGiveYouUp.png will become NeverGonnaGiveYouUp. Make sure you have copied all three files from the output folder in the previous step to the root of your project folder.

@@ -240,7 +240,7 @@ me.fset me.fset3 me.iset

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!

Adding a simple box

Let us add a simple box!

@@ -280,7 +280,7 @@ Serving HTTP on 0.0.0.0 port 8000 ...

👏 Congratulations! You just built an Augmented Reality experience using AR.js and AFrame

Adding a Torus-Knot in the box

Edit your index.html

@@ -295,13 +295,13 @@ Serving HTTP on 0.0.0.0 port 8000 ...

Where are the GIFs?

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!

AFrame GIF Shader is a gif shader for A-Frame created by mayognaise.

First things first

Add <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script> to <head>

@@ -315,15 +315,15 @@ Serving HTTP on 0.0.0.0 port 8000 ...

Bonus Idea: Integrate it with GitHub's new profile Readme Feature!

1) Host the code using GitHub Pages

2) Create a new repository ( the name should be your GitHub username )

3) Add QR Code to the page and tell the users to scan your profile picture

??) Profit 💸

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 )

-- cgit v1.2.3 From 9e620084e57378952c1a7f8e0a772ebebd18932b Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 27 Mar 2024 20:35:09 -0600 Subject: quick fix --- docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html') 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 3daafd5..acebee4 100644 --- a/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html +++ b/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html @@ -6,13 +6,13 @@ - id="introduction-to-arjs-and-natural-feature-tracking">Introduction to AR.js and Natural Feature Tracking + Introduction to AR.js and Natural Feature Tracking - Introduction to AR.js and Natural Feature Tracking" /> - Introduction to AR.js and Natural Feature Tracking" /> + + -- cgit v1.2.3 From 01ff93c9c16867216f2d249664803860e1d6d5eb Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 27 Mar 2024 22:49:40 -0600 Subject: generate new theme --- .../2020-08-01-Natural-Feature-Tracking-ARJS.html | 55 +++++++++++++++------- 1 file changed, 37 insertions(+), 18 deletions(-) (limited to 'docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html') 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 acebee4..cd65be1 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,26 @@ - + + + + + Introduction to AR.js and Natural Feature Tracking + + + + + + + - Introduction to AR.js and Natural Feature Tracking - @@ -29,21 +41,27 @@ - - - + + +

- +

Introduction to AR.js and Natural Feature Tracking

AR.js

@@ -329,14 +347,15 @@ Serving HTTP on 0.0.0.0 port 8000 ...

If you have scrolled this far, consider subscribing to my mailing list here. You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.

-- cgit v1.2.3 From de19543d7fb44d343b052dc9b34ede78620c4a46 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 27 Mar 2024 23:36:55 -0600 Subject: Generate --- docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html') 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 cd65be1..d276831 100644 --- a/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html +++ b/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html @@ -46,7 +46,7 @@ + +

-- cgit v1.2.3 From a982ceab0b45609991179b3020a00260eed6f798 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 27 Mar 2024 23:45:59 -0600 Subject: css --- docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html') 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 d276831..402f17e 100644 --- a/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html +++ b/docs/posts/2020-08-01-Natural-Feature-Tracking-ARJS.html @@ -5,6 +5,7 @@ + Introduction to AR.js and Natural Feature Tracking -- cgit v1.2.3