Efficiently building good looking trees (with CSG)

Introduction

A few days @EchoReaper suggested in this topic that we should take the time to write up some tutorials to which I replied that I would make one. Now that I have some time, I guess I should do a building tutorial on one of the most popular and also one of the most hated asset types ever: the tree.

Before I start, I realise that many people have many different ways of building their own trees and so do I. Just because I’m building things in a certain way or order doesn’t immediately mean it’s correct and if you think your own approach is better, feel free to disagree and follow your own path. These are just some guidelines which may or may not be helpful to you. So, without holding you up any longer, let’s talk about trees.


Content

  • Building a leaf
  • Merging leaves
  • Building the trunk and branches
  • Final touches
  • Result(s)

Building a leaf

There are many different ways to build leaves. People who want trees in a more realistic style might take an approach like the game ‘The Legend of Zelda: The Skyward Sword’ did: Take a plane, make it transparent and put a texture on it. For this tutorial however, I’m going for a more cartoony style which fits the general Roblox theme. I’m therefore going to use unions for leaves. “But won’t make unions my game laggy?” That only happens if you have a lot of different unique unions. Don’t worry about it, for the leaves I will use only one unique union.

To start of, insert a Part, anchor it, make its sides smooth and resize it so it looks like a cube. Your Part doesn’t have to be a cube with all sides being the same dimensions - in fact, I wouldn’t recommend it - but it should look like one. The next step is to chop of its corners and sides with quite a few negative parts (to get a negative part, select a normal part and click the ‘Negate Selection’ button in the toolbar, which has a blue icon). In order to do so, all you have to do is position one or multiple negative parts in such a way that it collides with the corner or a side of your Part.

Your situation should now look a bit like this:

You can now union these parts together and repeat these few steps over and over until you have a smooth union which looks a bit like a sphere. However, I would personally recommend to position more negative parts at all of the parts edges in one dimension and then to copy and paste those negative parts and rotate them around the part so it’s enclosed in a load of negative parts.

What the process would look like:

After you’ve done that, you can union all the parts together. If you want to keep the same orientation you should select the Part itself first and then all the negative parts. You can easily select all of them at once by either boxing them or by shift clicking the top and bottom negative part in the explorer. The reason why I personally like unioning everything together at once is so it’s less tedious and deunioning the union becomes easier in case you messed up something.

Example of messing up:

Alternatively, you can also use a few additional negative parts to fix small mistakes like the ones I made above.

If you try to union everything together at once, Roblox studio might not be able to solve the union. If that’s the case, no problem, you can still union everything together in chunks. If everything went well, you should have a union which looks like a semi-sphere. You aren’t required to make such a shape, but it’s probably the easiest. As long as your shape looks like a blob you’re on the right path. After you’re done unioning, you should check the ‘UsePartColor’ property and change the union’s Material to Grass and its BrickColor to some greeny color, though this depends on what you want your tree to look like.

Examples of good unions:

Merging leaves

Now that one of the toughest parts (ha, get it?) is out of the way, it’s time to start with the tree itself. Although most people would start with building a tree’s trunks and branches, I personally prefer to start with the leaves. This is just personal preference and I won’t stop you from reading the next part of the tutorial below first.

This section of the tutorial is fairly simple. Depending on the tree you’re making, you should copy and paste your union a few times. Rotate the leaves around a bit, resize them (maybe even randomize the leaves a bit) and then put them together in a big blob. It is recommended that you now also build or insert a dummy character so you can compare the tree its size with the dummy. Your big blob of unions should now look more like the leaves of a tree. If you’ve done everything correctly, your leaves should look a bit like below.

I personally always like to copy and paste my union a lot of times to make the leaves look a bit chaotic. This isn’t a requirement however. If you like to only use a few unions - or maybe just a single one - feel free to do so. As you can see, I’ve also positioned my blob of leaves a bit above the grass. The reason for this is because I’m going to fill the space in between with a tree trunk and many branches in the next part.


Building the trunk and branches

This part of the tutorial is probably the most tedious and maybe also a bit tough/annoying. First you want to insert a Part, set its Material to ‘Wood’ and set its BrickColor to something brown-ish. You will also want to resize it so it’s thin and tall. Don’t make the Part too thin though. Make it just as thick or thin as you think a real tree’s trunk would be. Also make sure that the Part is positioned right below the blob of leaves. Unless you’re going for a really cartoony or blocky style, I also recommend to insert a CylinderMesh into the Part. For the next bit I’m also going to assume that you’ve inserted a CylinderMesh. If you want to keep the trunk blocky though then that’s fine, but you’ll have to improvise some of the next bits.

