Creating and Importing Artwork for Non-Artists (tutorial)

Purpose

This tutorial is for a general audience, but it is geared towards those of us who are neither programmers nor artists. If you're not afraid to learn some basic features in a few freely available tools, you can be successful in creating attractive-looking 3D artwork for your virtual world. We'll even cover one way to make the new artwork interactive.

The key idea we'll focus on in this tutorial is modeling objects based on digital photographs. By way of example, we will be using photographs of a vintage radio graciously donated to the Wonderland community by Curtis Spencer, a vintage radio connoisseur.

Once you complete this tutorial, you should be able to create models of relatively simple objects based on your own photography.

Prerequisites

Here's what you will need to complete this tutorial:

• Access to a running Wonderland server (v0.5, feature freeze or later - download binaries)
• A computer that will run the Wonderland 0.5 client (can be the same machine that is running the server)
• A copy of the example artwork (provided below)
• A copy of Google SketchUp (free)
• Knowledge of SketchUp's navigation tools plus the line tool, the circle tool, and the extrude tool

I suggest working through the excellent introductory tutorials that Google provides within the SketchUp application to learn the basics. You can find more training resources on the Google SketchUp web site.

Downloading Example Artwork

Begin the tutorial by saving one of the following artwork collection files to your computer:

radio.zip

radio.tar.gz

The first option (radio.zip) is the correct one for most Mac and Windows systems. Typically your computer will automatically prompt you to uncompress or "expand" the collection. In it you should find the following files:

• Clinton153.jpg (76 KB)
• front-texture.jpg (164 KB)
• front.jpg (164 KB)
• radio-wood-texture.jpg (48 KB)
• side-texture.jpg (140 KB)
• side.jpg (128 KB)
• top-texture.jpg (152 KB)
• top.jpg (124 KB)

You will need these files in order to complete the tutorial.

Preparing the Photographs

This section explains what is required in terms of photographic images. If you use the example artwork, all the work of preparing the images has already been done for you, but it's still a good idea to read through this section as it explains how we'll be using each of the image files.

To be useful for modeling, the photographs must be taken at the correct angles. You will need one main photograph plus a series of others that capture each face of the object you wish to model. For the main photograph, you want to capture an image of the corner of the object. Curtis' photograph of the Clinton Vintage Antique Tube Radio is at the perfect angle:

When we model the radio, we will use this main image as a template to create the 3D shape of the object.

While you can create a model from just a single photograph like this one, you will get the best results if you also photograph every face of the object. These photographs should be taken completely straight on. Here's the side photo Curtis provided:

You'll use these straight-on images to create "textures" to apply to the faces of the 3D model in order to make the object look like the real-life object. This technique allows your objects to include realistic details, like the intricate radio dial, that would be very difficult to model in a 3D tool.

Once you have a set of photographs that includes a main image plus an image of each face, you will need to use an image editing tool like The Gimp (free) or Adobe Photoshop Elements (~$140) to clean up the images and create the texture files (this step is not necessary for you to do for this tutorial). For example, to create the texture for the side of the radio, I started with Curtis' side photo above, and then simply cropped the image to remove everything but the wood paneling:

I also needed to rotate the image very slightly to get the bottom and top to be perfectly horizontal. Aside from cropping and fixing problems with skew, I only did a small amount of additional editing with the set of radio photographs. The top face photo needed some tweaking:

First, the color didn't match the other faces that well. I increased the saturation and made the colors a bit "warmer" (this makes them redder). More importantly, I had to rotate the image 90 degrees so that it would import into SketchUp at the correct orientation. The final texture looks like this:

The other editing I did was on the front face:

I cropped the image to include only the wood paneled portion and then I used the rubber stamp tool in Photoshop Elements to remove the three black dials. The resulting texture file looks like this:

I removed the dials because we're going to be creating those dials as 3D objects since we want them to stick out from the body of the radio as they do in real life.

The last thing you want to do is create one or more generic textures to use to fill in the back or bottom or other places. I created only one generic wood texture by cropping a square of wood from the side face photo:

In finding an area to grab for one of these textures, try to find a spot that has a regular pattern and crop it at a place that makes sense. For example, if the texture is brick, crop right in the center of the mortar lines. When SketchUp applies this type of small texture, it will tile the texture as many times as needed to fill the face that you apply the texture to. This means you need to think about what the texture will look like when tiled.

