Building a Virtual City Tour with Shockwave 3D

Like this article? We recommend

Shockwave 3D

Learn More Buy

Like this article? We recommend

Like this article? We recommend 

Shockwave 3D

Learn More Buy

Figure 1

In this chapter, I demonstrate how to link camera navigation to on-screen sprites, such as hand-drawn buttons and sliders. With this knowledge, you will be able to draw custom interfaces around your Shockwave 3D movies, and you can use the interfaces to control the navigation in your movie.

This chapter uses a Shockwave 3D movie that was constructed for a company called Virtual City Tours. I walk you through the construction process and discuss how to photograph the city, 3D model it, and then construct the elements in Director. I owe a special thanks to Ian Fuller, the President and Founder of Virtual City Tours for not only thinking of the Virtual City idea, but for also allowing it to be discussed here. Visit the Virtual City Tours' web site at http://www.virtualcitytours.com to see their development progress.

The prerequisite for this city is photo-realism. Photo-realism is tough to achieve because of the limitations in the shipping version of Shockwave 3D, such as the fact that you can't use shadows, and the fact that lighting is limited. Thus, in order to attempt to satisfy the realism requirement, you have to make up for these limitations with realistic looking textures. There are literally hundreds of buildings in this project, making it a large and even more complex project.

The creation process includes taking several photos for modeling references and texturing references, building the actual 3D scene (in this case, I used 3D Studio Max), exporting the scene to the .W3D format, construction of the (UI) user interface, and finally programming the model with Lingo. If you are only interested in learning the Lingo code, you can skip to the end of the chapter.

The first thing you have to do is decide is how much of the city you want to build as photo realistic. Believe it or not, this is an important decision, as I found out when I attempted this project for the first time. Hopefully, my experiences will help aid you with decisions like this and with the details of this process.

Picking a Part of the City

When Shockwave 3D was still in the beta stages, I wasn't sure whether or not an entire city, or even a large part of a city could be built. As you might expect, creating a 3D model of San Francisco is a daunting task. I decided to build a selection of blocks of the city, or more specifically, Union Square.

As you can see, Union Square [6.2] has a lot of buildings, and most of them are tightly packed together. Taking photos of these buildings is a tricky thing, not to mention building a 3D model of something so spectacular and complex. To make this task photo realistic, you have to shoot photos of the buildings and use them as the textures in the 3D model.

Figure 2 Union Square looking east.

Every building in the square requires multiple photographs shot at several different angles [6.3]. In the case of this project, I hired a professional photographer whose name is Andy Berry. Andy is a great photographer. In addition to having him shoot the buildings, I had him shoot several pictures of the surrounding areas of the buildings to use as textures and references for the models [6.4].

Figure 3 Several photo angles are necessary to start the complicated modeling process.

Figure 4 Reconnaissance work.

Andy delivered me thousands of photos to go through and to use as references [6.5], but with the delivery of these photos, a problem presented itself.

Figure 5 Hundreds of photos were used to create the city scene.

The easiest and fastest way to texture buildings is to photograph the front of the buildings, and then cubically (or with a box) map the texture completely around the 3D box. The problem with my photos was that the buildings were so high and close to one another that photographing the buildings at the correct angles was almost impossible. Photos that are going to be used as textures have to be shot perpendicular to the face of buildings [6.6], otherwise the building textures result in a smudged appearance, which is the opposite effect desired when you are trying to achieve a photo realistic quality.

Figure 6 Shooting textures that are at perpendicular angles is tough with 10-story buildings.

At one point, I thought I might use the textures from clipart buildings or other buildings in the surrounding area. While the photographer worked on the angle problem, I started the geometry construction for some of the buildings. With too much time on my hands, I decided to blow up one of the buildings just to make myself feel better about the photography problem. It worked [6.7].

Figure 7 Don't try this at home.

