@babylonjs/react-native 0.4.0-alpha.7 → 0.64.0-alpha.47

package/EngineHook.ts

@@ -1,103 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Platform } from 'react-native';
-import { PERMISSIONS, check, request } from 'react-native-permissions';
-import { Engine, WebXRSessionManager, WebXRExperienceHelper, Color3 } from '@babylonjs/core';
-import { ReactNativeEngine } from './ReactNativeEngine';
-import './VersionValidation';
-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.
-// https://developer.mozilla.org/en-US/docs/Web/API/XRSystem/requestSession
-// https://developer.mozilla.org/en-US/docs/Web/API/DOMException#Error_names
-enum DOMError {
-    NotSupportedError = 9,
-    InvalidStateError = 11,
-    SecurityError = 18,
-}
-
-class DOMException {
-    public constructor(private readonly error: DOMError) { }
-    get code(): number { return this.error; }
-    get name(): string { return DOMError[this.error]; }
-}
-
-// Override the WebXRSessionManager.initializeSessionAsync to insert a camera permissions request. It would be cleaner to do this directly in the native XR implementation, but there are a couple problems with that:
-// 1. React Native does not provide a way to hook into the permissions request result (at least on Android).
-// 2. If it is done on the native side, then we need one implementation per platform.
-{
-    const originalInitializeSessionAsync: (...args: any[]) => Promise<any> = WebXRSessionManager.prototype.initializeSessionAsync;
-    WebXRSessionManager.prototype.initializeSessionAsync = async function (...args: any[]): Promise<any> {
-        if (Platform.OS === "windows")
-        {
-            // Launching into immersive mode on Windows HMDs doesn't require a runtime permission check.
-            // The Spatial Perception capability should be enabled in the project's Package.appxmanifest.
-            return originalInitializeSessionAsync.apply(this, args);
-        }
-
-        const cameraPermission = Platform.select({
-            android: PERMISSIONS.ANDROID.CAMERA,
-            ios: PERMISSIONS.IOS.CAMERA,
-        });
-
-        // Only Android, iOS and Windows are supported.
-        if (cameraPermission === undefined) {
-            throw new DOMException(DOMError.NotSupportedError);
-        }
-
-        // If the permission has not been granted yet, but also not been blocked, then request permission.
-        let permissionStatus = await check(cameraPermission);
-        if (permissionStatus == "denied")
-        {
-            permissionStatus = await request(cameraPermission);
-        }
-
-        // If the permission has still not been granted, then throw an appropriate exception, otherwise continue with the actual XR session initialization.
-        switch(permissionStatus) {
-            case "unavailable":
-                throw new DOMException(DOMError.NotSupportedError);
-            case "denied":
-            case "blocked":
-                throw new DOMException(DOMError.SecurityError);
-            case "granted":
-                return originalInitializeSessionAsync.apply(this, args);
-        }
-    }
-}
-
-if (Platform.OS == "windows") {
-    const originalEnterXRAsync: (...args: any[]) => Promise<any> = WebXRExperienceHelper.prototype.enterXRAsync;
-    WebXRExperienceHelper.prototype.enterXRAsync = async function (...args: any[]): Promise<any> {
-        // TODO: https://github.com/BabylonJS/BabylonNative/issues/577
-        // Windows HMDs require different rendering behaviors than default xr rendering for mobile devices
-        await originalEnterXRAsync.apply(this, args);
-        this.scene.clearColor = Color3.Black().toColor4();
-        this.scene.autoClear = true;
-    }
-}
-
-// Babylon Native includes a native atob polyfill, but it relies JSI to deal with the strings, and JSI has a bug where it assumes strings are null terminated, and a base 64 string can contain one of these.
-// So for now, provide a JavaScript based atob polyfill.
-declare const global: any;
-global.atob = base64.decode;
-
-export function useEngine(): Engine | undefined {
-    const [engine, setEngine] = useState<Engine>();
-
-    useEffect(() => {
-        const abortController = new AbortController();
-        let engine: ReactNativeEngine | undefined = undefined;
-
-        (async () => {
-            setEngine(engine = await ReactNativeEngine.tryCreateAsync(abortController.signal) ?? undefined);
-        })();
-
-        return () => {
-            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.
-            engine?.dispose();
-            setEngine(undefined);
-        };
-    }, []);
-
-    return engine;
-}

package/EngineView.tsx

