TreeCreator Tutorial

Preface

This tutorial explains some tricks and techniques i have used to model my trees which you can find and explore on the asset store – like the birch trees or spruce trees package. I hope that it will help to increase the overall quality of your trees – be it the visual impact or the technical quality as far as performance optimization is concerned. Any feedback is highly appreciated. So please follow the official thread on the forum.

You can download all example files like textures, meshes and final trees from the asset store.

Make sure you read this thread about optimizing the rendering of trees: http://forum.unity3d.com/threads/138929-batching-trees-%96-and-speed-up-rendering

Creating the basic tree model Getting some references As we are going to create a Sycamore tree, start by looking for some references on the overall shape of those trees and their branching structure. Of course there are hundreds of different shapes so just decide which one you will go with. I have to admit that I did not spend enough time on looking for proper references and trying to match a special shape. It wasn’t my first goal to create a sycamore tree but I rather focused on some more general aspects of working with the tree creator. So please be lenient towards me as far as the authentic shape of our final tree is concerned.

Creating the tree

 Creating highly detailed geometry In case you want to model a thin but highly detailed trunk please look here before starting to work on your tree:


 * First step in modeling of course is to add a new tree -> "Game Object" -> "Create Other" -> "Create Tree".
 * As it is always good to have any kind of reference just place one of your characters next to the new tree.
 * Now add a "Capsule Collider" to your tree prefab and adjust its height and width to the desired values: 15m/ 0.5m.
 * Set the "Radius" of the first branch group [which will become the trunk] to 0.5 and adjust the "length" so it will fit your desired dimensions.

Adding Branches


 * Add a second branch group to you tree.
 * Set the "Frequency" to "12"
 * Choose "Whorled" as "Distribution" and set the "Whorled step" param to "3". This will end up in more or less boring distribution of branches but makes sure, that our tree will have a rather full look from any view angle. Check this by looking at it from the top. The individual look of the tree will be added later.
 * Adjust the "Distribution" by editing its curve, pushing both keys toward the center and raising one of the control points.
 * Having a look at the reference photography you will see that the main branches or limbs grow in a rather steep angle keep close to the trunk at their pivot but bent away from the trunk at their top. So next we will adjust the branches’ shape. Do so by setting the "Growth Angle" to "0.5", then edit the curve and lower the second key a little bit. This will make the branches bent away.
 * Adjust the "Seek sun" param to give the branches their basic shape. Try also to edit its curve.
 * Instead of adjusting the length by using the "Length" slider i would always go with the "Growth Scale" parameter as it comes with a curve and will give you much more control over the tree’s shape. So just leave the "Length" slider untouched and open the "Growth Scale" curve editor. Of course you might just increase the distance between start and end of the "Length" slider just to get some more variety in the length.


 * Start reshaping the tree by editing the "Growth Scale" curve until the result fits your reference.

Adding the bark texture Now it is time to add our first texture. The optimum bark texture As the bark texture will be repeated over the y-axis i usually work with a 512px x 1024px [width x height] texture in order to reduce visual tiling and add more fidelity to the bark. Working correctly with such none square textures will make you to set up the tiling like: "x = 1 / y = 0.5" in the material inspector. You might lower the y-value, but please note that any x-values different from "1" will be ignored. Note: y-tiling is set to 0.75 as it turned out to look better.
 * So create a new material, choose the "Tree Creator Bark" shader and assign your bark texture.
 * Next assign your bark material to the tree by dragging it to the slots "Branch Material" of the trunk and the first branch group.

Adding some leaves Next we will start to add some leaves on the second branch group. Unity offers 5 different geometry modes for leaves. I usually go with "Mesh". Why that?
 * "Billboards" are no option for me. In case you model some trees for e.g. a racing or 2.5d game this might be the way to go with as the player won’t look at your trees from very much different angles. But thinking about a game with a first person controller the player might suddenly look up and start to turn around, which would look pretty weird using billboards on the leaves.
 * So let us have a closer look on "Mesh" vs. "Plane", "Cross" and "Tricross".

Meshes vs. Planes/Crosses/Tricrosses Pros
 * unique 3d shapes no flat squares
 * better as far as fillrate and overdraw is concerned
 * possibiltiy to share one texture for e.g. leaves and twigs or even different meshes just for the leaves. unity only has a limited size for the tree textures which is 1024x1024px. this texture is shared by all materials assigned to a tree. So having 1 bark texture, 1 texture for the leaves [added as leave group] and 1 texture for twigs [also added as leave group] will divide the texture into three chunks: 2/3 of the texture is taken by bark texture, the other 1/3 is shared 1:1 by leaves and twigs which will end up in a pretty poor leave texture resolution. Using meshes for leaves and twigs with their own uv mapping allows us to just have one texture/material for both and enables us to manually assign the texture space taken by each leave group.

