Category: Flash 3D (Papervision, Five3D)

Augmented Reality Air Hockey – A Game Experiment

On March 20, 2012

In Actionscript/AS3, Flash, Flash 3D (Papervision, Five3D), Game Development

I was digging through some of my old files the other day and found this interesting game prototype from a few years ago, when Augmented Reality was the latest buzzword. I had seen some experiments with it, but I was curious to see if the AR Markers could be used as game controllers. Could you create a driving game where the AR Marker acted as the steering wheel? Or, could you even create multiplayer games that used multiple markers?

I started playing with the Transmote FlarManager and decided to try to create an air hockey simulation using 2 AR Markers and the APE physics engine for Flash. My game prototype can be seen in the video below.

This turned out to be a lot more challenging than I expected and I was pretty disappointed in the results. As you can see in the video, the performance of the Augmented Reality tracking is fairly weak. I also had to hack the physics engine quite a bit to get what I was looking for. Here’s the rundown of what I learned:

The Augmented reality tools are fairly clunky and require a lot of resources. That’s why most of the cool experiments you see use stationary AR Markers sitting on a tabletop. It’s too difficult to keep up with moving markers.
The Transmote FlarManager library tracks multiple markers, but it is not able to differentiate them. In other words, it can only tell that there are 2 markers on screen in my game. It can not tell which one is player 1 and which one is player 2. In this case, it really doesn’t matter. You score a point in air hockey when the puck lands in a goal – which player touched it last is unimportant. But, in many games, knowing which player acts on an object is crucial. I also tried the Squidder FLAR Actionscript library and had the same results.
APE (Actionscript Physics Engine) is a set of classes I have used before and I find it useful for simple physics-based games. The syntax makes a lot more sense than Box2D if you don’t know C++. But, for this game, I needed a Dragable Circle Particle, which is not a standard APE class. Luckily, someone smarter than me created one here. I adapted it and then created a FlarCircleParticle for my prototype.
This prototype has a lot of overhead. It uses the basic AR toolkit for Flash, the FlarManager, Papervision 3D, APE Physics, and more. So, on every frame, I’m capturing the webcam footage, trying to locate multiple AR Markers, using Papervision to calculate the positions of the players, and then running a physics simulation before drawing it to the screen. That’s a lot of work for Flash. For optimization, the Papervision probably needs to be removed and a 2D AR Marker locator needs to be created.

In essence, this experiment is a failure, which is why I never finished it. The FlarToolkit and FlarManager just aren’t capable of what I needed. I don’t consider it a waste of time, though. You need to be willing to take chances with game prototypes… and you need to be willing to give up on prototypes that just aren’t working. Very few great game ideas work perfectly on the first try, but an interesting failure can spawn a lot of great ideas.

If you want to try my prototype for yourself, download the markers and click here to test it out. The source code for this Prototype can be downloaded here. Feel free to take it and play with it. A word of warning: I built this several years ago and I hacked it together pretty quickly, so the code is a bit of a mess. If you are able to create anything cool with it, I’d love to know about it (and a shout out for wasted potential is always nice). Some links to resources you might need can be found below. Good Luck!

FLARToolKit – the basic Augmented Reality tools
FLARToolKit Startup Guide – sample files to get you started
Transmote FlarManager – adds multiple markers to your toolkit.
AR Marker Generator – you need this to create the pattern files for Flash
APE – a basic physics engine for Flash. Not the best one out there, but good for hammering out a quick prototype.
Papervision3D – handles the 3D stuff

*Note that a lot of these actionscript libraries are no longer being maintained. They are the ones that I used when I originally built my prototype.

Flash AS3: A quick test of Five3D

By Andy

On May 21, 2010

In Actionscript/AS3, Flash, Flash 3D (Papervision, Five3D), Flash drawing API

Five3D is a compact Actionscript library that allows you to create 3D views quickly and easily. Much like Papervision3D, Away3D or Sandy, it allows you to create basic 3D graphics with Actionscript. Why would you use Five3D instead of one of these other libraries? Here’s a quick rundown of the advantages and shortcomings of Five3D that I have found:

Five3D has a stripped-down feature set. If you need to do something simple like move a large number of planes in 3D space, Five3D will be easier to set up than the other 3D packages. The drawback is that it doesn’t do many of the things that the other engines do, like providing built-in primitives or Collada imports.
Five3D handles vector objects without first turning them into bitmaps. You can actually use Flash’s native drawing API to create vector shapes and move them in 3D while still retaining the vectors. This creates smoother renders than the other 3D engines, especially when scaling and rotating objects. The other 3D engines create bitmaps of textures and then map them onto the surfaces of objects.
Five3D handles 3D text really well. You can convert fonts into vectors and then use them as 3D objects. This makes 3D text effects really simple.
The default handling of bitmap textures is cleaner than Papervision. With Five3D, bitmap textures on planes map much more smoothly than with Papervision’s defaults. You can map textures just as well in Papervision, but it’s a little bit of a hassle to set up.
The Five3D library is written to extend the native flash classes in a way that is really intuitive. For example, a MovieClip3D is just like a MovieClip, but it has additional features like a z-coordinate. Half the time, you can guess what properties each object will have without even looking them up in the docs.
Five3D doesn’t use a camera object. Depending on your needs, this could be an advantage or a disadvantage. You can handle this by simply creating a Sprite3D container to hold all of your objects. Then, move the container to simulate camera movement. I often do this in Papervision projects anyway because of various issues I have had with the camera.

