The Many Forms of Away3D Text

July 27, 2010 // Posted in Away3D, Code Demos (Tags: , , , ) |  No Comments

Click here for the source code or click on the demo above then right click and select “view source.”
Also, here’s a link to the FLA for CS5 that can be used to publish the SWF that will contain your target font.  Simply open the FLA in Flash Pro, change the font of the “test” text on the stage, click “Embed” in the character panel to make sure the right font is set, and then publish your SWF.  The resulting SWF will contain your ready-to-be-embedded font.  If the following steps weren’t goos enough, let me know.  If I get a complaint or two I’ll put up a screenshot walkthrough for the whole process.

Text comes in many forms in Away3D and they all have their own advantages and disadvantages.  Here’s a quick run down of the various methods I know for generating text in Away3D, which are all displayed in the demo above.

PNG + BitmapMaterial + Plane
With this method, you take a PNG (or any other image format Away3D handles) image file containing the text you would like to display, create a BitmapMaterial from it and apply the BitmapMatierial to a Plane.

Pros: Fast rendering
Cons: Static text, quality depends on image resolution, text is flat

Textfield + MovieClip + MovieMaterial + Plane
Here we create a Textfield with our text and add it to a MovieClip.  We then create a MovieMaterial from the MovieClip and apply it to a plane as in the last example.

Pros: Fast rendering, dynamic text
Cons: Text is still flat

TextField + Sprite + BitmapMaterial + Plane
Almost identical to the last example, except this time we create BitmapMaterial from a Sprite.

Pros: Faster rendering, dynamic text
Cons: Text is still flat

TextField3D
We use the TextField3D class in conjunction with wumedia.vector.VectorText.extractFont() and a specially created SWF file that contains the embedded font we want to use in our example.

Pros: Vector quality text, dynamic text
Cons: Text is still flat, can only use embedded font

TextField3D + TextExtrusion
We expand on the last example by using the TextExtrusion class with the TextField.  This creates a 3 dimensional outline of our vector text finally giving us some depth.

Pros: Vector quality text, dynamic text, 3 dimensional
Cons: Can only use embedded font, fonts have arbitrary “winding” when drawn so determining which side of the text is the “back side” is tricky and can screw up shading materials.

3DS Model (high and low poly)
You can always forgo the ins and outs of dynamic text and do it yourself in the modeling program of your choice.  In this case I used 3DS Max 2010 to create low and high(er) poly text.

Pros: Full control over appearance of text
Cons: Text is totally static

So there’s the list of methods I’m aware of.  You got any more?  See anything glaringly stupid above?  Let me know either way.

Flash Builder 4: addElement() instead of addChild()

July 27, 2010 // Posted in ActionScript3, Flash Builder 4 (Tags: , , ) |  No Comments

Here’s a quick tip for those of you who are also switching to Flex 4.x/Flash Builder 4 from Flex 3.x/Flex Builder 3.  In the past when you wanted to add a Flash DisplayObject to the main Application canvas you’d wrap the DisplayObject in a UIComponent, then add the UIComponent to the Application as a child, like this:

var sprite:Sprite = new Sprite();
var ui:UIComponent = new UIComponent();
ui.addChild(sprite);
this.addChild(ui);

Try that in Flash Builder 4 and you’ll encounter a fun error that looks like this:

Error: addChild() is not available in this class. Instead, use
addElement() or modify the skin, if you have one.

To resolve it, simply change the last line of the previous code to use addElement() instead (change in red):

var sprite:Sprite = new Sprite();
var ui:UIComponent = new UIComponent();
ui.addChild(sprite);
this.addElement(ui);

Away3D: SimpleShadow and Simple Shadows

July 21, 2010 // Posted in Away3D, Code Demos (Tags: , , ) |  No Comments

SimpleShadow vs. shadow image (click for demo)

Click the above picture for a demo.  Right click on the demo to view source. Be sure to pay close attention to the apply() and positionPlane() methods of SimpleShadow.

