Integrate the new Babylon Native Graphics object (#86)

The main change here is to use the new Graphics object from Babylon Native:

- Update Babylon Native to the latest, and Babylon.js to 4.2.0-beta.6.
- Bump up the min version of @babylonjs/core to 4.2.0-beta.6 (it has changes tied to changes made to Babylon Native).
- Add dependencies on the Graphics lib (CMakeLists.txt and podspec).
- Update gulp package build script to expect to include libGraphics.a (iOS).

Also included a couple other minor changes:

- Explicitly specify the architecture when building the simulator libs for iOS (XCode 12 seems to default to arm64 instead of x86_64).
- Add a note to the readme about requiring a custom metro.config.js if you want to install a local version of the package.

Author: ryantrem

Apps/PackageTest/package-lock.json

@@ -10,7 +10,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@babylonjs/core": "^4.2.0-beta.2",
+    "@babylonjs/core": "^4.2.0-beta.6",
     "@babylonjs/react-native": "file:../../Package/Assembled/babylonjs-react-native-0.0.1.tgz",
     "react": "16.13.1",
     "react-native": "0.63.1",

Apps/PackageTest/package.json

@@ -466,7 +466,7 @@ SPEC CHECKSUMS:
   React-jsi: b32a31da32e030f30bbf9a8d3a9c8325df9e793f
   React-jsiexecutor: 7ab9cdcdd18d57652fb041f8a147fe9658d4e00a
   React-jsinspector: 2e28bb487e42dda6c94dbfa0c648d1343767a0fb
-  react-native-babylon: 004630b2838450727c093bfcc30e05d5b08206c1
+  react-native-babylon: 704a0f409074182d47b917877c3ef70512a18ac5
   react-native-slider: b34d943dc60deb96d952ba6b6b249aa8091e86da
   React-RCTActionSheet: 1702a1a85e550b5c36e2e03cb2bd3adea053de95
   React-RCTAnimation: ddda576010a878865a4eab83a78acd92176ef6a1

Apps/Playground/ios/Podfile.lock

@@ -10,8 +10,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@babylonjs/core": "^4.2.0-beta.2",
-    "@babylonjs/loaders": "^4.2.0-beta.2",
+    "@babylonjs/core": "^4.2.0-beta.6",
+    "@babylonjs/loaders": "^4.2.0-beta.6",
     "@babylonjs/react-native": "file:../../Modules/@babylonjs/react-native",
     "@react-native-community/slider": "^2.0.9",
     "logkitty": "^0.7.1",

Apps/Playground/package-lock.json

@@ -46,6 +46,7 @@ target_link_libraries(BabylonNative
     arcana
     jsi
     AndroidExtensions
+    Graphics
     JsRuntime
     NativeWindow
     NativeEngine

Apps/Playground/package.json

@@ -1,5 +1,6 @@
 #include <jni.h>
 
+#include <Babylon/Graphics.h>
 #include <Babylon/JsRuntime.h>
 #include <Babylon/Plugins/NativeWindow.h>
 #include <Babylon/Plugins/NativeEngine.h>
@@ -52,7 +53,9 @@ namespace Babylon
             auto width = static_cast<size_t>(ANativeWindow_getWidth(windowPtr));
             auto height = static_cast<size_t>(ANativeWindow_getHeight(windowPtr));
 
-            Plugins::NativeEngine::InitializeGraphics(windowPtr, width, height);
+            m_graphics = Graphics::InitializeFromWindow<void*>(windowPtr, width, height);
+            m_graphics->AddToJavaScript(m_env);
+
             Plugins::NativeEngine::Initialize(m_env);
             Plugins::NativeWindow::Initialize(m_env, windowPtr, width, height);
             Plugins::NativeXr::Initialize(m_env);
@@ -62,12 +65,11 @@ namespace Babylon
             m_nativeInput = &Babylon::Plugins::NativeInput::CreateForJavaScript(m_env);
 
             // TODO: This shouldn't be necessary, but for some reason results in a significant increase in frame rate. Need to figure this out.
-            Plugins::NativeEngine::Reinitialize(m_env, windowPtr, width, height);
+            m_graphics->ReinitializeFromWindow<void*>(windowPtr, width, height);
         }
 
         ~Native()
         {
-            Plugins::NativeEngine::DeinitializeGraphics();
             // TODO: Figure out why this causes the app to crash
             //Napi::Detach(m_env);
         }
@@ -76,7 +78,7 @@ namespace Babylon
         {
             auto width = static_cast<size_t>(ANativeWindow_getWidth(windowPtr));
             auto height = static_cast<size_t>(ANativeWindow_getHeight(windowPtr));
-            Plugins::NativeEngine::Reinitialize(m_env, windowPtr, width, height);
+            m_graphics->ReinitializeFromWindow<void*>(windowPtr, width, height);
         }
 
         void SetPointerButtonState(uint32_t pointerId, uint32_t buttonId, bool isDown, uint32_t x, uint32_t y)
@@ -99,6 +101,7 @@ namespace Babylon
     private:
         using looper_scheduler_t = arcana::looper_scheduler<sizeof(std::weak_ptr<Napi::Env>) + sizeof(std::function<void(Napi::Env)>)>;
 
+        std::unique_ptr<Graphics> m_graphics{};
         Napi::Env m_env;
         JsRuntime* m_runtime;
         Plugins::NativeInput* m_nativeInput;

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

@@ -1,5 +1,6 @@
 #include "BabylonNative.h"
 
+#include <Babylon/Graphics.h>
 #include <Babylon/JsRuntime.h>
 #include <Babylon/Plugins/NativeWindow.h>
 #include <Babylon/Plugins/NativeEngine.h>
@@ -29,6 +30,7 @@ namespace Babylon
         {
         }
 
+        std::unique_ptr<Graphics> m_graphics{};
         Napi::Env env;
         JsRuntime* runtime{};
         Plugins::NativeInput* nativeInput{};
@@ -38,7 +40,7 @@ namespace Babylon
         : m_impl{ std::make_unique<Native::Impl>(jsiRuntime) }
     {
         dispatch_sync(dispatch_get_main_queue(), ^{
-            Plugins::NativeEngine::InitializeGraphics(windowPtr, width, height);
+            m_impl->m_graphics = Graphics::InitializeFromWindow<void*>(windowPtr, width, height);
         });
 
         auto run_loop_scheduler = std::make_shared<arcana::run_loop_scheduler>(arcana::run_loop_scheduler::get_for_current_thread());
@@ -52,6 +54,8 @@ namespace Babylon
         }};
 
         m_impl->runtime = &JsRuntime::CreateForJavaScript(m_impl->env, std::move(dispatchFunction));
