AR Journalism

Join us for a special event Saturday, Nov 1 for a discussion on the making of the innovative augmented reality app. Students, developers and librarians will talk about their experiences in developing the AR experiences and app.

LAPL librarian and partner Ani Boyadjian wrote about the making of this innovative and collaborative project.

I am extremely excited to announce that my AR Storytelling + Journalism class’ app has launched and is ready for download from the Apple app store.

My Fall 2013 class worked on a semester-long project to augment the Los Angeles Public Library’s Central Branch in downtown Los Angeles. They created a diverse set of experiences ranging from telling the story of the arson fire to augmenting art to unlocking the library’s special collections via 3D models and galleries.

The first draft of our AR experiences was produced using metaio’s Creator platform, where we published a “channel” on their Junaio app.

But, in partnership with the design firm Neon Roots, we translated our “channel” into a stand-alone iOS app.

Neon Roots did a fantastic job designing and producing the now available app based on our content and guidance throughout the process. Neon Roots also gamified our content adding some incredible touches and designs.

Download: http://bit.ly/archive-lapl-download

Visual markers (to trigger experiences if not at the library): http://bit.ly/archive-lapl-markers

We're in Phase 2 of beta testing for ARchive LAPL, our AR project to augment the historic, downtown Los Angeles Public Library.

We encourage you to test it out too and give us feedback! Here's what you do:

Step one: Download the Junaio app, launch and scan the QR code in the lower, righthand corner to activate our channel.

NOTE: You'll hear a chime and our logo appear in the upper, left corner:

Step two: After launching the Junaio App and scanning the QR code from Step one, you can now point your device to any of these different visual markers to trigger the variety AR experiences we created and placed throughout the Central Branch. (We are only posting a few highlights of our AR experiences here.)

NOTE: Make sure the channel has fully downloaded to ensure functionality.

Edgar Allan Poe's The Raven

This is one of several 3D models we created to showcase the library's incredible rare books collection. (Note: At the location, this visual marker is laying flat, rather than appearing vertically like on your screen.)

Historic Fire

This visual marker is for our experiences around the historic fire that devastated the library in the 80s.

Puppet Show

There is a stage in the back of the Children's section that offers puppet shows Saturdays at 2PM. Since many patrons can't attend, we thought we'd offer an augmented, on-demand version of the show playing a recent performance.

Storytime

Also for the Children's section, we'll have books kids could use to trigger several (public domain) stories. We have four in English and one in Spanish.

Special Collections

In addition to rare books, the library as unique special collections that range from beautiful maps to vintage menus. This visual marker allows you to see their menu collection and hear from one of the collectors that donated the menus to the library.

The Sphinxes

There are a pair of sphinxes that guard a statue, each holding a book with ancient Greek written on them. You can translate the writing by pointing your device at them.

The Artist

The ceiling of the Main Lobby is covered in a vividly painted mural created by artist Renee Petropoulos. Point your device at this marker to hear an interview with Petropoulos.

Please try these out and send us your feedback! Tweet us by using the #ARchiveLAPL hashtag or email us at arjournalism [at] webjournalist.org.

Again, this is a beta of our channel.

We are no where near our final product, which will be an app. We are working with an AR design firm to create a more advanced and custom AR app, which we aim to launch early next year.

But we wanted to share this with people to get them to understand what we are working toward, even if it is a primitive, working prototype.

So, please try these out and send us your feedback! Tweet us by using the #ARchiveLAPL hashtag or email us at arjournalism [at] webjournalist.org.

// This app was created by USC students: Kaitlyn Mullin, Heather Navarro, Daniella Segura, Sydney Tuss, Serhan Ulkumen, Phoebe Unterman and Sammi Wong. (You are going to want to hire them.)

The class was led by Profe. Robert Hernandez, who received guidance from BC "Heavy" Biermann and support from USC Annenberg.

We did an early beta test of our ARchive LAPL experiences with the staff at the Central Library. It was a success! Lots of work to do, but on the right track.

I've come to cry with you again.

Well, actually tears have subsided because -- eureka! I've figured out a problem.

It all started in class last night when I said, "Hey how are we going to direct the users with the app from point to point? Could we make a short video?"

And then Profe says, "We could make a gif --- why don't you talk the ball on this one?"

And I took it.

That might now be the exact phrasing, but here I am making gifs. Or attempting to.

