GUI culling - rendering large scale node systems

I am thinking about using the GUI components to build a dynamic node system that can span up to tens of thousands of items. Because of the number of potential items on screen it is important to cull those not visible.

The best way to visualize what we need to build is if you think about the material nodes where each node also contains labels, inputs and buttons. Where you can potentially end up with 10k nodes.

Are GUI items not in frustrum get culled.
I have a sneaking suspicion that it might not and that a better bet is the 3D version.

If really needs be we can always just use a dynamic texture to pain on what we want and build the interactions ourself, but if you already have the right stuff why go through the effort.

What would be the suggested way to build something like that in babylonjs?

When you say “not in frustum”, do you mean controls in Texture Mode: The Babylon GUI | Babylon.js Documentation or in Fullscreen Mode: The Babylon GUI | Babylon.js Documentation? The culling will certainly happen in Texture Mode since they will be just meshes. For the Fullscreen Mode, we also have some optimizations to not render controls that aren’t visible: AdvancedDynamicTexture | Babylon.js Documentation (

By not in frustrum I mean placed in such a position that the camera will not have it in view.
To that end I think the texture mode might possibly be the best choice there.
We probably want to create our own control for what we need but I see the docs has a example for that.

Does this sound more or less right?

  1. Create custom control to deal with complex drawing.
  2. Add to plane that has a dynamic texture on it.
  3. Use batmap cache to optimize rendering
  4. When the plane goes out of view, babylon’s standard culling will deal with that.

I am still trying to get my head around this stuff, but the dynamic texture stuff looks amazing.

Yup sounds right to me :thinking: