Best way to render a large mesh? or otherwise implement fog of war

[Shb]

Hi,

I am trying to render a large custom mesh (with 256^2 vertices) and have that over the map, and adjust vertex transparency to implement FOW(Fog Of War), I've noticed that the cpu usage goes way up when I load the large mesh, I thought that it wouldn't impact the cpu usage much as a sizable part of the mesh isn't on screen.

 

This leaves me with a couple options:

1. I could split the mesh into smaller chunks and load them as needed (seems difficult, and I'm not sure if it'll even work?)

2. Reduce number of vertices on the mesh (but this would leave me with low resolution, suboptimal)

3. Try an entirely different approach for implementing FOW (any ideas?)

 

Thanks In advance  

 

[renjianfeng]

Hi，That's my advice.

Babylon.js v3.1 introduced a new feature: Occlusion Queries. Occlusion Queries detect whether a Mesh is visible in the current scene or not, and based on that the Mesh get drawn or not. Occlusion Queries is useful when you have an expensive object on the scene and you want to make sure that it will get drawn if it is visible to the camera and it is not behind any opaque object. BabylonJs provides an implementation for Occlusion Queries using property occlusionType in AbstractMesh Class

Doc：https://doc.babylonjs.com/features/occlusionquery

 

And：

Optimize your scene：https://doc.babylonjs.com/how_to/optimizing_your_scene

Optimize Your Scene with Octrees：https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees

Use SceneOptimizer：https://doc.babylonjs.com/how_to/how_to_use_sceneoptimizer

[Shb]

Thanks  

Will have a look when I get back (heading out now).

 

I've already tried with octrees (I maybe doing it wrong) but it didn't seem to help all that much. 

 

I could try putting up a playground, if that'd help.

 

Thank you for pointing me to this 

[iiceman]

A playground would be nice. I would love to see how you use vertex transparency to implement Fog of War. I thought about how to do it a while ago bit didn't have a good idea yet. I wanna see how you do it.

Splitting the mesh in submeshes might be easy: 'You can speed things up by subdividing your mesh into submeshes using mesh.subdivide(x) where x is the number of submeshes you want.' (source: https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees#optimizing-collisions-and-picking) ... but not sure if submeshes work with those Occlusion Queries.

[Shb]

After the links that renjianfeng sent me(thanks  ) I did end up splitting up the mesh into sub meshes, which did improve the cpu usage issue, but I don't think I could use Occlusion Queries on the sub-meshs.

Also if any of you have an idea as the what would be the best number of sub-meshs to have that would be great (number of vertices per sub mesh ?) 

 

I did notice something odd though it seems that the cpu usage is high on Macs[running OS X 10.12.6] (with it idling around 30-40% of one core) while they are kept relatively low(I saw it idling at 1.9% O.o) on windows machines, using chrome on both. ( I used activity monitor and task manager respectively to look at the usage).

Upon investigating further I found out that even the default scene that loads on Babylon JS playground takes a lot of CPU power. ( I hope this is not a bug on my machine, seems like it though because the second I open Firefox no tabs open the cpu usage is already quite high  )

here's a link to the playground : http://playground.babylonjs.com/#KDUJ4Z iiceman as for the actual implementation, I'm still working on it , need to sort out my spaghetti code 

[aWeirdo]

Hi @Shb

I made this some time ago; http://playground.babylonjs.com/#S3U25D
I used to have a topic about FoW, but i can't find it anymore.
 

[Shb]

@aWeirdo, thanks for this, it's looking good