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 | 4 |
1 files changed, 2 insertions, 2 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 8a62169..9623ffc 100644 --- a/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html +++ b/posts/2020-08-01-Natural-Feature-Tracking-ARJS/index.html @@ -425,6 +425,6 @@ Serving HTTP on <span class="m">0</span>.0.0.0 port <span class="m">8000</span> <span class="p"><</span><span class="nt">a-torus-knot</span> <span class="na">radius</span><span class="o">=</span><span class="s">'0.26'</span> <span class="na">radius-tubular</span><span class="o">=</span><span class="s">'0.05'</span> <span class="p">></</span><span class="nt">a-torus-knot</span><span class="p">></span> <span class="p"></</span> <span class="nt">a-box</span><span class="p">></span> <span class="p"></</span> <span class="nt">a-nft</span><span class="p">></span> -</div></code></pre><img src="/assets/posts/arjs/03-knot.png"/><h2>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><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><h3>🎦</h3><p>Change the box's material to add the GIF shader</p><pre><code><div class="highlight"><span></span>... +</div></code></pre><img src="/assets/posts/arjs/03-knot.png"/><h2>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><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><p>Change the box's material to add the GIF shader</p><pre><code><div class="highlight"><span></span>... <span class="p"><</span><span class="nt">a-box</span> <span class="na">position</span><span class="o">=</span><span class="s">'100 0.5 -180'</span> <span class="na">material</span><span class="o">=</span><span class="s">"shader:gif;src:url(https://media.tenor.com/images/412b1aa9149d98d561df62db221e0789/tenor.gif);opacity:.5"</span> <span class="err">.....</span><span class="p">></span> -</div></code></pre><img src="/assets/posts/arjs/04-nyan.gif"/><h2>Bonus Idea: Integrate it with GitHub's new profile Readme Feature!</h2><h3>1) Host the code using GitHub Pages</h3><h3>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>Profit 💸</h3><p>Here is a demo 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><img src="/assets/posts/arjs/05-GitHub.jpg"/></div><span>Tagged with: </span><ul class="tag-list"><li><a href="/tags/tutorial">Tutorial</a></li><li><a href="/tags/arjs">AR.js</a></li><li><a href="/tags/javascript">JavaScript</a></li><li><a href="/tags/augmentedreality">Augmented-Reality</a></li></ul></article></div><footer><p>Made with ❤️ using <a href="https://github.com/johnsundell/publish">Publish</a></p><p><a href="/feed.rss">RSS feed</a></p></footer></body></html>
\ No newline at end of file +</div></code></pre><img src="/assets/posts/arjs/04-nyan.gif"/><h2>Bonus Idea: Integrate it with GitHub's new profile Readme Feature!</h2><h3>1) Host the code using GitHub Pages</h3><h3>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>??) 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><img src="/assets/posts/arjs/05-GitHub.jpg"/></div><span>Tagged with: </span><ul class="tag-list"><li><a href="/tags/tutorial">Tutorial</a></li><li><a href="/tags/arjs">AR.js</a></li><li><a href="/tags/javascript">JavaScript</a></li><li><a href="/tags/augmentedreality">Augmented-Reality</a></li></ul></article></div><footer><p>Made with ❤️ using <a href="https://github.com/johnsundell/publish">Publish</a></p><p><a href="/feed.rss">RSS feed</a></p></footer></body></html>
\ No newline at end of file |