What is the right way to determine that performance is stable and more items can be rendered?

Questions
, ,
1

I have an infinite canvas app. My app can have up to 200 elements that are just meshes with images. However, the initial page load is awful and the page crashes above 50ish elements. The solution I’ve found to work well is decreasing the number of elements visible, and then slowly adding more as the previous have rendered. There can be a ton of elements rendered at once and performance is great, it’s just the initial page load that crashes if we have a higher count of elements.

But I haven’t found a great way to batch the elements. What callbacks of the nodes should I use to determine whether elements have been rendered and if I can proceed with adding more nodes? What gl metrics can I look at to determine whether rendering has stabilized and it’s safe to add more without overloading the user’s device?

Not sure if onUpdate or onBeforeRender is what I need. Maybe I just haven’t found the right property to look at on those?

2

There aren’t really metrics like that., but your app shouldn’t crash depending on when you add the objects… Like.. addding them all on the first frame vs adding them later shouldn’t cause a crash.
I suspect something else might be going on there?

You can use onBeforeRender to detect when an object has been rendered , but keep in mind its called for every render, not just the first.

One approach I use to smooth out the adding of lots of objects is to just push them into an array instead of adding them to the scene.. then in the render loop.. pop/shift a couple off that list each frame, and add them to the scene.

1 Like