Eventually, a solution for photographing the buildings arrived. We used a special lens (telephoto), and then shot the buildings from inside other buildings, and from a distance. To get the right angle on the east buildings, we went into the west buildings and took the photographs from about two hundred yards away from the east buildings and five stories above the ground. This allowed us to get a more exact angle. The problem then became the obstructions. Because we shot the buildings from a distance, there were trees, telephone poles or wires, and other obstructions in the view of the pictures. These had to be digitally removed later in the process.

After you have gathered photos of the buildings and the areas surrounding the buildings, you can finish the model. When taking photographs of the surrounding areas, take several shots to ensure that you get the more realistic pictures of the entire scene as we did for this project [6.8–6.10].

Figure 8, Figure 9, and Figure 10 If there had been a kitchen sink next to one of these buildings, we would have photographed it. Remember to take pictures of as many details as you can, including street signs.

Modeling the Buildings

To construct buildings quickly, you only need the top-down view and height for each building. You could rent a helicopter and photograph the scene from above it. For my scene, I was able to find a view on the Internet, because Union Square is a popular place.

Next, you need to layout your scene. After you have a rough layout of where the buildings, streets, and curbs go, you can start drawing the models.

Start the construction by drawing the buildings from the top view. Outline shapes for where each building should be placed in relation to the other buildings [6.11].

Figure 11 The top-down view of the Union Square model we are creating.

The first building you extrude should be as close to the actual height in relation to the city block as possible. The first building is going to serve as the one that other buildings are drawn in relation to in terms of height; thus, be as accurate as possible so that subsequent buildings in the scene look realistic.

The construction of the buildings progresses quickly after the first one is in place. Create the second building right next to the first one, and keep the height-relationship similar to one another [6.12].

Figure 12 Create the buildings by using the height of the original building.

I went around my Union Square sketch creating each building this way [6.13]. The more buildings you create, the easier it gets.

Figure 13 Creating the buildings gets easier as you populate the scene.

After the buildings have been extruded, you should look them over and adjust the heights so that the buildings don't appear too small or too large compared to the real street they are on and compared to the other objects you will need to add to the scene later [6.14].

Figure 14 The completed scene of buildings.

With the majority of the buildings completed, you can start working on smaller, more detailed objects, such as garbage cans, street lights, signs, benches, and other objects you photographed [6.15–6.18]. If you want, you can also use 3D clip art from CDs or you can search for 3D models online.

Figure 15, Figure 16, Figure 17, and Figure 18 You need to create several models to make the city look realistic.

After you create the models, check each one with 3ds max's Poly Count tool (or use another application). If necessary, reduce the geometry by deleting some of the models' parts or by using the Optimize modifier on the model [6.19–6.20].

The Optimize modifier is also part of the Modify tab, and you can remove polygons from any 3D object with it. I don't recommend using the modifier if you are rendering or animating. Remember that size doesn't matter in these cases. Using the Optimize modifier speeds the redraw process, as there are fewer polygons to redraw after you have used it.

Figure 19 The models with a poly count of 2,045 before the Optimize modifier has been applied.

Figure 20 The poly count is reduced by 602 after applying the modifier.

The Poly Count tool is in the Tools tab in 3ds max. This tool opens a dialog window that shows you both the polygon count of a selected object and the polygon count of the objects in the scene. You can also set a budget value for your scene and the objects in it. After you set a value, an incremental bar displaying various colors slides across the dialog window indicating how close you are to exceeding the preset budget value. This tool was created for the game industry, but it's perfect for creating low-bandwidth content, such as Shockwave 3D files.

After the models are constructed, you can texture-map the photographs, but before you do this, the photos need to be cropped and edited.

Editing Photos to Create Textures

After you have scanned the photographs on to the computer (unless you digitally shot them) they need edits or retouch ups before they can be called textures. Texture clean-up work is a time consuming and tedious process that, in this case, takes longer than building the models. Depending on the number of buildings you construct, you could edit hundreds of images with each needing color correction, cropping, rotation, and sizing.

