Consume canvas polyfill to enable text support (#251)

* update babylonnative

* initialize canvas polyfill

* support canvas polyfill

* add engine view logic

* remove no longer needed effect

* remove unused _native variable

* revert engine view changes in favor of content from babylon.js

* iOS fixes

* move to most recent master branch

* fix package versions

* Update to latest BabylonNative and bjs npm package 5.0.0-alpha.30

* Updates from pod install

* Update to latest BabylonNative submodule 3a8ea03c

* Update package-lock.json files in PackageTest

Co-authored-by: Ryan Tremblay <[email protected]>
Co-authored-by: Gary Hsu <[email protected]>

Author: 3 people

Apps/PackageTest/0.63.1/package-lock.json

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

Apps/PackageTest/0.63.1/package.json

@@ -12,7 +12,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@babylonjs/core": "^5.0.0-alpha.22",
+    "@babylonjs/core": "^5.0.0-alpha.30",
     "@babylonjs/react-native": "file:../../../Package/Assembled/babylonjs-react-native-0.0.1.tgz",
     "@babylonjs/react-native-windows": "file:../../../Package/Assembled-Windows/babylonjs-react-native-windows-0.0.1.tgz",
     "react": "^17.0.1",

Apps/PackageTest/0.64.0/package-lock.json

@@ -193,6 +193,7 @@
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
 				4DF74E02309D0674CD39F2F6 /* [CP] Copy Pods Resources */,
+				6A13610D0DAC0E2C73213A44 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -215,6 +216,7 @@
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				7673B7292A47C1F4F6B8C9E4 /* [CP] Copy Pods Resources */,
+				3A005AC06E3079E06824DD42 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -394,6 +396,24 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
+		3A005AC06E3079E06824DD42 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Playground/Pods-Playground-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Playground/Pods-Playground-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		4DF74E02309D0674CD39F2F6 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -412,6 +432,24 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Playground-PlaygroundTests/Pods-Playground-PlaygroundTests-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
+		6A13610D0DAC0E2C73213A44 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Playground-PlaygroundTests/Pods-Playground-PlaygroundTests-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Playground-PlaygroundTests/Pods-Playground-PlaygroundTests-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		7673B7292A47C1F4F6B8C9E4 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -768,6 +806,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -828,6 +867,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

Apps/PackageTest/0.64.0/package.json

@@ -467,17 +467,17 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: 5d6dbb11432863ed5cd10461d91baf60af966217
+  FBReactNativeSpec: 4cf6a7ec72a62c59d9d0cc5b558e55c462203506
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
   Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   Permission-Camera: 358081c7b8210849958af181ce9ddeb11932aa82
@@ -492,7 +492,7 @@ SPEC CHECKSUMS:
   React-jsi: 5de8204706bd872b78ea646aee5d2561ca1214b6
   React-jsiexecutor: 124e8f99992490d0d13e0649d950d3e1aae06fe9
   React-jsinspector: 500a59626037be5b3b3d89c5151bc3baa9abf1a9
-  react-native-babylon: 67b39de846123d0846b28ce0e38671c7e3c4e04f
+  react-native-babylon: 858ff09e82f9c3de4f17d66e90d6ca08dd480bb4
   react-native-slider: e45c8376012e5ace012e5eef62e9c85c68e50a0f
   React-perflogger: aad6d4b4a267936b3667260d1f649b6f6069a675
   React-RCTActionSheet: fc376be462c9c8d6ad82c0905442fd77f82a9d2a

Apps/Playground/ios/Playground.xcodeproj/project.pbxproj

@@ -13,8 +13,8 @@
     "postinstall": "node scripts/postinstall.js"
   },
   "dependencies": {
-    "@babylonjs/core": "^5.0.0-alpha.22",
-    "@babylonjs/loaders": "^5.0.0-alpha.22",
+    "@babylonjs/core": "^5.0.0-alpha.30",
+    "@babylonjs/loaders": "^5.0.0-alpha.30",
     "@babylonjs/react-native": "file:../../Modules/@babylonjs/react-native",
     "@babylonjs/react-native-windows": "file:../../Modules/@babylonjs/react-native-windows",
     "@react-native-community/slider": "4.0.0-rc.3",

Apps/Playground/ios/Podfile.lock

@@ -24,7 +24,7 @@
   "licenseFilename": "LICENSE",
   "readmeFilename": "README.md",
   "peerDependencies": {
-    "@babylonjs/core": "^5.0.0-alpha.22",
+    "@babylonjs/core": "^5.0.0-alpha.30",
     "@babylonjs/react-native":"version",
     "react": "^17.0.1",
     "react-native": "^0.64.0",

Apps/Playground/package-lock.json

@@ -148,6 +148,7 @@
         $(BabylonNativeBuildDir)\Plugins\NativeXr\$(Configuration);
         $(BabylonNativeBuildDir)\Polyfills\Window\$(Configuration);
         $(BabylonNativeBuildDir)\Polyfills\XMLHttpRequest\$(Configuration);
+        $(BabylonNativeBuildDir)\Polyfills\Canvas\$(Configuration);
         $(BabylonNativeBuildDir)\$(Configuration);
         %(AdditionalLibraryDirectories);
       </AdditionalLibraryDirectories>
@@ -175,6 +176,7 @@
         bgfx.lib;
         bimg.lib;
         bx.lib;
+        Canvas.lib;
         edtaa3.lib;
         etc1.lib;
         etc2.lib;
@@ -231,6 +233,7 @@
         bgfx.lib;
         bimg.lib;
         bx.lib;
+        Canvas.lib;
         edtaa3.lib;
         etc1.lib;
         etc2.lib;

Apps/Playground/package.json

@@ -44,7 +44,8 @@ target_link_libraries(BabylonNative
     NativeInput
     NativeXr
     Window
-    XMLHttpRequest)
+    XMLHttpRequest
+    Canvas)
 
 if(DEFINED EXTENSIONS_DIRS)
     foreach(extensionDir IN LISTS EXTENSIONS_DIRS)

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

@@ -80,4 +80,5 @@ target_link_libraries(BabylonNative
     NativeInput
     NativeXr
     Window
-    XMLHttpRequest)
+    XMLHttpRequest
+    Canvas)

