From 0572e6442ddce4e3f51c4b453198917f7dcb947d Mon Sep 17 00:00:00 2001 From: CoPrez <40213616+CoPrez@users.noreply.github.com> Date: Mon, 30 Nov 2020 17:06:48 -0800 Subject: [PATCH] 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 --- .gitignore | 4 ---- .vscode/extensions.json | 7 ++++++ .vscode/launch.json | 38 ++++++++++++++++++++++++++++++++ .vscode/settings.json | 3 +++ Apps/Playground/App.tsx | 15 ++++++++++++- Apps/Playground/ios/Podfile.lock | 2 +- 6 files changed, 63 insertions(+), 6 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/launch.json create mode 100644 .vscode/settings.json diff --git a/.gitignore b/.gitignore index 796c0d2a3..e3ec162e7 100644 --- 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 new file mode 100644 index 000000000..d8f84183b --- /dev/null +++ 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", + ] +} \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..f967b0dbb --- /dev/null +++ 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 + }, + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..715632548 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "react-native-tools.projectRoot": "./Apps/Playground" +} \ No newline at end of file diff --git a/Apps/Playground/App.tsx b/Apps/Playground/App.tsx index 8b8641c60..14197b12a 100644 --- 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 = (props: ViewProps) => { const [scale, setScale] = useState(defaultScale); const [snapshotData, setSnapshotData] = useState(); const [engineViewCallbacks, setEngineViewCallbacks] = useState(); + const [trackingState, setTrackingState] = useState(); useEffect(() => { if (engine) { @@ -74,16 +75,27 @@ const EngineScreen: FunctionComponent = (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 = (props: ViewProps) => { } + {trackingStateToString(trackingState)} } { toggleView && diff --git a/Apps/Playground/ios/Podfile.lock b/Apps/Playground/ios/Podfile.lock index dd8e80386..770b6fe32 100644 --- 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