Creating the Crossroads

This is part of a series of tutorials that follow us through the process of creating several products.


For this particular project we are creating a Renaissance Faire venue for the placement of Craft Booths, Guildhalls, Games, and all the supporting props and costumes that might appear in a Faire setting. To do this we needed to create a consistent visual style and a way of working that would support our ultimate goal of building a series of places that felt like they belong together.

Part of creating an integrated style meant that we had to work within the limits of what is achievable inside IMVU, but still push at the boundaries of what is artistically possible.

To begin with, we create an outdoor setting that would give the illusion of being connected to a larger world than could easily exist within the Polygon limits of what we consider a 3D Room product. To do this we have built an environment that focused a lot of detail and complexity at its center and less at its distant edges. Rooms can be anything, but they still are limited by how much geometry can be included within them.
We created an Outdoor Forest scene, one that gave the illusion that you were in the center of a Crossroads, with paths leading off in four directions. Later we will suggest that these various paths are going to eventually meet with other places Rooms, but for now we have the challenge of making a natural setting with as few Polygons as possible. This can be hard because natural places tend to feel asymmetrical and organic, and that is tough when you are limited to only a few thousand triangles from which to build.

We started with two Planes, one on top consisting of an 8x8 square grid, and one below made of 12x12 squares. Because we will be using the top layer to place Furniture, it needs to be perfectly flat. Although we could use only a one square grid for the Flat Plane, we wanted to include some soft Vertex lighting on the ground surface and only additional Geometry will allow that to work properly.
Selecting the lower 12x12 Mesh, we pull up land masses through the upper Mesh. We use a "soft selection" so that we don't have to pull each Vertex up individually and massage as we go. Once we are happy with the look of these Hills we can Attach the two Planes to each other and delete any unnecessary Geometry underneath.
When creating the textures for the terrain, we wanted to create a more organic transition that draws attention away from the hard edge that is created when the two Geometry Planes meet. To do this we created three Textures, a Tiling Grass Texture, a Tiling Dirt Texture, and a Transition Texture (made using the previous two Textures).
Note how relatively flat the Textures are... this is actually on purpose since Textures with a lot of detail and contrast tend to create noticeable repeating patterns when Tiled. We applied the Tiled Dirt Texture to the Flat Plane, and the Grass Texture to the "Hilly" Plane, then individually applied the Transition Texture where the two Planes meet. Although this takes a little more time to Map, the results are worth the effort. In this case we have suggested a slight Mud Embankment just below the grass in the Transition Texture. This does a better job of suggesting that the Grass areas are elevated for a more naturalistic reason, rather than being merely two carpets meeting on an uneven surface.
The last thing we do is apply vertex shading to the terrain square. We do this by flooding the entire surface with a darker tint then erase the highlight. This will suggest light falling through the leaves of the Trees we will soon be placing. You can see why we added the additional Geometry to the Flat Plane. If we had not, the Vertex shading would not have blended properly as it transitions from the Rolling Grass Hills to the Flat Dirt areas.
Now it is time to create the Trees. Like the terrain, we want to make sure that we get a lot of mood and variety without too much Geometry. To do this we create some fairly simple cylinders with branches extending in several directions at the top. A lot of the detail will exist in the Texture we apply to it, but we also want to make sure that some of the organic quality comes from the Geometry as well.
It can be really challenging to map Textures to organic surfaces, so we will often apply the Textures before we attempt to torque or twist the Geometry.