Modules/@babylonjs/react-native-windows/windows/BabylonReactNative/BabylonReactNative.vcxproj

@@ -54,7 +54,8 @@ target_link_libraries(BabylonNative
     NativeInput
     NativeXr
     Window
-    XMLHttpRequest)
+    XMLHttpRequest
+    Canvas)
 
 # TODO: For some reason these don't work, so we specify these in the CMake command line args.
 set_target_properties(BabylonNative PROPERTIES

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

@@ -28,7 +28,7 @@
     "semver": "^7.3.2"
   },
   "peerDependencies": {
-    "@babylonjs/core": "^5.0.0-alpha.22",
+    "@babylonjs/core": "^5.0.0-alpha.30",
     "react": "^16.13.1",
     "react-native": "^0.63.1",
     "react-native-permissions": "^2.1.4"

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

@@ -22,6 +22,7 @@ Pod::Spec.new do |s|
                 'bgfx',
                 'bimg',
                 'bx',
+                'Canvas',
                 'GenericCodeGen',
                 'glslang',
                 'Graphics',

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

@@ -8,6 +8,7 @@
 #include <Babylon/Plugins/NativeXr.h>
 #include <Babylon/Polyfills/Window.h>
 #include <Babylon/Polyfills/XMLHttpRequest.h>
+#include <Babylon/Polyfills/Canvas.h>
 
 #include <DispatchFunction.h>
 
@@ -53,6 +54,9 @@ namespace Babylon
             // NOTE: React Native's XMLHttpRequest is slow and allocates a lot of memory. This does not override
             // React Native's implementation, but rather adds a second one scoped to Babylon and used by WebRequest.ts.
             Polyfills::XMLHttpRequest::Initialize(m_env);
+
+            // Initialize Canvas polyfill for text support
+            Polyfills::Canvas::Initialize(m_env);
         }
 
         ~ReactNativeModule() override

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

@@ -419,6 +419,7 @@ Assembled/ios/libs/libOSDependent.a
 Assembled/ios/libs/libXMLHttpRequest.a
 Assembled/ios/libs/libUrlLib.a
 Assembled/ios/libs/libastc-codec.a
+Assembled/ios/libs/libCanvas.a
 Assembled/ios/libs/libGenericCodeGen.a
 Assembled/ios/libs/libspirv-cross-core.a
 Assembled/ios/libs/libspirv-cross-msl.a
@@ -493,6 +494,8 @@ const build = gulp.series(buildIOS, buildAndroid, createIOSUniversalLibs, copyFi
 const rebuild = gulp.series(clean, build);
 const pack = gulp.series(rebuild, createPackage);
 
+exports.validate = validate;
+
 exports.buildIOS = buildIOS;
 exports.buildAndroid = buildAndroid;
 exports.createIOSUniversalLibs = createIOSUniversalLibs;

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

@@ -8,6 +8,7 @@ set(PACKAGED_LIBS
     bgfx
     bimg
     bx
+    Canvas
     GenericCodeGen
     glslang
     Graphics