Packt+ | Advance your knowledge in tech

You're reading from Papervision3D Essentials

Product type Book

Published in Sep 2009

Publisher Packt

ISBN-13 9781847195722

Pages 428 pages

Edition 1st Edition

Languages

ActionScript

Concepts

Graphics Programming

Table of Contents (18) Chapters

Papervision3D Essentials

Credits

About the Authors

About the Reviewers

1. Preface

1. Setting Up

2. Building Your First Application

3. Primitives

4. Materials

5. Cameras

6. Moving Things Around

7. Shading

8. External Models

9. Z-Sorting

10. Particles

11. Filters and Effects

12. 3D Vector Drawing and Text

13. Optimizing Performance

Chapter 12. 3D Vector Drawing and Text

Papervision3D is mainly bitmap based, meaning all that is rendered is converted to bitmaps. Rendering crisp and smooth looking text is quite a challenge when using this approach, as we have seen in the MovieAssetMaterial example in Chapter 4. Rendering text directly as vector shapes may offer a good alternative. There are two reasons for this:

Bitmaps are resolution dependent, and scaling them could lead to a decreasing image quality. Vector shapes are scalable without loss of quality.
It is hard to wrap text on triangles that are skewed and still make it look good. 3D vector text is not drawn on triangles in order to be rendered.

Papervision3D features a set of classes that allow for drawing vector graphics such as simple shapes and text. The method names that are used for drawing shapes are similar to those of the Flash drawing API such as lineTo() and curveTo(). Creating 3D text is also fairly simple because of a couple of easy-to-use classes.

The...

VectorVision: 3D vector text and drawing

VectorVision is a library written in ActionScript that allows you to render vector graphics in Papervision3D and add a 3D perspective to them. The project started as a separate library that you could download and use as an add-on. However, it was fully integrated in Papervision3D in June 2008.

Being able to use vector shapes and text theoretically means that you could draw any kind of vector graphic and give it a 3D perspective. This chapter will focus on the features that are implemented in Papervision3D:

Creating 3D vector text
Drawing 3D vector shapes such as lines, circles, and rectangles

Keep in mind that 3D letters can be seen as vector shapes too, just like lines, circles, and rectangles. The above distinction is made based on how VectorVision is implemented in Papervision3D. Some classes specifically deal with creating 3D text, whereas others enable you to create vector shapes.

Creating a template class for the 3D text examples

Because the 3D text examples we are about to see have a lot in common, we will use a template class that looks as follows:

