[Video Link] I love the augmented reality content that Layar created for MAKE’s Toys & Games issue. And Gene Becker at Layar, who led this project, kindly wrote a how-to article about creating an augmented reality magazine cover. Read it after the jump.
Augmented reality (AR) is a fun technology that overlays digital media onto the physical world. Modern mobile devices like iPhones and Android phones are loaded with sensors like GPS, accelerometers and cameras that make AR possible. In this project we will augment the cover of MAKE magazine with a digital image and link it to a video on the web. To accomplish this, we’ll learn the basics of the Layar AR platform, design a simple AR layer, and develop a very basic web service to deliver the AR layer to your smartphone.
Augmented Reality Magazine Cover
Create digital media augments on physical images, that anyone with a smartphone can see.
Augmented reality (AR) is a fun technology that overlays digital media onto the physical world. Modern mobile devices like iPhones and Android phones are loaded with sensors like GPS, accelerometers and cameras that make AR possible. In this project we will augment the cover of MAKE magazine with a digital image and link it to a video on the web. To accomplish this, we’ll learn the basics of the Layar AR platform, design a simple AR layer, and develop a very basic web service to deliver the AR layer to your smartphone.
What you’ll need:
– a copy of MAKE magazine (or another magazine you want to augment)
– access to a hosted web server that runs PHP, that you can upload files to
– an iPhone 3Gs, 4 or 4s, or an equivalent Android phone
– the Layar Reality Browser 6.0 app (free) installed on your phone
– a Layar developer account (free) at http://layar.com/publishing
Helpful skills:
– a minimal understanding of HTML, PHP and JSON is useful but not required
Step by step:
1. Design the project & prepare media assets
2. Create a web service for your layer
3. Set up your layer for publishing
4. Test your AR creation
1. Design the project & prepare media assets
When you augment physical objects using a software platform like Layar, you need a design plan for your layer that includes these components: target objects, reference images, digital augments, and the actions to be associated with each augment. For this project we’ll keep it simple and use one object, one reference image, a single augment, and a single action as follows:
– Target object: MAKE magazine issue #28, the physical object
– Reference image: a high resolution digital image of the magazine cover
– Augment: a low resolution digital image, we’ll use a still frame from the video trailer for MAKE #28
– Action: when the viewer taps the augment on their screen, the MAKE #28 video trailer will play from YouTube.
For a super-quick introduction to how this works, watch these two short videos:
Introducing Layar Vision
Layar Vision Explained
Download the reference image to your computer here, we’ll use it later.
2. Create a web service for your layer
Layar uses a web-based API for communication between mobile devices and AR services in the cloud. Don’t worry about the details of this; we’ll use a very simple web service consisting of 3 simple PHP files, a formatted text file (in JSON format) and the media assets from step 1.
Access your hosted web server using your favorite FTP utility, shell program or a web editor like Dreamweaver. Download this directory of files to your computer and then upload them to your website, keeping the directory structure intact. You should explore these files later to see how they work, but for now this will give you a minimal, functional layer service.
You can test your service by opening this URL in a browser (substituting your website address where it says www.yourdomain.com/your-web-directory): http://www.yourdomain.com/your-web-directory/make/index.php. When the service is set up correctly, you should see a page of formatted text that looks like this:
3. Set up your layer for publishing
Next we’ll sign in to the Layar publishing service, set up our layer and upload our reference image.
Go to http://layar.com/publishing and create a developer account.
Once you have signed in to your account, you should see a page that looks something like this:
Click on the “Create a new layer!” button and you will see a form where you can enter information about your project. For now let’s do the minimum necessary; you can come back later to explore the publishing environment.
For ‘Layer name’ enter a unique name in lowercase letters & numbers only.
For ‘Title’ enter a user-friendly name for your layer that will be displayed in the app.
For ‘Publisher name’ enter your name or a pseudonym.
In the ‘API endpoint URL’ field, enter the URL for your layer service from step 2; it will look something like http://www.yourdomain.com/your-web-directory/make/index.php.
‘Layer type’ should be set to 3D and 2D objects in 3D space.
Check the box to enable ‘Layar Vision’.
Click the ‘Create layer’ button.
On the next screen, you can edit your new layer in detail. For now, look at the left side navigation area and locate and click on ‘Reference images’.
Click ‘Upload a new reference image’.
In the dialog box, click ‘Choose file’ and select our reference image from step 2, make-reference-image.jpg.
For ‘Image key’ type: make28
Set ‘Real world height’ to 0.25 (the height of the physical Make magazine in meters).
Click ‘Submit’, and after the image is done uploading click ‘I’m done uploading images’.
After the dialog box closes, click ‘Save’.
4. Test your AR creation
On your phone, start the Layar app. Once in the app, navigate to Settings > Account and log in using your Layar developer account credentials. This will allow you to test your unpublished layer.
Navigate back to Layers, and you should see a screen with Featured, Popular, New and Test.
Click on Test, and you should see your new layer listed.
Click to launch your layer. You will now be in the live video mode, and you should see a small icon with the number 1 on it (representing the one reference image you uploaded in step 4).
Here’s the moment of truth — view the cover of your copy of Make #28 with your phone, and in a few seconds you should see the augmented image appear!
Now tap on the augment, and you should see the YouTube video for Make #28 start to play!
Congratulations, you’re an augmented reality developer!
Of course, we’ve only scratched the surface and there’s a lot more territory to explore. Here are a few good resources for a deeper dive into AR:
The Layar developer site has extensive documentation & tutorials for aspiring AR developers.
For less technically inclined creators, there are some easy to use content management systems that allow you to build location-based AR layers with no programming required.
Jens de Smit’s PorPOIse open source layer server is a full-featured PHP layer service framework for developers.
ADVERTISEMENT