You want to quickly add perspective and depth to a scene?  Look no further than shadows.  Shadows can make a minimalistic scene look fantastic.  Take a look at the website of Peter Kapelyan, one of the Away3D’s developers, and you’ll see what I mean.  Luckily, in Away3D they are easily available in more than one form.  Note, though, that shadows in Away3D are not actually created by light sources as this would be extermely expensive in terms of performance.

The above demo shows Away3D’s built-in SimpleShadow class (left) vs. a shadow created simply by adding a plane with a shadow BitmapMaterial (right).  Both are pretty easy to do, and both have their pros and cons:

SimpleShadow BitmapMaterial method
Built into Away3D X
Shadow conforms to object shape X (specific to object)
Fast Performance X
Shadow handles rotation X (only on one axis)
Handles translation X X
Handles scaling X (needs to be added)
Handles distance X (needs to be added)

“Shadow conforms to object shape” means that no matter what type of 3D object you are applying the SimpleShadow to, the shadow will accurately represent its overall shape.  With the BitmapMaterial method the shadow image must be created specifically for a particular 3D object to maintain an accurate representation.  So for a cube you need to create a square shadow image, for a sphere you need to create a circle shadow, and so on.

By “needs to be added” I mean that there’s no reason this functionality could not be added to the BitmapMaterial method. The reason its not there now is the reason that SimpleShadow won’t perform as well as the BitmapMaterial method. All those extra calculations and shadow redrawing are what will slow down a scene that has one too many SimpleShadows.

Peter Kapelyan's site, flashten.com, using SimpleShadow

Away3D MultiMario example using BitmapMaterial method

The clear winner might appear to be SimpleShadow, but if functionality always won over performance we wouldn’t have a need for Away3DLite.  In general, if you have a scene with only a few shadows and you would like those shadows to appear realistic relative to the object casting them, use SimpleShadow.  If performance is the main concern, like in a scene with many objects casting a shadow, the BitmapMaterial method would likely suit you best.

These are the 2 methods I’ve seen for creating shadows in Away3D, but there may be others.  If you find any, let me know.  Otherwise, enjoy!

UPDATE: I conversed with SimpleShadow’s creator, Fabrice Closier, and he was confused as to why I said SimpleShadow’s performance was slower.  I should clarify that SimpleShadow is slower only when the shadow needs to be redrawn frequently with the apply() method.  In a still scene or when the shadows in the scene do not often need to be redrawn, the performance should be very similar to that of the BitmapMaterial method.

Adobe Swatch Exchange (ASE) Files in AS3

July 17, 2010 // Posted in ActionScript3, Code Demos (Tags: , , , ) |  No Comments

SwatchLoader.as in action (click image for demo)

Download the AS3 Class: SwatchLoader.as
Source Code: View Source

SwatchLoader.as is an AS3 class for FP10 that loads Adobe Swatch Exchange (ASE) files into an object.  From this object you can access all group and color information for the swatch.  It handles RGB, CMYK, and grayscale color modes.

This demo was inspired by the work of Jerome at wemakedotcoms.com (AKA, elguapoloco at the Away3D dev list) who recently posted an Away3D site that used the Kuler RSS feed.  Sites like Kuler and ColourLovers provide community supported collections of free color swatches.  Though the idea of creating a swatch of 5 colors is simple, it acts as creative inspiration.  And as such I was inspired to use these swatches as themes or skins for future Flash projects.

kuler.adobe.com

Not wanting to be at the mercy of the RSS (Jerome mentioned that he had some responsiveness issues with it) I decided to write a parser for ASE.  While the format is relatively simple and can be used by almost any Adobe CS 3+ product, it is proprietary.  Fortunately I was pointed to this site, where the binary format of many image types can be found.  Armed with this second hand specification and my trusty hex editor, I churned out the finalized code in just a few hours.  Now it can successfully handle ASE formatted swatches from Kuler and ColourLovers.  In theory it should work for any ASE, but I have not yet tested it on anything but swatches from those 2 sites.

With a little luck (and free time) you’ll probably see this included in some of my demos in the near future.  Send a comment if you find it useful or if you run into any problems.

One last note, its not error that the ColourLovers’ swatch name is always “unknown.”  The ASE files generated by ColourLovers do not include the name of the swatch.

