Final Product What You'll Be Creating
In this tutorial Ankash Kallyat will cover the workflow of creating a great looking palm tree using SpeedTree and how to get it up and running in Unreal Development Kit (free). This is a great project for anyone interested in creating trees, plants or foliage for use in engine. Speedtree (included with UDK) features a unique and intuitive interface which allows you to quickly create various types of plant life using a very easy to understand node based system.
Speedtree is basically a 3d application used for creating or modeling Dynamic realistic Trees and Foliage for games which comes free with Unreal Develop Kit (UDK). If you have UDK installed on your machine then you don’t have to download Speedtree because it gets installed automatically with UDK, but if you want to use Speedtree in other 3D application as well, then you’ll have to buy it from their website.
For this tutorial you need to have at least Unreal Development Kit installed on your machine.
Alright then, we’ll be covering 4 things as follows,
- Basic overview of the Speedtree software
- Creating a Palm tree from Scratch in Speedtree
- Creating a Normal Map for the Palm Leaf using xNormal as a Photoshop Filter
- And finally loading the Palm tree into UDK.
If you have UDK installed on your machine then go to the installed directory of UDK > Binaries >SpeedTreeModeler, and inside the SpeedTreeModeler folder ,you should see two exe files (i.e. Speedtree Modeler UDK.exe and Speedtree Compiler UDK.exe,) create shortcuts for these two files on your Desktop so they are easy for you to load.
What does Speedtree Modeler and Speedtree Compiler mean?
Speedtree Modeler is the main 3D Application to model dynamic Trees and Foliage with wind and collision details. Speedtree Modeler saves the file in .SPM format. This format is also read by the Speedtree Compiler. The compiler takes the .SPM file and generates textures, vertex and other information about the tree. It then saves everything but the textures into .SRT format file, which is what you ultimately want in UDK.
Basic overview of the Speedtree software:
Load the Speedtree Program (Speedtree Modeler UDK.exe) and create a NEW file by pressing Ctrl + N, or use Create from the file menu.
Object Property Editor
This is where you can set the length, radius, angles, and all other parts of the trunk and branches, basically it’s an attribute editor. It also displays the properties of any objects when selected in the Main viewport window or Generation window.
If none of the objects are selected, or if you select nothing in the Viewport window then it shows the global Property of the current file. With this option you can change the global default settings of the Radius, Sink and Roll of the Tree. Changing the Radius will change the radius of the trunk and also the radius of the white circle situated right in the center of the grid in the Viewport window. The white circle is the space for your tree. Sink is used to determine how much of the base of your tree should be below the grid or above. Roll is for rotating the entire tree globally from its origin.
Let’s move on to next section i.e. the Main Viewport Window and leave the rest of the settings as they are in the object properties.
Main Viewport Window
This is where you see your tree model in 3 dimensional space just like we have in Max or Maya (side, top, bottom and Perspective.) By default you only see one viewport (perspective). To also view the other side, just right click on the empty space of main viewport and go to Active viewport and select the desired view you want.
Double click the Mouse Button 3 (middle mouse button) on the main viewport to view all four sides. Double clicking the left mouse button in any of the views is going to focus everything to the camera, just like resetting the camera to it’s original position. In top left corner, there’s a statistic overlay window which shows the polygon count and other necessary information of the model. And in the Right top corner, there’s a spot light for controlling the Global light angle setting in the Viewport. If you click on the spot light, you’ll get a Rotating gizmo to control the angle of the light.
- Rotate: Left click and drag the mouse to rotate the camera accordingly from the center of the screen via the Z axis.
- Zoom: Move the mouse back and forth while holding down the Left and Middle mouse buttons to Zoom in and out, or Scroll down the middle mouse button to zoom in, and scroll up to Zoom Out.
- PAN: Drag the Middle Mouse button to Pan the Camera accordingly
This window on the bottom left corner displays the short help tips for tools and selections.
Tabs and Toolbar
Tabs: You can open multiple files in Speedtree and each file opens in a new tab so that you can work simultaneously.
This is actually the toolbar of Speedtree. Just hover the mouse over any of the icons and you’ll get a tooltip. If you click on the first icon from left you’ll get a rendering options (like view in wireframe mode, lit and unlit mode and so on.) The last four icons from the right are for Positioning, Rotating, Scaling and Deleting the mesh respectively. We’ll be seeing the rest of the tools as we move on to modeling.
The Curve editor is pretty much self explanatory, if you click on any of the values from the object property window, you’ll get a graph of Curve to manually edit the value in the Curve editor window.
Just like a material attribute editor in Max or Maya. Here we have a material assets editor so we can tweak and load Textures. Although there are certain Asset Tabs like Color sets, Materials, Meshes, Displacements through which we can edit our texture. In this tutorial, we will be dealing with the Material Tab only, as we are not going to need the rest.
Whenever you load a new file into Speedtree, you’ll see there’s a small circular icon indicating a Tree node in tree generator window, that’s the base generator node and it’s loaded by default. In the generation window, Trees are divided into three parts, Trunk, Branch and Leaves and each is connected as a node. The Node of the Tree generator works like a Flowchart, the base node starts from the bottom node, i.e. Tree and it flows like Tree->Trunk->Branch->Leaves/Fronds. You can add multiple nodes in between. For example, I can add 3 leaves nodes to a single tree. But there can be only one base Tree node in your file, as it is the main parent node of the tree.
Ok now that the basic overview of Speedtree is done, Let’s move on to modeling a Palm Tree. Before we start modeling, I would like to recommend quickly going through all the tools mentioned above again. Also make sure that you save the file every couple of steps.
Creating a Palm tree from Scratch in Speedtree
Create a New file (if a new file isn’t loaded in Speedtree) and then go to the Generation window.
Right clicking on the Tree node in the generation window, pops up a context menu as shown above. This is the Speedtree template. It’s a template of different parts of the tree and you can add any node of your choice. But like I’ve said before, your node should flow like a Flowchart i.e. Tree->Trunk->Branch->Leaves/Fronds only then will your tree will look natural.
OK then let’s add a trunk node now for our palm tree, go to Add selected->Trunks->Standard RT.
Adding A Trunk
After selecting the Palm RT as a Trunk node from the context menu, you should then see a Trunk loaded in your scene as shown above. Time to add some Leaves.
Adding Fronds for the Palm tree.
Like I’ve said before for a normal tree to look natural, the trunk node we will have to add a branch node before the leaves node, and the nodes will flow like this Tree->Trunk->Branch->Leaves. But, in the case of palm trees, the Fronds and branches are together (or you can say palm trees does not have branches.) Thus, our Generation Node will have 3 nodes and it will flow like this, Tree->Trunk->Fronds.
Right Click on the Trunk Node in the Tree Generator window for the context options, just like in the above image and then go to, Add to Selected->Fronds->Palms with Branches RT
Creating a Material and Loading Textures
To load textures, first we need to create a material. Here you can add as many materials as you want, but we are going to create just two materials. So let’s create a material first.
Go to Assets Editor window and in the Materials tab, just click on that add/subtract button as shown above, to add material. A Materials window will popup as soon as you click on that add/subtract button.
Clicking on the Add button will create a material. Name the material according to the tree part. In this case, add two materials as shown above, one for the Bark (Trunk) and one for the Fronds (Leaf textures) of the Palm tree.
Select the desired Material from the drop-down menu as highlighted in blue above. There’s a Texture channel on the left (Diffuse, Normal, Specular..) and by default Diffuse is selected. Press that dotted button to browse to your texture. Remember that we are loading Diffuse textures for the Diffuse channel.
If you want to load your own texture and the resolution of that texture is rectangular, then make sure the resolution of the texture is the power of 2. that is for example 256×512 or 512×1024 and so on. Because UDK imports textures having the resolution to the power of 2 for square and rectangular textures. The texture of the Bark needs to be a tileable texture so that there won’t be any seams or any artifact issues.
Above is the Palm frond, and frond Specular texture. I’m going to load the palm_bark and frond_spec textures into the Diffuse channel of it’s material. I.e. the Bark and Frond material respectively. Load the Specular map of the frond into the Specular/Trans Channel. You won’t see any texture on your model yet because we haven’t assigned or applied any textures to it.
Select the Trunk node in the Generation window or select the trunk model from the viewport window to display the Trunk properties in the Object property window. In the Object properties, scroll down until you see the Materials property. Expand the Branch and Cap value and you should be able to see a none value set in both properties. Clicking on none will give you the dropdown option to choose the material that you have created in the Assets Editor, and select the Bark material to Set/Assign this texture to the Trunk, as shown in the above pic.
Repeat the above procedure for the frond as well. But here you’ll get three materials, i.e. Branch, Cap and Frond. Set the materials respectively. You can leave the cap material to none or apply the same Bark material to the cap.
Alright then, this is how your tree should look if all the textures went well. The Tree is looking good and it’s starting to take shape, but it’s not looking like a Palm Tree yet. So we need to tweak things a little bit here and there. Which is quite advanced, but it’s easy. Let’s get started with the Fronds first.
Tweaking and scaling the Frond Mesh
OK, first let’s scale the fronds a bit, select the frond mesh and go to the Object Property window. Set the Size Scalar value to 1.5 from 1.0. You can Hide and Unhide the frond mesh ,there are two ways of doing that. Just select the Frond mesh and hit the number 2 key, this will disable the preview of the mesh in the viewport, or Press H to hide the mesh temporarily and press H again to unhide it.
If you want to edit each frond manually, then just select the frond mesh and press TAB, this will enable the allow node editing feature. With this feature you can edit or delete a single frond according to your desire. Click on a single frond and you will get a Gizmo to translate, rotate and scale that frond. Delete the V shape frond which looks unnatural and creates some problems while placing. Our frond looks straight and not bent, which is unnatural. Naturally Fronds are bit heavy so they bend down a bit because of gravity and this is what we need to add, Force of the gravity.
Select the Frond and hit TAB to exit Node editing mode and select the entire frond, or just select the Frond Generator node in the Generation window to select the entire frond. Right click on the selected Frond and Add force->Direction. You’ll see an Arrow in your scene pointing downward. It’s indicating that all the fronds are forced to bend downward due to gravity field, a.k.a Direction Force. To edit the force amount, just select that Arrow in your scene and go to the Object property window.
Setting the Force field strength in Speedtree
After selecting the direction of the force field in your scene, set the strength to 0.8. The Indicator scale option in the Object property window is to scale the gadget for your visibility. Also you can change the Type of Force here if you want, currently it’s set as Direction.
Increasing the Height of the Trunk
Select the Trunk mesh or node. And in the Object property window, scroll down to the Spine property and set the Length to 50.
In the Segment property, Set the values as shown in the above image to optimize the Trunk. The moment right after you increases the height you will see that the number of fronds also increase, it gets a bit dense and that’s because the amount of Frond is set to be Relative to the height of the Trunk (hence dense frond.) When you increase the height of the trunk the number of Fronds gets pretty messed up, like dense fronds colliding amongst them so to clean that up, we need to delete the Frond Node and Create it again, Right click on the Trunk node and go to Add to selected->Fronds->Palm Standard RT.
A bit of Cleanup and finalizing the model
Now Let’s do the cleanup of the fronds by moving, rotating or scaling and placing each frond manually, deleting the unwanted V shape frond, and setting the force field and so on. If you want you can add another Frond node in the Generation window to make it a bit more denser, but the tree is going to be a bit heavy.
OK now that the cleanup is done, I have added two fronds generation nodes in the above image and adjusted the direction of force field for each Frond. The total poly count is 2,500 which is not bad at all. But there’s one more thing remaining and that is a Normal map for the Fronds. It’s important because when the fronds simulates with wind, it will shine naturally if you have the normal map loaded. So let’s start creating a normal map using a free application called xNormal
xNormal is an application that creates Normal/Ambient Occlusion maps from very high polygon models and fits them onto low polygon models. It supports tons of 3D formats, as well as multiple image output formats. The best part is that it Bakes out maps quickly (in couple of minutes) using the CUDA cores technology of the Nvidia. But here we are only going to use this as a filter plugin in Photoshop.
Just click on the image above to download and install the latest version of xNormal OR visit here www.xnormal.net/Downloads.aspx. Once xNormal is installed on your system then open that Frond Diffuse texture in Photoshop.
Duplicate the Frond texture Layer (just for a backup) and Desaturate the layer by holding down CTRL + Shit + U. Then go to Filters->xNormal->Hieght2Normals. If you don’t see the xNormal Filter in Photoshop, then you might have not installed it properly. Check all the plug-ins are checked while installing xNormal. Now, let’s move on to the xNormal filter settings.
Set the Source to Max RGB this is because it will create a depth based on the RGB of the Texture. I’ve set the Smooth value here as low as 0.5 because we want s detailed normal texture. Make sure the Swizzle setting is proper, like all axis are in Positive (i.e. X+, Y+ and Z+ axis.) And hit Continue to create the Normal map texture. Select the newly created normal map layer and save it in .TGA format. Repeat the procedure above for the Bark Diffuse texture.
Once you have the above two Normal texture maps then it’s time to load them into Speedtree.
Open the Palm tree model in Speedtree (if closed) and go to the Assets Window. Select the Bark material and click on the Normal/Height channel. Load the Normal map for the Bark texture just like we loaded all the other textures in Speedtree. Do the same procedure for the Fronds Material, Also don’t forget to load the Specular texture of the Fronds.
Tweaking the Wind Simulation
OK one more final step in Speedtree, Check that all the textures are in .TGA format so that they are easier for you to import into UDK. Hit the 8 Key to turn on the wind simulation in Speedtree. You should then see a Fan icon below the spotlight icon in the top right corner. Your tree model should start simulating as if wind is blowing. Let the wind simulates for a while and you’ll notice that a small red bar below the fan icon boosts up suddenly, and your tree blows like a tornado is nearby. So if you want the tree to act naturally, click on the fan icon and go to the Object property window and in the Primary property, increase the value of Height to 100 (or above.) This will make the tree much more stable than earlier. Now Save the file (you should be doing an incremental save after each step) and close it (not necessary). It’s now time to load the Speedtree Compiler.
SpeedTree Compiler Application
Open the Speedtree Compiler application.
Click on the Add Trees…. button to load the Speedtree file.
Open the Palm tree and click Next.
Set the Output folder to your desired location. Make sure that all the settings are the same as in the image above. Hit Finish after setting everything. Also make sure that Create billboard atlas is enabled. This is the best part of the compiler, that it creates Billboard textures for us which is used for the level of detail (LOD). When applied in UDK, it’ll fade out the tree with this Billboard texture when the camera moves away from the tree, just to save the rendering cost in the engine.
Hit F7 (Function Key 7) to start the compilation.
The details and info in the left corner box is the output tree format, i.e. Palm_tree.srt and below that is the texture which is going to be copied all in one output folder. In the top right corner it’s the billboard texture for the use of LOD, and below that it’s the info about the Fronds Texture. Now it’s time to press the Compile button.
After hitting the compile button you should get this message. Hit done or open Output Folder to check all the files.
You should have all the files shown in the image above. Time to load all of these files into UDK, so let’s move onto the next session which is importing the tree model and it’s textures into UDK.
Importing into UDK
Load UDK and then go to the Content browser. Create a new Package called Palm_tree (no spaces). Select the Material from the Factory options list. The moment you click on the OK button, it will create a new package and load the material editor that you have selected in the Factory list option. So just close the material editor and let’s move onto importing the models and textures.
Click on the Import button as shown above, to import all the .TGA files and the .SRT file that was created in the output folder of the Speedtree Compiler. Rename that Material_0 to Palm_Bark in the content browser.
Remember to use TC_Normalmap compression settings while importing Normal maps.
After importing all the textures and the model, it’s now time to create a material for the Frond, Bark and most importantly the Billboard material for LOD.
Let’s create the Frond material first, so Right click anywhere in the Grey area and Create a new Material.
Name the material Palmtree_frond to create a Palmtree_frond material and hit OK and then double click on the newly created Palm_frond material to open up its material editor.
Drag all the textures of Fronds from the content browser that is, Diffuse, Specular and Normal into material editor. In the above pic, I’ve connected all the textures to its Respective node (Diffuse, Specular and Normal) then add two material expressions, ADD and VERTEX Color. Extract the alpha channel of diffuse and vertex color and plug it into A & B node of the ADD Parameter respectively and plug the ADD node into opacity mask. Make sure the blending mode is set to Blend_Masked and also enable the two sided option mentioned in the above pic. With this setup we’ll get a proper blending of the transparency of the texture. Save the material and exit this material editor and do the same procedure as above for creating Billboard Material.
Above pic is the setup of Billboard material which is similar to the setup of Frond material. Don’t forget to setup Palm_Bark material in the content browser, it should be really easy though and you don’t have to do the above process for Bark material.
OK now that we have all three Material setup i.e. Frond, Billboard and Bark. So now let’s plug all these materials to our Speedtree model i.e. Palm Tree.
Double click on the Speedtree icon in Content browser to open up its Speedtree Editor.
In the above pic I’ve applied all the materials, to apply a material just click on the green arrow icon and it will apply the currently selected material from the content browser so select the appropriate material while clicking on the green arrow icon. I’ve applied Palm_Bark material to each Branch material property and also added frond and billboard material to its respective property. That’s it you are done, all the material has been applied. Just close this window and save the package and then just drag and drop the speed tree model from the content browser into your new scene.
After dragging into your scene just globally scale your tree up to 10 units and place it wherever you want. Select the Tree and Hit F4 to open up its property and play with the setting to know more about its property. Like suppose, if you don’t want billboards then just uncheck Use Billboards option to disable it. The best part is you’ll collide with trees if you are playing in your scene.
That’s it you are done and ready to model any tree in Speedtree in very useful and optimized way when you need to model trees and foliage in UDK for game development.
Don’t miss more CG tutorials and guides, published daily – subscribe to Cgtuts+ by RSS.
- A Comprehensive Beginners Guide to UDK
- Quick Tip: Optimizing Textures In Unreal Development Kit
- UDK – Creating Events With Unreal Kismet
- Quick Tip: An Introduction to Light-Mapping in UDK