Added a button for loading a model from local storage

Apps/Playground/App.tsx

@@ -12,6 +12,7 @@ import { EngineView, useEngine, EngineViewCallbacks } from '@babylonjs/react-nat
 import { Scene, Vector3, ArcRotateCamera, Camera, WebXRSessionManager, SceneLoader, TransformNode, DeviceSourceManager, DeviceType, DeviceSource, PointerInput, WebXRTrackingState, Nullable } from '@babylonjs/core';
 import '@babylonjs/loaders';
 import Slider from '@react-native-community/slider';
+import * as DocumentPicker from 'react-native-document-picker';
 
 const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
   const defaultScale = 1;
@@ -27,6 +28,7 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
   const [snapshotData, setSnapshotData] = useState<string>();
   const [engineViewCallbacks, setEngineViewCallbacks] = useState<EngineViewCallbacks>();
   const [trackingState, setTrackingState] = useState<WebXRTrackingState>();
+  const [modelUrl, setModelUrl] = useState<string>('https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb');
 
   useEffect(() => {
     if (engine) {
@@ -62,22 +64,34 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
           });
         }
       });
+    }
+  }, [engine]);
 
+  useEffect(() => {
+    if (scene && rootNode) {
       const transformContainer = new TransformNode('Transform Container', scene);
       transformContainer.parent = rootNode;
       transformContainer.scaling.scaleInPlace(0.2);
       transformContainer.position.y -= .2;
 
-      scene.beforeRender = function () {
+      const beforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
         transformContainer.rotate(Vector3.Up(), 0.005 * scene.getAnimationRatio());
-      };
+      });
 
-      SceneLoader.ImportMeshAsync('', 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb').then(result => {
+      const start = performance.now();
+      SceneLoader.ImportMeshAsync('', modelUrl).then(result => {
+        const end = performance.now();
+        console.log(`${modelUrl} loaded in ${end - start}ms`);
         const mesh = result.meshes[0];
         mesh.parent = transformContainer;
       });
+
+      return () => {
+        scene.onBeforeRenderObservable.remove(beforeRenderObserver);
+        transformContainer.dispose();
+      };
     }
-  }, [engine]);
+  }, [modelUrl, scene, rootNode]);
 
   useEffect(() => {
     if (rootNode) {
@@ -118,6 +132,19 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
     })();
   }, [rootNode, scene, xrSession]);
 
+  const onLoadModel = useCallback(() => {
+    (async () => {
+      if (rootNode && scene) {
+        const pickedFile = await DocumentPicker.pickSingle({copyTo: 'documentDirectory'});
+        let uri = pickedFile.fileCopyUri!;
+        if (!(/file:\/\/.*/).test(uri)) {
+          uri = `file://${uri}`;
+        }
+        setModelUrl(uri);
+      }
+    })();
+  }, [rootNode, scene]);
+
   const onInitialized = useCallback(async(engineViewCallbacks: EngineViewCallbacks) => {
     setEngineViewCallbacks(engineViewCallbacks);
   }, [engine]);
@@ -132,7 +159,14 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
     <>
       <View style={props.style}>
         <Button title="Toggle EngineView" onPress={() => { setToggleView(!toggleView) }} />
