<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="../assets/xml/rss.xsl" media="all"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Daniel D. Johnson (Posts about three.js)</title><link>https://www.danieldjohnson.com/</link><description></description><atom:link href="https://www.danieldjohnson.com/categories/threejs.xml" rel="self" type="application/rss+xml"></atom:link><language>en</language><copyright>Contents © 2025 &lt;a href="mailto:daniel.dw.johnson@gmail.com"&gt;Daniel D. Johnson&lt;/a&gt; </copyright><lastBuildDate>Mon, 01 Sep 2025 09:09:05 GMT</lastBuildDate><generator>Nikola (getnikola.com)</generator><docs>http://blogs.law.harvard.edu/tech/rss</docs><item><title>Augmented Shanahan: Extrapolation</title><link>https://www.danieldjohnson.com/2015/01/23/augmented-shanahan-extrapolation/</link><dc:creator>Daniel D. Johnson</dc:creator><description>&lt;div&gt;&lt;p&gt;&lt;em&gt;This is the second part of a three-part writeup on my augmented Shanahan project. You may want to start with &lt;a href="https://www.danieldjohnson.com/2015/01/23/augmented-shanahan-detection/"&gt;part one&lt;/a&gt;. For some background math, you may also want to read the post about my &lt;a href="https://www.danieldjohnson.com/2014/11/18/a-tale-of-two-hackathons-part-2-augmented-reality-snake/"&gt;5C Hackathon entry&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;From the detection and tracking algorithms, I was able to generate a 2D perspective transformation matrix that mapped coordinates on the wall to pixels in the image. In order to do 3D rendering, however, I needed a 3D transformation matrix. The algorithm I ended up using is based on &lt;a href="http://dsp.stackexchange.com/questions/2736/step-by-step-camera-pose-estimation-for-visual-tracking-and-planar-markers"&gt;this post&lt;/a&gt; on Stack Exchange, &lt;a href="https://gist.github.com/740979/97f54a63eb5f61f8f2eb578d60eb44839556ff3f"&gt;this gist&lt;/a&gt; on GitHub, and &lt;a href="https://en.wikipedia.org/wiki/Camera_resectioning"&gt;this Wikipedia page&lt;/a&gt;. I will attempt to describe how the algorithm works in the rest of this post.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.danieldjohnson.com/2015/01/23/augmented-shanahan-extrapolation/"&gt;Read more…&lt;/a&gt; (6 min remaining to read)&lt;/p&gt;&lt;/div&gt;</description><category>computer vision</category><category>glsl</category><category>math</category><category>project writeup</category><category>three.js</category><category>Uncategorized</category><guid>https://www.danieldjohnson.com/2015/01/23/augmented-shanahan-extrapolation/</guid><pubDate>Fri, 23 Jan 2015 15:29:01 GMT</pubDate></item><item><title>Hackathon writeup: Augmented Reality Snake</title><link>https://www.danieldjohnson.com/2014/11/18/a-tale-of-two-hackathons-part-2-augmented-reality-snake/</link><dc:creator>Daniel D. Johnson</dc:creator><description>&lt;div&gt;&lt;p&gt;I've been at Harvey Mudd College for almost three months now, and I'm enjoying it a lot. So far, I've participated in two hackathons: first, MuddHacks, a hardware hackathon, and then last weekend, the 5C Hackathon, a software hackathon that spans the 5 Claremont Colleges (Harvey Mudd, Pomona, Scripps, Pitzer, Claremont McKenna). In this post, I'm going to be talking about the project I made for the second of the two hackathons.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;But wait! You haven't talked about the first one yet! You can't do a part 2 without doing a part 1!&lt;/em&gt; I'd like to tell you all about how I got caught in a time machine that someone built in the hardware hackathon and so my past self posted about the first hackathon in this timeline's future, but &lt;del&gt;then I'd have to get the government to come brainwash you to preserve national security&lt;/del&gt; I'd be lying. So instead I'll explain that I haven't actually finished the project from the first hackathon yet. Both of these were 12-hour hackathons, and about 10.5 hours into the first one, I realized that our chosen camera angle introduced interference patterns that made our image analysis code completely ineffective. I'm hoping to find some time this weekend or next to finish that up, and I'll write that project up then.&lt;/p&gt;
&lt;p&gt;Anyways, about this project. My partner Hamzah Khan and I wanted to do some sort of computer vision/image analysis based project. Originally, we considered trying to detect certain features in an image and then use those as the basis for a game (I thought it would be really cool to play snake on the walls of HMC, which are mostly made of square bricks). But feature detection is pretty difficult, and we decided it wasn't a good choice for a 12-hour project. Instead, we came up with the idea of doing an augmented-reality based project, detecting a very specific marker pattern. We also wanted to do it in Javascript, because we both knew Javascript pretty well and also wanted to be able to run it on mobile devices.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.danieldjohnson.com/2014/11/18/a-tale-of-two-hackathons-part-2-augmented-reality-snake/"&gt;Read more…&lt;/a&gt; (8 min remaining to read)&lt;/p&gt;&lt;/div&gt;</description><category>augmented reality</category><category>image processing</category><category>javascript</category><category>jsfeat</category><category>project writeup</category><category>QR code</category><category>three.js</category><category>Uncategorized</category><category>WebGL</category><guid>https://www.danieldjohnson.com/2014/11/18/a-tale-of-two-hackathons-part-2-augmented-reality-snake/</guid><pubDate>Tue, 18 Nov 2014 00:01:34 GMT</pubDate></item></channel></rss>