Unblocking RN UI for Babylon React Native

Hi, I’m considering Babylon React Native for next project.

While building some prototypes, I couldn’t get away with frustrating UI blocking when loading 15Mb glb from local asset. (almost 2sec Hangs)

I understand that this is issue with single threaded js environment and worker thread and such is not readily available.

Will it be possible to unlock UI with React’s Concurrent Mode/startTransaction?
It could even benefit Babylon.js + React in web browser side.

Edit: Ok, I found out that Concurrent Feature is not capable of what I tried to solve; it provides concurrency for many small RN component rendering. ref
I still need some guidance on this performance issue, changing title accordingly.

Please correct me if I’m misleaded.

PS: Merry Christmas and Happy New Year to you all!

Welcome aboard!

cc @BabylonNative but please be patient as most people are in vacation.

Hope you all having wonderful holidays!

Here’s just an update with JavaScriptCore profiling
(Please excuse UI language :wink:)

The hard work seems it’s bound to materials and shader.

I guess loadMaterialAsync is related to texture loading ?
Shader compilation taking that much time is not surprising.
An issue has already been open : Enable asynchronous shader compilation · Issue #402 · BabylonJS/BabylonNative · GitHub

1 Like

This might be just what I was looking for!

How can help to I get this move forward?

If you feel like you can do the PR to do threaded shader compilation, then we can talk further about the details with @bghgary and @srzerbetto

@zb_sj I’m assuming this hang doesn’t happen when you use the same code in a browser (e.g., in a playground)? Can you check?

Also, can you share the model being loaded?

@bghgary You are correct. It only has micro hang on first load in browser.

Too bad I can’t share the model but any model with many materials like sponza suffers the same.

@Cedric I will have to check with my colleagues if I can spend some time fixing this. I really don’t have much spare otherwise… :frowning:

To be precise, this one? glTF-Sample-Models/2.0/Sponza at master · KhronosGroup/glTF-Sample-Models (github.com)

Yes, I actually lazily tested glb someone created lava-assets/sponza.glb at master · Breush/lava-assets · GitHub