-        <Button title={ xrSession ? 'Stop XR' : 'Start XR'} onPress={onToggleXr} />
+        <View style={{flexDirection: 'row'}}>
+          <View style={{flex:1}}>
+            <Button title={xrSession ? 'Stop XR' : 'Start XR'} onPress={onToggleXr} />
+          </View>
+          <View style={{flex:1}}>
+            <Button title={'Load Model'} onPress={onLoadModel} />
+          </View>
+        </View>
         { !toggleView &&
           <View style={{flex: 1}}>
             { enableSnapshots && 

Apps/Playground/ios/Podfile.lock

@@ -256,6 +256,8 @@ PODS:
   - React-jsinspector (0.64.1)
   - react-native-babylon (0.0.1):
     - React
+  - react-native-document-picker (7.1.0):
+    - React-Core
   - react-native-slider (4.0.0-rc.3):
     - React-Core
   - React-perflogger (0.64.1)
@@ -367,6 +369,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - "react-native-babylon (from `../../../Modules/@babylonjs/react-native`)"
+  - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -433,6 +436,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   react-native-babylon:
     :path: "../../../Modules/@babylonjs/react-native"
+  react-native-document-picker:
+    :path: "../node_modules/react-native-document-picker"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
   React-perflogger:
@@ -469,7 +474,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: 41c2862d3cf2b290d1e02d6e871a482e2979677b
+  FBReactNativeSpec: 646a9fc570c1b078fadcb99470a7533c7308afa0
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
@@ -493,6 +498,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 124e8f99992490d0d13e0649d950d3e1aae06fe9
   React-jsinspector: 500a59626037be5b3b3d89c5151bc3baa9abf1a9
   react-native-babylon: 55ec3f5e14b0baa1ae5978334b8faa58842abe68
+  react-native-document-picker: 170effb7e7baea36746b3895cf5a716105fcb4db
   react-native-slider: e45c8376012e5ace012e5eef62e9c85c68e50a0f
   React-perflogger: aad6d4b4a267936b3667260d1f649b6f6069a675
   React-RCTActionSheet: fc376be462c9c8d6ad82c0905442fd77f82a9d2a

Apps/Playground/package.json

@@ -22,6 +22,7 @@
     "logkitty": "^0.7.1",
     "react": "^17.0.1",
     "react-native": "^0.64.1",
+    "react-native-document-picker": "^7.1.0",
     "react-native-permissions": "^3.0.0",
     "react-native-windows": "^0.64.1"
   },

Apps/Playground/tsconfig.json

@@ -4,7 +4,7 @@
     /* Basic Options */
     "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es6"],                           /* Specify library files to be included in the compilation. */
+    "lib": ["es6", "DOM"],                           /* Specify library files to be included in the compilation. */
     "allowJs": true,                          /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */

Apps/Playground/windows/Playground.sln