So our issue is one -- file sizes, and two -- directing our user through the Los Angeles Public Library in a creative way because Metaio is limited when it comes to stuff like that in augmented reality.

I must confess that I have never made a gif before. (Is it "jif" or "gif"? I pronounce it gif, because hey - if they wanted me to say "jiff" they should have spelled it that way!)

So I googled. And tutorials made by German children who are probably half my age popped up.

And they were great, because they say to use Photoshop which I have. Except then I was trying to create a gif that wasn't just animation -- I wanted little footsteps to pop up individually.

I tried repositioning the layers, cutting and pasting in my images (which I laboriously made one at a time in Illustrator) and it seems like everything, and the damn thing just wasn't working.

Then I thought, "Wait! Turn off the eyeball progressively as you select each frame."

So I had to click frame 2, and turn off layer 1. Then click frame 3 and turn off layers 1 and 2, and so on.

So yay! Another frustrating night, but I figured it out!

I'd like to call this post AHHHH-R! As in, "AHHHHHHH! What is happening with this AR project?"

I have finally culled down 40 minutes of interview, plus seven pages of court documents, plus 10 odd minutes of news footage into a nice, neat 2 minutes 40 second video. Pretty happy with myself. But now it won't upload to the Neon Roots CMS site. I suppose I could use "handbrake" to compress the video even more, but I don't want to download something else on my Mac. Poor girl is already loaded up with Adobe Creative Suite, Final Cut and other programs!

Since uploading videos wasn't working, I figured I'd upload visual markers -- you know, those images the phone will recognize in the AR app and start playing some content -- but those aren't rating very high. So...what? Now I can't use those images? I have no idea.

