# Open world enviornment - Trees & Rocks & Grass at scale

**URL:** <https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943>\
**Category:** Questions\
**Created:** [June 1, 2022, 4:50am UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943 "2022-06-01T04:50:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 1, 2022, 4:50am UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/1 "2022-06-01T04:50:37Z")

</div>

I have two versions of the open world map that I’m working on

with trees and rocks:  
[https://g7r7sz.colyseus.dev/client/index.html](https://g7r7sz.colyseus.dev/client/index.html)

without trees and rocks:  
[https://g7r7sz.colyseus.dev/client/index.html?realm=mountain\_range\_1](https://g7r7sz.colyseus.dev/client/index.html?realm=mountain_range_1)

As you’ll see, there’s a serious frame rate drop when many environmental objects (meshes), rocks and trees in this case, are added to the scene.

This poses a bit of a problem when trying to build an open world adventure game where part of the goal is to create a large and expansive interactable world/environment. I want to be able to add seemingly many rocks and many trees into the scene for the player to interact with, but in a way that does not decrease framerate substantially.

I’m looking for feedback regarding techniques and strategies towards achieving this.

My first naïve approach would be to somehow keep track of which objects/meshes should even be considered, say those within a 2000 radius limit of the player (camera.maxZ property), and only have those meshes added to the scene instead of having all 20k trees and all 20k rocks be added to the scene from the start. As the player moves I would dispose trees and rocks that become too far from the player, and also add in the new ones that come within range.

In the question I also mentioned grass, but I actually haven’t gotten this far yet. I was thinking a cheap way to show grass would be to use some sort of shader effect like this one:

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#4AEW8L%2381)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

but there I wouldn’t know how to apply this on a per “patch” basis as the player navigates the world.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 1, 2022, 6:58am UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/2 "2022-06-01T06:58:52Z")

</div>

OMG. What have you put yourself into? 😉 There are just so many points to an open and large world environment. The terrain. The number of meshes. The active faces and indices and then… the physics.  
I am afraid you will have to rework it all. Currently it seems like physics and meshes take the most.  
So, I would start with those. Also may be create zones and load content async when approaching a zone.  
Make full use of thin instances for trees and rocks. Probably implement octree and for the rest I’ll leave it to the experts to give you the correct input on this (because I have no faen clue 😉. All I can say is that you’re in for a long journey 🗺 so let me just wish you GL and send you strength ✊ to continue and finalize your project.

---

<div class="post-metadata">

**Author:** ![webgrid](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/webgrid/32/24940_2.png) [@webgrid](https://forum.babylonjs.com/u/webgrid)\
**Post date:** [June 1, 2022, 8:04am UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/3 "2022-06-01T08:04:09Z")

</div>

Here is a video from my game and this cinematic scene has generated landscape and 5-10k decor objects (grass, trees, etc).

[![](https://img.youtube.com/vi/belPnUvX818/maxresdefault.jpg "MudGate cinematic gameplay teaser") ](https://www.youtube.com/watch?v=belPnUvX818)

What I have done is:

- Using instances
- Optimize scene by freezing meshes, materials and etc.
- I use offscreen canvas.
- I do compute work with web workers (vertices, indices, animations and more)
- I do compute work for landscape
- I send only chunks of data depending on player location.
- I dispose/reuse objects not visible for the player.
- I have a FPS controller maxing at 60fps

I target players with 3d card equal at GTX 1030, and I found all of these points above to be useful for me, especially using web workers for compute work and offload the engine to a separate thread.

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 1, 2022, 3:49pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/4 "2022-06-01T15:49:21Z")

</div>

@webgrid Thank you! This is exactly the type of advice I was hoping to receive.

Do you have code snippets that I might be able to take a look at? Each of the bulleted points you mention make sense, but I want to be sure I have the right idea about each one before beginning to implement it

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 1, 2022, 3:54pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/5 "2022-06-01T15:54:10Z")

</div>

@mawa I’ve been working on this on and off for 6 months (starting from knowing nothing about babylon js or colyseus.js) and I find this to be quite enjoyable.

When you say it seems like the physics and meshes take the most, what do you mean by that?

I’m using ammo.js for the physics and I don’t think the physics engine is contributing at all to the frame rate drop.

I like this idea of content “zones” which sounds like a version of the naïve approach I mentioned.

And what are you suggesting an octree for?

---

<div class="post-metadata">

**Author:** ![webgrid](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/webgrid/32/24940_2.png) [@webgrid](https://forum.babylonjs.com/u/webgrid)\
**Post date:** [June 1, 2022, 4:04pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/6 "2022-06-01T16:04:05Z")

</div>

Hi,

BabylonJS has excellent documentation on how to optimize a scene here:

> **[Optimizing Your Scene | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/scene/optimize_your_scene)**
>
> Learn how to optimize your scene in Babylon.js.

Good luck with your project and keep working! I started 2 years ago, and submitted my game to Steam couple of days ago 🙂

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 1, 2022, 4:06pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/7 "2022-06-01T16:06:36Z")

</div>

@webgrid that’s so awesome!

Congrats man! That’s the dream!

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 1, 2022, 4:26pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/8 "2022-06-01T16:26:17Z")

</div>

> [@arcman7](#):
>
> I’ve been working on this on and off for 6 months

It’s a good start. But a project like this will likely require a couple of years until distributable.  
It’s good you find it enjoyable (and it is 😃

> [@arcman7](#):
>
> When you say it seems like the physics and meshes take the most, what do you mean by that?

I was just looking at the performance in ms (on an old rig actually). Meshes and most importantly physics are those taking the most time (and resources) on render

> [@arcman7](#):
>
> I’m using ammo.js for the physics and I don’t think the physics engine is contributing at all to the frame rate drop.

I believe you are wrong here. Physics is a part that takes the most of resources and ammo.js (unconfigured) is probably the one with the greatest impact on performance.

> [@arcman7](#):
>
> content “zones” which sounds like a version of the naïve approach I mentioned.

It wasn’t naïve at all. Downloading chunks of data as @webgrid suggested and using web workers to compute outside the engine and render loop certainly makes a huge difference.

> [@arcman7](#):
>
> And what are you suggesting an octree for?

It will help with the handling of a large number of meshes and for the above. Some doc can be found [here](https://doc.babylonjs.com/divingDeeper/scene/optimizeOctrees) but you will first have to determine if this can apply to your project and provide enough benefits.

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 1, 2022, 4:46pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/9 "2022-06-01T16:46:16Z")

</div>

So regarding content zones, would you suggest actually dividing a given map up into areas, or does caring only about the objects within a certain sphere of the player work just as well?

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 1, 2022, 5:16pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/10 "2022-06-01T17:16:09Z")

</div>

@mawa also, reading about this octree class that babylon provides, how would you go about measuring performance gains while using it? I’m thinking just measuring fps might be a start

I have this natural instinct to wanna build just for the sake of building, but I’m trying to keep it objective and want a way to prove to myself that what I’m doing is improving things

---

<div class="post-metadata">

**Author:** ![webgrid](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/webgrid/32/24940_2.png) [@webgrid](https://forum.babylonjs.com/u/webgrid)\
**Post date:** [June 1, 2022, 8:10pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/11 "2022-06-01T20:10:33Z")

</div>

Hi,

I have divided into zones and use object hashing to track objects sent to the client and I use a sphere of the player as you mention.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 10, 2022, 11:13am UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/12 "2022-06-10T11:13:53Z")

</div>

> [@webgrid](#):
>
> I have divided into zones and use object hashing to track objects sent to the client

Any chance we get to see the result? I’m pretty sure it should already make a huge difference in performance. I would luv to be able to compare. Thx and have (both) a great day 🕶

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 10, 2022, 3:41pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/13 "2022-06-10T15:41:38Z")

</div>

I was also wondering about this aspect…

Could you use something similar to Valheim, where one players “world state” is the basis for the world, and I’m imagining like a sperate colysesus lobby room maintains that state and synchronizes with the rest of the clients. For example, say I destroy a tree, everyone should see that.

---

<div class="post-metadata">

**Author:** ![webgrid](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/webgrid/32/24940_2.png) [@webgrid](https://forum.babylonjs.com/u/webgrid)\
**Post date:** [June 10, 2022, 4:15pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/14 "2022-06-10T16:15:51Z")

</div>

I do not understand, result as in code ? The performance is good as I do a lookup check to compare the hash on player and the object.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 10, 2022, 4:19pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/15 "2022-06-10T16:19:52Z")

</div>

OOps, Apologies. There must have been a misunderstanding of mine with your latest post here. I thought you had done this change for @arcman7 project. I know it is implemented in your project and I also know the result is great 😃. I wanted to see what it would do here.

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 10, 2022, 4:29pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/16 "2022-06-10T16:29:03Z")

</div>

Lol. I wish I had a someone else to work with.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 10, 2022, 4:33pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/17 "2022-06-10T16:33:08Z")

</div>

Well, sometimes wishes can be fulfilled here. 🧙 There are a lot of things happening behind the curtain. Some relations continue after a PM and, overall, the sense of collab is very high in the community. Reason why I got mistaken, I guess.

Again, my apologies for this confusion. Hope you’ll find your way out and using the easier path rather than the long one 😃 Meanwhile, have a great weekend 🌞 🕶

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [June 10, 2022, 4:56pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/18 "2022-06-10T16:56:45Z")

</div>

I also create an openWorld. The first thing is I don’t use physics. I use instead: moveWithCollisions  
Then an octree improves collisions.  
The use of LOD, occlusion requests also improves things.  
If the world is much too big and highpoly modeling will have a heavy impact (medium poly remains acceptable.)  
The goal is to find compromises between quality and performance. Too much quality will kill performance.  
Afterwards I also remain convinced that physics is very expensive for large scenes, and even counterproductive. Higtpoly modeling is to be avoided or use LOD to greatly improve things. And a land with less ambition will also help.  
Also think about scale. a land may be small, but if the characters are small, then the land becomes large.

I also disable that in the motor.

```auto
this.engine.enableOfflineSupport = false;
this.engine.disableManifestCheck = true;
this.engine.disablePerformanceMonitorInBackground = true;
this.engine.renderEvenInBackground = false;

```

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 10, 2022, 5:59pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/19 "2022-06-10T17:59:57Z")

</div>

Real quick, what is the “easier path”?

You have a great weekend too!

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [June 10, 2022, 6:04pm UTC](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943/20 "2022-06-10T18:04:30Z")

</div>

@Dad72 I hear you. I really do.

It took me many months to get the physics engine working at a very large scale. But I believe I have that part figured out now. I’m also going to be making a modification or two soon with the ammo.js idl. I’m not convinced largeness really has that much of an impact, but rather how many render targets there are in the current screen, and to that end how large the camera.maxZ value is. I’ve tried scaling my map and characters to be really small vs what they are now and it didn’t seem to affect anything.

As for those engine properties that you toggled off, how much performance impact would you say that had?

[Next page](https://forum.babylonjs.com/t/open-world-enviornment-trees-rocks-grass-at-scale/30943.md?page=2)