Add UWP support to BabylonReactNative #137

chrisfromwork · 2021-01-07T22:43:45Z

This pr adds support for react-native-windows. Instructions for building the react-native-windows babylon.js package can be found at Modules@babylonjs\react-native\windows\README.txt

Overview:

A CMakeLists.txt file has been added for the windows @babylonjs/react-native package that sets up BabylonNative dependencies, the react-native needed jsi project and a BabylonNative.lib that utilizes pre-existing BabylonReactNative BabylonNative initialization logic
We've updated BabylonNative.lib to expose the ability to specify a windowTypePtr. The windowTypePtr needs to be specified to use XAML SwapChainPanels when rendering
BabylonReactNative.dll has been added to the @babylonjs/react-native package to implement EngineView/EngineViewManager/BabylonModule native components
The Playground app has been updated to support react-native-windows scenarios
@react-native-community/slider has been updated to a newer version that supports react-native-windows
@react-native-permissions has been updated to a newer version that supports react-native-windows
react and react-native have been updated to versions that support react-native-windows
metro.config.js for the Playground app has been updated to exclude windows files that should not be bundled/deployed

TODOs:

Fix Slider logic/find a slider implementation that is supported on all platforms
Fix xr camera permissions logic. Permissions is not currently a supported react-native-windows native module
Refactor logic to support newer BabylonReactNative commits

Follow up issues to file:

OpenXR errors are encountered when attempting to enter immersive vr on a desktop when no vr headset is plugged in/mixed reality portal isn't running: OpenXR generates errors when attempting to enter immersive vr when no headset is plugged in BabylonNative#579
Fix NativeInput, which does not appear to work correctly for UWP: NativeInput does not appear to work correctly for UWP experiences #139
Stopping xr generates crashes: UWP EngineView/xr lifecycle does not match behaviors for mobile platforms #140
Fix Toggle EngineView lifecycle, which fails to draw to the new swap chain panel: UWP EngineView/xr lifecycle does not match behaviors for mobile platforms #140
Fix Toggle EngineScreen lifecycle, which fails to draw to the correct swap chain panel: UWP EngineView/xr lifecycle does not match behaviors for mobile platforms #140
Package compiled BabylonReactNative.winmd/BabylonReactNative.dll into the distributed npm package: react-native-windows support should be added to the @babylonjs/react-native npm package #141

Modules/@babylonjs/react-native/windows/BabylonReactNative/EngineViewManager.cpp

Modules/@babylonjs/react-native/windows/BabylonReactNative/EngineViewManager.h

Co-authored-by: Ryan Tremblay <ryantrem@msn.com>

…tive into uwp

Modules/@babylonjs/react-native/EngineHook.ts

ryantrem · 2021-01-20T20:29:35Z

Modules/@babylonjs/react-native/windows/BabylonReactNative/BabylonModule.cpp

+        }
+    });
+
+    result.Resolve(true);


Seems like you didn't actually change it though?

ryantrem · 2021-01-20T20:35:22Z

Modules/@babylonjs/react-native/windows/BabylonReactNative/EngineViewManager.h

-            winrt::event_token RenderingToken;
-        };
-        RevokerData _revokerData{};
+        winrt::BabylonReactNative::EngineView _engineView{ nullptr };


The only reason this instance is stored is so that it can be replaced, which destroys the old one and unregisters events, right? If/when in the future we add support for multiple view instances, we'll have to update this, and probably do something more like the OnLoaded/OnUnloaded approach I mentioned, but I guess we can just do it this way for now and worry about fixing it up as needed in the future.

yeah we can refactor this as wanted. right now it seems like BabylonNative initialization is driven by the BabylonModule initialize call. I wasn't sure if we wanted the BabylonNative initialization/deinitialization to be driven by the SwapChainPanel OnLoaded/OnUnloaded.

FWIW, there are some lifecycle bugs floating around for UWP support. We can address these sorts of changes in these follow up fixes.

ryantrem · 2021-01-20T20:38:34Z

Package/gulpfile.js

+const makeUWPProject = async () => {
+  exec('.\\..\\Modules\\@babylonjs\\react-native\\windows\\scripts\\Setup.bat');
+}
+
+const buildUWPProject = async () => {
+  exec('.\\..\\Modules\\@babylonjs\\react-native\\windows\\scripts\\Build.bat');
+}
+
+const buildUWP = gulp.series(makeUWPProject, buildUWPProject);


Today we run this gulp build on Mac agents so we can build both iOS and Android, which means this added stuff for UWP will break. I think we are going to need to rework this so that we build Android, iOS, and UWP on different build agents, publish the built stuff as artifacts, and then have a separate stage that pulls the artifacts and packages them all together into the NPM package. Maybe we just save the changes to gulpfile.js for a future PR?

that sounds good. I'll probably go ahead and add the buildUWP gulp task to the exports. But i agree it shouldn't be in the main build task.

Co-authored-by: Ryan Tremblay <ryantrem@msn.com>

Apps/Playground/App.tsx

Co-authored-by: Ryan Tremblay <ryantrem@msn.com>

tymlipari · 2021-01-21T23:32:22Z

Modules/@babylonjs/react-native/windows/BabylonReactNative/EngineView.cpp

