Converge react native integration layers across platforms

Modules/@babylonjs/react-native/BabylonModule.ts

@@ -1,33 +1,24 @@
 import { NativeModules } from 'react-native';
-import { NativeEngine } from '@babylonjs/core';
 
-// This global object is part of Babylon Native.
-declare const _native: {
-    whenGraphicsReady: () => Promise<void>;
-    engineInstance: NativeEngine;
-}
+declare const global: {
+    nativeCallSyncHook: any;
+};
+const isRemoteDebuggingEnabled = !global.nativeCallSyncHook;
 
-const NativeBabylonModule: {
-    initialize(): Promise<boolean>;
-    whenInitialized(): Promise<boolean>;
-    reset(): Promise<boolean>;
+// This legacy React Native module is created by Babylon React Native, and is only used to bootstrap the JSI object creation.
+// This will likely be removed when the BabylonNative global object is eventually converted to a TurboModule.
+const BabylonModule: {
+    initialize(): Promise<void>;
 } = NativeModules.BabylonModule;
 
-export const BabylonModule = {
-    initialize: async () => {
-        const initialized = await NativeBabylonModule.initialize();
-        if (initialized) {
-            await _native.whenGraphicsReady();
-        }
-        return initialized;
-    },
-
-    whenInitialized: NativeBabylonModule.whenInitialized,
-    reset: NativeBabylonModule.reset,
-
-    createEngine: () => {
-        const engine = new NativeEngine();
-        _native.engineInstance = engine;
-        return engine;
+export async function ensureInitialized(): Promise<boolean> {
+    if (isRemoteDebuggingEnabled) {
+        // When remote debugging is enabled, JavaScript runs on the debugging host machine, not on the device where the app is running.
+        // JSI (which Babylon Native uses heavily) can not work in this mode. In the future, this debugging mode will be phased out as it is incompatible with TurboModules for the same reason.
+        return false;
+    } else {
+        // This does the first stage of Babylon Native initialization, including creating the BabylonNative JSI object.
+        await BabylonModule.initialize();
+        return true;
     }
-};
+}

Modules/@babylonjs/react-native/EngineHook.ts

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Platform } from 'react-native';
 import { PERMISSIONS, check, request } from 'react-native-permissions';
-import { Engine, NativeEngine, WebXRSessionManager } from '@babylonjs/core';
-import { BabylonModule } from './BabylonModule';
-import { DisposeEngine } from './EngineHelpers';
+import { Engine, WebXRSessionManager } from '@babylonjs/core';
+import { ReactNativeEngine } from './ReactNativeEngine';
 import * as base64 from 'base-64';
 
 // These are errors that are normally thrown by WebXR's requestSession, so we should throw the same errors under similar circumstances so app code can be written the same for browser or native.
@@ -66,29 +65,17 @@ export function useEngine(): Engine | undefined {
     const [engine, setEngine] = useState<Engine>();
 
     useEffect(() => {
-        let disposed = false;
-        let engine: Engine | undefined = undefined;
+        const abortController = new AbortController();
+        let engine: ReactNativeEngine | undefined = undefined;
 
         (async () => {
-            if (await BabylonModule.initialize() && !disposed)
-            {
-                engine = BabylonModule.createEngine();
-                setEngine(engine);
-            }
+            setEngine(engine = await ReactNativeEngine.tryCreateAsync(abortController.signal) ?? undefined);
         })();
 
         return () => {
-            disposed = true;
+            abortController.abort();
             // NOTE: Do not use setEngine with a callback to dispose the engine instance as that callback does not get called during component unmount when compiled in release.
-            if (engine) {
-                DisposeEngine(engine);
-            }
-            // Ideally we would always do a reset here as we don't want different behavior between debug and release. Unfortunately, fast refresh has some strange behavior that
-            // makes it quite difficult to get this to work correctly (e.g. it re-runs previous useEffect instances, which means it can try to use Babylon Native in a de-initialized state).
-            // TODO: https://github.com/BabylonJS/BabylonReactNative/issues/125
-            if (!__DEV__) {
-                BabylonModule.reset();
-            }
+            engine?.dispose();
             setEngine(undefined);
         };
     }, []);

Modules/@babylonjs/react-native/EngineView.tsx

@@ -1,20 +1,10 @@
 import React, { Component, FunctionComponent, SyntheticEvent, useCallback, useEffect, useState, useRef } from 'react';
-import { requireNativeComponent, NativeModules, ViewProps, AppState, AppStateStatus, View, Text, findNodeHandle, UIManager } from 'react-native';
+import { requireNativeComponent, ViewProps, AppState, AppStateStatus, View, Text, findNodeHandle, UIManager } from 'react-native';
 import { Camera } from '@babylonjs/core';
-import { IsEngineDisposed } from './EngineHelpers';
-import { BabylonModule } from './BabylonModule';
+import { ensureInitialized } from './BabylonModule';
+import { ReactNativeEngine } from './ReactNativeEngine';
 
 declare const global: any;
-const isRemoteDebuggingEnabled = !global['nativeCallSyncHook'];
-
-const EngineViewManager: {
-    setJSThread(): void;
-} = NativeModules.EngineViewManager;
-
-// Not all platforms need this, but for those that do, this is intended to be a synchronous call to boostrap the ability to run native code on the JavaScript thread.
-if (EngineViewManager && EngineViewManager.setJSThread && !isRemoteDebuggingEnabled) {
-    EngineViewManager.setJSThread();
-}
 
 interface NativeEngineViewProps extends ViewProps {
     onSnapshotDataReturned: (event: SyntheticEvent) => void;
@@ -23,7 +13,7 @@ interface NativeEngineViewProps extends ViewProps {
 const NativeEngineView: {
     prototype: Component<NativeEngineViewProps>;
     new(props: Readonly<NativeEngineViewProps>): Component<NativeEngineViewProps>;
-} = requireNativeComponent('EngineView');
+} = global['EngineView'] || (global['EngineView'] = requireNativeComponent('EngineView'));
 
 export interface EngineViewProps extends ViewProps {
     camera?: Camera;
@@ -36,17 +26,15 @@ export interface EngineViewCallbacks {
 }
 
 export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineViewProps) => {
-    const [failedInitialization, setFailedInitialization] = useState(false);
+    const [initialized, setInitialized] = useState<boolean>();
     const [appState, setAppState] = useState(AppState.currentState);
     const [fps, setFps] = useState<number>();
     const engineViewRef = useRef<Component<NativeEngineViewProps>>(null);
     const snapshotPromise = useRef<{ promise: Promise<string>, resolve: (data: string) => void }>();
 
     useEffect(() => {
         (async () => {
-            if (!await BabylonModule.whenInitialized()) {
-                setFailedInitialization(true);
-            }
+            setInitialized(await ensureInitialized());
         })();
     }, []);
 
@@ -64,17 +52,17 @@ export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineView
 
     useEffect(() => {
         if (props.camera && appState === "active") {
-            const engine = props.camera.getScene().getEngine();
+            const engine = props.camera.getScene().getEngine() as ReactNativeEngine;
 
-            if (!IsEngineDisposed(engine)) {
+            if (!engine.isDisposed) {
                 engine.runRenderLoop(() => {
                     for (let scene of engine.scenes) {
                         scene.render();
                     }
                 });
 
                 return () => {
-                    if (!IsEngineDisposed(engine)) {
+                    if (!engine.isDisposed) {
                         engine.stopRenderLoop();
                     }
                 };
@@ -86,9 +74,9 @@ export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineView
 
     useEffect(() => {
         if (props.camera && (props.displayFrameRate ?? __DEV__)) {
-            const engine = props.camera.getScene().getEngine();
+            const engine = props.camera.getScene().getEngine() as ReactNativeEngine;
 
-            if (!IsEngineDisposed(engine)) {
+            if (!engine.isDisposed) {
                 setFps(engine.getFps());
                 const timerHandle = setInterval(() => {
                     setFps(engine.getFps());
@@ -145,11 +133,11 @@ export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineView
         }
     }, []);
 
-    if (!failedInitialization) {
+    if (initialized !== false) {
         return (
             <View style={[props.style, { overflow: "hidden" }]}>
-                <NativeEngineView ref={engineViewRef} style={{ flex: 1 }} onSnapshotDataReturned={snapshotDataReturnedHandler} />
-                { fps && <Text style={{ color: 'yellow', position: 'absolute', margin: 10, right: 0, top: 0 }}>FPS: {Math.round(fps)}</Text>}
+                { initialized && <NativeEngineView ref={engineViewRef} style={{ flex: 1 }} onSnapshotDataReturned={snapshotDataReturnedHandler} /> }
+                { fps && <Text style={{ color: 'yellow', position: 'absolute', margin: 10, right: 0, top: 0 }}>FPS: {Math.round(fps)}</Text> }
             </View>
         );
     } else {
@@ -161,7 +149,7 @@ export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineView
         return (
             <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                 <Text style={{ fontSize: 24 }}>{message}</Text>
-                { isRemoteDebuggingEnabled && <Text style={{ fontSize: 12 }}>React Native remote debugging does not work with Babylon Native.</Text>}
+                <Text style={{ fontSize: 12 }}>React Native remote debugging does not work with Babylon Native.</Text>
             </View>
         );
     }

Modules/@babylonjs/react-native/ReactNativeEngine.ts

@@ -0,0 +1,69 @@
+import { ensureInitialized } from './BabylonModule';
+import { NativeEngine } from '@babylonjs/core';
+
+// This global object is owned by Babylon Native.
+declare const _native: {
+    whenGraphicsReady: () => Promise<void>;
+};
+
+// This JSI-based global object is owned by Babylon React Native.
+// This will likely be converted to a TurboModule when they are fully supported.
+declare const BabylonNative: {
+    readonly initializationPromise: Promise<void>;
+    setEngineInstance: (engine: NativeEngine | null) => void;
+    reset: () => void;
+};
+
+export class ReactNativeEngine extends NativeEngine {
+    private _isDisposed = false;
+
+    private constructor() {
+        super();
+        BabylonNative.setEngineInstance(this);
+    }
+
+    public static async tryCreateAsync(abortSignal: AbortSignal): Promise<ReactNativeEngine | null> {
+        if (!await ensureInitialized() || abortSignal.aborted) {
+            return null;
+        }
+
+        // This waits Graphics/NativeEngine to be created (which in turn makes the whenGraphicsReady available).
+        await BabylonNative.initializationPromise;
+
+        // Check for cancellation.
+        if (abortSignal.aborted) {
+            return null;
+        }
+
+        // This waits for the Graphics system to be up and running.
+        await _native.whenGraphicsReady();
+
+        // Check for cancellation.
+        if (abortSignal.aborted) {
+            return null;
+        }
+
+        return new ReactNativeEngine();
+    }
+
+    public get isDisposed() {
+        return this._isDisposed;
+    }
+
+    public dispose(): void {
+        if (!this.isDisposed) {
+            super.dispose();
+
+            // Ideally we would always do a reset here as we don't want different behavior between debug and release. Unfortunately, fast refresh has some strange behavior that
+            // makes it quite difficult to get this to work correctly (e.g. it re-runs previous useEffect instances, which means it can try to use Babylon Native in a de-initialized state).
+            // TODO: https://github.com/BabylonJS/BabylonReactNative/issues/125
+            if (!__DEV__) {
+                BabylonNative.reset();
+            }
+
+            this._isDisposed = true;
+        }
+
+        BabylonNative.setEngineInstance(null);
+    }
+}

Modules/@babylonjs/react-native/android/CMakeLists.txt

@@ -19,6 +19,8 @@ cmake_minimum_required(VERSION 3.13.2)
 #                    detection.
 #   [24, infinite)   ES2 & ES3 & Vulkan
 project(ReactNativeBabylon)
+include(${CMAKE_CURRENT_LIST_DIR}/../shared/CMakeLists.txt)
+
 set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -Wall")
 set(BABYLON_NATIVE_PLATFORM "Android")
 set(CMAKE_CXX_EXTENSIONS OFF)
@@ -55,7 +57,10 @@ target_link_libraries(turbomodulejsijni
     fbjni)
 
 add_library(BabylonNative SHARED
-    src/main/cpp/BabylonNativeInterop.cpp)
+    src/main/cpp/BabylonNativeInterop.cpp
+    ${SHARED_SOURCES})
+
+target_include_directories(BabylonNative PRIVATE ${SHARED_INCLUDES})
 
 target_link_libraries(BabylonNative
     GLESv3
@@ -67,7 +72,6 @@ target_link_libraries(BabylonNative
     fbjni
     jsi
     turbomodulejsijni
-    BabylonReactNativeShared
     AndroidExtensions
     Graphics
     JsRuntime