Realistic, real-time (performant) trees and vegetation?

Just wondering if anyone has any advice about creating realistic, real-time (performant) 3D trees and vegetation for Babylon.js, specifically landscaping around architectural scenes? I’ve used simple 2D billboard trees and Xfrog 3D trees in the distant past with game engines, and I know there’s also The Grove, Speedtree and Blender’s Sapling plug-in.

I don’t need close-up detail or wind or growth animation - just decent looking realism at a distance.

Any advice or output examples appreciated.

1 Like

I’m not an artist nor a blender user but maybe @gryff or @Vinc3r have some recommendations?

Hi inteja,

We used 2D Plane with transparency of realistic image of tree. Then had trees (and bushes) lookAt(cam.position).

Surprisingly, as we walked around/through the trees and bushes, always turning toward the cam - it was not easy to notice everything rotating. It made me more curious about this technique.

We “stacked” leaves of bushes to get a good 3D illusion. For trees, I stopped at single 2D (good enough), but was inspired by an example where many 2D planes were used to make trees.


Recently we experimentes with the technique of “stacking” multiple 2D planes in 3D space (for nebula and galaxy) and came away with 60FPS. From the side it looks like an accordion, but after all are parented to a “master” and the master looks at the camera - it is never possible to tell if it is 2D or 3D or a stack… of 2D images.

Also it gives a nice realistic parallax, which could be be achieved with foliage.

If this sounds possible for you I’m happy to share the code for a test.
The reason we like this approach is:

  1. getting realistic 2D images is easy.
  2. easy to modify to get the exact look you want.
  3. surprisingly difficult to tell where 2D and 3D overlap
  4. -> 60 frames per second <-

We pushed the limit with the space scene… which would be similar for a forest.

It renderw … 30 transluscent stacked frames, at 1000x1000. With BABYLON.Engine.Alpha_MAXIMIXED and ONEONE…
Then animated a CAM through all the 2D frames
And to our surprise 60FPS.
I dont know why.


To render a forest in the distance - we just need the illusion of a tree, not a full 3D tree. Similar for a galaxy, we do not want to render a full 3D Galaxy… just the look of it. So the illusion is all that is needed, we found stacked 2D to be a good performant approach.

Below, is example of lookAt 2D trees and bushes on fire… (in AR)… easily improved.

Below, is example of “stacking”, 10 2D planes on the z axis to get real depth, with blending, for both a nebula and galaxy at same time at 60fps.


Not using LookAt. The purple ball is the “master”.
They don’t appear 3D, until cam is moving, and you go into them…

Then it is very 3D. We color each layer separately… maybe makes a nice forest? Idk.

The next experiment, we try to use this to make a massive army of enemies (in the distance).
Moving from 30 2D planes to 300, is more like a forest. And see if it is still 60FPS.

So experimental, and not for everyone.

:eagle: : )

1 Like

Well @inteja this is the way I do it, so is this what you are after : trees

Done in Blender without any plug-ins, just using two simple particle systems. One to create the the tree, and the second to populate the terrain with that tree. Actually in the above example I create two trees - one all green leaves and one with mixed red->green leaves. In both cases (a tree and terrain) the tree trunk and terrain are “weight painted” to define the distribution of leaves and then the trees (blue defines - no leaves). See image below.

The leaves and trees are initially created as instances - so we have built in efficiency for the final product.

If that is what you re looking for, I can add more info for you.

cheer, gryff :slight_smile:

intega1

4 Likes

Thanks very much @Deltakosh, @aFalcon and @gryff!

@aFalcon yes I’ve used the 2D billboard approach in the past to good effect but it’s great to see a breakdown and reminder of the rationale/justification for this approach, even with today’s better graphics hardware where it’s tempting to just do everything in more detailed 3D.

@gryff thanks for outlining your Blender technique for generating 3D (or is that 2.5D?) trees. I’ll try it out and maybe do a comparison with some of the Blender plug-ins, although I suspect your approach would provide more control over performance tuning than the plug-ins.

I think a hybrid approach might work in some use cases. Often with larger master planned real estate developments you’ll have quite a lot of vegetation and landscape architects are very particular about what species are depicted (and here in Australia our flora and fauna is … ummm … rather unique), so maybe 3D or 2.5D for larger “feature” trees and 2D billboards for “infill” vegetation. I’m also conscious that accurately depicting this kind of landscape architecture is a huge time and effort … but an interesting challenge nonetheless :slight_smile:

1 Like

@inteja : well let me know if you need any help about my methods. I will try to find a video for you.

As for Australia and the flora and fauna - years ago, I did a piece of 3D building for the University of Western Australia (Perth) and their “campus” in Second Life. I built a centre with a pool, trees, plants etc.

By the way the SL technique for the smaller stuff was to use 2 or more intersecting planes to define the plant.

cheers, gryff :slight_smile:

2 Likes

@gryff - those are great trees!

I saw your terrain test (about a year ago) and it inspired the notion of using multiple transparent planes to combine 3D things. Glad to know it is your work.

The weight paint technique to define leaf instances… very interesting.

How does weight paint transfer to instance number?

I look…

@inteja - billboard yes. I always forget to call it that. And the 2.5D notion is cool.

1 Like

Combining gryff’s tips and foliage geometry like in this short tutorial can generate good and fast results: [Tutorial]Modeling a tree crown with ease — polycount (you can also grab some ideas from this wiki).

Note also that it could be less expensive to just buy already made trees (probably findable using tree models realtime pack search keywords). But as you say that your australian vegetation is unique, it’s maybe not so easy.

2 Likes

I’ll try to layout the process I use. See the images below, as I go through the process.

  1. I create a tree with limbs - no leaves yet. And I will use a simple plane with a texture with transparency (Top corner of image 1) that I will spread over the basic tree that I have weight painted, to produce the tree in the lower part of image 1.

  2. So I select the tree in Object Mode and add a particle system. The particle system is “hair” and then I tweak the values for Emmision number, seed and select “Advanced”. Going down the image, I set values for rotation randomness, physics size randomness, and choose the object I will use to replace the “hair”. In this case a plane with the image in first image (top corner). Then set the “Density” using the weight painted vertex group.

  3. Then I tweak these values until I get something I like (lower part of image1). When happy, I go to the modifiers tab and click convert. This produces all the instances (see last image). To complete the tree, I select all the instances and finally the tree trunk and merge them to create my tree.

  4. Now using this tree, I create the terrain, weight paint it, apply a new particle system choose the number of trees etc. I want and do the convert. It leaves all the trees as instances spread over the landscape (no merging here) with different sizes and rotation.

  5. Variations come from different textures on the plane, different tree trunks, emission number values, different seed values etc.

Quite a simple procedure really.

cheers, gryff :slight_smile:

intega3

intega4

intega5

4 Likes

Blender particle system, hair as tree… very cool!

I will give it a test run one day.

Thanks @gryff : )

1 Like

Nice quick & efficient tut’ :slight_smile: I just made a PR to add it on this doc’ page.

3 Likes

@aFalcon @Vinc3r @gryff @Deltakosh thanks for the great input.

This community is awesome! :sunglasses:

3 Likes