@@ -45,6 +45,8 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "SliderWindows", "..\node_mo
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "BabylonReactNative", "..\..\..\Modules\@babylonjs\react-native-windows\windows\BabylonReactNative\BabylonReactNative.vcxproj", "{0362370A-ED67-41E5-85FC-394F27993115}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ReactNativeDocumentPicker", "..\node_modules\react-native-document-picker\windows\ReactNativeDocumentPicker\ReactNativeDocumentPicker.csproj", "{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}"
+EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		..\node_modules\react-native-windows\JSI\Shared\JSI.Shared.vcxitems*{0cc28589-39e4-4288-b162-97b959f8b843}*SharedItemsImports = 9
@@ -487,6 +489,70 @@ Global
 		{685A83AE-36BC-4E9D-BDC6-417EBF168463}.RelWithDebInfo|x64.Build.0 = RelWithDebInfo|x64
 		{685A83AE-36BC-4E9D-BDC6-417EBF168463}.RelWithDebInfo|x86.ActiveCfg = RelWithDebInfo|Win32
 		{685A83AE-36BC-4E9D-BDC6-417EBF168463}.RelWithDebInfo|x86.Build.0 = RelWithDebInfo|Win32
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Debug|ARM.ActiveCfg = Debug|ARM
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Debug|ARM.Build.0 = Debug|ARM
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Debug|ARM64.ActiveCfg = Debug|ARM64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Debug|ARM64.Build.0 = Debug|ARM64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Debug|x64.ActiveCfg = Debug|x64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Debug|x64.Build.0 = Debug|x64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Debug|x86.ActiveCfg = Debug|x86
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Debug|x86.Build.0 = Debug|x86
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.MinSizeRel|ARM.ActiveCfg = MinSizeRel|ARM
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.MinSizeRel|ARM.Build.0 = MinSizeRel|ARM
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.MinSizeRel|ARM64.ActiveCfg = MinSizeRel|ARM64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.MinSizeRel|ARM64.Build.0 = MinSizeRel|ARM64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.MinSizeRel|x64.ActiveCfg = MinSizeRel|x64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.MinSizeRel|x64.Build.0 = MinSizeRel|x64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.MinSizeRel|x86.ActiveCfg = MinSizeRel|x86
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.MinSizeRel|x86.Build.0 = MinSizeRel|x86
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Release|ARM.ActiveCfg = Release|ARM
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Release|ARM.Build.0 = Release|ARM
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Release|ARM64.ActiveCfg = Release|ARM64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Release|ARM64.Build.0 = Release|ARM64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Release|x64.ActiveCfg = Release|x64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Release|x64.Build.0 = Release|x64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Release|x86.ActiveCfg = Release|x86
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.Release|x86.Build.0 = Release|x86
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.RelWithDebInfo|ARM.ActiveCfg = RelWithDebInfo|ARM
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.RelWithDebInfo|ARM.Build.0 = RelWithDebInfo|ARM
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.RelWithDebInfo|ARM64.ActiveCfg = RelWithDebInfo|ARM64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.RelWithDebInfo|ARM64.Build.0 = RelWithDebInfo|ARM64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.RelWithDebInfo|x64.ActiveCfg = RelWithDebInfo|x64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.RelWithDebInfo|x64.Build.0 = RelWithDebInfo|x64
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.RelWithDebInfo|x86.ActiveCfg = RelWithDebInfo|x86
+		{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}.RelWithDebInfo|x86.Build.0 = RelWithDebInfo|x86
+		{F2824844-CE15-4242-9420-308923CD76C3}.MinSizeRel|ARM.ActiveCfg = MinSizeRel|ARM
+		{F2824844-CE15-4242-9420-308923CD76C3}.MinSizeRel|ARM.Build.0 = MinSizeRel|ARM
+		{F2824844-CE15-4242-9420-308923CD76C3}.MinSizeRel|ARM64.ActiveCfg = MinSizeRel|ARM64
+		{F2824844-CE15-4242-9420-308923CD76C3}.MinSizeRel|ARM64.Build.0 = MinSizeRel|ARM64
+		{F2824844-CE15-4242-9420-308923CD76C3}.MinSizeRel|x64.ActiveCfg = MinSizeRel|x64
+		{F2824844-CE15-4242-9420-308923CD76C3}.MinSizeRel|x64.Build.0 = MinSizeRel|x64
+		{F2824844-CE15-4242-9420-308923CD76C3}.MinSizeRel|x86.ActiveCfg = MinSizeRel|x86
+		{F2824844-CE15-4242-9420-308923CD76C3}.MinSizeRel|x86.Build.0 = MinSizeRel|x86
+		{F2824844-CE15-4242-9420-308923CD76C3}.RelWithDebInfo|ARM.ActiveCfg = RelWithDebInfo|ARM
+		{F2824844-CE15-4242-9420-308923CD76C3}.RelWithDebInfo|ARM.Build.0 = RelWithDebInfo|ARM
+		{F2824844-CE15-4242-9420-308923CD76C3}.RelWithDebInfo|ARM64.ActiveCfg = RelWithDebInfo|ARM64
+		{F2824844-CE15-4242-9420-308923CD76C3}.RelWithDebInfo|ARM64.Build.0 = RelWithDebInfo|ARM64
+		{F2824844-CE15-4242-9420-308923CD76C3}.RelWithDebInfo|x64.ActiveCfg = RelWithDebInfo|x64
+		{F2824844-CE15-4242-9420-308923CD76C3}.RelWithDebInfo|x64.Build.0 = RelWithDebInfo|x64
+		{F2824844-CE15-4242-9420-308923CD76C3}.RelWithDebInfo|x86.ActiveCfg = RelWithDebInfo|x86
+		{F2824844-CE15-4242-9420-308923CD76C3}.RelWithDebInfo|x86.Build.0 = RelWithDebInfo|x86
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.MinSizeRel|ARM.ActiveCfg = MinSizeRel|ARM
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.MinSizeRel|ARM.Build.0 = MinSizeRel|ARM
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.MinSizeRel|ARM64.ActiveCfg = MinSizeRel|ARM64
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.MinSizeRel|ARM64.Build.0 = MinSizeRel|ARM64
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.MinSizeRel|x64.ActiveCfg = MinSizeRel|x64
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.MinSizeRel|x64.Build.0 = MinSizeRel|x64
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.MinSizeRel|x86.ActiveCfg = MinSizeRel|x86
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.MinSizeRel|x86.Build.0 = MinSizeRel|x86
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.RelWithDebInfo|ARM.ActiveCfg = RelWithDebInfo|ARM
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.RelWithDebInfo|ARM.Build.0 = RelWithDebInfo|ARM
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.RelWithDebInfo|ARM64.ActiveCfg = RelWithDebInfo|ARM64
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.RelWithDebInfo|ARM64.Build.0 = RelWithDebInfo|ARM64
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.RelWithDebInfo|x64.ActiveCfg = RelWithDebInfo|x64
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.RelWithDebInfo|x64.Build.0 = RelWithDebInfo|x64
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.RelWithDebInfo|x86.ActiveCfg = RelWithDebInfo|x86
+		{ADED4FBE-887D-4271-AF24-F0823BCE7961}.RelWithDebInfo|x86.Build.0 = RelWithDebInfo|x86
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