package
{
import flash.events.Event;
import org.papervision3d.materials.special.Letter3DMaterial;
import org.papervision3d.typography.Font3D;
import org.papervision3d.typography.Text3D;
import org.papervision3d.typography.fonts.HelveticaBold;
import org.papervision3d.view.BasicView;
public class Text3DTemplate extends BasicView
{
private var material:Letter3DMaterial;
private var font3D:Font3D;
private var text3D:Text3D;
private var easeOut:Number = 0.6;
private var reachX:Number = 0.5
private var reachY:Number = 0.5
private var reachZ:Number = 0.5;
public function Text3DTemplate()
{
stage.frameRate = 40;
init();
startRendering();
}
private function init():void
{
//code to be added
}
override protected function onRenderTick(event:Event = null):void
{
var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number...

How to create and add 3D text

Let's see how we can create 3D vector text that looks crisp and clear. The general process of creating and displaying 3D text looks as follows:

1. Create material with Letter3DMaterial.
2. Create a Font3D instance.
3. Create a Text3D instance, passing the text, font, and material to it, and add it to the scene or to another do3D.

We will create an example that demonstrates several features of Text3D:

Multiline
Alignment
Outlines

All the following code should be added inside the init() method. Before we instantiate the classes that we need in order to display 3D text, we assign a text string to a local variable.

var text:String = "Multiline 3D text\nwith letter spacing,\nline spacing,\nand alignment ;-)";

Now, let's create a text material, font, and text. First we instantiate Letter3DMaterial, which resides in the org.papervision3d.materials.special package:

material = new Letter3DMaterial(0x000000);

The constructor of this class takes two optional parameters:

Font creation

In order to use other fonts in Papervision3D, we need to create our own custom Font3D classes. Although this may sound pretty daunting, it is not hard at all, thanks to a tool by Mathieu Badimon, the developer of Five3D.

Note

Five3D is a 3D engine written in ActionScript 3.0 that lets you create interactive vector-based 3D animations. See http://five3d.mathieu-badimon.com

In short, downloading the tool and placing in it the correct folder will create a new panel inside the Flash IDE. When the panel is opened, you can choose a font and the tool will generate an ActionScript class file that contains vector data about the font. The following screenshot shows the panel:

Go to http://code.google.com/p/five3d/downloads/list and download the latest release, which was FIVe3D_make_typography_v2.0.zip at the time of writing.

Inside the ZIP file you will find a SWF and a PDF file. The PDF contains instructions on where to place the SWF and how to create a font file. Read these instructions...

Adding interactivity to 3D vector text and shapes

Adding interactivity to 3D vector objects basically works the same as adding interactivity to any other 3D object. You can use the InteractiveScene3DEvent similar to what we have done in previous chapters. However, to increase the accuracy you should import VectorShapeHitTest, which is located in the org.papervision3d.core.render.command package, and add the following line at the top of your init() method:

VectorShapeHitTest.instance.assignViewport(viewport);

Another aspect worth taking a look at, is adding interactivity to 3D text. If you would try to add an event listener to a Text3D instance directly, you are out of luck. Adding interactivity is done by adding listeners to the letters of the text. Let's see how that works.

Adding interactivity to 3D text

Again, we will take the Text3DTemplate as our starting point. We will create a simple example with some 3D text and make it interactive. When the mouse hovers a letter, it will turn...

Drawing vector shapes—lines, circles, and rectangles

The integrated VectorVision library not only lets you create 3D text, it also provides a VectorShape3D class that allows drawing basic vector shapes such as lines, circles, and rectangles. The shapes are initially drawn in 2D and then projected in 3D space.

Working with vector shapes requires two classes, VectorShapeMaterial—located in the org.papervision3d.materials.special package—and VectorShape3D - located in the org.papervision3d.objects.special package. To create a vector shape material, use the VectorShapeMaterial class.

var material:VectorShapeMaterial = new VectorShapeMaterial();

The constructor of this class does not take any parameters.

When you want to draw a shape, you must instantiate VectorShape3D. The following code draws a line:

var line:VectorShape3D = new VectorShape3D(material);
line.graphics.lineStyle(2,0x00CCFF);
line.graphics.beginFill(0x666699)
line.graphics.moveTo(-300,-300);
line.graphics.lineTo(300,-300);
scene...

Drawing lines with Lines3D

Before VectorVision was integrated, Papervision3D already had a Lines3D class for drawing 3D lines. Two differences between drawing lines with VectorShape3D and Lines3D are:

Whereas VectorShape3D enables you to easily draw rectangles, circles, and ellipses, Lines3D does not have built-in methods to do such things.
Lines3D creates lines with a Vertex3D as the start and end point, resulting in 3D projection of the vertices that make the line. On the other hand, VectorShape3D lets you draw a 2D shape, which you then can rotate in order to achieve a 3D perspective.

Let's take a look at how to create straight as well as curved lines with Lines3D, and how to add interactivity. The following class will serve as a template for the Lines3D examples to come:

package
{
import flash.events.Event;
import org.papervision3d.core.geom.Lines3D;
import org.papervision3d.core.geom.renderables.Line3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d...

Summary

Papervision3D offers a set of easy-to-use classes to draw 3D vector shapes such as simple graphics and text. The classes were originally part of VectorVision, a separate project that was developed to create 3D vector text, but was integrated into Papervision3D.

3D vector graphics can be created similar to how the Flash drawing API works, with methods such as drawCircle() and lineTo(). The graphics, such as lines, circles, rectangles, and ellipses are drawn in 2D and can then be rotated to create a 3D illusion.

The 3D text classes allow you to create crisp looking multiline text with alignment, letter spacing, and line spacing. Although Papervision3D has only four built-in fonts, it is possible to create text with other fonts. An external tool has been discussed, which generates font classes, containing vector information about the font you want to use. These classes can easily be incorporated into your Papervision3D project.

You add interactivity to 3D text as well as other 3D vector...