Integrate the new Babylon Native Graphics object (#86)

ryantrem · web-flow · commit fd7f7e6d7546 · 2020-09-30T15:15:03.000-07:00
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.
diff --git a/Apps/PackageTest/package-lock.json b/Apps/PackageTest/package-lock.json
diff --git a/Apps/PackageTest/package.json b/Apps/PackageTest/package.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",
diff --git a/Apps/Playground/ios/Podfile.lock b/Apps/Playground/ios/Podfile.lock
@@ -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
diff --git a/Apps/Playground/package-lock.json b/Apps/Playground/package-lock.json
diff --git a/Apps/Playground/package.json b/Apps/Playground/package.json
@@ -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",
diff --git a/Modules/@babylonjs/react-native/android/CMakeLists.txt b/Modules/@babylonjs/react-native/android/CMakeLists.txt
@@ -46,6 +46,7 @@ target_link_libraries(BabylonNative
     arcana
     jsi
     AndroidExtensions
+    Graphics
     JsRuntime
     NativeWindow
     NativeEngine
diff --git a/Modules/@babylonjs/react-native/android/src/main/cpp/BabylonNativeInterop.cpp b/Modules/@babylonjs/react-native/android/src/main/cpp/BabylonNativeInterop.cpp
@@ -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;
diff --git a/Modules/@babylonjs/react-native/ios/BabylonNative.cpp b/Modules/@babylonjs/react-native/ios/BabylonNative.cpp
@@ -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)
diff --git a/Modules/@babylonjs/react-native/ios/CMakeLists.txt b/Modules/@babylonjs/react-native/ios/CMakeLists.txt
@@ -32,6 +32,7 @@ target_include_directories(BabylonNative PUBLIC ${CMAKE_CURRENT_LIST_DIR})
 target_link_libraries(BabylonNative
     z
     arcana
+    Graphics
     jsi
     JsRuntime
     NativeWindow
diff --git a/Modules/@babylonjs/react-native/package.json b/Modules/@babylonjs/react-native/package.json
@@ -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"
diff --git a/Modules/@babylonjs/react-native/react-native-babylon.podspec b/Modules/@babylonjs/react-native/react-native-babylon.podspec
@@ -25,6 +25,7 @@ Pod::Spec.new do |s|
                 'bx',
                 'GenericCodeGen',
                 'glslang',
+                'Graphics',
                 'jsRuntime',
                 'OGLCompiler',
                 'OSDependent',
diff --git a/Modules/@babylonjs/react-native/submodules/BabylonNative b/Modules/@babylonjs/react-native/submodules/BabylonNative
@@ -1 +1 @@
-Subproject commit c8989d80f523bbfc066261d4f8f63321df78eed5
+Subproject commit a4e69810c13157a88e5069cd661f9b555a397fa0
diff --git a/Package/gulpfile.js b/Package/gulpfile.js
@@ -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
diff --git a/Package/iOS/CMakeLists.txt b/Package/iOS/CMakeLists.txt
@@ -10,6 +10,7 @@ set(PACKAGED_LIBS
     bx
     GenericCodeGen
     glslang
+    Graphics
     JsRuntime
     OGLCompiler
     OSDependent
diff --git a/README.md b/README.md
@@ -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
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`#include "BabylonNative.h"`
`2`	`2`
	`3`	`+#include <Babylon/Graphics.h>`
`3`	`4`	`#include <Babylon/JsRuntime.h>`
`4`	`5`	`#include <Babylon/Plugins/NativeWindow.h>`
`5`	`6`	`#include <Babylon/Plugins/NativeEngine.h>`
`@@ -29,6 +30,7 @@ namespace Babylon`
`29`	`30`	`{`
`30`	`31`	`}`
`31`	`32`
	`33`	`+ std::unique_ptr<Graphics> m_graphics{};`
`32`	`34`	`Napi::Env env;`
`33`	`35`	`JsRuntime* runtime{};`
`34`	`36`	`Plugins::NativeInput* nativeInput{};`
`@@ -38,7 +40,7 @@ namespace Babylon`
`38`	`40`	`: m_impl{ std::make_unique<Native::Impl>(jsiRuntime) }`
`39`	`41`	`{`
`40`	`42`	`dispatch_sync(dispatch_get_main_queue(), ^{`
`41`		`- Plugins::NativeEngine::InitializeGraphics(windowPtr, width, height);`
	`43`	`+ m_impl->m_graphics = Graphics::InitializeFromWindow<void*>(windowPtr, width, height);`
`42`	`44`	`});`
`43`	`45`
`44`	`46`	`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`
`52`	`54`	`}};`
`53`	`55`
`54`	`56`	`m_impl->runtime = &JsRuntime::CreateForJavaScript(m_impl->env, std::move(dispatchFunction));`
	`57`	`+`
	`58`	`+ m_impl->m_graphics->AddToJavaScript(m_impl->env);`
`55`	`59`
`56`	`60`	`Polyfills::Window::Initialize(m_impl->env);`
`57`	`61`
`@@ -64,12 +68,11 @@ namespace Babylon`
`64`	`68`
`65`	`69`	`Native::~Native()`
`66`	`70`	`{`
`67`		`- Plugins::NativeEngine::DeinitializeGraphics();`
`68`	`71`	`}`
`69`	`72`
`70`	`73`	`void Native::Refresh(void* windowPtr, size_t width, size_t height)`
`71`	`74`	`{`
`72`		`- Plugins::NativeEngine::Reinitialize(m_impl->env, windowPtr, width, height);`
	`75`	`+ m_impl->m_graphics->ReinitializeFromWindow<void*>(windowPtr, width, height);`
`73`	`76`	`}`
`74`	`77`
`75`	`78`	`void Native::Resize(size_t width, size_t height)`
Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,7 @@ target_include_directories(BabylonNative PUBLIC ${CMAKE_CURRENT_LIST_DIR})`
`32`	`32`	`target_link_libraries(BabylonNative`
`33`	`33`	`z`
`34`	`34`	`arcana`
	`35`	`+ Graphics`
`35`	`36`	`jsi`
`36`	`37`	`JsRuntime`
`37`	`38`	`NativeWindow`