Apps/Playground/windows/Playground/AutolinkedNativeModules.g.cpp

@@ -9,6 +9,9 @@
 // Includes from @react-native-community/slider
 #include <winrt/SliderWindows.h>
 
+// Includes from react-native-document-picker
+#include <winrt/ReactNativeDocumentPicker.h>
+
 // Includes from react-native-permissions
 #include <winrt/RNPermissions.h>
 
@@ -21,6 +24,8 @@ void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collecti
     packageProviders.Append(winrt::BabylonReactNative::ReactPackageProvider());
     // IReactPackageProviders from @react-native-community/slider
     packageProviders.Append(winrt::SliderWindows::ReactPackageProvider());
+    // IReactPackageProviders from react-native-document-picker
+    packageProviders.Append(winrt::ReactNativeDocumentPicker::ReactPackageProvider());
     // IReactPackageProviders from react-native-permissions
     packageProviders.Append(winrt::RNPermissions::ReactPackageProvider());
 }

Apps/Playground/windows/Playground/AutolinkedNativeModules.g.props

@@ -2,5 +2,7 @@
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <!-- AutolinkedNativeModules.g.props contents generated by "react-native autolink-windows" -->
   <PropertyGroup>
+    <!-- Set due to dependency on C# module(s): ReactNativeDocumentPicker -->
+    <ConsumeCSharpModules Condition="'$(ConsumeCSharpModules)'==''">true</ConsumeCSharpModules>
   </PropertyGroup>
 </Project>

Apps/Playground/windows/Playground/AutolinkedNativeModules.g.targets

@@ -10,6 +10,10 @@
     <ProjectReference Include="$(ProjectDir)..\..\node_modules\@react-native-community\slider\windows\SliderWindows\SliderWindows.vcxproj">
       <Project>{685a83ae-36bc-4e9d-bdc6-417ebf168463}</Project>
     </ProjectReference>
+    <!-- Projects from react-native-document-picker -->
+    <ProjectReference Include="$(ProjectDir)..\..\node_modules\react-native-document-picker\windows\ReactNativeDocumentPicker\ReactNativeDocumentPicker.csproj">
+      <Project>{A4C9C727-0AEB-4A3D-B547-BEDB812B172D}</Project>
+    </ProjectReference>
     <!-- Projects from react-native-permissions -->
     <ProjectReference Include="$(ProjectDir)..\..\node_modules\react-native-permissions\windows\RNPermissions\RNPermissions.vcxproj">
       <Project>{99677b9d-a27b-4239-930e-c36c8d339c54}</Project>

Modules/@babylonjs/react-native-windows/windows/scripts/Utils.psm1

@@ -69,7 +69,9 @@ function Compile-Solution {
     )
 
     $MSBuild = Get-MSBuildPath
-    & "$MSBuild" /p:Configuration="$Configuration" /p:Platform="$Platform" /m $Solution
+    # NOTE: React Native for Windows 0.66+ contains a fix that will correctly find the UWP SDK. Until we upgrade, we'll need to
+    #       manually specify UWPCoreRuntimeSdkVersion/DotNetNativeVersion/DotNetNativeRuntimeVersion to support consuming C# packages.
+    & "$MSBuild" /p:Configuration="$Configuration" /p:Platform="$Platform" /p:UWPCoreRuntimeSdkVersion="2.2.12" /p:DotNetNativeVersion="2.2.10-rel-29722-00" /p:DotNetNativeRuntimeVersion="2.2.8-rel-29722-00" /m $Solution
     if ($? -Eq $False) {
         Write-Error "$Platform $Configuration Build failed."
         exit 1