PointCloud: How does it work?

PointCloud is an iOS App that expands a Webkit Browser with advanced Augmented Reality features. Thus you can stick for example a DIV with video, images or even Processing.js sketches onto images or objects in reality. I simply took a reference image of Wil Wheaton’s t-shirt and stciked an SVG / CSS 3D animation to it. The result is an perspective emitter of stencils.

Take a look at the HTML document to get an impression how to write a simple app in PointCloud:
PointCloud’s documentation isn’t complete yet. They are providing some examples, which are too complex for learning and a PDF document with further descriptions. They are still lacking a complete API reference. But i know that documentation is hard work and they just released their software.

I reduced their example to a minimum. It’s only initializing and tracking one image. Therefore you have to link an image in the head of the document. The image has to be on a public server on the internet in order to be downloaded and processed by PointClouds server. A local web server doesn’t work.

The only relevant Javascript function is onAppLoaded(). Here we are activating the tracking target image:

function onAppLoaded() {
viper.activateReferenceImage("p1_wil"); // id of image link

Your HTML content is put within a hierarchy of DIVs controlled by PointCloud:

That’s it. Load your file in PointCloud browser and fine tune the positioning.