Large scenes and performance tips?

I’m very new to Babylon, and I’d like to ask what people’s opinions are on how well this would handle a fairly large city map in a top-down style like GTA1. A friend and I have an idea for a game that we started building with Unity but in light of the recent ToS news we decided to look for other options and came across Babylon. Now, I’m aware that being a JS engine it’s unlikely to have anywhere near the same performance as engines like Unity and Unreal but that’s not the level I would need for my game. I really want a style very much identical to GTA1, so the 3D side of things is actually very limited. The only two main differences being:

  1. I would like the city to be quite a lot larger than those in GTA1
  2. I would love the city to be procedurally generated if possible

Does anyone have any advice on how best to deal with this? My presumption is that I’d want to make some kind of seeder for the city code, so that I can load/unload chunks at a time rather than attempting to load a whole city into the scene at once.
I already got a little way with that approach before learning about Instances etc, so I’m now rebuilding that logic and I’m hoping to implement Geo Nodes to make the scenery more interesting.

If anyone’s had any experience with the performance of Babylon with large scenes, I’d very much appreciate a discussion on the matter as I find the best way to learn new languages is to talk to others knowledgable in the field. I’m by no means new to Javascript or Game development in general, only Babylon JS so wanted to gauge some opinions on the idea.

For general information, see:

Thin Instances could be used for generating large amount of buildings, streets, trees:

For WebGPU:

Compute Shaders:

1 Like

For procedural generation it’d be worth taking a look at the awesome new node geometry feature:

1 Like

webgpu introduced a feature called render bundles, babylon calls it snapshot rendering. this is going to be your biggest gains for big scenes imo. search the docs for webgpu and u’ll find some good info on it and other useful things. Search results: webgpu bundle | Babylon.js Documentation (babylonjs.com) . In the pg below, notice that it doesnt work with dynamic lighting, that’s why the pg has a toggle. even unreal has similar limitations by default.

Examples: Load glTF model | Babylon.js Playground (babylonjs.com)

here is a non babylon example of just render bundles. you can see that enabling render bundles drastically lowers the javascript submission time.
Animometer - WebGPU Samples

vertex animation - its not related to render bundles, nor limited to webgpu, but its something to be aware of
custom light shader | Babylon.js Playground (babylonjs.com)

one other thing i suggest to take a look at is the solid particle system (sps). you can use a gpu based particle system for terrain features like rocks and trees.

one other thing… not bjs but worth checking out for web perf
Liberty City - Grand Theft Auto III - noclip
the github repo for the above viewer
magcius/noclip.website: A digital museum of video game levels (github.com)

2 Likes

Thanks evryoen for the replies - this has given me some great pointers and things to look into :smiley:

I feel like rendering the city in chunks just bigger than the camera viewport is probably still the best way to go in terms of optimising the scene but I am pleasantly surprised by the results I’m getting already without any chunking at all. The main issue with chunks at the moment would be keeping track of things outside of the loaded chunk - such as NPC’s or even other players if I get around to making it multiplayer. That said, I have some more ideas that I’m going to experiment with so I’ll just see how those tests go.

Also @jeremy-coleman; that’s a nice find with the noclip viewer! I’ve never seen that before and it’s a nice demo of how other games have built up their levels :ok_hand:

For a game like GTA1, I would suggest a simple 1D or 2D uniform grid. Grids are easy and fast to implement, insert into and query. You can also get all cells in n number of layers surrounding a grid cell, so you can take the cell containing your camera or player position, and enable AI and physics in the next 2-3 layers. This can be used to cull as well. Disable all meshes not within all the visible layers. If you want multiplayer, simply run the same logic for all players + AI if you are being chased etc. etc.

2 Likes