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

package/EngineHook.ts

@@ -1,104 +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
-        const sessionManager = await originalEnterXRAsync.apply(this, args);
-        sessionManager.scene.clearColor = Color3.Black().toColor4();
-        sessionManager.scene.autoClear = true;
-        return sessionManager;
-    }
-}
-
-// 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/NativeCapture.ts

@@ -1,30 +0,0 @@
-export type CapturedFrame = {
-  width: number;
-  height: number;
-  pitch: number;
-  format: "BGRA8" | undefined;
-  yFlip: boolean;
-  data: ArrayBuffer;
-};
-
-export type CaptureCallback = (capture: CapturedFrame) => void;
-
-declare class NativeCapture {
-  public constructor();
-  public addCallback(onCaptureCallback: CaptureCallback): void;
-  public dispose(): void;
-};
-
-export class CaptureSession {
-    private readonly nativeCapture: NativeCapture;
-
-    public constructor(onCaptureCallback: CaptureCallback) {
-        console.warn(`CaptureSession is experimental and likely to change significantly.`);
-        this.nativeCapture = new NativeCapture();
-        this.nativeCapture.addCallback(onCaptureCallback);
-    }
-
-    public dispose(): void {
-        this.nativeCapture.dispose();
-    }
-}