Papervision3D Part 1: Introduction

I have many friends asking me for more information on Papervision 3D. Usually, they’re just genuinely interested in learning about it and also how they can use it. These friends are bright people, but generally unfamiliar with the topic of computer graphics. I’ve consistently directed them to Wikipedia articles that I think will make everything clear to them (in this order):

1. Computer Rendering
2. Rasterisation
3. 3D Projection
4. Matrix Multiplication

Unfortunately, I think people are reluctant to read those articles because they’re half written in math formulas. Those formulas are critical for getting a real understanding of what’s going on “under the hood” but I admit they’re annoying to read if you don’t really want to learn the math. And also, those articles won’t mention a single Papervision class file anywhere (naturally). I’m sure this is a little less exciting for someone who’s into 3D in Flash. Therefore, I’m reviewing and dissecting Papervision3D 2.0 (Great White) in a multi-part series for those who are curious about 3D in Flash.

Part 1 will review those Wikipedia articles and relate them to Papervision along the way. If you’re already familiar with computer graphics as a topic of CS, you may wish to skip this post. Parts 2 & 3 will review the details of many features of Papervision3D. Part 4 will be a set of useful notes and tips for anyone who’s not already experienced with Papervision3D.

An Ultra-Brief Background of Computer Graphics
Drawing an image from a 3D scene using a computer can be done many different ways. However, if its going to be done very quickly in order to allow for animation and/or interactivity then typically a process called rasterisation is best. This term is used to describe the transformation of (vector) data into raster (or pixel) data, such as an image.

A few things should also be understood about the vector data used in rasterisation. It really can be almost anything that defines a 3D entity. However Papervision follows the popular convention of using 3D points oriented into triangles. So if a surface looks like a rectangle, its actually (at least) two triangles –each triangle having at least one face. It should also be noted that in 3D space two more important values are often used: normals and UVs. A normal is short for “surface normal vector” which is a vector value that is perpendicular to the triangle’s face. And a UV is a value that is used to determine how an image can be mapped to the triangle’s face. In Papervision, there can be one UV for every 3D point. And there can be one normal for every triangle.

Rasterisation is a term that is used for both 2D and 3D graphics. Without getting into the real nitty gritty behind what’s going on inside a computer to produce an image on a monitor, we can say that Flash has pretty much always performed 2D rasterisation. But with a 3D engine used, a lot of logic is plugged in to produce an illusion of 3D on a 2D screen.

So what is all that logic? In short, 3D projection, matrix math and display list management. Plus, a lot of performance enhancement, shading, parsers, presets, and the structure of a nice OOP API. Here are the basics.

3D Projection
Ultimately, the task of projection is mapping points which are represented in 3D space in a 2D coordinate system. There are different ways of doing this. Figure A1 shows 2 common examples: orthographic and perspective projections.

Figure A1: two common 3D projections of a cube

When using either projection technique and mapping everything within view to a 2D rectangular plane, a renderable volume is determined. This volume will be the space bound by a cube if projection is orthographic. Or it will be a frustum if the projection is perspective. This space is highly useful for making some key optimizations. Figure A2 helps explain the view volume.

Figure A2: Perspective projection view frustum with view frustum culling.

The process of projection is achieved through transforming matrices. In Papervision (as in most 3D APIs) a 4×4 matrix will represent translation, rotation, and scaling for all axes. If you want to understand the raw math behind the matrix convention in 3D graphics, you should actually be reading the links I posted above from Wikipedia. Otherwise the following section will very briefly review the topic.

3D Matrices
A Papervision 3D matrix is represented in 16 Number values. Figure B helps to illustrate how those numbers are used in a right-handed coordinate system.  With Papervision, a left-hand coordinate system is used. This means that the z axis points into the screen and away from the viewer. This will have some important implications if you decide to import models into Papervision from files generated using common 3D software.

Figure B: Three example matrix transformations

There are also 3 matrices that are used to represent a 3D scene in Papervision: the world matrix, the view matrix (or camera matrix), and the object transform matrix. So when an object is projected, it will go through all 3 matrix multiplications AND any animation matrix operations that are performed. More explicitly, each 3D vertex that exists in each 3D object will have to be transformed by all these matrices to end up as a 2D point in Flash.

Display List Management
When an object is added to a scene it is also added to a render list. That render list is sorted so that each object being rendered appears on the screen at the correct depth. Each renderable object is then drawn to the viewport using the viewport graphics object. NOTE: This means that the final render in Papervision is drawn in a single DisplayObject.

Display list management is also where a lot of performance gains can be made. Many times its not necessary to show all the triangle faces that are in a scene because they don’t exist inside the viewing volume (typically a frustum). Removing objects from the render list because they exist outside the viewing volume is called view frustum culling. There are plenty of other (more advanced) methods used in order to optimize the render cycle. Many of those will be explained in part 3.

Valuable Presets
Simple objects like cubes and spheres that come prefabricated in Papervision are called Primitives. They may not seem so sophisticated but consider how you would describe a sphere in terms of triangles using only 3D coordinates. Not to mention how you would determine all the triangle’s UV coordinates and normals! And if you don’t desire creating your 3D scene from primitives, you can generate your own objects algorithmically or even import them from an external source such as a collada file. That’s very valuable indeed!