+        
+        m_impl->m_graphics->AddToJavaScript(m_impl->env);
 
         Polyfills::Window::Initialize(m_impl->env);
 
@@ -64,12 +68,11 @@ namespace Babylon
 
     Native::~Native()
     {
-        Plugins::NativeEngine::DeinitializeGraphics();
     }
 
     void Native::Refresh(void* windowPtr, size_t width, size_t height)
     {
-        Plugins::NativeEngine::Reinitialize(m_impl->env, windowPtr, width, height);
+        m_impl->m_graphics->ReinitializeFromWindow<void*>(windowPtr, width, height);
     }
 
     void Native::Resize(size_t width, size_t height)

Modules/@babylonjs/react-native/android/src/main/cpp/BabylonNativeInterop.cpp

@@ -32,6 +32,7 @@ target_include_directories(BabylonNative PUBLIC ${CMAKE_CURRENT_LIST_DIR})
 target_link_libraries(BabylonNative
     z
     arcana
+    Graphics
     jsi
     JsRuntime
     NativeWindow

Modules/@babylonjs/react-native/ios/BabylonNative.cpp

@@ -27,7 +27,7 @@
     "base-64": "^0.1.0"
   },
   "peerDependencies": {
-    "@babylonjs/core": "^4.2.0-alpha.33",
+    "@babylonjs/core": "^4.2.0-beta.6",
     "react": "^16.13.1",
     "react-native": "^0.63.1",
     "react-native-permissions": "^2.1.4"

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

@@ -25,6 +25,7 @@ Pod::Spec.new do |s|
                 'bx',
                 'GenericCodeGen',
                 'glslang',
+                'Graphics',
                 'jsRuntime',
                 'OGLCompiler',
                 'OSDependent',

Modules/@babylonjs/react-native/package.json

@@ -31,7 +31,7 @@ const buildIphoneOS = async () => {
 };
 
 const buildIphoneSimulator = async () => {
-  exec('xcodebuild -sdk iphonesimulator -configuration Release -project ReactNativeBabylon.xcodeproj -scheme BabylonNative build CODE_SIGNING_ALLOWED=NO', 'iOS/Build');
+  exec('xcodebuild -sdk iphonesimulator -arch x86_64 -configuration Release -project ReactNativeBabylon.xcodeproj -scheme BabylonNative build CODE_SIGNING_ALLOWED=NO', 'iOS/Build');
 };
 
 const buildIOS = gulp.series(makeXCodeProj, buildIphoneOS, buildIphoneSimulator);
@@ -100,6 +100,7 @@ Assembled/ios/libs/libNativeXr.a
 Assembled/ios/libs/libspirv-cross-glsl.a
 Assembled/ios/libs/libNativeInput.a
 Assembled/ios/libs/libJsRuntime.a
+Assembled/ios/libs/libGraphics.a
 Assembled/ios/libs/libOSDependent.a
 Assembled/ios/libs/libastc-codec.a
 Assembled/ios/libs/libGenericCodeGen.a

Modules/@babylonjs/react-native/react-native-babylon.podspec

@@ -10,6 +10,7 @@ set(PACKAGED_LIBS
     bx
     GenericCodeGen
     glslang
+    Graphics
     JsRuntime
     OGLCompiler
     OSDependent

Modules/@babylonjs/react-native/submodules/BabylonNative

@@ -144,7 +144,9 @@ cd ios
 pod install
 ```
 
-This will create a symbolic link in your `node_modules` directory to the `@babylonjs/react-native` source directory. For iOS the XCode project needs to be generated with `CMake` as described [above](#ios) and added to your `xcworkspace`.
+This will create a symbolic link in your `node_modules` directory to the `@babylonjs/react-native` source directory. However, this also requires a custom `metro.config.js` as the Metro bundler does not support symbolic links by default. See the [GitHub issue](https://github.com/react-native-community/cli/issues/1238#issue-673055870) on this for a solution.
+
+For iOS the XCode project needs to be generated with `CMake` as described [above](#ios) and added to your `xcworkspace`.
 
 ## Security