How I made: Vue

Ariful Islam
3 min readMar 12, 2019

Some of the best times of our lives are spent with our friends watching movies. But some of our worst times are spent deciding which movie to watch and these life-altering decisions are usually made by seeing one picture on a wall. Even though it is said that “A picture is worth a thousand words”, is it enough to decide how you will spend the next couple of hours of your life?

But what if that picture on the wall became a video and those life-changing decisions became much easier to make?

That is where my app: Vue comes in!

Using the app on your phone you can look at a poster on a wall, and its trailer will instantly start playing. Using an online database from Vuforia which have the posters of movies that are currently playing, the app has those image targets as markers and simply can overlay the trailer on top of the image when viewed from your phone.

The app was actually fairly simple to make on unity, and it basically required one script written in C#.

In order for this app to be better than any other options, it had to be faster and in order to be faster, it had to be able to maintain functionality with less processing power.

To get around that, I simply assigned a quad to every image target and then build a video player on that quad. Quads act the same way as planes however they require less processing power since the app uses an AR Camera component which takes care of the need to reroute the camera feed and render it on a plane to be seen on the screen.

Now, the only script for this whole app is the script that controls the video player in the quad. The script is 130 lines long, which is a big picture to put on this article, so I’ll just highlight the most important parts of the script.

Since the only function of the quad is to be a video player which is superimposed on the poster, the main parts of the script are the video player controls.

Video Player Code

The video player is only activated when the tracker is found and analyzed by the device, so when the tracker is found, the code makes the app play the trailer from the first frame, and let’s say someone walks in between your phone and the poster the video automatically stops and once the obstructions are clear, the video starts playing again.

So essentially, something like this:

Poster of How To Train Your Dragon: The Hidden World displayed on my computer screen

Will start to look something like this:

Screenshot from Vue!

So imagine, next time you and your group of friends get together at the movies and you have to make a decision between two movies; instead of simply relying on posters to make such important decisions, you can simply show your phone the poster and it will play the trailer for you!

So, a picture can be worth a thousand words, but how many words are videos worth?

I am very excited about my future in augmented reality and the growth of the industry! This is only the surface of the things augmented reality can do to impact countless lives and industries.

If you found Vue fascinating!

  • Give this article some claps to let me know that you enjoyed this article.
  • Follow me on LinkedIn and stay tuned for more!

--

--

Ariful Islam

Tech enthusiast and AR developer on a journey of self-discovery and growth.