Best way to close/unmount ViroARscene without performance issues

[alexborton]

1. Development OS: Mac
2. Device OS & Version: Android / iOS (all)
3. Version: ViroReact 2.9.1 and React Native 0.55.3

Description

I am having performance issues when i want to unmount my AR scene. It seems to happen on all devices (Android and iOS) in prod/release mode. When i "close" the scene, the experience slows down to a halt and sometimes causes the app to crash.

I am using React Navigation and the AR is initiated from the one stack which launches another. The Launch doesn't seem to be be the issue, rather the closing.

This is a basic example of my setup;

The ARScreen index.js

class ARScreen extends Component {
  getARNavigator = () => (
    <ViroARSceneNavigator
      apiKey={Config.VIRO_API_KEY}
      initialScene={{ scene: InitialARScene }}
      style={styles.flex}
    />
  )

  render = () => {
    const { navigation } = this.props
    return (
      <View style={styles.flex}>
        <StatusBar hidden />
        {this.getARNavigator()}
        <CloseButton onPress={() => navigation.navigate('Home')} />
      </View>
    )
  }
}

<CloseButton /> is positioned over the scene itself which takes over the entire screen.

I think, ideally, i need the onPress to somehow unmount or close or stop the AR scene before attempting to navigate to 'Home'

[manbod]

Hi @alexborton , Can you provide how your stack / routes are setup? What kind of navigator are you using? What do you mean by "the AR is initiated from the one stack which launches another"? Another stack? or Another route? Does the user navigate to ARScreen from Home screen, or some place else?

We use React Navigation along with ViroARScene in our Paramount AR app -> Play Store, App Store. We havent seen any memory leaks / performance issues with react navigation there.

It'd be good to see how your routes/screens are laid out so we can try to reproduce on our end.

Thanks

[marvinernst]

I got the same issue, also using React Navigation. On navigating back from the AR-View to another, using navigator.pop(). The app slows down extremly till the AR-View gets unmounted, but this take 5-10 seconds.

[kesha-antonov]

My app crashes when I try to remove ViroARSceneNavigator from scene. Did you have this error?

[manbod]

Hi @MarvinErnst , @kesha-antonov , What version of ViroReact and React-Native are you guys using? Can you elaborate how your stack / routes are set up? As I commented earlier, we haven't seen memory leaks / degraded performance issues with React Navigation and ViroARScene in our Paramount AR App. Having source code / stack setup where you guys are seeing these issues would help us a lot in reproducing them on our end and looking into any possible memory leaks.

Thanks

[marvinernst]

Hi @manbod , react-viro: 2.10.0, react-native: 0.55.4

Base of the App is a StackNavigator from 'react-navigation'.

<RootStackstyle={generalStyle.container} />

From there the user navigates to a list page or map page (the result is the same for both) and from there to the details page where the AR is embeded

      itemId: id,
    });

This the the AR component

     <ViroARSceneNavigator {...sharedProps} initialScene={{ scene: () => (
            <ViroARScene>
              <ViroARImageMarker
              target="tafel1">
              <ViroVideo
                source={moenchVideo}
                rotation={[-90, 0, 0]}
                position={[1, 1, 0]}
                scale={[1, 1, 1]}
                opacity={0.85}
                volume={0.5}
                materials={['chromaKeyFilteredVideo']}
              />
              <ViroSound paused={false} muted={false} source={sound} loop volume={1.0} />
            </ViroARImageMarker>
            </ViroARScene>
          ),
        }}
      />

If i then go back using this.props.navigation.pop(); the app is lagging till the component gets unmounted (5-10s);

I hope you can help :)

[achuvm]

Hi @MarvinErnst ,

We tried this using Viro React 2.10.0 as well as 2.11.0 and were not able to reproduce this issue.

I've attached a video of entering-exiting a screen w/ a ViroARSceneNavigator using a react-navigation StackNavigator and it seems to have no issues doing so.

Please see the attached video: https://drive.google.com/file/d/1W6gZQ1XXPiovsDzgA9yqyztu1xgQR55n/view?usp=sharing

Also, here is the project that I used to test this out: StackNavTest.zip

To use that project:

1. unzip file
2. run npm install from the root
3. open SecondScreen.js and replace API_KEY_HERE with your API key
4. [Xcode only] cd ios/; pod install;

Then build/run it using Xcode or the testbed. If you use Xcode, you'll be using the react-viro v2.10.0 if you use the latest testbed, then you'll be using react-viro v2.11.0.

Thanks,

[mkraina]

Hi all, have anyone managed to solve this issue? I'm experiencing app irresponsibility even in @achuvm 's NavTest when navigating back from the second screen with ViroARSceneNavigator. Sometimes it works correctly, but most times I'm not able to interact with the app at all. iPhone SE, iOS 12.

[SatyaFariz]

I'm having the same issue here. I put my ViroVRSceneNavigator in a modal and when i close the modal the modal animation becomes very laggy

[skizzo]

I'm having the same issue here. I put my ViroVRSceneNavigator in a modal and when i close the modal the modal animation becomes very laggy

@SatyaFariz +1, my app becomes unusably slow after closing a modal containing ViroARSceneNavigator.

[Tino-F]

Also having the same issue, my app freezes up after navigating to a different screen

[Tino-F]

@kesha-antonov https://github.com/viromedia/viro/issues/248#issuecomment-385126647 fixed it for me

Hi @bryantAXS,

Actually, I think I've come up with a workaround, it seems like this is caused when running the app in debug mode while connected to Xcode.

If you open up your app after disconnecting from the debug session, then it no longer deadlocks. Another way you can do this is to click on your target virodemo next to the Stop button -> Edit Schemes -> Run -> Options -> GPU Frame Capture -> Set to Disabled.

Once you do that, your app should no longer freeze after leaving the AR view.

It looks like there's some interaction with Xcode's debugging tools and Viro that's causing this deadlock when destroying the ViroARSceneNavigator.

See image below:

[gbalduzzi]

I'm experiencing a similar problem.

When I close the screen with viro using react-navigation, everything works fine. However, when the ViroArSceneNavigator is removed while remaining on the same screen, the app crashes.

To reproduce:

constructor(props) {
  super(props)
  
  this.state = {
    show: true
  }
}

componentDidMount() {
  setTimeout(() => this.setState({ show: false }), 5000)
}

render() {
  return (
    <>
      {this.state.show && (
          <ViroARSceneNavigator ..... scene with some ARMarkers.... />
      )}
    </>
  )
}

[nguyenvanphuc2203]

@kesha-antonov #248 (comment) fixed it for me

Hi @bryantAXS, Actually, I think I've come up with a workaround, it seems like this is caused when running the app in debug mode while connected to Xcode. If you open up your app after disconnecting from the debug session, then it no longer deadlocks. Another way you can do this is to click on your target virodemo next to the Stop button -> Edit Schemes -> Run -> Options -> GPU Frame Capture -> Set to Disabled. Once you do that, your app should no longer freeze after leaving the AR view. It looks like there's some interaction with Xcode's debugging tools and Viro that's causing this deadlock when destroying the ViroARSceneNavigator. See image below:

it work for me! thánks.