Like a Rock

The Cliffs of the St. Croix

Some cliffs of the St. Croix

For this post, I thought I’d focus on the pipeline that is involved with making a fairly common asset found in my game – ROCKS.  Due to the outdoor level taking place on the St. Croix River, I’m trying to stay as true as possible to the natural environment one would find on that river.  For anyone who has traveled to the St. Croix, they probably know that the lower St. Croix (as you get closer to Stillwater) is lined with beautiful cliffs that surprise you around each bend in the river.  Sometimes it is a small ledge that creeps up on you, while the heights of other towering cliffs invite – or even dare – you to jump off its ledge into the waters below.  Due to this diversity, I knew I couldn’t just make “one cliff to rule them all”, but instead would need an assortment of fat ones, skinny ones, tall ones, short ones, big ones, small ones, and (more often than not) oddly shaped ones.  People who play my game will be see quite a lot of these rocks, so I knew that giving special attention to these guys was important, even if it did seem counterintuitive to care so much about them 😉

A mirror of the same cliff, found two different times in

A mirror of the same cliff, found two different times in “The Vanishing of Ethan Carter”

Since this was my first round at creating a rock for the game, I decided not to attempt an entire giant cliff, but instead approached it from a modular standpoint. If done right, a game level can have multiple repeated objects in the scene, without the player even realizing it (unless they are really REALLY looking for it).

A game that does this well is The Vanishing of Ethan Carter (above).  Through flipping, rotating, and scaling, they achieved a lot of visual diversity at a low-cost. In fact, when I started looking for it, identical rock formations and textures began showing up throughout the game. If you haven’t yet played this game and are a fan of first-person adventure/exploration titles, it comes highly recommended (ironically, it is supposed to be set in Wisconsin, yet it is made by a European studio!).  The game is actually so gorgeous that as a game artist it depresses me every time I play it (the rocks are so real you’d think you’re looking at a photo (and it turns out that you actually are!)). They didn’t actually do as much modeling as you’d think, but instead took hundreds of pictures of rocks and turned those photos into 3D models and textures (using photogrammetry). I’ve got a friend and fellow game design colleague at UW-Stout, Seth Berrier, who focuses a lot of his research in this field. He’s given a number of really interesting talks that tie this advanced tech into popular uses like game asset creation and archival preservation.

3_rocks_cliffs_ideaboard

An idea board of St. Croix pictures, created to visualize silhouettes and scale for Tombeaux

To begin, I made out an idea board (above), so that I could start envisioning how these rocks would be put together in the game. For this go around, I aimed to create a medium-sized rock that could be stacked and combined with others to create a larger whole. I also wanted to keep it below 1,000 tris (tessellated triangles created for the game engine render it on-screen), so I was going to depend a lot on the maps I’d be placing on the object.

My preference for a 3D modeling program is Autodesk Maya, which is basically an all-in-one poly and NURBs modeling program that incorporates a great deal of other features like rigging, animation, effects, and rendering (to name just a few!). I knew that to get a believable rock, I’d need to also use Pixologic ZBrush, organic sculpting software that uses a pen tablet, and attempts to simulate working with clay.  To begin, I created a polygon cube in Maya and smoothed it twice, to make a more pillow-like structure (below).  Starting in Maya allows me to establish good topology right away,and sets up my pipeline for going between Maya and ZBrush using .obj files.

Starting out in Maya (top) and then on to ZBrush (bottom)

Starting out in Maya (top) and then starting to form the silhouette in ZBrush (bottom)

Once the mesh was exported from Maya, I imported it into ZBrush and began working.  As with any artwork, I began with broad strokes before diving deeper into detail.  I made deep cuts into the rock, using a brush that simulates cutting butter with a wide knife (almost more like pressing).  I also continually went back over specific areas, building up the digital clay again (see above). Since ZBrush is such an extremely powerful tool in a modeler’s bag of tricks, one can get lost for hours in the little details, so I needed to continually remind myself that this part of the pipeline was specifically focused on silhouette – both due to the number of these that I will need to create and the simple fact I was working on a ROCK and not Michelangelo’s David, I did not need to dive too deep into sculpting the details – that can be shouldered by the textures. I relied mainly on a small collection of 3-5 brushes to make the chiseled and broken effects I was going for.

Near the end of the sculpting phase in ZBrush with a clay polish pass

Near the end of the sculpting phase in ZBrush with a clay polish pass