Away3D: Carousel Gallery

July 1, 2010 // Posted in Away3D, Code Demos (Tags: , , ) |  2 Comments

At the request of one of my readers (a list that is probably about 12 people long), here is a demo and source code for the carousel gallery included in the 3d version of savagelook.com shown in my last blog post.  It’s a customizable ring of planes that can display any type of away3d material, in this case BitmapMaterials.  You simply need to pass in an array of materials during initialization and the CarouselGallery handles the rest.

This example uses a simple rotation in the render loop, but my 3d savagelook.com example uses mouse interaction to make it cycle.  You could even add left and right arrows if you wanted to have it move one image in those respective directions.  You could achieve this by simply rotating along the Y axis by a number of degress equal to 360 divided by the number of planes in the carousel.

I hope anyone else who wanders tot his site finds it useful or inspirational for their own work.  Oh, and the time to completion for the first code request I received was about a day and half.  So if you have any ideas or requests for me, feel free to send them along in a comment or email and I’ll get to them as soon as possible.  People’s feedback is what keeps me active and on my toes with this stuff.

Away3D: SavageLook.com 1.0

June 30, 2010 // Posted in Away3D, Projects (Tags: , , , ) |  No Comments

Originally this project was the main page for savagelook.com, but I decided it to shuffle to “projects” on my blog.  While it is was a very cool showcase of the things I had learned so far using Away3D, Flint particles, FLARToolkit, FLARManager, TweenMax & TimelineMax, its not really practical for a main interface… yet.  Here’s the things I learned in this initial undertaking that I plan to apply to all future projects involving Away3D(Lite), particularly when the average user is the target audience:

  • Performance ALWAYS has to be on your mind.  There’s nothing more annoying to users than low frame rates.  Many of my next points relate directly to this.
  • Control the size of the view.  While a resizeable view that fills the browser seem great, you can take a nasty performance hit on high resolutions.  For example, this project runs like a champ with a standard 800×600 or 1024×768 resolution.  When I jump it up to  1680×1050, though, things start to get a little choppy.
  • 3D particles are a whore on resources.  Fake 3D effects with 2D whenever possible.  You can literally get 100x (or more) particles in 2D and maintain the same frame rate as 3D.
  • Use simultaneous tweens judiciously.  There were noticeable slow downs in my intro animations when more than one tween was operating at a time.
  • Learn your z-sorting and plan it from the beginning.  I can’t tell you how much time I wasted restructuring my scene and code because I didn’t take the time to learn Frustum clipping, ownCanvas, pushback, pushfront, and screenZoffset before starting.
  • Users expect 2D dialogs and text. Use them whenever feasible to convey information to the user.
  • Make sure you clean up your unused objects.  ”scene.removeChild(obj)” and “obj = null” should become your best friend.
  • Reuse objects and materials whenever possible.  Its a lot easier and less expensive to toggle the visibility of a relatively simple object rather than destroy and recreate it every time.
  • Only render when you need to.  When I use 2D layout for the “Bio” section, I stop rendering the covered 3D scene to help performance.
  • Use texture baking or similar techniques to fake lighting.  Real-time lighting, while cool, chews up a lot of resources.  If it isn’t critical, fake it.
  • When all else fails, hit the Away3D Dev list. It may not have the fastest responses, but there’s no better place to get help and guidance.

I’m sure there’s lots more I picked up in the process, but that’s a pretty good assessment.  Hopefully this helps anyone getting started on their own Away3D projects.

I don’t have any specific plans to make version 2.0 of the savagelook.com 3D interface, but I’ve got a few ideas rolling around in my head.  The key factors will be simplicity, speed, more pseudo-3D effects using 2D, and use of Away3DLite.  I’m hoping to really represent Away3D next time.

Away3dLite: Face linking, take 2

June 25, 2010 // Posted in Away3D, Code Demos (Tags: ) |  No Comments