Cons
 * usually some more triangles
 * difficult to handle
 * needs a 3d app to model the mesh

Example of leaves added as planes vs. meshes Notice the highly visual shape of each leave plane. Still noticeable shape of each leave mesh but much better i think. Texture atlas Example of a texture atlas automatically created by the built in tree creator when working with 3 materials. Example of a texture atlas automatically created by the built in tree creator when working with manually uv mapped meshes all sharing the same material. In this case it is one mesh for the leaves and three meshes for different kinds of twigs. Unique shapes of mesh modeled leaves Notice the drooping branches and leaves – impossible to achieve with just planes. Using LODs of mesh modeled leaves <p style="font-size: 94%;">It is easy to create different versions of your leave mesh all sharing the same material but having a different number of triangles. Use those meshes to create different LOD versions of your tree or even mix them within one model e.g.: use a highly detailed mesh on the lower part of your tree and the outer regions of the branches, use a simple one at the upper parts of the tree. Of course you can also create just different versions of the mesh e. g. with flipped uvs just to increase the visual variety.

Fillrate optimization Not only high numbers of triangles will slow down your system but it is also limited by fillrate. Modern hardware should not have any problems on a high triangle count, but the number of pixels which have to been drawn might be the bottleneck – no matter if those pixels are fully transparent or not. So making the mesh fitting your texture tightly will save the gpu a lot of work. <p style="font-size: 94%;">Comparison of mesh and plane leaves: All grey pixels in this image would have to been drawn in case you used a simple plane for the leaves. Using a tightly modeled mesh instead would save up to 40% as far as the fillrate is concerned.

Modeling the Meshes


 * Open your favorite 3d app and start with a simple plane.
 * Assign your leave texture.
 * Manually subdivide the mesh and give it a 3d shape. Usually leave planes are modeled somehow like a kite. Just have a look at the trees shipped with unity’s terrain asset.
 * As you need double sided geometry for the leaves: Double the mesh, flip its normals and combine both meshes into a single one. Why double sided geometry? The old "soft occlusion leave shader" does not cull geometry that does not face the camera – the new "tree creator leaves shader" does! It has to do so because of the lighting function and the support of translucency: leaves look different either viewed from front or backside. If you do not use double sided geometry the leaves will completely disappear when you look on them from the backside.
 * <b style="color: red;">Update: </b>Make sure that the mesh’s origin is at 0 / 0 / 0 and rotate the whole mesh upwards by 90 degrees. This is needed later on by our special method of placing the leaves. <b style="color: red;">Update: </b>In case you use a different parameter than "Growth Angle" to adjust the leaves you might have to rotate the mesh into a different direction. Just try. And keep in mind that "negative" rotation will end up in the leave first grow or pass through the branch, which might be helpfull to place leaves on rather thin branches.

Import your leave mesh and start to add the leaves to the second branch group. Only add a few ones first [setting the "Frequency" to something around 6] in order to get a better idea of how they are placed. As you can see on the picture to the right: Just after adding the leaves they are facing in pretty much any direction, which looks very weird.

We are going to fix this weird look by setting the "Horizontal Align" to 1.

Looks better now but pretty boring and unnatural. So we add some "noise" by lowering the "Horizontal Align" to 0.6 and setting "Perpendicular Align" to 0.45 which turns out to give us a result like shown on the right.

Now we can start to add some more leaves by raising the "Frequency". This might now be the time to adjust the leaves’ size. Please note: Do not touch the "Size" parameter because changing this will totally corrupt the leaves’ size on entering the manually editing mode. In case you want to resize the leaves just use the "Growth Scale" curve. Unfortunately this limits the maximum length/size of any leave mesh to something around 4m. Please keep this in mind when drawing your texture.

Adjust the "Distribution" of the leaves and make sure that there are no leaves at the origin of the branches [as this would be unnatural] and at the end [as this would look strange due to the very low thickness of the branches] by narrowing the curve.

You may change the angle of the leaves by adjusting the "Growth Angle", so leaves that are near the trunk point towards the ground and leaves at the end of the branches more or less follow the direction the branches are pointing to. <b style="color: red;">Update: </b>Watch the curve…

