Jump to content

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


Recommended Posts


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 :) 


Link to comment
Share on other sites

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




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

Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

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. :D

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.

Link to comment
Share on other sites

After the links that renjianfeng sent me(thanks :D ) 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 :wacko:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...