It was great.  I had a moment of triumph.  In my meager 3D and Away3D experience I managed to get face linking functionality into Away3DLite.  Proud of myself, I posted my success at the Away3D Dev list.  But my party was soon rained on by one of the Away3D developers, Peter Kapelyan, who immediately informed that my linked objects weren’t aligning as they should be.  It felt a lot like that scene in National Lampoon’s Christmas Vacation where Clark finally gets the lights lit on his house, only to have his father-in-law inform him that the little lights weren’t twinkling…

I know Peter, thanks for noticing.

To that end, the above demo is the next revision of my prior face linking code.  This time, I got alignment working.  Because I am 3D math deficient (I’m working on it) I was unable to implement the alignment properly without using a container object for the source and the linked objects.  Someone a little more math savvy can surely make use of the upAxis parameter of the lookAt() function to make it work, but I need some studying before I can do it on my own.  Shawn McInerney from the dev list offered up a potential solution, but it’s a little over my head now.  Perhaps someone else perusing this blog can make use of it.

I hope Peter didn’t take this the wrong way, as I have an abrasive sense of humor that doesn’t translate well to written word.  Just in case, here’s a link to his site which is extremely clean, cool, slick, and a whole bunch of other adjectives that equal up to awesome.

Away3dLite: Normals and Face Linking

June 23, 2010 // Posted in Away3D, Code Demos (Tags: ) |  No Comments

The above is a demo of face linking implemented in Away3dLite (right lick to view source).  As you’ll see in the demo, face linking allows us to “link” a 3D object to another, rendering it at the center of the source’s face and then moving along the face’s normal by a given offset.  All credit goes to the original author of the Away3D FaceLink class, as my work was just a minimal modification to port it to Away3DLite.

One thing to note is that this demo required a modification to the Face class, found in away3dlite.core.base.Face.  I simply added a calculated normal and center for the face at creation time and made it available as a public variable.  It’s not altogether the cleanest code I’ve written, but it gives you a good idea of how you might use face linking in your own Away3DLite application.

Just for fun, here’s a couple links to other flash apps I’ve seen that make cool use of faces, vertices, and normals:

Away3DLite + Augmented Reality = Free Camaro!

June 22, 2010 // Posted in Augmented Reality, Away3D, Code Demos  |  No Comments

As promised the demo above includes bare bones source code (right click to view source)  for getting FLARManager up and running with Away3dLite.  And for a limited time, it comes with your very own Camaro!  99% of the credit goes to Eric Socolofsky as the code is just a trimmed down version of his example code included in FLARManager.  The model has been provided free by the modeler “Race Tracks” at turbosquid.  In order to use this demo, you need to do the following:

  • Download and print this marker
  • Turn on your webcam and point it at yourself.
  • Start the demo, point the printed marker at the webcam, and enjoy!

If the above steps aren’t clear, check out the video demo from my prior blog post.  For those out there constantly evaluating how far we can push the performance of away3dlite, you might like to know that the model consists of right around 1000 faces.  1000+ faces along with the video processing of patterns and I’m still maintaining right around 30 FPS.  Not bad at all.

Away3D: Augmented Reality

June 20, 2010 // Posted in Augmented Reality, Away3D (Tags: ) |  No Comments

Here’s a quick demo I did of using augmented reality in Away3D.  The quick description is that your webcam is used to identify the position and orientation of the marker (which I’m holding).  With these values identified, FLARToolkit and FLARManager are used to translate your Away3D scene and objects relative to the marker.  You are adding interaction into your Away3D apps using natural movements rather than the typical mouse and keyboard combos.

While the demo itself doesn’t give a great picture of the practical applications, they are showing up more quickly then you might imagine.  One particularly interesting example is the Layar browser, which uses global positioning rather than marker identification to make its alterations to reality.  Rather than try to explain it, check it out here:

And I’m sure plenty more applications are on the way. Want to get on board and start churning out your own augmented reality (AR) apps in Flash?  Check out FLARToolkit and FLARManager for yourself.  You may also want to take a look at the original ARToolkit, which is based in C++, or NyARToolkit, the Java/C# port on which FLARToolkit is based.

Too lazy for all that research?  Stay tuned and I’ll post up the source from the bare bones example I had in the first video of this post.