BabylonJS in ReactNative

[MarianG]

Hey guys.
I need some help and I’m ready to pay too if it is necessary.
I want a simple scene in react-native with babylonjs.
I saw that there is a expo-gl package which expo the gl context and I was hopping to be able to make this work, but because I’m at the very beginning with react I’ve been stuck for more than 2 days on this, so I decided to ask some help.
The ideea is that I hired a freelancer for a mobile app, simple normal mobile app which in one ‘page’ has a 3d scene, he made it with ionic, buuut the performance is not too good so I did some research and after days I came up with this solution.

But I didn’t find too many infos on this. I saw a topic on forum (I pinged the author, but he didn’t respond ), I saw an old blog post about RN and babylon but that was with webview component and I understood that is not the best ideea. And I heard about babylonjsNative, but again just a post.

I found 2,3 3d objects viewers for RN but I want to be able to use babylonjs not to be limited by their capabilitiess.

I’d be very thankful if you can help me, and why not add this to the list ‘What we can do with babylonjs’

[sebavan]

@MarianG depending on your time frame do you think Babylonjs/Native could do ??? ping @bghgary, @syntheticmagus, @Cedric, and @PolygonalSun our own native crew.

[MarianG]

Yeah, I enjoy the ideea, seems to be exactly what I wanted but nothing related to mobile yet, it seems only on windows is working.
Meanwhile I’m trying to do something similar but for android. I’ll keep update you with the progress.

[sebavan]

Let them come back to you tomorrow, you might be surprised

[the-simian]

Hey @MarianG, did you read this? BabylonJS inside React Native inception style – Cubeslam

It also lead me to this Proof of Concept as well:GitHub - JulienNoble/react-native-babylon-view-poc: a fully functional BabylonJS view proof of concept

[MarianG]

Sure. But to be honest I didn’t try it.
It look a litle bit old and meanwhile I think there is a better solution. But we’ll see, maybe I’ll give it a try.

[MarianG]

Updates, updates
I did a small repo with react native and expo-gl.
Aaaaand it seems to ‘almost’ work. I mean I added the engine, create the scene, but when I want to add an object to the scene I’m getting an error and here I’m completly stuck :)). I tried few things but didn’t work.

The error about I was talking:

It is enough to try to add a sphere in the scene and you’ll get it.

I’m still invetigating.Cheers!

I forgot the link to repo: GitHub - Bulisor/BabylonjsDemo: Babylonjs & ReactNative(Expo)

[Drigax]

Pinging @Cedric

[Cedric]

I have absolutely no idea on how react native works.
A search on HTMLElement pointed me to this thread : reactjs - React: How to add HTMLElement? - Stack Overflow
Also, take a look on the playground index.html maybe some html elements (like canvas?) are missing

[Drigax]

Ah, my mistake. I should have been more specific. Do you, @syntheticmagus, or @bghgary know if we currently have any timeline for Babylon native on Android/iOS?

[bghgary]

@Cedric, I think @Drigax is asking you about Babylon Native for Android/iOS.

We don’t currently have a story for React Native at the moment though we do want to integrate with in the future. @Cedric is working on Android/macOS/iOS support for Babylon Native. No timelines yet for this as it’s still in the early stages.

[MarianG]

Hey guys. Thank you for your interest.
The conclusion: I’m an idiot
… and somehow I missed the part from doc about the default material. So I create a new topic about that, Sebavan helped me to figure it out aaaaand now I have custom shapes too in the scene. Next are interactions and why not maybe a gltf model.
I’ll keep update you. Cheers!
ps: I’m waiting for babylonNative too, but because I need this asap I’ll try to do it in my way till then.

later edit: repo updated

[MarianG]

Hi.
Some updates:

[Album] Imgur

What I did is a simple scene component with some basic interactions. So each component contain this scene component and few more lines of code injected. Like this I hope I can use most of the functions from babylonjs, like import texture, import objects.

Aaaand seems to work till now but I’m still facing few issues.

As example I cann’t create a new pbrMaterial because inside its constructor is created the brdfTexture which is using base64 decode which seems react do not like it.
So my question here is if I can avoid to create this texture or if not, maybe I can import my own GetEnvironmentBRDFTexture which not use base64?
From doc I understood that I can use this only in material, but after the material was created, like
material.environmentBRDFTexture = 'something';
Or is it ok to add the environmentBRDFTexture to the scene like the environmentTexture?
Thank you!
I have few more questions about import gltf but after I’ll fix this issue with pbr material. Cheers!

[Deltakosh]

That could deserve a page on the documentation honestly!

[MarianG]

With pleasure, but first I have to solve the issue with pbr material.
Hope after this to be able to import a gltf object. This is the last task on this, …after this I can add it.
Later I’ll play with VR,AR options, but for now importing objects is the most important.

[azizalizad]

Hi
Can you help me with loading textures? i get “Can’t find variable Image” and when i use require for static assets, i get the same error

[MarianG]

Hi. This is the current status

Still have some issues with evironmentBRDFTexture for materials, and some issues with animations on gltf objects, but they are on todo list.

About your quest:
You can load a texture from server, with url like this

 // Load the image from server 
const url = 'https://preview.smarteam3d.com/build/image2.jpg';
const asset = await AssetUtils.resolveAsync(url);

// Create the texture
const texture = Texture.LoadFromDataString("image", asset, scene);

After this you can use the texture as a normal texture for diffuse, albedo, normal, etc.
(you have to import AssetUtils from ‘expo-asset-utils’; )

Or if you want to to load a local image, something like this

const url = Asset.fromModule(require('./assets/image2.jpg'));
await url.downloadAsync();
const asset = await AssetUtils.resolveAsync(url.localUri);

// Create the texture
const texture = Texture.LoadFromDataString("image", asset, scene);

(in this case you have to import { Asset } from ‘react-native-unimodules’;

Maybe there are other ways, but this is what I found till now. A more detailed doc is comming soon, …need to fix few things before. Cheers!

[MarianG]

Hi. I made some improvements
Now, it looks like this - Babylonjs ReactNative - Album on Imgur

I fixed the issue with environmentMap, thanks to @sebavan. Now is all good, we can have any type of pbr material. And thanks to this we can import glb files.
The only issue here is with textures, …
if I import an object which has textures it gives an error related to blobs, because textures seems to use them internally. But I’ll see what I can do these days.

And I updated the repo too

Bulisor/BabylonjsDemo

[kutomer]

Any idea when will BabylonNative will be production-ready? (from the docs: “This project is under heavy development. Not all intended platforms are currently implemented. DO NOT use in production code.”)

[MarianG]

Let’s ping @Cedric for this question, because I have no idea