Integration with BabylonReactNative

[AndrewJSchoen]

Hi all,

I am doing some reconnaissance work to see if BabylonReactNative + react-babylonjs might be an option for a project that we are currently porting to AR on mobile devices. I see that both this library and BabylonReactNative have their own versions of the Engine, and I was wondering if these two libraries could be combined to allow declarative construction on native devices. Given that BabylonReactNative seems to essentially create a sophisticated web view, presumably this should be possible, but I am not yet familiar enough with Babylon to know if the two implementations would play nicely. Any thoughts on this?

Thanks!

[brianzinn]

hi @AndrewJSchoen I think it will work, but I have not made the time to connect the dots. I'm happy to work with you on this - perhaps you can create a basic repo and I can try to get it working?

It should work with Babylon React Native project by following 2 steps:

1. Create an EngineCanvasContext.Provider (with useEngine hook from @babylonjs/react-native).
2. Pass the camera back (via useRef or onCameraAdded observable) to EngineView camera prop.

Anyway, if you can perhaps share a repo then I'm pretty sure we can connect the two and have declarative babylon in Native. I'll start getting everything running on my computer 😄

[brianzinn]

I should add as well that if above doesn't work then I will make any changes to this library (even breaking changes) to make it happen.

[AndrewJSchoen]

Sounds great. I will work on sharing something later today!

[brianzinn]

Even a basic project not currently using react-babylonjs is a good starting point. cheers.

[AndrewJSchoen]

Hi Brian,

Sorry for the delay. I have been working on getting a version of Babylon's react-native working with Expo, but am experiencing some issues (although my testing with the Playground was working). I will keep working on getting it working, but if you want to take a look, it is here.

Thanks again!

[AndrewJSchoen]

Diving into the specific issue, it seems that running useEngine() breaks the application and causes it to crash currently.

[brianzinn]

it doesn't need to run on Expo - that's not how the Babylon React Native project works:
https://github.com/BabylonJS/BabylonReactNative

If you are trying to run on Expo I think it will be quite complicated and you will not get access to XR hardware. I have looked through the three.js bindings for Expo and it's quite involved. Were you planning to use the regular BabylonReactNative project?

[AndrewJSchoen]

Ah. I wasn't aware that Expo would be a hindrance. The final thing doesn't need to use Expo, I had just done that since I have used it a while back. Like I mentioned, I had gotten the Playground from BabylonReactNative working, but do I need to work off a fork of that project to have access to the hardware? There wasn't much documentation on their GitHub about creating new projects (only getting the playground to work). If it does need to be a fork of that, I can share the version I have working.

[brianzinn]

honestly, I don't have the answers to your questions. i am going to research that this week though. it's a warm spring skiing week here, but I should have something by end of week.

[AndrewJSchoen]

Thanks so much for your assistance! I will also poke around and see what I can get working.

[brianzinn]

sorry @AndrewJSchoen - been super busy. I am off to a funeral tomorrow and not back for a few days... did you make any progress?
I can tell you the code should be close to my first post - just have not had a chance to try it out.

[brianzinn]

@AndrewJSchoen I've added to the readme. Also, have posted findings in the forum. Sorry it took so long 😄
https://forum.babylonjs.com/t/declarative-react-native/28719

Here is the gist:

import React, { useState } from 'react';
import { View } from 'react-native';

import { EngineView, useEngine } from '@babylonjs/react-native';
import { Camera } from '@babylonjs/core';
import { EngineCanvasContext, Scene } from 'react-babylonjs';

const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {

  const engine = useEngine();
  const [camera, setCamera] = useState<Camera>();

  return (
    <View style={props.style}>
      <EngineCanvasContext.Provider value={{ engine, canvas: null }}>
        {engine &&
          <Scene>
            <arcRotateCamera
              name="camera1"
              onCreated={camera => setCamera(camera)}
            />
            <hemisphericLight name="light1" />
            { /* rest of declarative scene/components here */ }
          </Scene>
        }
      </EngineCanvasContext.Provider>
      <EngineView camera={camera} displayFrameRate={true} />
    </View>
  );
};

[brianzinn]

Also @AndrewJSchoen For your AR stuff - if you want to get the XR going let me know - maybe we can work on a declarative syntax. Additionally, for AR - I have a demo with DOM overlay (not native for AR). Cheers:
https://github.com/brianzinn/xr-dom-overlay-react

[Devilmelody]

您好，邮件已收到！我会尽快给您回复。谢谢！Hello, I have received your Email and I'll reply as soon as possible. Thank you very much! （这是自动回复邮件，以便确认邮件已收到。This is the auto reply to confirm email has been received.）

[kashaf874]

Hmmm!!
Sound interesting
let me see if I can help

[aytekinkalma]

Im waiting information from you,if you could something I will be so happy,also you can send pictures for your products ,this is my Whatshap number:+22372752236

…

On Fri, 6 Jan 2023 at 16:08 Kashaf Naz ***@***.***> wrote: Hmmm!! Sound interesting let me see if I can help — Reply to this email directly, view it on GitHub <#207 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AX5COYHMC7JAUWVZ2XQ2WH3WRAYORANCNFSM5PRREYOQ> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>