Augmented Reality Twitter Conversations!


I've recently launched TweeView - a new way to visualise Twitter conversation threads in 2D and 3D.

Sadly, I don't have a Virtual Reality system - feel free to buy me one! - but I have the next best thing. A web browser!

Demo!

Using the awesome power of A-Frame, here's a demo of how to view a conversation object as AR.

Play!

You can play with it yourself at TweeView.ml/ar. You will need to download this AR target image.

It works best printed onto matt white paper, then mounted on card. I had to print it twice on the same piece of paper to get the required blackness.

Build!

This is built on several bits of open source tech.

The first part is A-Frame and AR.js

HTML HTML<script src="https://aframe.io/releases/1.0.0/aframe.min.js" integrity="sha384-mAWNMpx7UQMegsgs1X2mE9wVl/svgdzdy4qpXNFgAxUmc8a1ToRWVWl3tzfDinBb" crossorigin="anonymous"></script>
<script src="https://unpkg.com/ar.js/aframe/build/aframe-ar.min.js" integrity="sha384-vLi7A1RlJjrEmCqF2DrdIT9cLqHdV/7GbmsqfniwwtfLRQlP1lXi/Tk199ZCLU5p" crossorigin="anonymous"></script>

Next is ForceGraph AR

HTML HTML<script src="https://unpkg.com/3d-force-graph-ar" integrity="sha384-ERqZX7SBS3fH2SL04csG8OB9QyOF2LtDsZtRrJZR46WipKv7LqplBgM/GoFPjyfQ" crossorigin="anonymous"></script>

I recommend copying them to your local server rather than relying on a CDN.

The <body> of your HTML page needs a target the AR window can attach to:

HTML HTML<div id="3d-graph"></div>

Construct the graph which will be displayed in the browser:

HTML HTML<script>
   const Graph = ForceGraphAR({ markerAttrs: { type:'pattern', url:'/path/to/pattern.patt' }})
      (document.getElementById('3d-graph'))
         .jsonUrl('/path/to/graph.json')
         .glScale(160)
         .yOffset(1)
         .nodeRelSize(10)
         .nodeOpacity(0.9)
         .linkOpacity(0.9)
         .nodeColor(0x0000ff)
         .linkOpacity(1)
         .linkCurvature(0)
         .linkWidth(2)
         .linkDirectionalArrowLength(6)
         .linkDirectionalArrowColor(0x00ff00)
         .linkColor(() => 'red');
</script>

In order to generate a "target" (that's the physical object that is being tracked) use the AR.js Marker Generator. That will deliver you two things.

  1. A .patt file. This is a digital representation of the pattern.
  2. A .png or .pdf file. This is the thing you print off and show in front of your camera.

Finally, you'll need a graph object in JSON format to pass to ForceGraphAR.

You'll then end up with something like this:

Grab the code

All of this is available as open source on my GitHub repo.

Enjoy!


Share this post on…

  • Mastodon
  • Facebook
  • LinkedIn
  • BlueSky
  • Threads
  • Reddit
  • HackerNews
  • Lobsters
  • WhatsApp
  • Telegram

What links here from around this blog?

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">