As our basic setup looks fine now we can add some more leaves until the tree gets a more or less full look. But please make sure that you don’t add to many leaves as it will boost your triangle count and does not necessarily increase the visual quality of your tree. In our case it is 84 leaves all together for the first leave group.

Next hide the first leave group, then add a second leave group, in order to get a nicer look at the branches’ endings, whose leaves are distributed just there and pointing into the same direction as the branches themselves. Do so by editing "Distribution", "Growth Angle" and "Perpendicular Align". Please note the negative value of the "Growth Angle" to force the leaves to point upright. A negative value of the "Growth Angle" is only needed if you work with the rotated leave mesh. But you could easily duplicate your leave mesh, rotate it in your 3d app – even change its shape – and assign it to the second leave group. In this case you would have to make sure that both meshes share the same material. Do so by editing the import settings of both meshes and setting the "Material" -> "Generation" parameter to "Per Texture". Otherwise the tree’s texture atlas would be divided into three chunks…

Turning on the first leave group again will give us preview on the whole tree. Looking pretty nice apart from the poor texture quality which we will increase in the next step.

In the "Project" tab click the generated texture for the tree [treename_Textures] and change its settings like shown on the right: Raise the aniso level, choose "Texture type" = "advanced" and set "mip map filtering" to "Kaiser".

Next we will add some leaves to the trunk itself – just like we added the second leave group.

Finally all leaves are added and this is how our tree might look like. Now you can rework all parameters like "Growth Scale" or "Seek Sun" of the branches to improve and adjust its shape. Just because we can, let’s add some dry branches or twigs. Due to the fact that we use a tightly modeled mesh we have some space left on the leave texture so we can add a small twig to the texture without loosing any quality on the leaves, create a mesh in any 3d app, uv map it and add it as fourth leave group. <h3 style="clear: both; padding: 1em 0 0 0;">Finetuning the master If you haven’t done already it is time to add a windzone in order to see how the tree bends.
 * Especially leaves tend to float around and loose the connection the the branches using the default values. So just lower them. "Main Wind", "Main Turbulence" and "Edge Turbolence".
 * Hit "play" to check your changes.
 * After adding some noise to the trunk, may be a flare our procedural master will be done.

<h3 style="clear: both; padding: 1em 0 0 0;">Summary
 * Use meshes for the leaves.
 * Whenever you can: Use a parameter which comes with a curve to adjust your trees’ shape.
 * At any step of the process check your tree from different view angles.
 * Do not touch the "Size" parameter of any leave group because changing this will totally corrupt the leaves’ size on entering the manually editing mode. In case you want to resize the leaves just use the "Growth Scale" curve.

<h2 style="clear: both; padding: 1em 0 .5em 0;">Optimizing the tree model <h3 style="clear: both; padding: 1em 0 0 0;">Optimizing the overall shape Until now everything has been adjusted procedurally, but this probably won’t give us the desired shape. And spending more and more time on tweaking the values won’t either. So we will enter the manual editing mode:
 * Duplicate the procedural master and continue working with the new copy in order to keep the procedural master.
 * Especially the primary branching structure needs some adjustments. Reshape them in length, rotation and position.
 * As our bark texture is rich in contrast you may have to move the branches’ pivot in order to make the seems between trunk and branch less visible.
 * Although we have adjusted the leave meshes very carefully there will be some rather weird looking branches. Find them, try to adjust them by rotating [which is pretty difficult and uncomfortable], move them or just delete them.

<h3 style="clear: both; padding: 1em 0 0 0;">Optimizing the leave texture Less is more: Of course most of the time you want to create a fully looking tree with a lot of leaves. But working with a very dense leave texture will end up in leaves meshes which are pretty obvious to the player. In this case try to lower the density of your leave texture. Left: original leave texture / Right: less dense leave texture
 * <b style="color: red;">Update:</b> When duplicating your master tree, do not duplicate it while it is in the hierarchy... doing that will just clone the exact tree, and when it is editing, they will both change. Instead, duplicate the tree in the Project view.

<h3 style="clear: both; padding: 1em 0 0 0;">Saving texture memory Although you might have created several trees all sharing the same textures Unity will not recognize this but automatically create materials and textures for each tree and send them to the gpu to render. In order to save texture memory and texture load at runtime we can manually assign the materials so all trees really just share two materials – one for the bark and branches, one for the leaves. Do so by just deleting all the created texture folders except for the first one, then assigned the materials "Optimized Bark Material" and "Optimized Leaf Material" from the first tree to each tree by dragging them from the project tab to the proper slot of each tree in the inspector tab. Changing any parameter on any tree will Unity force to recalculate the textures so the additional folders will be recreated. In this case just delete the new folders and reassign the original materials like described above.

