Hi,
We’re checking in to see whether anyone here has any innovative ways of displaying trees (vegetation) in your glTFthree.js scene. We’re on a quest to create good looking trees (preferably a lot if performance allows), while maintaining performance. As you know, mesh-trees tend to have a high polycount. We can of course model Minecraft (low poly) trees but that’s not our goal.
We’ve been looking at:
Node-materials
Billboard textured trees (texture + alpha)
Instancing triangles as leaf + adding an optimized trunk
Particle systems + hair & fur modifier
We’re using Blender and/or 3ds Max in our workflow.
Anyone out there with any niece experience on this field?
With gltf alone you can’t introduce a dynamic system, but the minimum you can do is using 1 geometry per tree type and use instancing on them, though this is limited as you will always render all trees.
I automated this process by merging geometries, textures and materials into 1 for instancing, but you can also do this manually. Another reason i automated it was to preserve effects such as waving crowns in the wind even if it’s a single object like in this simple test with cartoonish trees. https://streamable.com/2rjkfw
For distance yes, that’s a common technique, but for closer ones you want the 3D version, probably even different versions from simple plane crowns like in the video above to per fork or even single leave versions for the closest trees, creating the assets is the more complicated part.
I render the scene through an optimized spatial index with auto-instancing to still be able to cull anything that isn’t seen, as well as auto-impostors for billboards similar to what you described but preserving their 3D appearance by using additional g-buffer sprites or a volumetric rendered representation what gives the best visual result. Additionally, but that adds more complexity Tesseract renders large areas of trees in the third LOD simply on the terrain anymore as at some distance a single tree wouldn’t even fill a pixel on screen anymore.
DCC tools won’t give you a dynamic system, they can only export geometries, for creating them it’s a different story but there are specialized tools for trees.
What is your goal? This can be very case specific, like simple billboard trees for an real estate map viewer or a vast amount of trees for an detailed open world. I assume trees aren’t the mayor part of the project?
There is an example here (select “Grass” in the dropdown) of loading a (non-animated) GLB model for a blade of grass and then instancing and animating it using NodeMaterial:
The particular NodeMaterial created in that scene is complex, and probably not the best example, but a similar approach would work with custom shaders or your own NodeMaterial. For a simpler example see:
^This example loads a GLB model of a singleflower. It then creates one InstancedMesh containing many copies of the stem from that flower, and another InstancedMesh with many blossoms. The stem and blossom are split so that we can put different colors on each blossom while keeping all the stems green. And then a simple scaling animation is applied.
You will likely need to script your animation in three.js, but you can bring the material and geometry assets from Blender or 3DS Max with glTF.
