Update to latest BabylonNative with tracking states exposed (#122)

Adding debug targets for VSCode and displaying the tracking state from BabylonNative in the Playground app
BabylonJS · Dec 1, 2020 · 0572e64 · 0572e64
1 parent 50736ce
commit 0572e64
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,10 +2,6 @@
 #
 .DS_Store
 
-# Visual Studio Code
-#
-.vscode
-
 # Android Studio
 .project
 .classpath

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"msjsdiag.vscode-react-native",
+	]
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,38 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Build & Debug Android",
+            "cwd": "${workspaceFolder}/Apps/Playground",
+            "type": "reactnativedirect",
+            "request": "launch",
+            "platform": "android"
+        },
+        {
+            "name": "Build & Debug iOS on Device",
+            "cwd": "${workspaceFolder}/Apps/Playground",
+            "type": "reactnativedirect",
+            "request": "launch",
+            "platform": "ios",
+            "port": 9221,
+            "target": "device"
+        },
+        {
+            "name": "Attach to Android",
+            "cwd": "${workspaceFolder}/Apps/Playground",
+            "type": "reactnativedirect",
+            "request": "attach"
+        },
+        {
+            "name": "Attach to iOS on Device",
+            "cwd": "${workspaceFolder}/Apps/Playground",
+            "type": "reactnativedirect",
+            "request": "attach",
+            "platform": "ios",
+            "port": 9221
+        },
+    ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "react-native-tools.projectRoot": "./Apps/Playground"
+}
diff --git a/Apps/Playground/App.tsx b/Apps/Playground/App.tsx
@@ -9,7 +9,7 @@ import React, { useState, FunctionComponent, useEffect, useCallback } from 'reac
 import { SafeAreaView, StatusBar, Button, View, Text, ViewProps, Image } from 'react-native';
 
 import { EngineView, useEngine, EngineViewCallbacks } from '@babylonjs/react-native';
-import { Scene, Vector3, ArcRotateCamera, Camera, WebXRSessionManager, SceneLoader, TransformNode, DeviceSourceManager, DeviceType, DeviceSource, PointerInput } from '@babylonjs/core';
+import { Scene, Vector3, ArcRotateCamera, Camera, WebXRSessionManager, SceneLoader, TransformNode, DeviceSourceManager, DeviceType, DeviceSource, PointerInput, WebXRTrackingState } from '@babylonjs/core';
 import '@babylonjs/loaders';
 import Slider from '@react-native-community/slider';
 
@@ -26,6 +26,7 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
   const [scale, setScale] = useState<number>(defaultScale);
   const [snapshotData, setSnapshotData] = useState<string>();
   const [engineViewCallbacks, setEngineViewCallbacks] = useState<EngineViewCallbacks>();
+  const [trackingState, setTrackingState] = useState<WebXRTrackingState>();
 
   useEffect(() => {
     if (engine) {
@@ -74,16 +75,27 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
     }
   }, [rootNode, scale]);
 
+  const trackingStateToString = (trackingState: WebXRTrackingState | undefined) : string => {
+    return trackingState === undefined ? "" : WebXRTrackingState[trackingState];
+  };
+
   const onToggleXr = useCallback(() => {
     (async () => {
       if (xrSession) {
         await xrSession.exitXRAsync();
         setXrSession(undefined);
+        setTrackingState(undefined);
       } else {
         if (rootNode !== undefined && scene !== undefined) {
           const xr = await scene.createDefaultXRExperienceAsync({ disableDefaultUI: true, disableTeleportation: true })
           const session = await xr.baseExperience.enterXRAsync("immersive-ar", "unbounded", xr.renderTarget);
           setXrSession(session);
+
+          setTrackingState(xr.baseExperience.camera.trackingState);
+          xr.baseExperience.camera.onTrackingStateChanged.add((newTrackingState) => {
+            setTrackingState(newTrackingState);
+          });
+
           // TODO: Figure out why getFrontPosition stopped working
           //box.position = (scene.activeCamera as TargetCamera).getFrontPosition(2);
           const cameraRay = scene.activeCamera!.getForwardRay(1);
@@ -119,6 +131,7 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
             }
             <EngineView style={props.style} camera={camera} onInitialized={onInitialized} />
             <Slider style={{position: 'absolute', minHeight: 50, margin: 10, left: 0, right: 0, bottom: 0}} minimumValue={0.2} maximumValue={2} value={defaultScale} onValueChange={setScale} />
+            <Text style={{fontSize: 12, color: 'yellow',  position: 'absolute', margin: 10}}>{trackingStateToString(trackingState)}</Text>
           </View>
         }
         { toggleView &&

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: cbcec38c3e3d9fc1aee538508a1f751619bb335b
+  react-native-babylon: 05685525bfa89aae82b2fccd0a56351e954df545
   react-native-slider: b34d943dc60deb96d952ba6b6b249aa8091e86da
   React-RCTActionSheet: 1702a1a85e550b5c36e2e03cb2bd3adea053de95
   React-RCTAnimation: ddda576010a878865a4eab83a78acd92176ef6a1