After you’ve inserted the CylinderMesh, put a Part on top of your trunk and insert a SpecialMesh into it and set the SpecialMesh its MeshType to ‘Sphere’. Also make sure that the Part is just as thick or thin as the branch and make sure that it’s just as high as it’s wide. You will then want to position the center of this small Part right in the middle of the Trunk’s top.

Illustration:

Next up you want to add a Part with a CylinderMesh to the sphere on top in the same manner, but have it stick out to the sides. I don’t really know how to best describe it, so here’s a picture of what I mean:

As you can see I’ve added two extra cylinder Parts which are precisely connected to the sphere on top and at the end of both of these parts I’ve also added a part with a SpecialMesh which has its MeshType set to ‘Sphere’. Something which I did wrong in this picture though and which you should keep an eye out for is that these branches make a really big angle relative to the trunk its connected to. In most of the cases this is wrong. Trees almost always have branches which only stick out to the sides just a little bit. The branches should also branch out relative to the the orientation of the Part it’s connected to.

An example of 'good' and 'bad' branching (in case you're building a 'normal' tree):

Next you want to keep repeating the steps above. Keep adding parts to the sphere, and have them branch out to the sides a bit. Your branches will eventually connect with the leaves. It’s also possible that your branches don’t reach the leaves and stick out below them (which is a good reason why you might want to start with the trunk and branches first before adding the leaves), but if that’s the case you can always go back and move the tree’s leaves a bit so they connect with the branches. If all went well, you should now have a decently looking tree.

Example tree:

We’re not done yet, however. There’s still one simple problem which should be fixed; the branches are all the same size. Normally, the branches of trees start out really thick nearby the trunk and as they branch out, they become more and more thin. To fix this, we have to go through each branch and edit the Scale of its CylinderMesh or SpecialMesh. For the CylinderMeshes all you have to do is make the Scale in the X-axis and Z-axis smaller. Make sure they’re both the same number though. The further the Part is from the trunk, the smaller its CylinderMesh its Scale should be in the X-axis and Z-axis. For the Parts with a SpecialMesh you should do the same, but those Meshes should have its Scale lowered in all 3 dimensions. You might find out that the Scales of your meshes don’t quite line up, so for convenience I always do the following: The trunk Part has a Mesh with a Scale of Vector3.new(1, 1, 1). The Parts connected to it have its CylinderMesh its Scale reduced by a fixed amount (e.g. Vector3.new(0.1, 0, 0.1), so their Scale becomes Vector3.new(0.9, 1, 0.9) and the Parts connected to those Parts also have their CylinderMesh its scales lowered by a fixed amount. This goes on and on until you’ve gone through all the branch Parts with a CylinderMesh in them. For the Parts with a SpecialMesh, all you have to do is set their SpecialMesh their scales in all three axes to the same number as the Part it’s connected to its CylinderMesh its X-axis or Z-axis. E.g. if a Part with a SpecialMesh is connected to a Part with a CylinderMesh and that CylinderMesh has a Scale of Vector3.new(0.8, 1, 0.8), then the Part its SpecialMesh should have a Scale of Vector3.new(0.8, 0.8, 0.8). (I hope this bit of the tutorial makes some sense because I’m having a hard time finding the right words and method of explaining this)

If everything went well you should now have branches which become smaller higher up in the tree.

Two trees; the one at top has branches that do not become smaller, the one at the bottom does have branches which have a smaller scale higher up in the tree:

Final touches

We’re now almost done with our tree! (woohoo!) There are still a few small things left though. For example, our tree doesn’t have any roots. Without roots a tree is nothing and it will just fall over. To fix that, we have to add a few more parts at the bottom and rotate them slightly. To do that, duplicate the trunk (ctrl + D), then make it as thin as possible in the Y-axis and move it down a bit. After you’ve done that you want to rotate it in its Y-axis (the green handle) and then slightly rotate it sideways a bit (so rotate it in its Z-axis or X-axis (the red or blue handles)) and then extend its bottom downwards. Repeat this step a few times and you should have some decent looking roots.

An example of what your roots might look like:

Some people, including me don’t really like parts that stick out at the bottom. The roots in this case do stick out below the grass. To fix this, you can use a negative part to chop of the bottom of the roots and merge the roots together in one union. To do this, grab a negative part and align its top face exactly with the top face of the grassy part. You should now see some Z-fighting (Z-fighting is when the engine doesn’t know what to render on top so two parts that have aligning faces start to ‘flicker’).

Example, but with transparent grass:

Select the negative part, then select the root parts and union them together. Depending on the number of roots and the way you rotated them, you might run into some unioing errors. You can prevent this by selecting the Parts in a different order.

The tree is basically done at this point. However, you might still want to do a few things: grouping together the tree is never a bad idea and giving it a PrimaryPart is’t a bad idea either. You might also want to name your Part correctly so a future-you might be proud of you.


Result(s)

This is pretty much all for me. Here’s the example tree I built just for this tutorial:

This isn’t everything though. Using this method you can create many trees that all look slightly different.

Everyone has their own style and workflow, so your trees probably won’t end up looking like the ones made by other developers, but as long as you’re proud of them, I will be proud of you!

Hopefully this tutorial was useful for you. Good luck and keep on developing!

-Zomebody

122 Likes

Glad to see developers are really branching out and making tutorials now.

86 Likes

Zome, you’re the real MVP!

6 Likes

5/7! A perfect score!

I made a bunch of trees awhile back using this style (Zomebody helped me, of course) I changed it up a bit to make it a tad unique.

I love the design of these trees.

24 Likes

What about wood grain?

16 Likes

Nothing to worry about if you use CylinderMeshes. The wood grain on those is the correct way. :wink:
The only wood grain you should worry about it on the roots. Though all you have to do there is rotate the negative part the correct way and select it first when unioning it together with the root parts.

8 Likes

Not quite. There are three reasons why unions slow down a game:

  1. Load times. Every unique union must be loaded in to the game, just like decals/textures, sounds, and animations need to be. The union’s data in a place is comprised of its mesh data, which describes how it looks, and its physics data, which describes its collision mesh (I don’t think that child data is loaded into the client, although that may change when realtime CSG becomes feasible). This can be mitigated by having only a few unique unions, so you are correct that load times won’t be affected too much by this technique.

  2. Triangle rendering. Every piece of geometry in ROBLOX is composed of multiple triangles, and the more triangles that are visible, the more render-intensive the view is. Unions (and FileMeshes) tend to have a lot more triangles than normal parts (even if it doesn’t look like it should, CSG isn’t particularly smart with triangle generation), so having a lot of unions will cause more render lag, particularly on machines with low-end or integrated GPUs. This is not mitigated by having only a few unique unions; every union gets its visible triangles drawn.

  3. Physics. Unions with complicated collision meshes are more complicated to collide with. Setting the CollisionFidelity property to ‘Box’ or ‘Hull’ can help with this, and might be worth it if you have a lot of complicated leaf unions and anticipate people walking on top of the trees.

All of these are good reasons why it’s not a good idea to cut off the bottoms of the root parts. You don’t gain anything in terms of looks (unless you have very thin ground that people can walk under) and you increase complexity in a variety of other places.

All that aside, these trees look great, and I particularly like the roots.

12 Likes

You can have better wood grain with my handy dandy pocket sized materials extension pack

6 Likes

I’ve been trying to reproduce your leaves before this post and this helped me out!

The one thing I dislike is how you made the trunk. Using cylinders for a basic shape is fine.
But if anyone is trying to make a showcase with this then my advise would be carving up the cylinders so the trunks look more natural and curvy.
Example of what I made nearly half a year ago:


(How do I collapse this image??)

Yes, this does have lots of triangles as I’ve checked in blender. But if you choose carefully what should be worth making a union and what not, then you should be fine.

I really think people need to use more union to polish up their creations especially with showcases.
But that’s just my thought!

8 Likes

The Kunena spoiler equivelant is:

<details><summary>Spoiler Name</summary>
contents of spoiler
</details>
Spoiler Name contents of spoiler

You can also set the width/height of the image:

<img src="imgsrc" width=200>
<img src="imgsrc" height=200>

With width=200:

6 Likes

It was @Maelstronomer 's Pilgrim Islands that made me realize that tree height does look a lot better. So I made a tree that was five-sided and large and in charge that went well with the style of the place.

Large and In Charge Trees
2 Likes

Nice

7 Likes

rawblox endorse my model pls

36 Likes

What a beautiful geometree

29 Likes

Corrected the formatting of the original post (spoiler tabs were set up incorrectly)

6 Likes

Thank you! I managed to produce some decent-looking trees with this!!

5 Likes

Neat! You should show us what they look like :smiley:

Now that meshparts are available, I would suggest you create the leaf in 3D modelling software such as Blender and upload it as a Meshpart. We’ve replaced the CSG trees in Deathrun with these Meshes and saw a great performance improvement.

8 Likes

Oh Thanks for the suggestion! I will do that for sure!! It looks like this

29 Likes

Am I the only person who can’t do this?
Every time I try, I can’t get the unions positioned properly.

thank you so much for helping all of us, especially people who dont know how to use blender/does not like to use it. it is greatly appreciated.