How to Make a Skyline for Wonderland

In what may be my city-girl roots showing, I feel uncomfortable in a virtual world that has a never-ending horizon. I need the psychological comfort of a skyline. This prompted me to experiment with creating skyline models for Wonderland. Recall from my last blog post, this sand dune skyline:

Sand dune skyline in Wonderland

I thought I would describe how I made this skyline so that those of you out there interested in creating your own models for Wonderland could give it a try, and hopefully share some models with the rest of us.

Preparing the Texture

The first step is to take or find a nice skyline panorama photo such as one of these Death Valley panoramas generously donated to the Wonderland community by MIT Professor and ace nature photographer, Chris Schmandt:

Death Valley Panoramas

Don’t be tempted to use the higher resolution versions of these photos. The texture file size will be too large to perform well. Once you have a photograph, use your favorite graphics editor, such as Adobe Photoshop Elements, to edit out the sky. In Photoshop, I use the magnetic lasso to select the sky. I almost always have to zoom in and add and subtract bits from the selection to end up with an accurate selection of the sky. Then I feather my selection with a value of "1" to make a smooth edge and delete the sky. In Photoshop, the space that was the sky is now transparent (as indicated by the gray checkerboard pattern in the image below). Some tools, like GIMP, require you to "add transparency" to the image to achieve this effect.

Once you have deleted the sky, save your edited photo in a new file. Assuming that your original photo is a partial panorama like this one and not a 360 degree scene, you’ll need to make sure the image tiles properly. To do this, double the width of your canvas, and paste another copy of the panorama into the file.

Then do a "flip horizontal" on the copy. By having the outer edges of the photo be the same, you ensure that the texture will look correct when another copy of the texture is placed next to it.

Carefully align the two images so that you can’t see a middle seam. You may need to do a bit of image editing to remove any odd artifacts at the seam. Finally, save the final image "for the web" in the PNG-24 format.

Before you leave your image editing application, you might want to clip out a small piece of the image to make a ground texture that matches the skyline. In the screenshot at the beginning of this post, you’ll see that I made a sandy ground plane by using a small portion of this panorama photograph.

Modeling the Skyline

Now on to SketchUp. In SketchUp, create a circle at the origin with a radius of 150 meters. Then extrude the circle upwards to create a cylinder. Usually about 12 meters high works well. Then delete the top and bottom circles so you have just the ring.

There’s a trick I use for importing the texture. Create a "scratch" rectangle someplace in the document that is 12 meters high. Import your image as a texture and apply it to the rectangle. Now delete the rectangle. Select the Paint Bucket tool and navigate to the "Colors in Model" or "In Model" category. You will see a thumbnail of your skyline texture. Click on the skyline thumbnail and use the Paint Bucket to apply the texture to the inner surface of the cylinder. You may need to experiment with different sized circles to get the texture to repeat properly.

Dune Skyline in SketchUp

When finished, save the model and then select File –>  Export –> 3D Model… Make sure the format is set to "Google Earth File (*.kmz)."

If you would like, now is the time to make your coordinating ground plane. While still in SketchUp, you can open a new document and create a circle with the same 150 meter radius. Extrude the circle .02 meters since there can be issues in Wonderland with zero width models. Create a small "scratch" rectangle and import your ground texture and delete the rectangle. Then use the Paint Bucket tool to apply the texture to the circle. For good measure, I also apply the texture to the rim and the underside of the circle. You may find that you’ll need to go back and edit the texture image if it doesn’t look good when tiled. Save this file and export it to .kmz format.

Importing the Skyline into Wonderland

To try out the skyline, consider starting with an empty Wonderland world. To get an empty world, navigate to the "Manage Worlds" section of the Wonderland Server Admin console and click "make current" in the "Empty World" row of the Initial Worlds table. Please be sure no one else is using the server before you do this. Then launch the Wonderland client and log in. Make sure you are standing in the exact center of the world by using Placemarks –> Starting Location.

Next, drag and drop the skyline .kmz file you just created into the Wonderland window. If you started with an empty world, you should also drop in a ground plane with the same or larger radius as your skyline. Again, be sure you are standing exactly in the center when you drop in the ground.

There are several adjustments you may need to make. First, make sure your ground plane is at ground level. Right click on the ground model and select "Edit" from the context menu. Now click on "Details" to open the Details pain. If the "Y" position is anything other than zero, change the number to zero and press Tab. Your ground will now be located at the proper level, giving you a point of reference for adjusting your skyline.

If the skyline is too low, right click on it and select Edit. Using the Details pane, increase the "Y" value to move the skyline up until the bottom edge is where you’d like it to be. One technique is to move the skyline up until you see a gap between the ground and the skyline, as illustrated below, and then lower the skyline until the two surfaces meet.

Aligning the skyline

The second adjustment involves lighting. Right click on the skyline again and select "Properties…" When the Properties dialog opens, click on the "Model Component" item in the Capabilities pane. Then uncheck "Lighting Enabled" and click "Apply." This will more closely approximate the lighting settings used in SketchUp. Do the same for the ground model, if desired. Now all you need to do is add other content to your world, such as the Temple of Horus or an Environmental Home, and you are on your way to having a unique virtual setting.

Temple of Horus against sand dune skyline

Environmental Home against sand dune skyline

Skylines in the 3D Warehouse

If you have created a new skyline that you would be willing to share, please upload it to the Google 3D Warehouse and let us know, preferably by posting a message to the Wonderland Discussion Forum. I have started a 3D Warehouse collection of models appropriate for use in Wonderland worlds.

Models for Project Wonderland

This sand dune skyline, plus the two others from my previous blog post are included in the Skyline collection. Coordinating ground planes are located in the "Floors for Project Wonderland" collection.  I’ll be delighted to add your skyline and coordinating ground planes to the collection. If you do upload to the 3D Warehouse, it’s a good idea to geo-locate your model.  Although it seems silly to associate a location with a model like this one, it is the only way to get both .skp and .kmz files included on the page for the model. Instructions for geo-locating a model are embedded in this help document:

Placing a SketchUp Model in Google Earth

Follow steps 1-6. After that, upload the model using File –> 3D Warehouse –> Share Model… Just be sure that you uncheck the box "Google Earth Ready" in the upload dialog.

I’m looking forward to seeing your creations.

Advertisements

One Response to How to Make a Skyline for Wonderland

  1. petrige says:

    Thank you for an useful tutorial!
    While the principle for creating a skyline model is to put a skylinde texture to the inner surface of the cylinder, I wonder what is your opinion ot use a half ellipsoid could be used instead of the cylinder. That would be to include a texture of the sky in the same model.

    Thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: