Augmented Reality Twitter Conversations!
ar Augmented Reality HTML5 TapIntoTwitter twitter Virtual Reality vr · 450 words
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
<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
<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:
<div id="3d-graph"></div>
Construct the graph which will be displayed in the browser:
<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.
- A
.pattfile. This is a digital representation of the pattern. - A
.pngor.pdffile. 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!
What links here from around this blog?