(Aforementioned music sheet that's not rating very high in terms of "stars.")

It's like wandering into the plot of a thriller novel.

I pressed the no doubt dirty elevator button to the basement. That's right -- the basement -- of the bowels of the dilapidated old building.

The elevator came to a bumbling stop, and I entered the dark dingy hallway, feeling as if I was intruding on a government-paid worker's space.

But I have every right to be here.

As I picked up speed, following the signs that say "archives," I begin to feel like a real gumshoe -- but more importantly like a real journalist.

I'm looking into an old case. It's from 1988, two years after the historic fire at the Downtown Central Library that lead to the demise of 400,000 books.

I first had to locate the case number, which the 2nd floor helped me find. Then I had to hoof it back to the first floor, where they told me I'd have to come back another day because they were closing. -___-

Day 2:

I walked a mile from the library to hopefully save on parking. One of my first mistakes of the day. But I digress...

I arrive back at Room 110, where I'll be allowed to view the case file on microfiche.There are about three people ahead of me as I sign in. Piece of cake, right?

WRONG.

How long could three people take?

About TWO HOURS.

Finally, the clerk called "02." That's me!

After a quick tutorial on using the microfiche machine -- something all young people should do before this technology is extinct and booted out for something hi-tech -- I dive in.

I focus, and adjust, and speed past jargon.

See that orange line? You must tilt the document in order to get it in the lines, and then you can print.

Be careful -- printing costs 50 cents per page!

Ultimately, I didn't find the peg I was looking for. But I did find some other juicy nuggets about the fire that were worth printing.

$7 later, I travel back to the second floor of the basement to pay for my grainy copies of decades old documents.

I retrieve my pages, and ride the elevator back to civilization to find a the sun casting a silhouette on the buildings of LA.

I converge onto the bustling streets of Downtown LA for my mile-long hike back to the library where I will be informed that because I took four hours, I will have to pay $30 for parking -- nearly half a day's wages on my intern salary.

Metaio Creator is an Augmented Reality platform for designers and creative individuals. Its drag and drop interface eliminates the need for previous programming skills, while making the program relatively easy to learn. The User Interface is very well designed. The Metaio team has kept the buttons on the screen to a necessary minimum, while providing large descriptive icons for key functions. The layout makes it so that the bottom navigation bar lets the user set his/her “trackable” items.

Once the trackable item is set, in my case this item being an image, it is then loaded onto the center of the application screen. The user is then prompted to pick a “resource” to overlay on the trackable image. A small but significant detail lies in the fact that the application provides you with a star ranking of how well your image tracks. This is very useful when picking a trackable target image. Even though my image was given 2 out of 3 stars it tracked extremely well from all angles and the augmented content was very stable, which is a good sign of the company’s image tracking abilities. Metaio provides a large selection of resources to be able to augment while making sure that this “right bar” for resources, on the layout is not overly crowded. For the most part it seems that all of these resource options are useful. Ranging from being able to embed 2D videos, to audio, social media pages, images, links and 3D models. There is also an option to be able to add it to the Junaio Channel, Metaio’s augmented reality content browser.

The top Menu is not essential during the actual content creation, but it does include very necessary selections such as Saving the file, and exporting into an application. Even these options are designed in drop down style with titles such as file, edit, and view which are known to any Microsoft word user on Earth. The export menu however is a new one, it offers various options, one being “create your own app”. When I selected this option the app provided me with three distinct application options. These are the ability to create a Metaio Cloud App, a desktop app, and a Metaio SDK app.

The app seems to accept a variety of 3D files, such compatibility provides flexibility for the user. When I loaded a 3D model as an .fbx file it transferred everything over including the animation. 4 small icons appeared, each in one corner of my uploaded Newton’s Cradle. These were the “info”, “rotate”, “scale”, and “exit” buttons. The rotation icon allows the user to drag and spin the model however because computers are still in 2D the user is limited to spinning the model in solely whichever axis they are viewing the model from. For more rotation options the information box needs to be opened. It includes all three axis of rotation and is pretty self-explanatory. The scale icon was also simply a matter of dragging, and it expands or decreases the size of your “resource” of choice. However, the icon I found to be the most useful was the Information button, because when I pressed it, it included all options to manipulate the model. If you are looking for more specific scaling options with numerical input this is also provided in this box. You can also translate and move the model numerically from this info box. The info box even includes an option to select the particular animation to be played, as well as the ability to loop the animation! The one issue I did encounter was that whenever I scaled the model by dragging the scale icon it tweaked the location coordinates as well. This is expected as the model is taking up a larger or smaller area, however it wasn’t until I clicked the Start quick preview button, that I realized it had repositioned the model in the Z-axis (depth) as well. This made it so that my augmented model was appearing very far from my trigger image. This can only be adjusted by checking the numbers in the translation menu of the information box, but it is still an easy fix. The Start button with the play sign next to it is also a very intuitive indication of how to test out your content. This button is found in the bottom right corner of the application interface.

Overall, this type of layout provides almost seamless user interaction with the application. It maximizes the results, while minimizing the effort involved in creating Augmented Reality content. In my particular use case the UI was designed well enough to call it second nature, however I would benefit from some well planned tutorials in order to learn more advanced uses such as creating my own AR application. My experience with the Metaio Creator was positive; I plan on using it in the creation of future applications and I would also recommend it those who are interested in creating AR content but do not necessarily have the developer background.

By Sammi Wong

This application is definitely a good introduction to augmented reality. It is user-friendly, easy to navigate and a lot of fun to toy around with. Granted, it’s definitely AR for Dummies (Beginners if you’re being kind), but you will be able to learn the basic concepts of AR and perhaps inspire you to try out more difficult applications.

Aurasma’s main function is to allow users to overlay digital photo, audio, or interactions onto images from the real world. What that means is that if you point your camera at a specific image, an interactive component will trigger.

For example, if you open the application and direct your phone’s camera to the cover of Carrier Underwood’s single “Blown Away,” the application will trigger the AR effect. In this case, it transitions the screen into playing the music video for the song. The music video will play for as long as you focus your phone’s camera onto the image – once it no longer detects the image, the effect will end.

Many companies have used Aurasma for promotional or advertising purposes. The magazine GQ used their September 2012 cover in order to trigger an advertisement for the magazine itself. The popular cover featuring NFL Quarterback Tim Tebow will trigger videos and images from other issues, the highlights in the magazine, and other cool features. It is easy to imagine that augmented reality is the way to future, cheap advertisement. The initial cost in creating augmented reality advertisements is decreasing with every new technological development and there is no middleman between the consumer and the producer since it doesn’t involve a network or a newspaper.

Other companies like AT&T have augmented campaigns similar to PSA about texting while driving. The campaign titled “It Can Wait,” is one of the most popular on Aurasma. When pointed at the “It Can Wait” symbol, the campaign is triggered and eventually it leads to an augmented button that the user can press to pledge to not texting while driving.

Overall, Aurasma is very simple to use when your purpose is to experience other augmented reality features. With a dashboard that is clear and concise about new Auras that are being created as well as a section on popular Auras that many users are experiencing, it is very user friendly.

To create an Aura, however, is significantly different. The digital options that the application provides an average user is childish and gimmicky at best. In order to fully utilize the augmented reality technology that is available in this application, one has to upload their own digital overlays.

Without that technology or knowledge of such technology, the average users can create auras that are fun and perhaps entertaining. But never appropriate for professional use.

I was able to create an effect where a cartoon version of Harry Potter is standing in front of a doorway waving his wand at me.

It was fun and entertaining for sure, but it was also pretty gimmicky.

By Heather Navarro and Daniella Segura

Argon is a web browser combined with augmented reality.

You can add "channels" to your Argon, like Twitter, Flickr, and others.

As you search for a topic, results will pop up. At first you are wondering where the results are. But you must move your device (iPhone or iPad) and look through the camera lens. It will show results aggregated from social media and other sites (depending on which channels you have added). The results pop up like Yelp's monocle feature. It's simple, although a little difficult to figure out at first.

Like any other application, there are pros and cons about the app.

First, the pros

Once you’ve spent a little time getting to understand the application, it's easy to search for a topic using the channels for Argon. For example, you can easily search a topic, like “food,” within the camera lens browser using the Google channel and results for restaurants will appear rather quickly.

Another pro is that channels are easy to add, once you figure out how to add them. Initially, it is difficult to find where these channels are. However, upon discovering that the channels are listed under the bookmark sections, adding channels becomes fairly easy. You are able to add channels, like Google, Flickr, Twitter and others. These channels enable you to search their browsers and results appear before you in a real-time, augmented format.

Overall, the feature is cool -- you see the results in real-time and you can see how far they are from you. You click on the icon, and a larger image will pop up. For example, this is helpful if you are looking for restaurant in the area using the Google channel, and you need to get the address or phone number of the restaurant. How this will help for the library app, I’m not sure.

Another unique feature about this app is that you can send greeting cards through the app. However, when trying out this feature, I was able to send but not view the greeting card. If this portion of the app works, this might play into a nice feature for the library app, wherein you can send library themed greeting cards to promote the library and or our augmented reality application.

Now, the cons

The feature searches for a topic, and sometimes the search feature just continues to spin with no results. Perhaps I’m impatient, but I want my results to pop up faster than the app was presenting them.

 Another problem with the app is that it crashes. For example, it crashed on me at least twice while I was attempting to search on the Twitter channel. The same thing happened when searching with the Google channel and when searching for channels in general. I understand that apps crash, but this crashing was a little to frequent.

I understand if this happens once or twice, but the “compass interference” icon appeared almost every time I would attempt to do something different with the app. From using the app, you will see that the "compass interference" pops up multiple times while attempting to load and play with the app. You have to move your device in a figure 8 until you’ve re-calibrate the device or move to another location.

It’s not user-friendly. Initially, the interface appears user-friendly and clean. However, I had no idea what to do with the app when I first launched it. I tried looking on the website to find out how to use the app, but honestly it did not help me. I also searched YouTube to find tutorials on how to use the app, but again it did not help. It showed me what the app was capable of, but I had a difficult time getting the app to do what it was capable of doing. Instead, I ended up playing around with the app to figure out how it functioned. If I were not assigned to review the app, as a user, I would have likely not used the app out of frustration. Apps will not perform well if the user can’t figure out how to use them easily.

The “map” portion of the app looked like it would have potential. However, I couldn’t figure out what the map portion of the Argon app was used for exactly. I clicked on it after loading channels and searching, but nothing ever happened. You can see a basic Google map of your location and the satellite view, but I’m not sure how this is helpful to the user.

One last con is that you are not able to search more than one channel at a time. It would be nice to be able to do multiple to get the most of the experience. For example, you could search a particular location of a restaurant in the Google channel, look for photos of the restaurant in Flickr and perhaps bring up reviews from Yelp. Currently, the app lacks this functionality.

Aurasma has two different platforms.

The first I tested is Aurasma Lite. It's an app-based AR experience creator. It's super simple and easy to use but the resulting product is also simple. They call this product an "aura" and the app can be used to create and share auras and follow their makers (like a social network for AR vids). 

All you have to do to create an aura is choose a trigger image (which you take with your camera) and the overlay which will come up when your camera sees the trigger image (they have a library of animations and you can also add your own photo or video).

Pictured Below (top to bottom): the overlay library // wide shot with my chosen trigger image (the Zabar's mug) // what happened when my camera saw the trigger image (the bear drawing, my chosen overlay, came up)

Aurasma Lite seems great for creating a simple little aura, but wouldn't really support any of the ideas we've talked about, let alone a system of several of them. 

One thing that confused me about the app is that when I looked at other peoples' auras, they just came up as a shot of the trigger image. To test them out, you have to follow the creator and then find the trigger image with your camera (i just googled a photo of the trigger image).

  As for Aurasma Studio, the first big difference I noticed is that there is an entire help center with information/tips/tricks on everything Aurasma can do. Here I learned about channels, which are categories of auras you can follow (for example, if you want to watch a favorite magazine come alive, you can go to a channel with auras involving that magazine). 

I also learned that you can add multiple overlays to your auras, which makes Aurasma a little more valuable to me.

One of the first things that struck me about the browser-based Studio though is that the interface looks pretty antiquated and reminds me of early-2000s Internet Explorer.

See for yourself:

This creator has many more functions than the app. It was easy to add a trigger image. Then, there was a drop-down menu for the types of overlays you could choose and "invisible overlay" was the only choice. This invisible overlay could have two functions: to load a URL when tapped and make it fullscreen when double-tapped. I realized later that to add your own overlay, you have to add it like you did the trigger image by clicking on "Overlays" on the righthand menu.

below: trigger image screen // overlay screen

Overlay options were video, image and 3D model.

At the end, I tried to add my aura to a channel or save it to my profile so I could see if it worked on my phone, but it said my trigger image had not been processed (this was still the message long after I completed the aura).

Aurasma does offer more features for a price, though the account management page where you can upgrade is difficult to read and parts of it are inaccessible.

Wikitude is an augmented reality platform that claims to provide the necessary tools to create without any coding know-how. Since I have zero augmented reality coding experience, I’m a pretty good candidate to test this claim.

            The biggest issue I had with Wikitude, worth mentioning first because it was a serious drawback for me, was finding 3D models available for download in a format that was compatible with the Wikitude encoder. Wikitude’s file converter can only convert files in an .fbx or .dae format, which are not the most popular formats. I looked online for free downloadable 3D models in .fbx format to test the ease of use for the Wikitude 3 dEncoder and encountered some issues.

            Of the upwards of 20 downloadable models that I tried to drag into the encoder, only 4 or 5 of them loaded properly and appeared on the screen. While it was really cool to see a 3D model of a fighter jet pop up on the canvas, it was frustrating that many of the models that seemed to be in the correct format encountered errors and could not open. To be fair, it’s possible these errors were the result of the models, not the program, but either way I had issues. Once I did finally get a model into the program, I was able to rotate it in all directions, which was pretty cool and definitely made me look like I knew what I was doing to any passers-by in the library. This was definitely the most difficult and frustrating part of the whole experience. It’s possible that Wikitude may have a library of compatible 3D models and I was just unable to find it, but I spent at least two hours verbally abusing my laptop as I searched tirelessly for compatible models only to be met repeatedly with errors and failures.

              Once I found a 3D model that worked, I was able to export it as a .wt3 file and put together and preview a pretty cool augmented print ad using the Wikitude SDK and web browser studio. The interface was super easy to use, and I was able to add text, imbed html links, and even add photos and 3D models to my AR ad. I created an “ad” for my old travel blog by using a map as the photo background and embedding a link to my blog, a Tolkien quote, and a 3D model of a road sign. Using preview, I was able to point my phone at the ad, and all of the augmentations I had done were visible onscreen in the Wikitude mobile app. Since I was using a free version and I am no Wikitude expert, the only way I was able to view the preview on my phone was by typing the preview html web address into the settings of the app to add it as a favorite, but it worked no problem after that.

            As for the actual mobile app, I couldn’t find a way to use it as an interface to create content, but it was still pretty cool. The wikitude mobile app is predominantly browser-based and is similar to other augmented apps on the market, like Yelp’s Monocle. The home screen is a panel with options for selection, ranging from location based features like accommodation and restaurant searches to augmented reality games similar to space invaders.  I was able to view nearby attractions, like the USC swim stadium, as well as restaurants, bars, and nearby hotel accommodations. I also stood on my porch for about 20 minutes playing two ridiculously addicting AR video games similar to AR Invaders.

In a landscape dominated by tools geared primarily toward people who already have some experience with AR, Metaio Creator has proven to be a beautifully beginner-friendly beast.