Posts Tagged ‘AR’

Augmented Reality at Coca-Cola Trophy Tour (Flare3D+IN2AR)

Thursday, June 5th, 2014

BannerBlog_TrophyTour

For the Fifa World Cup Trophy Tour, SIA Interactive implemented several solutions for the event. One of them was an Augmented Reality experience made with Flare3D and IN2AR. In this solution people were able to get photographed grabbing a coke bottle and showed on the screen like they were holding the cup. The participants had the option to share the photograph through social networks.

WorldCup_AR

Thanks to augmented reality, everybody can hold the trophy in their hands.

 For augmented reality, SIA Interactive has been using  Flare3D and IN2AR, a powerful AR engine that can be used for web, mobile and desktop. Augmented reality demonstrated to be an excellent tool to get improved results and strong customer’s engagement in Marketing and Advertising solutions.

How to create AR applications using Flare3D

Flare3D has been used in multiple AR solutions with different AR engines.  If you would like to create an AR application, you can begin checking out the examples that we have in our Wiki.

 

LINKS:

IN2AR - http://www.in2ar.com/

SIA Interactive - http://www.siainteractive.com/

 

 

Step by step – How to use Flare3D and Oculus Rift VR

Tuesday, October 22nd, 2013

 

In this tutorial, i’ll show you how to get a minimal Flare3D + Oculus Rift VR application:

Oculus VR’s Oculus Rift could be the device virtual reality needs to finally break into the mainstream, instead of just being something for tech-frenzied neophiles. The Oculus Rift is a virtual reality headset that can display stereoscopic 3D and offer head tracking to let you look around inside virtual worlds.

After a successful Kickstarter campaign Oculus VR put together a development kit that’s being slowly shipped out to customers, with sights on a consumer-friendly version in the future. In a few years, everyone might have their own Oculus Rift and use it to play video games and virtually tour other locations.

Creating the project:

First of all, we need to connect the Oculus to the PC, make sure to connect everything before turning it on.
You have to set the resolution to 1280×800 and duplicate the screens. Once everything is connected, turn the Oculus on.

Create a new AIR (AIR SDK 3.8+) project using Flash Develop or Adobe Flash Builder(4.6 or higher) and integrate it with Flare3D and the Oculus Rift library and Native Extension. I’ll show you the steps to do it using Adobe Flash Builder 4.7:

1- First, we need to create a new ActionScript Project:

New ActionScript project in FlashBuilder

 

2- Then we need to give our project a name and select the proper SDK to use. If you installed your AIR SDK properly, you should see something like this (don’t forget to check the “Desktop (runs in Adobe AIr)” option):

project settings

Open the Project Properties and go to Action Script Build Path in the menu:

project settings - External libraries

From this screen you can add any SWC files your project might need. In this case, we have to add Flare3D’s SWC. To do this, just press Add SWC and browse to the SWC file that came with your Flare3D distribution package.

To incorporate the head tracking, we have to add the Oculus swc and ane libraries to our project. You can download these here.

Now we have to add the Oculus SWC. To do this, press Add SWC again and browse to oculus-ane-master/ane/as3/bin/OculusANE.swc in the package you just downloaded.

Now, go to the tab Native Extensions:

project settings - Adding native extensions (ANEs)

Press Add ANE and navigate to oculus-ane-master\ane\bin\OculusANE.ane in the package you just downloaded.

Then press OK to close the window.

 

3- Just like when embedding a Flare3D project using HTML, we have to tell your AIR app that we need “direct mode” rendering. There’s also a bunch of other settings we need to configure. All this can be configured from our application XML file. In this particular case, it’s called “Flare3DAndroid-app.xml” but it will depend on the name you chose for your app.
So, let’s open it and add/change for the following lines:

 

And finally, let’s write some code:

Include this class: OculusScene3D.as, and the FLSL filter to emulate the Oculus: distortion2.flsl

Now, open your main class file and write something like this:

 

Make sure everything compiles correctly and press F11 to start debugging. You should see something like this:

Flare3D + Oculus Rift demo

 

Now put on your oculus, and enjoy! :-)

 

Or.. you can download the complete example project for Flash Builder or for Flash Develop.

EXTRA: Oculus Rift Calibration:

Everybody’s head is a little bit different. One fairly subtle, but extremely important ‘per user’ variable is the IPD (Interpupillary Distance) – which is different for everyone. Get this wrong, and it can cause eye-strain and nausea. 😕

Oculus SDK include an integrated IPD Measurement and Adjustment tool, you can download it here.

Make sure you have your Rift turned on and the resolution set to 1280×800, then go ahead and launch the utility.
It looks like this:

4.1

Use the new button to create a new profile. Give your profile a name. Specify your gender and which eye cups you’re using. With your Oculus Rift ready, hit the Measure button to launch into the IPD measurement tool. Follow the on-screen prompts to measure your IPD. The utility will automatically input the value into the box when you finish.

 

UPDATED: If you want to learn more about Oculus Rift development, you can also  check out this topic in our forum. You’ll find extra information and a new updated example made by Tom Goethals.