With the Trees, we made sure to Map the vertical Texture to the more symmetrical Tree model. Only after we were happy with how the Textures were applied did we start grabbing sections of the Tree and start twisting them around. This does stretch the Textures a bit, but it also gives me a more organic result.
To create variety in my Forest of Trees we will squash and stretch each duplicated Tree Trunk to give the illusion of variety. It is actually amazing how much diversity you can create with relatively little effort. We will also pull on the Verts at the base of each Trunk to better help it conform to the uneven surface of the Hilly Terrain.
Leaves on Trees can be tricky. You want the illusion of density, but you also want to avoid creating something that includes too much Geometry. To create the Leaves on the Trees we started with a Modular Mesh that we could use to construct a variety of Tree Foliage types. This model consists of a solid central core (or pillow) and has "wings" extending from several of the hard edges.
We have created a Base Leaf Texture and two Opacity Maps (each will be saved as their own Material and .xrf file) . The body of the Leaves uses the first mostly Opaque Opacity Map, the second represents the edges of the Leaf Clump. The goal here is to create something organic enough that it doesn't draw attention to the simple Geometry that it's built from. In the example on the left you can see what the finished Clump of Leaves looks like. Once the Leaves are Clustered over the Trunk they will have a more realistic quality.

This final Tree model is built using seven of the above Leaf Clusters. Although not completely realistic, it certainly does the job, especially as a background element in our environment.

Another even less Geometry intensive option is to create a simple Tree created with a Bouquet of Foliate Flats. Although less elegant, these do the job of adding density to your Forest with less cost than the cluster option. In our scene we use these as purely secondary filler objects that help break up the larger repeating Tree Trunks.

Artistic Note
This is a good time to talk about the artistic choices we are making in the building of our scene.
Although we might have been able to find photographic reference for many of our Textures, we have purposely chosen to Paint all of our Textures. One way to insure that all of the various pieces that go into your scene are cohesive is to have full control of both the Color Palette and eventual appearance of the Final Textures. It is also important to point out that our Textures have a hierarchy of their own. You may have noticed that both the Grass and Dirt Textures are really quite neutral, while the Leaf and Tree Textures are more complex, in both color and contrast. This is completely on purpose. By deciding what will draw attention and what will fall into the background, we have more control over the actual experience of those members visiting it!
Unlike a free-roaming virtual world like World of Warcraft , IMVU is made up of static settings, or Rooms where Avatars can meet and socialize. You can think of these Rooms like Theater or Movie Sets. For us to create large environments we need to suggest complexity in the distance without actually building that detail out of Geometry. In the case of our Crossroads scene, all of our detail and complexity is at the center of the Room, and all outlying areas are made up of Backdrops or Flats.
Surrounding the inner environment, we wanted to imply that the Forest Trees continue, but we didn't want to create it using reference that looks unlike the environments we have built for its center. To create the surrounding Forest we rendered our central Trees in various positions then created a 2D panorama in Photoshop. We generated an Opacity Map to allow you to view the Sky Backdrop, which comprises the outer wall of our scene.

For the Sky, we have purposely created a Warm and Subtle Backdrop that Slowly Scrolls. This is to create atmosphere without drawing attention to itself. We then set the Ambient and Fog settings to the same color range to give the illusion that the light created by the Sky is affecting the entire environment.

With all the models built and Textured, now we can add the Furniture Nodes. Since the only flat area of my model is the paths, we are going to limit our Node placements to those areas. We could place Nodes on the Hills for additional Tree products, but since the surface is uneven everything else placed on them won't look good.
For Avatar Standing Nodes, we have just scattered a few on the path area. Since many Furniture products include their own Avatar Nodes we will allow them to create additional places to stand or sit. We will also make sure to include lots of extra Avatar Standing Nodes with each prop we create for this new series.
Once everything comes together we can check to see if all of our ideas are working as we had planned. The colors should be complementary but not add so much variety that it becomes visually confusing. The detail of the Tree Trunks and Leaves draw attention and the Simple Ground, Grass, and Sky Textures visually support rather than compete. The Fog and Light settings are working well with the colors in the Textures to create a sense of depth and atmosphere. All the foreground elements contain just the right amount of detail and complexity with the background Flats subtly suggesting this same complexity without having to create more Geometry to achieve this look. This works nicely, and since this is ultimately just a Backdrop for a lot of Furniture items, it is a good start. Our next challenge is to create products that work well within this setting. We will also explore other ways to attain a similar effect but with different environmental colors and settings.
© 2017 IMVU All rights reserved