Best approach when building a complex hex map?

Oh all knowing internet!
I humbly stand before you in search of your wisdom…

Hey there bjs-forum :wink:

Sooo… With a friend I recently started playing around with bjs and I must say i’m really impressed by the capabilities and the performance. But since this whole framework and the 3d-world in general is pretty new to me I have some questions regarding the proper approach…

We’re building a 4x game as a test-case loading ca. 40 low-poly tiles(at the moment), pre-baked in blender and exported as *.babylon. Each tile has an average size of 1,5mb, including a 1024px inline texture rendert as png. In the end we want to load ca. 250 different tiles. Most of the times each tile consists of one mesh, one material and one texture. Sometimes there are extra materials/meshes in the tile like a glass-material or a mesh for animation for example.
We load each tile once and position instances of it on the map.

There is an actor I’m moving around the map with an arcrotate camera attached to / following it.

We’re developing and testing on an mid 2011 iMac, 2,5 GHz Intel Core i5, AMD Radeon HD 6750M 512 MB, 12 GB 1333 MHz DDR3 and use Electron js v9 as a container.

So far for the (basic) setup. The overall performance is pretty great (I’m still processing the fact that nowadays it is possible to live-render 3d in a browser… wtf?! :wink:

We encountered some behaviors, we can’t quite explain though… Maybe someone can point us in the right direction?

So, here the tldr part :wink:

  • What is the main bottle-neck in bjs, performencewise? No of vertices, no of meshes, faces, materials or textures? Or is it the texture-size?

  • as far as I understood one wants to keep the draw-calls as low as possible to spike performance. However when loading big maps and using the inspector it shows us some diced numbers for draw calls (i.e. 56745 for example). It takes some time (up to one minute), before the shown number of draw-calls normalizes (i.e. 10). As soon as the draw-call number is normalized the fps goes up, the shown vertices count in the inspector goes to 0. Is this a bug or a feature? :wink: Why does it take so long?

  • We reuse some materials in different files (our glas-material for example). In blender the material is the same in different exported files, however in bjs in the inspector it shows us the same material for every file we load (we load 5 files which contain a glass material, so in the inspector we have 5 times the glass material).
    What is the best strategy to reuse the material? Can one check at import if the material already exists? Or should one loop trough all materials/meshes after map construction, check for double-materials and delete and/or reassign them?

  • Shadows: We use csm to render the shadows. However the quality is not so great with a smaller shadow map (i.e. 1024) but if we set a bigger size (i.e. 4096) the performance drops. Plus we plan to have dynamic map-sizes in the game… So: Is it possible to render the shadow-map around the (moving) actor to spike quality and performance? Can we maybe achieve this by setting the boundingBox of the shadowGenerator object? Or is it better to push shadows if mesh is in frustum? Or what would be the best approach here?

It would be great, if someone could point us in the right direction!

I don’t know, what is customary around here after posting a long text, so just in case:

Thanks in advance!

With the best wishes from Berlin,

I think there is no one single answer on this one and they could all be harmful depending of the device. As a usual issue CPU usage is the bottleneck cause mono threaded.

Would be interesting to have a repro but more than 50000 draw calls feels insane on the web (still the mono threaded aspect)

I would create the materials by code in this case and assign where I need. I could potentially swap at load but it will still add a bunch of unnecessary bandwith.

CSM should be the way to go for this and you could probably force a size manually big enough for your case but not fully wrapping the extend of you game. @Evgeni_Popov can add more on this part.

With CSM you can provide your own (shadow caster) bounding info, see doc, if you have to tweak the rendering.

You should set the position of the light near your main character to get the best shadow quality.

1 Like

I have done something like that in the past!

Let me see if I can find a reference for you.

Something like this?