The Many Forms of Away3D Text

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.

8 Responses to “The Many Forms of Away3D Text”

  1. pausleal says:

    Great, I never knew this, thanks.

  2. pausleal says:

    found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later

  3. CBurfoot says:

    Could you also offer the file as a CS4? I’d love to explore the different methods you used. VERY good comparison.

    Thank you for your examples.

  4. Sorry CBurfoot, I don’t have CS4. I’ve been using Flex Builder 3 or Flash Builder 4 for a majority of my demos, with FlashDevelop mixed in. Most of the code is pure AS3, though, so it shouldn’t be a problem importing it into the Flash app of your choice.

  5. Ricardo says:

    Tony,
    can i use html text (from a XML file) with TextField3D?

    Thanks.

  6. tugboat says:

    Wow would I love to see that screenshot walk through you mentioned. I have CS5 but I know nothing about Flex. And I can’t seem to get this to work.

    Thank you.

  7. Ricardo,

    Sure, it just won’t interpret it as HTML though ;)

  8. tugboat,

    You of course ask for this a day after I wiped my work laptop and no longer have CS5 available to me. Is the main trouble getting the font SWF into Flex? If you have any specific questions I’d be happy to help. Shoot me an email: anthony.lukasavage at gmail dot com