I have built a simple “Hello World” test of Five3D, which you can see below. It’s not very exciting, but it isn’t supposed to be. When I started playing with Five3D, I had a hard time finding a simple, stripped-down example that could get me started, so that is what I’ve built here. You can download the source files here. I have also added links to some more advanced tutorials and samples at the bottom of this post.

I did run into some weird Five3D quirks when I built this. First, when I created a MovieClip3D object and added it to the scene, it wasn't appearing on stage. I traced all of the properties and everything indicated that it was on the stage, but it was not displaying. I Googled around a bit and found this website with the answer: you have to call the activate() function for MovieClip3D objects to get them to render on the stage. I don't understand why you need to do this, but it fixed my problem.

The other quirk that you need to know about is that you have to turn on z-sorting. By default, it z-sorts according to your addChild() calls, just like regular MovieClips. If you don't need z-sorting, just add the 3D items in the correct sequence. I'm guessing that this helps to optimize the code. If you need your objects to spin in 3D space, you can turn on z-sorting with the childrenSorted property (check out the example source code for usage).

Thanks to Mathieu Badimon for this amazing Actionscript package.

Links:

Download the source files for the example above

A 3D text sample with source code

A simple example of Five3D with source code

A fun Five3D experiment

A tutorial on building a 3D photo album with Five3D

Info on integrating Five3D with Jiglib physics

Papervision3D: Max3DS vs. Collada performance

By Andy

On July 13, 2009

In Actionscript/AS3, Flash, Flash 3D (Papervision, Five3D)

Papervision3D is an incredible open-source library for building 3D applications in Flash. You can create basic 3D objects and animate them with Actionscript, but if you really want to create something cool, you need to import a 3D model made with a program like 3D Studio Max, Maya, or Blender.

Several different 3D file formats can be imported into Papervision – the most popular format seems to be Collada (*.DAE), which is an XML format. However, I recently noticed that *.3DS files could also be imported to Papervision using the Max3DS class. 3DS is an old file format for 3D Studio Max, but many 3D programs will still export this format. Since it is a binary format, it creates much smaller files than Collada, which can significantly decrease model load times, but I was curious if there was any noticeable performance difference once the models were imported. In theory, the models should perform identically once they are imported. So I created a test to see if this was true.

I created a quick model of a 57 Chevy station wagon in 3D Studio Max 9 for my test. The finished model has 1833 vertices and 1802 faces. Please note that I’m a noob when it comes to 3D modeling and I know that this model has some issues, but I really only cared that it imported correctly to PV3D. Anyway, I exported the model to both Collada and 3DS formats. The exported file stats are:

wagon5.3DS = 103 KB
wagon5.DAE = 488 KB

I then created 2 Flash files that are identical except for the type of model that is imported for rendering. Click one of the images below to view the results in Papervision.

As you can see, they look essentially identical. Each SWF loads the model 5 times and renders it to the screen with a FlatShadeMaterial. How did they perform? Well, that depends…

When I first created these SWFs, I tested them on my work computer. It’s a pretty fast Dell desktop PC with lots of RAM running Windows Vista and Flash Player 10. The 3DS format performed noticeably better on my work machine. The frame rates were similar for both models, but the memory usage was much lower than the Collada format. The 3DS model rotation also looked smoother than the Collada model and the 3DS file had much quicker file load time. It looked like a clear winner.

Then I spent some time cleaning up the files on my laptop at home and the performance tests didn’t show the same results. My laptop is a Lenovo PC that isn’t as fast as my work computer and I run Windows XP with Flash Player 9. While testing at home, the 3DS file still had lower memory usage and the animations both looked the same. The frame rate difference was still marginal.

So, which one performs better? It may be dependent on the machine, the operating system, and the version of Flash you are running. I still give the 3DS format the advantage for it’s lower file size and memory usage. It may be a good idea to build a toggle into your Papervision project that allows you to import either format and do a lot of testing as you go before deciding on one format or the other. As always, keep your target audience (and their computers) in mind.

Feel free to use the Flash and Actionscript files to run your own tests or simply steal the code for your project. The methods that I used for loading and initializing the models may save you some time and frustration when dealing with the quirks of both the Collada and Max3DS parsers in Papervision. For example, the Max3DS parser would not allow me to initialize the model with a FlatShadeMaterial, so I had to use a ColorMaterial. But, once it was loaded, it would allow me to replace the ColorMaterial with a FlatShadeMaterial.

Please do not use the 3D model I have provided for production work. I have provided the model for you to use in these experiments, but it is copyrighted and I would really appreciate you not using it for anything else.

As always, you can download the source files here.