AR( Augmented Reality) Tryout Using metaio
During the tutorial class, we are being introduce to create our first AR using Metaio. Although it is a demo version, we still can use it to create an AR.
The process of creating the AR is quite simple, where I just need to select an image that i’ll be using it as a marker. It is suggested that the image should have a different look every time the image is rotated.
Next is to put in the content to the marker. There are many kind of content that can be put inside such as, video, image, sound, 3D object, and even link to a website. After selecting the content, I can adjust the position and the size of the content by clicking the 3D button, as it will be shown when the marker is being scanned.
The last step is to upload the marker to the junaio database, which is the scanner for the metaio. But before uploading the marker, I need to sign up to the junaio website. After signing up, then i can upload the marker. When the marker has been uploaded, Metaio will generate a QR code. by using this QR code, other user will be able to download the content of the marker.
After learning on how to create an AR and how it works, we are being ask to find 5 ideas on the usage of an AR in the real world that haven’t existed yet. So after we did our discussion, we came out with 5 idea which is the food viewer, AR namecard, AR movie ticketing, House Preview, and Object Editor. Food viewer is an AR that allows the user to see food in 3D when they scan the marker. AR Movie Ticketing is an AR that allows the user to buy tickets by just scanning the movie poster which will reduce the queueing on the ticket counter.
after we discuss about our ideas, we’ve decided to work on the AR movie ticketing cause it is the most possible AR project that can be done, and we will use Metaio to create it, since the university will provide us the full license of the Metaio. So, before we create the AR, we are being told to map out the user experience in a flowchart with detail on engagement prioritizing ease of use and benefits.
We are also being told to research on the backend process, since we are planning to use a reward system that will attract more people to use this AR. So we found out that it need a coding which is using the Augmented Reality Experience Language (AREL) by bringing HTML5 and JavaScript to mobile AR experiences and it can be done by using Metaio SDK.
Next, we need to list down the content that will be available in the AR, so since we are not allowed to involve the third party, we’ve decided to put the movie review and rating, movie trailer, director commentary and the booking ticket that will direct the user to the cinema website. For the trailer and director commentary, there are 2 options which are link it to youtube or store it on the cloud. We’ve also put the reward system similar to the Foursquare badge system, but instead they get reward by check in in certain places, the reward that we offer is when the user scan the marker and the backend system will track down their AR and they can get the Achievement. The reward will be like a badge system in example when the user have scan 5 horror movies, they will get the ghost badge.
After we decided on the content, we did a testing on the video, which one load faster. so we created 2 markers, one is with a button that linked to the youtube, and the other one showing a video. For the youtube link, it load straight away but it takes time to buffer, as for the video on the cloud, it takes some times to load, but after it loads, it doesn’t buffer, so the user can enjoy the full video without loading anymore. As for the video quality, the video that stored on the cloud has lower quality since Metaio can only accept certain video format and quality. We’ve also tried to put several videos to the marker to see the available size that metaio provide, so we found out that it can contain up to 10MB, but 2 similar videos will be counted as 1 video, this can only be applied to the non-full screen video, since it will be played on the same time right after the marker being scanned.
On the mid semester, we are going to present our idea to the client, so we create a prototype of the AR. Since we are still using the demo version of Metaio, we can only put 2 object inside the marker, and a button with content inside are consider as 2 objects. So as a prototype, we just put the layout as the button and we put video inside, just to show that the video will work. the video that we put inside is a trailer of the movie internship, and it is shown as full screen, so that the user can watch the movie on the go since the video has been fully loaded to the device.
after the presentation, the client suggest that we need to put more content inside the AR. so from there, we decided to put trivia of the movie or the actors, and also related movie that the user might interested in.
we’ve also decided on the 5 movie posters that we are going to use as the markers.
After that, we decided to look for the AR content that we want, such as the trailers, director commentary, cast, movie info, and the movie review. All the content are taken from IMDB.com, RottenTomatoes.com, and YouTube.com. Further more, we design the layout on the Adobe Illustrator.
Here is our first planning of the layout:
Here is the first design of the layout:
After that, we design the 3D object in Maya.
At first we wanted the Achievement Feature just like FourSquare, but it needs a programmer to do the coding for the backend. Beside that, we also wanted to make the animation of the layout. At first, we think that it need the “.md2” format in order to make it animate with different instance name in every animation. The only software that we know to produce the “.md2” file format with the instance name is Blender, but then we also found out that the Blender cannot import a 3D Animation file, so it can only import the “.obj” file format, which mean the texture and the animation that have been created in Maya will be gone, and it needs to be re-applied and put the instance name in Blender.
Later on, we also found out that, the instance name can also put in the “.fbx” file format by using the dreamweaver. At first, every animation must be saved in different fbx file, then open it using the Adobe Dreamweaver. In the Dreamweaver, look for the “Take_001” and “Take_001.tak” and change it to the section name that we want, example: “Movie Review” and “Movie Review.tak”, and then save the file. After all the fbx file has been changed, we tried to copy the code from the beginning until the word “Constrain Animation”. In the end, we expect that the animation will work in metaio by showing the different instance name, but in the end it doesn’t work, it only show the first instance name. Further more, we realize that metaio also need some coding in order to animate the 3D object with different movement, because in metaio, it only allows the user to click once to make the animation move, thats mean it can only animate with one movement.So with that problem, we decided to reduce the layout to become 3 panels, which is the video panel, movie review panel, and the movie info with the cast panel.
In order to make the texture of the 3D object appear, we need to bake the 3D object in order to apply all the texture and then export it into “.obj” file format. But then we also found out that Metaio cannot contain certain amount of texture, so we change the texture format from “.jpg” to “.png”. After we bake and export the file, it will produce “.mtl” file. The “.obj” file format must be in the same folder with the “.mtl” file, and all the “.png” texture, in order for the Metaio to show the texture.As for the buttons, we save it as “.png” file format, because we wanted the shape to be appear in the marker without the white background and still showing the opacity of the button.
After arranging the layout, we connect all the button to the website link, such as the trailer to the youtube page and the cast to the imdb page. At first we wanted to store the video to the cloud but the result is the quality of the video become low quality, so we decided to link it to youtube.
AR Media 