Once I was happy with the shape and overall rough texture of the object, it was time to bring this high-detail mesh down to a manageable level that could be worked with in the game engine.  As a reminder, I was shooting for <1,000 tris for the object, and the current number in ZBrush was around 630,000 tris (which is actually fairly low for a model in ZBrush).  I lowered the polycount through ZBrush’s Decimation Master plugin, which brought it down to just under 1,000 tris, and I was ready to bring it back in to Maya (below). I held on to the higher resolution model, as I’d use it later on to create the details in the normal map. A normal map is a very important element to any game that is aiming to show high amounts of detail on the surfaces while also keeping the total polycount low. It is an image that catches light in specific angles, tricking the player into thinking that there is surface detail or texture on the mesh, when it is all really just a trick of light and image.

Final Decimated Mesh in ZBrush and lo poly version in Maya

Final Decimated Mesh in ZBrush and lo-poly version in Maya,

Now that I had the silhouette of the rock formed, it was time to work on how the textures would be applied to the mesh. While some people prefer other packages or plugins for this, I’m a Maya traditionalist, so I did it the old school “manual” way.  Essentially, I cut along some of the mesh surfaces, unwrapping the mesh from a 3D object to lay it flat on a 2D plane (below).  This would allow me to take a 2D image (created later) and “wrap” it back up around the mesh the same way I unwrapped it. This UV map data also will tell other programs how to read the mesh’s connections to images, materials, and textures.

Laying out the UVs in Maya

Laying out the UVs in Maya

Once finished with the UV stage, it was time to bring all of what I had worked on to this point (lo-poly 1K mesh in Maya, hi-poly 630K mesh still in ZBrush, and flat 2D UV coordinates from Maya) into the third tool in my pipeline, xNormal.  xNormal is a free piece of (Windows-only) software that does a wonderful job of reading the hi-poly mesh details and projecting them on to the lo-poly mesh, by placing them flat on to the UV coordinates. It creates normals, ambient occlusion (or AO), specular, and many other maps as well, automagically for you. After baking out a normal map and ambient occlusion map, I brought the rock into a fourth program, Marmoset Toolbag 2.  While Maya can display the normals just fine, Toolbag does a great job of simulating closer to how the game engine will present it to the player with HDR lighting, real-time rendering, and skyboxes.

Baking the maps in xNormal and previewing in Maya and Marmoset Toolbag 2

Baking the maps in xNormal and previewing in Maya and Marmoset Toolbag 2

For the purpose of the game, these normals looked good.  I was still going to be adding a few more maps on top of this, which will give color, detail, and specular highlight to the object.  All of these things involved me working in Photoshop with tiled textures.  The first texture I was going to take on was the albedo (formerly referred to as diffuse, before Physically Based Rendering came along), which handles the color properties of the texture.  Using cgtextures.com (a site bookmarked by every texture artists out there), I found a small tiling map of a smooth, worn rock face that I thought might look good on my asset (top left in below pic).  Since I wanted my overall texture size to be 2048 x 2048, I tiled this 8 times and did some image editing to it, resulting in the main tiled albedo texture for my rock (top middle in below pic). Finally, to create my main normal map, I used the map created by xNormal as a base, and then turned my albedo texture into a normal map to overlay on top of it (top right in below pic), using the sixth program in the pipeline, NDO (a Photoshop plugin). NDO (by Quixel) is another automagic program, using presets to turn your images into highly detailed normal maps.

8_rock_textures

Various Maps that go into the texturing the rock, using xNormal, Photoshop & NDO

In order to achieve the detail I wanted for players to see when they were close to the rock, I needed to also create a secondary normal map, as well as a specular map.  The game engine I’m using supports secondary maps, which go the extra mile in providing realism to a scene.  I went through the same pipeline as above to create this, based on a higher-contrast image I found on cgtextures.com and using NDO to create the normals (bottom midde in above pic).  Since I didn’t want my rock to be too shiny, I toned down the specular map to a dark grey, so only certain areas would catch the light in subtle ways in the engine (bottom right in above pic).

Now that I had the lo-poly mesh and five different texture maps (Albedo, Normal, AO, Spec, and Detail Normal), it was time to bring it in to the seventh and last software program in the pipeline, the Unity 5 engine.  While the procedure of getting the textures on the rock were fairly straightforward, I needed to spend some time tweaking the render settings and lighting for a bit to achieve the results I wanted. I’m still not 100% happy with the lighting, but it will have to do for now. So as you can see, the process for creating assets from scratch (which is unfortunately rare these days) is somewhat tedious at first, but once one gets into the flow, things can go relatively quickly.

Final Rock Asset in Unity 5 (detail normal/spec in corner)

Final Rock Asset in Unity 5 (detail normal/spec in corner)

If you have any tips or tricks (or questions!) for asset creation, feel free to share them in the comments below.  Thanks for reading, and rock on! (sorry)

Advertisements

One thought on “Like a Rock

  1. Pingback: Art Update | Tombeaux

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