Brian Kadar

When working on the Pearl Jam site, I needed a way to break apart a single image into 100 segments, while minimizing the performance hit that comes with such a large number of objects. Instead of creating multiple BitmapData objects, I used UV texture mapping to achieve the result.

Working with the geometry of an object in Papervision3D can be a very daunting task; in order to do it you need an intimate knowledge of the object’s mesh structure (triangles, vertices, uvs). Instead of explaining the parts of an object's geometry here, check out this excellent post.

Starting with the basic primitives, I created a utility class that dynamically adjusts the UV texture mapping of an object. So far there are only methods for the Plane and Cube primitives. For the Cube, you can isolate individual sides (i.e., Cube.FRONT). The class takes into account the respective mesh structures of the primitives (number of segments, triangle order) to properly adjust the UV coordinates.

You can now very simply adjust the UV mapping of a Plane using the code below:

and for a Cube:

The Rectangle parameter represents the area of the original texture that you want to be drawn, where the values are between 0 and 1. This is similar to the Rectangle’s usage in the BitmapData.draw() method. So the rectangles in the code above will display the top left quadrant of the texture; alternatively, new Rectangle(.5, .5, .5, .5) would display the bottom right quadrant.

By manipulating the UV coordinates, you can minimize the number of materials and bitmaps that you use in your project. Instead of creating multiple bitmaps/materials, you can use a single one for multiple objects, adjusting the UV mapping to vary the texture. In the Pearl Jam site, all 100 cubes use a single BitmapData and a single BitmapMaterial, providing a huge performance boost. It can also be used for basic texture animations (translation, zoom, etc.), by animating the rectangle’s properties and applying the new UV coordinates each render.

One cool trick is to supply negative numbers in the Rectangle object. You can get a “doubleSided” effect on an object, displaying a mirror image of the texture, by using new Rectangle(0, 0, -1, 1). In Pearl Jam, the underside of the cube is using the same material as the top, but with reverse UV mapping.

Imported models and other custom meshes will require more specific manipulation of the UV coordinates. However, using the Plane and Cube examples, this class can easily be expanded to work with the other primitives (Sphere, Cylinder, and Cone.)

Whoops. Download the class here.

Tweet This Post