Render Loop - Chrome Performance Dev Tools / Profiler

Questions
1

Hi,
I am having a weird issue and am not quite sure where to look at.

I am regenerating a mesh on pointer move. The generation happens in like 30ms and if I move slow, the mesh gets updated. But if I move fast, the generation happens, but the render loop is not firing, causing a big lag. As you can see in the picture
image

Weirdly, I cannot reproduce this, when I use the Chrome Performance Dev Tools. Then it is butter smooth.
When I use the Babylon Performance Profile however, it won´t collect information in the time the loop stops.

This mainly happens in Chrome. In firefox its as smooth as with Chrome Performance Dev Tools.

I have tried a few options, like calling the engine._renderFrame() scene.render() functions at end of the
mesh generation. It did not help.
I have the feeling my pointer move events are fired so fast, that the render loop is not continuing. So I increase the render time of a frame by my movement.
One option that I tried, is tracking the frameId. So I only call mesh generation, if the frameId is different from the last one - so one generation per frame. But this is not working properly, when I release the pointer. It is stuck on the last frame.
The other work around is a combination with setTimeout. But this feels like a hack.

    if (timeout) {
      clearTimeout(timeout)
    }
    // sometimes generation is stuck in a frame. we use a timeout to get out of it... not nice but works ok
    if (engine.frameId === lastFrameId) {
      timeout = setTimeout(() => {
          generate()
      }, 1)
    } else {
      generate()
    }

    lastFrameId = engine.frameId

Any idea how this could be improved?Is there any way I can easily “hook” a function to the render loop?

2

The renderLoop function is assigned to engine like:

engine.renderloop(() => {
    scene.render();
    myExtraStuff();
});

One way is to just tack on extra stuff.

3

Hm… this makes sense. But I guess I would need implement it as a callback. Not so easy in my structure. I think at the end I still will struggle with too many updates anyways. The update of my generation is not in sync with the render loop.
Though one way could be, to have an update flag.
If true, I will update within the loop. If false, I won´t. This might work…

I guess onBeforeRender is an alternative to calling something within the renderloop function?

4

Also, if you have a preference, there is also an onAfterRender()

1 Like
5

Nice, I think this was it! Makes complete sense!
I prefer onBeforeRender :slight_smile:

Thanks!!!