<h3 style="clear: both; padding: 1em 0 0 0;">Optimize the tree for performance There has been a discussion on the forum dealing with the topic of poly count of trees and its impact on the performance: forum. My personal summery:
 * Of course it is good to keep the poly count low, but numbers between 1500 – 2500 for a common tree should be ok.
 * Alpha testing on the leaves seems to have much more impact on the performance than a high poly count. So try to work with tightly modeled meshes in order to save fillrate as described above.

<h2 style="clear: both; padding: 1em 0 .5em 0;">Further tips <h3 style="clear: both; padding: 1em 0 0 0;">Creating highly detailed geometry The picture above shows [from left to right]: LOD setting of both tree and trunk are set to maximum on each tree. Unfortunately the tree creator automatically creates very simple geometry in case you set the "Radius" of your tree’s trunk to values below something like "0.5". Even if you raise the tree LOD and the LOD of the trunk to their maximum values geometry just would be an extruded simple quad. Trying to get around this limitation I have found 2 solutions which both have their pros and cons. Misapply the "Flare" feature The easiest way is to misapply the "Flare" feature. Pros Cons Scaled modeling A bit more complicated would be to model the whole tree in a scale of 2:1 or even 3:1 Pros Cons
 * standard trunk [Radius: 0.25]
 * standard trunk with misapplied flare [Radius: 0.25 / Flare Radius: 0.1, Flare Height: 1.0, Flare Noise: 0.3]
 * resized model [2:1] with flare added [Radius: 0.5 / Flare Radius: 0.9, Flare Height: 0.03, Flare Noise: 0.7]
 * Set the "Flare Height" to "1".
 * Then slightly increase the "Flare Radius" until you are satisfied with the generated shape.
 * You can add this to any already existing tree.
 * This method only increases the level of detail on the lower part of the trunk but not the branches.
 * You can’t have any real flare anymore.
 * Select your tree prefab an set its xyz "Scale" parameters to "0.5" [scale: 2:1].
 * Then drag the tree into your scene and start modeling.
 * Please note: Make sure when using the terrain engine to paint the tree that you set the "Tree Height" and "Tree Width" to "50".
 * This method increases the level of detail on all parts of the tree and gives you much more control.
 * You still can add a real flare.
 * You should do it before starting to model the tree.
 * The size of the leaves planes or meshes will also be reduced. As mentioned above I would not suggest to use the "Size" parameter but only the "Growth Scale" curve to adjust the leaves’ size. Modeling the tree in a scale of 2:1 would end in a maximum size of the leave meshes at 2m [instead of 4m] which is not very much. In case you need a bigger size of the leave meshes and use the "Size" parameter you will loose the possibility to manually adjust the leaves’ position and rotation.
 * You will get much more triangles on both trunk and branches. But as we basically want to increase the number of triangles on the trunk’s diameter you can just delete some of the control points of the trunk and choose a lower LOD for the branches. Doing so will give you a highly detailed tree in the lower parts which are highly exposed to the player and an optimized version at the upper parts.

<h3 style="clear: both; padding: 1em 0 0 0;">Basics about setting up the leave texture correctely Getting around texture artifacts Especially when working with leave planes you might notice some weird textured leaves. As you can see there is one weird looking leave plane just appearing as some kind of white line. This plane is viewed from a very flat angle so the visible artifacts are a problem of inaccurate texture look up. Please note: The tree’s bark is white. As in the generated texture of the tree creator the bark’s texture appears right next to the leaves texture within the same texture atlas it is just the bark texture that makes the leave plane appear in white. The picture above also shows some dark outlines around the leaves. The reason for this is that the setup the color layer and alpha mask is not correct, for it does not have any overfill.

See Unity’s docs for further details. Reworking the leave texture in the way described above will give us much nicer edges: So now it is time to get rid of the weird textured leave plane. simply fix this by raising the aniso level of the generated diffuse texture up to "9": le voila: everything looks fine. the leaves now appear much sharper. if you have a closer look there are still some pixels where there has been the weird white line before but now they have the correct color of the leave texture. Avoiding gaps between leaves and branches The leave texture used in the example above makes it impossible to get a connection between the (modeled) branch and the branches baked into the leave texture as those do not fit the leave plane’s pivot:

Any feedback is highly appreciated. So please go to the official thread on the forum and post your questions, comments, wishes or results so that the community can participate in your experience.

To be continued…