Trees, Glorious Trees!

As I’ve mentioned before, Tombeaux has a main narrator character who we hear reading journal entries throughout the game experience. But there is a group that I would argue upstages our narrator, and that (as you probably guessed by the title) is the trees. Before the St. Croix was a river of recreation for fishing, canoeing, and speedboating like it is now, it was a river of pine, acting as one of the nation’s busiest highways for timber in the mid to late 1800’s. During this time, non-logging boats were lucky to get up the river at all, due to the waterway being clogged full of floating logs (or even worse, a logjam that stopped everything in its path). Since the St. Croix directly connects with the Mississippi, and it had what seemed to be an unlimited supply of tall and straight trees growing along its edges, it was a resource ripe for the picking (or chopping…sorry).


L: group of Pinus strobus, R: distribution map of tree (images via wikipedia)

While Tombeaux is not entirely about the logging industry, it definitely does take the player on a journey to see what it might have been like both before and after the timber harvest. Because of this, I wanted to set the stage by creating an old growth forest, with the main silvan feature being that of Pinus strobus, or the eastern white pine. These old growth forests of white pines are nearly impossible to find now, as only 1% remain in North America due to logging in the late 19th and early 20th centuries. This type of pine is the tallest tree found in the eastern (and northeastern/midwest) United States and Canada. With a mature white pine living well past 200 years old, reaching heights of well over 150 feet (while keeping a very straight trunk), and a diameter of 3-4 feet, they were particularly attractive to lumber barons.


Mood Board for reference

After doing some visual research, both online and in person (last post I wrote about my trip to northern Wisconsin, in which I did some bark texture reconnaissance), it was time to dive in to creating this giant beast of the forest, including the many iterations that it might take, such as sawed-off stumps, beaver-chewed stubs, and dead (needle-less) versions (both standing and downed).  Additionally, I wanted to make sure I was creating an environment that felt both native and diverse, filled with other types of trees such as oak and birch. At a later date, I plan to return to the detail meshes and plants, to create native species such as wild celery (an underwater type of river weed/grass), wild rice, ferns, and wildflowers.


One iteration of an eastern white pine, inside SpeedTree

Once I compiled a small mood board, I set out to learn and use a new program that I had been itching to try, called SpeedTree. It is an industry standard tree and foliage creator for both movies and games, and now that it is naturally integrated into Unity 5 and Unreal 4, we will most likely continue to see a great deal of high quality natural environments in the coming years from both indies and AAA companies. One way to use their tech is by paying and downloading high-quality, pre-made tree assets from their store (but what’s the fun in that?!). Another, more creative way is by paying a $19 per month subscription fee to use their modeling/creation software. As a point of reference, two months of paying for the software is actually cheaper than the $39 price tag for a single tree from their store!). Since it is my goal to create as much in my game as possible from scratch, I decided to download the software and start making assets myself.


2 Stumps and 1 Gnawed Beaver Tree in SpeedTree


Bare (Dead) White Pine in Speedtree w/ Bark Detail

Simply put, SpeedTree is my new favorite software. One can quickly and easily create natural assets for a game, using an intuitive, node-based interface that tries to mimic how a tree is naturally constructed. Starting with a trunk, and then adding elements such as roots, branches, and leaves provides for a very smooth workflow. Everything is highly customizable as well, with integrated wind effects, collision capsules, seamless branching, randomizers, break points for branches or trunks, and automatic billboard and LOD (level of detail) creation upon export to Unity.  Once I created a base white pine tree, I was quickly able to create many iterations by simply removing leaves (bare tree) and breaking and capping trees (stumps).  I didn’t even use many of their features, and hope to dive deeper into the program when I use it to create plants and other detail foliage.  Again, I can’t say enough about how much this program has helped my environment-heavy project achieve a great look.


LOD transition feature in Unity (LOD 0 on left w/ 9K tris, LOD 2 on right w/ 2K tris)

Once you bring a SpeedTree asset into the Unity engine, it offers other great options for you to tweak. With the LOD’s that were auto-created/exported by SpeedTree, you can adjust them to your liking in the engine, so that it seamlessly transfers to a billboard at the distance you set. I really like the fact that you can also drag and drop the trees into the scene as objects or prefabs. Since these also have the LOD settings, you could put a hero tree (a hi-poly, hi-detailed tree) in your scene without having to worry about relying on Unity’s finnicky terrain.  With that said, I painted most of my trees on the terrain, as it makes it much easier when you have a large amount of assets to place and randomize.


Here there be beavers…and downed trees…the perfect natural barrier!

Due to my game being on a river, it is important that I have some invisible walls that will stop the player from continuing up and down the river at their leisure. Implementing barriers correctly is tricky, as you don’t want the barrier to scream “HEY, I’M AN INVISIBLE WALL PUT THERE BY A GAME DESIGNER WHO DIDN’T REALLY CARE ABOUT YOUR IMMERSIVE EXPERIENCE THAT MUCH!” (sorry, it is one of my biggest pet-peeves in games). While natural-looking barriers are great, you also don’t want it to be mistaken for just another stick or bush in the game that one thinks they can walk over.  I try to put some purpose behind the walls when possible, which is where things like downed trees, beaver dams, and beaver-gnawed stubs come in to play (plus, it’s always a great way to show off some of your hard work in a more up-close view!).


The view from directly outside the cabin door

While the exterior river scene is hardly complete, I’m happy with the progress I’ve made in the past few days on the tree elements.  So far, I’ve created and placed four iterations of the white pine, three of the birch, and two of the oak. Additionally, I have three white pine stumps, three gnawed-beaver stubs, and three downed trees.  Once I give the same attention to the plants and detail rocks (they are all currently the low-quality placeholder plants that Unity provides), spend some time on the lighting (it is just a single real-time directional light w/ default skybox at the moment), and add some environmental effects like haze and fog, the river will hopefully start to look more like it did 200 years ago.


Looking up to the cabin from the river (underneath a couple towering pinus strobus)


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.


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 (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.


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 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)