Performance question regarding dynamic meshes rendering

Hello! I’ve created 1000 green blocks and a huge arrow ( 18760227850 size in depth ). The arrow has some grids like a ruler, and when you navigate with camera, the ruler grids are created/disposed based on how much your camera is on the Z axis.

After moving the camera several times it starts lagging for no reason. I don’t see any increase in CPU/GPU/RAM usage but the lag is still. Since it’s not a limit from hardware I’m guessing it’s some config I should do in Babylon to fix it?.. :thinking: what should I do?

I’ve recorded a demo at 60fps: Dropbox - 2020-11-29 20-19-54.mp4 - Simplify your life

Here’s the playground: https://playground.babylonjs.com/#L2NL4X#1

I would guess in your case Garbage collection is the issue.

Dynamic creation/destruction is pretty costly perf wise. In an ideal situation you could create all you see upfront and move it/reuse it to see somewhere else.

I would guess in your case Garbage collection is the issue.

browser’s or babylon’s ? The performance usage is the same :confused:


EDIT: the lag occurs when drawing text on texture

GC is inherent to the browser but related to the creation of babylon objects and their destruction.

As you rely on text, this is drawn through a canvas2d and then uploaded to the gpu, so for sure if you have lots of dynamic texts, your performance will be drastically reduced.

1 Like

As you rely on text, this is drawn through a canvas2d and then uploaded to the gpu, so for sure if you have lots of dynamic texts, your performance will be drastically reduced.

I’ve fixed it by pre-registering the materials with their textures and then assigning them dynamically to the meshes when needed. In pseudo mode it’s something like:

let minutes = []

for(let i=0; i<60; i++)
{
    let Mat = new B.StandardMaterial
        Mat.minute = i
        Mat.diffuseTexture = new B.DynamicTexture( ... )
        Mat.diffuseTexture.drawText( ... )
    minutes.push(Mat)
}


let Mesh = new B.Mesh.CreateBox( ... )
    Mesh.material = minutes.find(item=> new Date() .getMinutes() === item.minute)

    Mesh.dispose(false, false)

    Mesh =  new B.Mesh.CreateBox( ... ) 
    Mesh.material = minutes.find(item=> new Date() .getMinutes() === item.minute) // lag will no longer occur

Hope it’ll help others :slight_smile:

Hi, just an added tip here for anyone doing similar things:

If you are dynamically creating textures, but those textures don’t change after being applied to a mesh, then you don’t actually need dynamicTexture. You can make a dataURL for your canvas, and pass it to a regular Texture object.

E.g.: Babylon.js Playground

1 Like