The photographs I used were digitally shot with a Canon D30 to prevent the need for scanning, and to save time. Each image was opened and edited using Photoshop 6. First, I corrected the color by punching up the brightness and contrast. To do this, I used the Auto Brightness and Contrast option. You can see the difference [6.21].

Figure 21 Color correction was applied by adjusting the brightness and contrast of the photograph.

Next, depending on the photographs, the perspective may need to be adjusted to compensate for angles that aren't perfectly perpendicular to the face of the building [6.22].

Figure 22 The angle of this building was photographed at a 90-degree angle; however, as you can see, the angle wasn't perfect.

You can adjust images using the Transform Distortion tool. You can also push and pull on the handles of the images to bring the top of each building closer in perspective and push the bottoms out further. The time spent on editing your images is worth it. Minor edits to the textures can be the determining factor in whether or not a scene looks real.

After the Photoshop work is complete, the images appear to be transformed into realistic looking textures [6.23–6.24].

Figure 23 Before the images are edited.

Figure 24 After the images are edited.

After you have edited the photographs, the textures are ready for texture mapping in 3ds max.

Texture Mapping

The final step in making things "look pretty" is the application of the textures to the buildings. In 3ds max, this is an easy process. The textures of my photographs were saved in Photoshop as JPEGs with a maximum quality setting of 12 in the baseline format. The images were also scaled to the size of 512X512. This is going to be the maximum size that will output to Shockwave 3D.

Figure 25 Start applying textures to your buildings.

In the Material Editor, name each of the textures. As stated previously, make sure that the materials and textures have different names. I have encountered problems where textures have been switched in Shockwave 3D, but looked fine in 3ds max. Giving everything a unique name in the Material Editor fixes the problem. In the case of this project, I used simple names, such as building01, building02, and so on.

Next, the textures are applied to each building. This is an easy process; however it can be tricky remembering what texture is associated with what building. If you mix up them up, you run the risk of your scene not being photo realistic. When I completed the project, I had to use color prints of Union Square as references while I was applying the textures. You might consider using prints as well. Another option is to name the textures similarly to the buildings they are applied to ensuring you don't lose track of your files.

After each texture is applied to the correct building, you need to apply the UVW Mapping modifier, which is located in the Modifier tab. Set the mapping type to box or cubic. Some of the textures will also need to be squeezed around the buildings. Use the Z alignment fit button to do this.

Everything looks beautiful, except there is now one problem with box mapping the textures that are on the roof of the buildings. If you construct a city scene the way I did, you will run into the same problem. This is the trade-off for using a faster method of creating so many buildings and texture maps. For the purposes of this exercise, go with this easy solution. Cap the roofs of the building with simple pieces of geometry. These cover the textures and allow for different colors on the roofs of the buildings. Note that the colors do add more polygons to the finished Shockwave movie.

Now, let's add a realistic sky to make this scene even more interesting. To do this, you have to create a giant sphere that surrounds the entire city. Make sure that the sphere encompasses all of your lights and the camera. Generally, for a sky, I would only use half of a hemisphere; however the ground plane in this prototype is not extended anywhere near the horizon line. If you use half of a hemisphere, half of the sky will look black to the users as they approach the city. Thus, use the full sphere.

The sphere is texture-mapped with a cloud texture that comes with 3ds max. The sphere's "normals" need to be flipped inside out. The normals represent the tangent direction that the texture mapping, spectacular highlighting, reflections, and so on, are facing relative to the camera position. In this case, the city is inside the sphere, so we want the texture to map inside it rather than outside it. In 3ds max, you simply select the sphere, go to the Modifier list, and then add the Normal modifier. Click Flip normals. The sky is born, and you can now export the Union Square virtual city tour beta to Director.

To learn how to export this movie into Director, refer to chapter 6 of Shockwave 3D.