+namespace winrt::BabylonReactNative::implementation {
+    EngineView::EngineView() {
+        _revokerData.SizeChangedRevoker = SizeChanged(winrt::auto_revoke, { this, &EngineView::OnSizeChanged });
+        _revokerData.PointerPressedRevoker = PointerPressed(winrt::auto_revoke, { this, &EngineView::OnPointerPressed });


For pointer events, rather than subscribing to the evented form, you should instead override the OnPointer* methods. These are invoked before the evented forms, and provide an option for suppressing the event from being raised (by setting the Handled property) in cases where that might not be valuable (think not raising PointerPressed for a button but instead a Click).

sounds good, I'll add this to the upcoming packaging review.

Chris Barth added 30 commits October 26, 2020 14:09

setup react windows project

3256064

start on cmake definition for babylon react native for uwp

6e55b8c

cache some helper logic

1e96682

change setup to x64 for local testing

0c3b117

add source files

7cb9a19

add some needed files

f8cb2b1

working winrt plugin initialization

e5c243c

more windows work

5500b7d

complete merge

740cdd1

failing during linker

6e0642b

add options to vcxproj to try and unblock debug builds

f46a5d4

move to use jsi

ba04d8d

fix modules

321625f

add react-native-windows dependency

6d7eec3

merge master

344aa12

working compilation

0c3cbd6

current state

2d9ef2d

current proto changes

5e18391

working native input compilation

4c5778f

fix playground solution

f0bed54

close to working

d98762d

working windows logic

fd3335e

hacked app setup to support working windows logic

c28b098

working vr

07b127f

move BabylonNative dll definition and add arm64 support

9ac1c23

fix babylonnative to build in module folder

0fe138a

fix submodule declarations

b8c0384

remove unneeded build scripts

7962233

add clean solution

0d7e725

working build

4adc50c

tymlipari reviewed Jan 15, 2021

View reviewed changes

Modules/@babylonjs/react-native/windows/BabylonReactNative/EngineViewManager.cpp Outdated Show resolved Hide resolved

tymlipari reviewed Jan 15, 2021

View reviewed changes

Modules/@babylonjs/react-native/windows/BabylonReactNative/EngineViewManager.h Outdated Show resolved Hide resolved

tymlipari reviewed Jan 15, 2021

View reviewed changes

Modules/@babylonjs/react-native/windows/BabylonReactNative/EngineViewManager.h Outdated Show resolved Hide resolved

tymlipari reviewed Jan 15, 2021

View reviewed changes

Modules/@babylonjs/react-native/windows/BabylonReactNative/EngineViewManager.h Outdated Show resolved Hide resolved

revert settings file

5585d9f

chrisfromwork linked an issue Jan 19, 2021 that may be closed by this pull request

Enable react-native-windows support #116

Closed

4 tasks

Chris Barth and others added 10 commits January 19, 2021 10:31

Merge branch 'uwpPackage' into uwp

6d9b1bb

remove files and update documentation

0dc287a

address review comments

3f2a26b

address more review comments

466f94d

Update Modules/@babylonjs/react-native/EngineHook.ts

874dbc3

Co-authored-by: Ryan Tremblay <ryantrem@msn.com>

address review comments

3ec80d2

Merge branch 'uwp' of https://github.com/chrisfromwork/BabylonReactNa…

910c952

…tive into uwp

move hmd render behaviors to enginehook

465d9c3

remove unneeded dev dependencies

336535f

move engine logic into engineview

874fa7f

chrisfromwork requested review from tymlipari and ryantrem January 20, 2021 00:54

ryantrem reviewed Jan 20, 2021

View reviewed changes

Modules/@babylonjs/react-native/EngineHook.ts Outdated Show resolved Hide resolved

ryantrem reviewed Jan 20, 2021

View reviewed changes

chrisfromwork and others added 3 commits January 20, 2021 14:16

Update Modules/@babylonjs/react-native/EngineHook.ts

78b388a

Co-authored-by: Ryan Tremblay <ryantrem@msn.com>

address review comments

4515879

remove unneeded reference

d211e8f

chrisfromwork requested a review from ryantrem January 21, 2021 17:21

ryantrem reviewed Jan 21, 2021

View reviewed changes

Apps/Playground/App.tsx Outdated Show resolved Hide resolved

ryantrem approved these changes Jan 21, 2021

View reviewed changes

Update Apps/Playground/App.tsx

5a5e093

Co-authored-by: Ryan Tremblay <ryantrem@msn.com>

tymlipari reviewed Jan 21, 2021

View reviewed changes

tymlipari approved these changes Jan 21, 2021

View reviewed changes

chrisfromwork merged commit bfaff66 into BabylonJS:master Jan 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add UWP support to BabylonReactNative #137

Add UWP support to BabylonReactNative #137

chrisfromwork commented Jan 7, 2021 •

edited

Loading

ryantrem Jan 20, 2021

ryantrem Jan 20, 2021

chrisfromwork Jan 20, 2021 •

edited

Loading

ryantrem Jan 20, 2021

chrisfromwork Jan 20, 2021

tymlipari Jan 21, 2021

chrisfromwork Jan 21, 2021

Add UWP support to BabylonReactNative #137

Add UWP support to BabylonReactNative #137

Conversation

chrisfromwork commented Jan 7, 2021 • edited Loading

Overview:

TODOs:

Follow up issues to file:

ryantrem Jan 20, 2021

Choose a reason for hiding this comment

ryantrem Jan 20, 2021

Choose a reason for hiding this comment

chrisfromwork Jan 20, 2021 • edited Loading

Choose a reason for hiding this comment

ryantrem Jan 20, 2021

Choose a reason for hiding this comment

chrisfromwork Jan 20, 2021

Choose a reason for hiding this comment

tymlipari Jan 21, 2021

Choose a reason for hiding this comment

chrisfromwork Jan 21, 2021

Choose a reason for hiding this comment

chrisfromwork commented Jan 7, 2021 •

edited

Loading

chrisfromwork Jan 20, 2021 •

edited

Loading