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 Flash Engineer PopCap Games, International Ltd.

Portfolio

UV Scrolling in Starling


Obviously this could come in pretty darned handy for space games, side scrollers, etc, etc[...]

Drawing on Stuff in Away3D 4.0

So, Easter Day, I thought I’d sit down and make a little ‘Paint on an Egg and Send it to Your Friend’ app.

Santabot: A Unity3D Flash Game


All right, so a Christmas game like “Santabot vs. The Flying Saucers from Mars” may be a day late[...]

Magnify – a jQuery Plugin


Let me begin by saying right up front, I have not given up on Flash[...]

It’s a Starling Halloween


Getting some practice for the upcoming Zombie Apocalypse[...]

Getting Started with Proscenium

So I had a chance this weekend to sit down and play around with Adobe’s new 3D framework for Stage3D, Proscenium, and thought I’d share a few of the results (a word of caution, there are no preloaders for any of the examples and may load a bit slowly). The first shows some reflections and [...]

Particle Editor for Starling Framework

An in-browser particle editor for the Starling 2D Framework for Flash Player 11.

So Long and Thanks for all the Flash on the Beach

So, another Flash on the Beach has just has just drawn to a close[...]

Game Development Tips from the Trenches of PopCap

Well, this is a post that’s a bit overdue, but, thanks to a well timed bank holiday, I finally had the opportunity to sit down and type up what I’ve been meaning to for some time now…

Old Skool Demoscene FX as 3D Textures

Many moons ago, I got the idea to create some demoscene plane deformation effects in Flash based on the formulas found here: http://www.iquilezles.org/www/articles/deform/deform.htm. I posted my less than desired results up on wonderfl. Thankfully, fellow wonderfl user, Hasufel, forked my attempt and optimized the hell out of it coming up with this. Well, today, for no [...]

Making The Gaming Scene (A Change in Careers)

And for my second blog post of the day, a much more personal note. After about three years of working with, what I would consider as objectively as possible, the best digital agency in Ireland, vStream Digital Media, I have made the immense career decision to leave the agency world and enter the arena of [...]

Feeling Lucky?

Images to dice, kick ascii style [...]

Adventures in Playbook Land

Adventures in Playbook Land


Now that the ordeal is over, I thought I’d take the time to sit down and share my account of what it was like to develop a Blackberry Playbook application using the Adobe Flex SDK[...]

Flash

Draw it for Me

So many ideas – so little time….

Kinect Application Running in Dublin

So, on Friday I just wrapped up our latest project at vStream Digital Media, a Kinect powered flipbook that lets users flip through the hand written notebooks of Philip Lynott of Thin Lizzy. The app uses OpenNI, runs in Adobe AIR and is currently on display at a pretty bitchin’ Phil Lynott exhibition running in [...]

Beach Ball Kinect Party

So we finally got a Kinect camera hooked up to a pc at work and, while it doesn’t seem to be legal to use it for commercial projects (but, hey, I’m no lawyer), the boss asked me to get it figured out and come up with some ideas just in case it would be feasible [...]