Override or control render loop in Babylon React Native?

Questions
1

In @BabylonNative the render loop is setup inside the EngineView component. Is it possible to override, temporarily pause or control this render loop from outside the component (like render only every 2nd or 3rd frame etc)?

2

I guess so but I’d rather get @ryantrem 's confirmation.
Actually, I’m wondering if skipping rendering will not stop JS as well. As there is a tight synchro between both.

3

Thanks @Cedric. Why I’m asking is because in recent weeks as we’ve added more React Native UI and functionality to our app, both the 3D rendering frame rate and UI performance/responsiveness have been degrading steadily and we’re trying to determine why and implement more performance optimisation strategies. Maybe being able to control the render loop might help?

We’re hoping that if and when we move to React Native New Architecture with Concurrency and when Babylon React Native supports it, that’ll alleviate some of these performance problems. Sharing a single thread between UI and 3D has been an issue. We were recently able to get V8 JIT working, and it had some positive impact, but not enough.

4

EngineView internally uses things from NativeEngineHook and NativeEngineView. The latter two are not part of the “public API” and are not exported from index.ts, but you could probably import them directly and experiment with them. This should make it possible to manage the render loop yourself, but again since right now these are meant to be implementation details they may change in the future.

Since you said “We were recently able to get V8 JIT working,” I assume you are primarily targeting Android? If so, are you setting a value for the androidView prop?

5

Hi @ryantrem, we are targeting both Android and iOS. We haven’t looked at androidView prop as yet. I will experiment with that. Thanks!

6

If you are using V8 and Anrdoid, can you use the Chrome debugging tools to get some more insight into perf?

Also, if you have things working on iOS, you can try setting Tools.PeformanceLogLevel = Tools.PerformanceLogLevelMark in your code (I believe this has to happen after useEngine gives you an engine instance), and then profiling in Xcode Instruments with the Points of Interest instrument. This will show you on a timeline things like frame start/end from the JS side as well as similar things from the native side. We use this for understanding Babylon React Native perf characteristics, but this might be too low level to be helpful in your case.