@@ -1,156 +0,0 @@
-import React, { Component, FunctionComponent, SyntheticEvent, useCallback, useEffect, useState, useRef } from 'react';
-import { requireNativeComponent, ViewProps, AppState, AppStateStatus, View, Text, findNodeHandle, UIManager } from 'react-native';
-import { Camera } from '@babylonjs/core';
-import { ensureInitialized } from './BabylonModule';
-import { ReactNativeEngine } from './ReactNativeEngine';
-
-declare const global: any;
-
-interface NativeEngineViewProps extends ViewProps {
-    onSnapshotDataReturned: (event: SyntheticEvent) => void;
-}
-
-const NativeEngineView: {
-    prototype: Component<NativeEngineViewProps>;
-    new(props: Readonly<NativeEngineViewProps>): Component<NativeEngineViewProps>;
-} = global['EngineView'] || (global['EngineView'] = requireNativeComponent('EngineView'));
-
-export interface EngineViewProps extends ViewProps {
-    camera?: Camera;
-    displayFrameRate?: boolean;
-    onInitialized?: (view: EngineViewCallbacks) => void;
-}
-
-export interface EngineViewCallbacks {
-    takeSnapshot: () => Promise<string>;
-}
-
-export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineViewProps) => {
-    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 () => {
-            setInitialized(await ensureInitialized());
-        })();
-    }, []);
-
-    useEffect(() => {
-        const onAppStateChanged = (appState: AppStateStatus) => {
-            setAppState(appState);
-        };
-
-        AppState.addEventListener("change", onAppStateChanged);
-
-        return () => {
-            AppState.removeEventListener("change", onAppStateChanged);
-        }
-    }, []);
-
-    useEffect(() => {
-        if (props.camera && appState === "active") {
-            const engine = props.camera.getScene().getEngine() as ReactNativeEngine;
-
-            if (!engine.isDisposed) {
-                engine.runRenderLoop(() => {
-                    for (let scene of engine.scenes) {
-                        scene.render();
-                    }
-                });
-
-                return () => {
-                    if (!engine.isDisposed) {
-                        engine.stopRenderLoop();
-                    }
-                };
-            }
-        }
-
-        return undefined;
-    }, [props.camera, appState]);
-
-    useEffect(() => {
-        if (props.camera && (props.displayFrameRate ?? __DEV__)) {
-            const engine = props.camera.getScene().getEngine() as ReactNativeEngine;
-
-            if (!engine.isDisposed) {
-                setFps(engine.getFps());
-                const timerHandle = setInterval(() => {
-                    setFps(engine.getFps());
-                }, 1000);
-
-                return () => {
-                    clearInterval(timerHandle);
-                };
-            }
-        }
-
-        setFps(undefined);
-        return undefined;
-    }, [props.camera, props.displayFrameRate]);
-
-    // Call onInitialized if provided, and include the callback for takeSnapshot.
-    useEffect(() => {
-        if (props.onInitialized) {
-            props.onInitialized({
-                takeSnapshot: (): Promise<string> => {
-                    if (!snapshotPromise.current) {
-                        let resolveFunction: ((data: string) => void) | undefined;
-                        const promise = new Promise<string>((resolutionFunc) => {
-                            resolveFunction = resolutionFunc;
-                        });
-
-                        // Resolution functions should always be initialized.
-                        if (resolveFunction) {
-                            snapshotPromise.current = { promise: promise, resolve: resolveFunction };
-                        }
-                        else {
-                            throw new Error("Resolution functions not initialized after snapshot promise creation.");
-                        }
-
-                        UIManager.dispatchViewManagerCommand(
-                            findNodeHandle(engineViewRef.current),
-                            "takeSnapshot",
-                            []);
-                    }
-
-                    return snapshotPromise.current.promise;
-                }
-            });
-        }
-    }, [props.onInitialized]);
-
-    // Handle snapshot data returned.
-    const snapshotDataReturnedHandler = useCallback((event: SyntheticEvent) => {
-        // The nativeEvent is a DOMEvent which doesn't have a typescript definition. Cast it to an Event object with a data property.
-        const { data } = event.nativeEvent as Event & { data: string };
-        if (snapshotPromise.current) {
-            snapshotPromise.current.resolve(data);
-            snapshotPromise.current = undefined;
-        }
-    }, []);
-
-    if (initialized !== false) {
-        return (
-            <View style={[props.style, { overflow: "hidden" }]}>
-                { 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 {
-        const message = "Could not initialize Babylon Native.";
-        if (!__DEV__) {
-            throw new Error(message);
-        }
-
-        return (
-            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-                <Text style={{ fontSize: 24 }}>{message}</Text>
-                <Text style={{ fontSize: 12 }}>React Native remote debugging does not work with Babylon Native.</Text>
-            </View>
-        );
-    }
-}

package/ReactNativeEngine.ts

@@ -1,69 +0,0 @@
-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);
-    }
-}

package/index.ts

@@ -1,2 +0,0 @@
-export * from './EngineView';
-export * from './EngineHook';