Recipe 5.6. Realistic Raster-Based 3D Graphics

Problem

You want to make your 3D objects look more realistic than is possible with vector output.

Solution

Use raster output along with bitmap texturing in the advanced modeler in Swift 3D.

Figure 5-29. Layers corresponding to graphic elements in an SWFT file imported into Flash

Discussion

The use of bitmap texturing combined with the raster rendering and export capabilities of the Electric Motion (EMO) rendering engine results in the most photo-realistic images capable with Swift 3D. The Materials Gallery includes a number of default bitmap textures, and you may also create your own from PNG, BMP, JPG, or GIF data. Bitmap materials are an excellent way to add depth and detail without increasing the complexity of the underlying model mesh. As those familiar with low-poly (minimum number of polygons necessary) modeling for games know, this technique has the advantage of adding detail without bloating file size or increasing system demands during rendering.

The disadvantage to using bitmaps for detail is that they will be easily distinguished as "flat" if viewed closely or from certain angles. Another visual giveaway is that shadows will not respect the shape of a bitmap texture, instead adhering to the contours of the model.

Although materials can be added to objects though the Scene Editor, advanced placement, rotation, and scaling of bitmap materials must be done within the Advanced Modeler, hence requiring extrusions, primitives, or lathe objects be converted to model meshes. Because of this requirement, it is important that you have any properties associated with these types of items finalized before moving into the Advanced Modeler. It is good practice to make a copy of such objects, setting them to hidden in the Scene Editor, so that they are available for future use if necessary.

Applying a single bitmap texture to all faces of an object is a fairly straightforward process, yet doing so to selections of polygons can take some practice. For illustrating these concepts, I have chosen to recreate the cover of a popular title from O'Reilly, Essential ActionScript 2.0 (2004). This example can easily be adapted for creating packaging mock-ups, such as software boxes. The completed T3D and bitmap assets can be downloaded from http://www.rightactionscript.com/fcb/chpt5/book.zip.

Preparing the bitmap materials

The first step is to acquire the necessary artwork for all sides of the book. I did so by scanning the front and back covers, as well as the spine of my copy, and cleaning up the images in Photoshop. The right, top, and bottom image used for the edges of exposed pages was a simple texture created in Photoshop. After cleanup was finished, each image was saved as an individual PNG document, as displayed in Figure 5-30.

Figure 5-30. Bitmap materials prepared in Photoshop and saved as PNG documents; the black borders are in place to make the graphics stand out from the color of this page and do not exist in the actual files

The next step is to enter the Advanced Modeler and create the base object for the book, which in this case will be a simple Box Mesh primitive. When adding the object to the front viewport, roughly size it to the dimensions of the book. If you happen to have a copy of the book on hand, I suggest using it as reference or viewing the original bitmaps to help judge the size. It does not have to be perfect, as modifications can be made later to match up with the materials perfectly.

Before applying materials, each side of the box mesh must be assigned its own surface group. For a refresher on how to assign surface groups, see the creation of the chessboard squares in Recipe 5.2. As each group is created, it should be given a name that is easily recognizable. I have used Cover, Back, Spine, Top, Right, and Bottom. When you are working with a number of surface groups, assigning them names that correspond to the material that will be applied can be of great assistance in maintaining organization and speeding up the texturing process.

When moving into the texturing stage of a project, it is a good idea to set all of the viewports in the Advanced Modeler to Texture Smooth Shaded and to display materials. This practice allows for real-time previews of material positioning in all viewports. These options are found under the viewport camera tabs.

With the surface groups created, it is time to start applying textures, starting with the cover. Select the cover surface group and double-click the material preview in the Properties Toolbar. This step will bring up the materials editor, as shown in Figure 5-31. In the pattern drop-down menu, select Bitmap Image and browse to cover.png, uncheck the X and Y tiling boxes, and click OK.

In the front viewport of the Advanced Modeler, you will now see the cover material applied. If the bitmap does not appear to be fitting correctly, enter Edit Texture mode by clicking the paint can icon in the top toolbar and use the scaling and move tools to reposition it. Right-clicking the model will also allow for scaling along along the x-or y-axis alone. If only a small adjustment is needed, this is fine; however, if a good deal of nonuniform scaling is used, distortion will soon become apparent in the material.

A custom material that is applied to an object may be added to the materials library in the Gallery Toolbar by dragging and dropping the material preview window in the Properties Toolbar to the gallery of your choice.

If the dimensions of the box mesh are noticeably off, you'll have to adjust the various dimensions using the Vertex Selection tool and manually increasing or decreasing the size. When this is done after a bitmap material is applied, it will cause the material to scale as well; however, going back to the scaling tool in the Edit Texture mode is an easy way to resolve the problem.

When the cover graphic is in place and you feel comfortable applying and positioning materials, repeat the previous steps for both the back cover and spine of the book. If the cover is lined up, the back should be simple to apply. The spine may require additional resizing of the box's depth.

The final surface groups that require mapping are the top, right, and bottom, all of which use the pages.png texture. This one is applied in the same way as the others, with a few small changes. First, you must keep X and Y tiling active. The second difference, which will be obvious, is that when you go to add the material to any of the sides, the line texture will be mapped in the wrong direction. To fix this problem, enter Edit Texture Mode and right-click on one of the applicable sides of the box. When the context menu appears, select Auto Box Coordinates, as shown in Figure 5-30, and the mapping direction will be corrected. Alternatively, you could manually rotate the bitmap until it is facing the correct direction.

Figure 5-31. Creating a bitmap material in the Edit Material panel

An alternative approach to creating individual image files for materials is to combine them all into a single file. With this method, you can apply the same material to every side of the box and just have to reposition the bitmap to the appropriate graphic. I personally prefer to keep them separate for the purposes of editing, updating, or replacing at a later date.

Although some lighting and a ground plane have been added to the example in the figure, your final model should look similar to Figure 5-32. If you ran into trouble along the way, you may want to explore the T3D source file.

Figure 5-32. Finished bitmap-textured book

The final step is to export to a raster format for import into Flash. Swift 3D offers a variety of compatible formats, and the one you select depends very much on your needs and personal preference. Standard formats for static images include JPG, PNG, BMP, TGA, and TIF, of which all except for JPG support alpha transparency. For animation, there is direct export to SWF, which is composed of a series of raster images. There is also the option to export to video using AVI, MOV, or FLV formats.

My general preference is PNG. Even when dealing with animation, I usually export a series of PNG files instead of a raster SWF. One of the reasons for this method is that at times the anti-aliasing in SWF documents provides pixel artifacts at the edges of objects. Also, I like to have the option to edit or optimize on a per-frame level using an external image-editing application, such as Photoshop or Fireworks.