Flash, HTML5, Unity3D, && Augmented Reality

Can’t decide which trendy tech bandwagon to hop onto? Try them all at once!

Okay – so I’d never recommend mixing all this crap together in a real world app, but it was fun just to give it a go and see what would happen. Thought maybe the internet would explode or something.

To see what I’m rambling about, check out the experiment here.

You’ll need this augmented reality marker (just ignore the “right hand”/”left hand” business). When prompted, allow webcam access in the Flash portion of the experiment (bottom left). Hold the marker upside right towards your camera (a green rectangle will appear around the embedded flash when the marker is detected) and spin it like a steering wheel to steer the car in the Unity3D portion of the experiment (top center). The harder you steer, the more purpley the background will appear (that’s the HTML5 canvas bit).

Here’s a little screenshot below for those not interested in being bothered by all the hassle…

tech mash screenshot

8 Comments »

  1. Devon O. says:

    link fixed.. user error.. never could figure out this whole ‘internet’ thing…

  2. derek knox says:

    I was curious, how you are communicating with Unity through Flash? I assume you’re using Flash (ExternalInterface) to call Javascript function(s) in your page. I looked over the page source quickly but didn’t find what I was looking for. Let me know how you pulled this off if you don’t mind. Good work.

  3. Devon O. says:

    Hey Derek, in essence, the Flash file sends the rotation of the AR marker to a js function (using ExternalInterface). That function sets the color of the canvas background and also passes the rotation on to Unity which normalizes the value and uses it to steer the car rather than the normal horizontal input. One thing I found, if you remove the canvas background color change, the app actually runs quite smoothly. Meaning, using Flash and Unity for AR is actually a viable thing…

  4. vamapaull says:

    A little hard to steer, but it’s a fun experiment :)

  5. Hellen says:

    can u share the code please

  6. peko says:

    Some time ago I’m trying to connect unity & flash through sockets, but fail.

    Reasons described here:
    http://answers.unity3d.com/questions/980/connect-flash-unity-through-an-socket-connection

  7. Devon O. says:

    @Peko – I used a simple javascript connection rather than socket although the socket idea is an interesting concept. It’s a shame you couldn’t get it to work.

    @Hellen – the code is a bit of a mess – I just took an old AR project and and changed it around a bit adding and deleting so it’s very disorganized. If I get some time to clean it up, I’ll post it. The whole concept is quite simple though. Just take the z rotation of your AR marker (see how to get rotations in this old post: http://blog.onebyonedesign.com/?p=254) and pass it to a javascript function with ExternalInterface. Pass that value to the Unity object to steer the car (you can find plenty of Unity3d driving tutorials and, if you want, do a view source to see how the value is passed – it’s fairly easy).

    d.

RSS feed for comments on this post. / TrackBack URI

Leave a Reply

Devon O. Wolfgang

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development”

Contributing Author of “Flash AS3 for Interactive Agencies”

Senior Software Developer in Dublin, Ireland

Portfolio

Bayer Pixel Bender Filter

Bayer Mosaic Filter in Pixel Bender


Now, seeing as how I’ve been trying to learn some Pixel Bender coding lately[...]

Liquitext

Liquid Text Effect


Haven’t been too active around here lately due to a major on going project at work lately as well as the fact that my wife and I are in the slow process of moving homes. Really, the only free time it seems I have these days is during the lunch hour. So, over the past two days, I came up with this fun little toy during lunches[...]

Google’s Text To Speech Engine in Flash

I’m not sure how I managed to miss this, but I just happened to run across a ‘new’ (well, newish), albeit still unofficial, offering of Google today: text-to-speech. You can see what few details there are on this Techcrunch post. Basically, it just boils down to this though – you send your phrase to be [...]

Quick Sound Effects Generator


Need some beeps, boops, or bops, to go with your UI or games [...]

Quick QuickBox2D Tip II – Collision Detection

Custom collision detection/handling in QuickBox2D [...]

None of This Runs Eternal


No Flash/Actionscript stuff here. Just me rambling about the upcoming Current 93 concert [...]

Playing Around with the New UndoManager

Included in the Flex 4.0 SDK and the, just released, Flash Professional CS5 lies a new hidden little gem of a class: flashx.undo.UndoManager (although the Flex 4.0 SDK’s been out for awhile, I have to admit I didn’t even notice this until I installed Flash CS5 and started poking around the documentation looking for new [...]

Making Waves

In a previous post, “Digging into the Microphone in Flash Player 10.1″, reader David Law asked in the comments how it would be possible to save .wav files to the server. I wasn’t sure right offhand, but thought I’d spend my lunch hour yesterday looking into it. Well, after reading this quick tutorial on Adobe [...]

Some Drawing Fun and a Bad Movie You’ll Never See

Earlier today, Dave Gillem posted a link on Facebook to an incredible Processing based drawing application. Thought I’d have a go at reproducing something similar in Flash. Well, I failed miserably, but the results were still interesting enough to check out. You can play around with it below. Just mouse down to draw in the [...]

Animating Bezier Curves


The other day I got the notion in my head that I wanted to draw some bezier curves in an animated fashion. I’m sure this has been done a million times before, but sometimes reinventing the wheel can be a good learning experience [...]

My God, It’s Full of Stars…


Just a quick little thing I got an idea for (i.e. pretty much ripped off) while browsing Processing examples.

Another Year, Another Look

As a few folks may have noticed, the blog is looking a little bit different as of today [...]

The Webcam Warholizer


Just a little bit of quick Friday fun with webcam and bitmapata…

More With the JiglibFlash Terrain

Playing around a bit more with the animated JiglibFlash terrain idea from my last post, I wanted to see how it would work in conjunction with a webcam. So, needless to say, you’ll need a webcam to check out the results below.

Rockin and Rollin with the JiglibFlash Terrain


Finally got the chance to play around with the new JiglibFlash height map terrain, today, and have to say I am very impressed [...]