Don't worry about making every last texture before you begin. I usually make the textures as I find I need them.

Model the Radio Using SketchUp

Now that the main photograph and the texture files have been prepared, we're ready to start modeling in 3D. We're only going to be doing a few simple things in SketchUp, although there are certainly many enhancements you can do to make the model fancier. First, we're going to use the "Match Photo" tool to set up SketchUp's X, Y, and Z axis to match our photograph. Then we're going to model the radio using only the line tool, the circle tool, and the extrude tool. Then we'll apply the textures we created in the previous step.

Setup

• Download all the radio images and put them on your desktop or in a folder on your computer.

• Open Google SketchUp

• Delete the person standing at the origin point by clicking on it and pressing the "Delete" key

Match Photo

SketchUp's "Match Photo" feature allows you to use a photograph as a template for creating a 3D model.

• Select "Import..." from the File menu

• Navigate to the location where you downloaded the radio images. You may need to select "JPEG images (*.jpg)" from the "Files of type:" menu.

• Select the one called "Clinton153"

• Find and select the "Use As New Matched Photo" option (it's in different locations on different platforms)

• Click "Import" or "Open" to dismiss the dialog box. You'll see something like the image below. It looks intimidating, but it's not too bad once you understand what's going on

• Locate the yellow square that's near the bottom left corner and zoom in on it

• Drag the yellow box as exactly as possible to the corner of the radio just above the molding that makes up the base of the radio (we're going to skip the base for this introductory tutorial). TIP: If you're like me, you sometimes click in the wrong place. If that happens in this mode, all the lines and boxes will mysteriously disappear. To get them back, select "Match Photo" from the Window menu. In the dialog that appears, click on the little flower-like icon to the right of the "+" at the very top of the dialog window.

• Zoom out so you can see the whole model again by clicking on the "Clinton153 (2D)" button just under the tool bar.

• Now you need to position the red and green horizon lines. Start with the dotted green lines. You move these by dragging the squares at the end of the lines. Position one along the top of the radio and one along the bottom of decorative face place, as shown in the image below. Now position the two red dotted lines along the side of the radio. As you move the lines, notice that the red and green axis lines emanating from the yellow square are aligning with the radio molding. The blue y-axis line should also be aligning with the corner of the radio. Keep adjusting the red and green dotted lines until the three axis lines emanating from the yellow square look like they are correctly aligned with the photograph. You may need to zoom in and out a number of times to check the alignment. Spend some extra time on this step. Being precise will make a big different to your eventual model.

• Click "Done" in the Match Photo dialog. The horizon lines will disappear and you're ready to start modeling.

• Now is a good time to Save your work.

Create the Basic 3D Radio Shape

• Select the pencil tool. Start at the origin and draw a line along the green axis, ending it precisely at the right-hand corner of the radio. Continue drawing a line up the far side of the image parallel to the blue axis. End that line precisely on the top right corner of the radio. Tip: Zoom in before you click to end your line segments to be sure you're exactly on the corners.

• Complete the front face of the radio by drawing another line along the top edge of the radio and a final line along the left edge. You should now have one white face.

• In a similar manner, use the pencil tool to draw the side face. Always begin drawing your line segments at the origin when possible and remember to take advantage of SketchUps inferencing capabilities to ensure that your lines are aligned with the axes and the "from points."

• Add two last pencil lines to fill in the top face.

• Select the orbit tool and rotate your model so you can see the back where the remaining three faces should go.

• Use the pencil tool to fill in the missing lines. You should only need three more lines to enclose the 3D shape.

• Save

Add the Knobs

• Click on the "Clinton153 (2D)" button just under the toolbar to reposition your model with respect to the photograph.

• Select "Face Style --> XRay" from the View menu to temporarily reveal the photograph behind the faces you just created.

• Select the circle tool. Position the center of the circle over the center of one of the knobs and drag outward until you get a circle approximately the same size as the knob. Be sure the hint says "on face."

• Select the arrow tool and click on the outline of the circle you just created to select it.

• Copy the circle and select paste. With the pasted copy attached to your cursor, hover over the bottom edge of the first circle. This will set a guideline at the bottom edge of the circle so that you can place the second circle precisely aligned with the first one over the second knob in the radio photo.

• Now paste again, repeating the process to get a guideline for aligning the bottoms of the circles. The photograph serves as your guide for where to place the circles. You should end up with three nicely aligned circles.

• Select the Push/Pull tool. Place the cursor over the first circle and pull 1' (Yes, one foot is very large for a radio dial! We'll fix the scale later)

• Pull the other two dials exactly the same amount. It's often easiest to get the correct value by typing it. Simply type 1' and press Enter. You should now have three radio knobs.

• Go back to the View menu and uncheck "XRay" under Face Style

• Color the radio knobs black by selecting "Paint Bucket" from the Tools menu. Select "Colors in Model" or just "In Model" from the drop-down menu. You should see a black color chip. Select this one.

• With the paint bucket cursor, click on each knob face and then the side of each knob to completely color the knob black. You may need to rotate the model to paint the sides of the knobs.

• Save

Make the Knobs Separate Components (optional)

If you would like to add more advanced functionality to your radio using programming, or you are working with a programmer, you can make your knobs individual components so that each knob can be programmed to do a different action, such as play a different radio station.

• Click on the face of the first knob, and then shift-click on the side of the knob to select the knob's surfaces

• Right click on one of the selected surfaces and choose Select --> Bounding edges. Your whole knob should now be selected

• Select Make Component from the Edit menu and type in a Name, such as "knob-1", and click create

• Follow the steps above for the second two knobs, giving each knob a unique name

Add the Textures

• Select "Import" from the File menu, navigate to the directory with the radio photos, and select "front-texture.jpg." Be sure to select the option that says "Use as Texture" (the placement of this is different on different platforms)

• You should see the front face of the radio attached to your cursor. Align the cursor with the origin and click and drag until your cursor is over the upper right corner of the face of the radio. The tip should say "endpoint" when your cursor is in the correct location. Don't worry if the texture does not appear to fit the face exactly. It should be close enough.

• Add the side and top textures by rotating the model so that you can see each face more or less squarely and then import the textures. You should use "side-texture.jpg" for both sides, and "top-texture.jpg" for the top.

• Now add the back texture. This is a little different since there is not a specially made texture for this face. Import the "radio-wood-texture.jpg." Instead of dragging so that the texture fills the entire face, make the texture fill just a small corner of the back face. When you lift up on the mouse button, the texture will tile and the back will look like it is made of wood strips.

• Optionally add the wood texture or a plain color to the bottom of the radio, if desired.

Finishing Up

• Let's fix the scale of the model. First orient the model so it is in approximately the same orientation as the original photo. Now, click the Tape Measure tool. With the tape measure cursor, click on the origin of the model. Now move the tape measure up along the blue axis until you get to the top of radio. Click again. Without doing anything else, type 3' - your typing will go into the "Length" box in the lower right corner and press Enter or Return. A dialog will appear asking you if you want to resize the model. Click "Yes." While 3 feet is a bit big for a radio, this size will make it easier to find when you import it into Wonderland. You can resize it once you bring it into the world if it's too big.

• Here's what your finished model should look like:

• Save

• Select "Export --> 3D Model..." from the File menu. Now you can save your model as a Google Earth (.kmz) file (this stores the model in the Collada format). You will be able to import this type of file into Wonderland.

• Quit out of SketchUp

Import the Radio into Wonderland

Now that you have a Google Earth (.kmz) version of the radio, you can import the model into Wonderland and add some sound to it.

• Start your Wonderland client and log in. This tutorial requires a current 0.5 (or greater) release of Wonderland.

• Walk to the location where you want to place your radio

• Find the .kmz file that you just saved and drag and drop it into the Wonderland window.

• If all goes well, your radio should appear in front of you.

• Right click on the radio and select "Edit" to get the toolbar for moving, resizing and rotating the model. See the World Assembly Tutorial for more details on how to use these tools. I choose to enlarge the radio and place it on top of a garden wall in the default Garden Arches world.

Add Sound to the Radio

Now for the fun part. Using Wonderland properties, you can make your radio play real music.

• Right click on the radio and select "Properties"

• When the property sheet opens, you should see the "Basic" properties. Change the Cell Name field to "Radio" so you can easily identify it later.

• In the Properties dialog, click on the plus (+) sign in the bottom left corner.

• Select "Audio Capabilities" and click "OK"

• The Audio Capabilities property sheet should appear

• In the URL field, add this URL
  
  
  http://streamer-ntc-aa04.somafm.com:80/stream/1018

• Click "Apply." If you are connected to the Internet, you should now hear music from a Soma FM Internet radio station. If you are not connected to the Internet, you can click on the "Browse" button and select any audio file located on your computer to play instead.

• Now have fun and experiment with your radio. Invite others to listen to the music with you. Below is an explanation of the different settings in the Audio Capabilities property sheet.

Using the Audio Capabilities Property Sheet

As you experiment with changing the settings in the Audio Capabilities property sheet, don't forget to click "Apply" in order for the changes to take effect.

Audio Group
The "Audio Group" field is not needed in this tutorial, but if you decide to add audio to other 3D models, this feature might come in handy. It allows you to group objects together so that the audio playback can be synchronized. For example, let's say you add a non-player character (NPC) and a music box, and you want the music box to start playing and the NPC to start speaking at the same time. When you add the Audio Capability to each of these two objects, you can specify the same Audio Group name for each, for example, "WelcomeGreeting." All objects with the WelcomeGreeting group name will play at the same time.

File
Use the Browse button to find an audio file on your computer. When you Apply the changes, your audio file will get uploaded to the server so that everyone can hear this audio. This is a good choice to use if you wish to record dialog for your virtual characters. Use any audio recording program on your computer to record, and then save your recording as either an .au or .mpg file.

URL
The URL field allows you to specify an audio stream from the web. Keep in mind that this must be a link to the actual audio stream, not to a web page that plays audio. Typically, on Internet radio web sites, the web pages embed the actual URLs in the scripts used on the pages, so it takes some digging to find the source URLs.

Volume
The volume slider allows you to set the default audio volume. Users, however, can change the volume by right-clicking on the object and selecting the "Volume" option from the context menu.

Play
This set of choices governs when the audio will play. In the case of the radio, we left the default choice "Always" selected. If you rather the audio did not always play, you have two other options. The "When first avatar is in range" option causes the audio to trigger when an avatar walks near the radio. It will continue to play until all avatars are completely out of audio range, at which point the audio still stop. The "Manually" option allows users to right click on the radio and select "Play" from the context menu to turn the radio on, and "Stop" to turn the radio off.

Extent
The extent of the audio refers to the area in which an avatar can hear the audio, that is, it defines when the avatar is "in range." Audio extents are circular so that the audio can be heard from all directions. The diagram in the Audio Capabilities property sheet shows the audio source in the middle of the circle. The outer ring represents the full extent. You can increase or decrease the overall extent by adjusting the radius of the circle. If you increase the radius, you'll be able to hear the radio from farther away. The units specify meters in the virtual world.

Full Volume Area
In Wonderland, most sounds gradually increase when you approach the sound source. This feature is known as distance attenuation. When you are fairly close by to the source, you hear the audio at full volume. The "Full Volume Area," represented by the dotted circle in the diagram, can be changed to increase or decrease the point at which the audio is heard at full volume. This area is expressed as a percentage of the overall extent.

Characteristics
If you would like the audio to always play at full volume throughout the entire extent, you can change the characteristic to "Ambient." This works well if you want to fill an entire room with audio that is at equal volume no matter where you are in the room. If you select this option, be sure that the extent is set such that an entire space is filled with audio, or perhaps even your whole world. For example, if you want to have the faint sound of birds chirping throughout the world, you could add a bird recording and set the extent to be very large. If your extent is too small, the effect will be jarring because the audio will suddenly start to play at full volume as soon as an avatar is in range.

You will want to keep the "Distance attenuated" option for most audio sources. This provides the realistic effect of audio gradually getting louder as an avatar approaches the audio source and gradually getting softer as the avatar moves away. The fall-off, represented by the outer ring in the diagram, is the area between the full-volume area and the overall extent. You can adjust the fall-off, making it either slower (more gradual), or faster (more abrupt). If you make it slower, you may also need to increase the overall extent to get the effect you want.