Screen Flickering on iPhone 6 plus

[Gradner]

Any expo-three examples I run on my phone render properly but after a few minutes the full screen begins to flicker white every few seconds. The issue doesn't seem to occur when running in a simulator, only the physical device. It doesn't seem related to the complexity of the scene as I get similar results from basic mesh geometries and loading complex obj/mat scenes.

Most times the app will continue running, with the flickering getting progressively worse overtime. The expo performance monitor doesn't seem to indicate any sort of a memory leak, staying stable at ~350mb and the UI/JS framerates seem fine. Occasionally the app will crash after running for a while, typically after the white-screen flickers have become severe, but general frame-rates/performance in the app don't appear to degrade.

A simple example that's been giving me a headache today:

import { ScreenOrientation, GLView } from 'expo'
import ExpoTHREE, { THREE } from 'expo-three'
import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';

export default class App extends React.Component {
  constructor(props){
    super(props)
  }

  componentWillMount(){
    THREE.suppressExpoWarnings(true)
  }

  _onContextCreate = async gl => {
    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
    this.renderer = new ExpoTHREE.Renderer({ gl, antialias: true });
    this.renderer.setSize(width, height);
    this.renderer.gammaInput = true;
    this.renderer.gammaOutput = true;
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xbebebe)
    this.camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
    this.camera.position.set(-20, 10, -20)
    this.camera.lookAt(0, 0, 0)

    this.loadMeshes()
    const glRender = () => {
      requestAnimationFrame(glRender);
      this.tick();
      this.renderer.render(this.scene, this.camera);
      gl.endFrameEXP();
    }
    glRender()
  };

  tick = () => {
    this.camera.rotateY(1 * THREE.Math.DEG2RAD)
  }

  loadMeshes = async () => {
    console.log('loading meshes')
    var boxgeometry = new THREE.BoxGeometry( 1, 1, 1);
    var boxmaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    this.cube = new THREE.Mesh( boxgeometry, boxmaterial );
    this.cube.position.set(-2, 0, 0)
    this.scene.add( this.cube );

    var conegeometry = new THREE.ConeGeometry( 1, 1, 32);
    var conematerial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
    this.cone = new THREE.Mesh( conegeometry, conematerial );
    this.cone.position.set(0, 0, 0)
    this.scene.add( this.cone );

    var spheregeometry = new THREE.SphereGeometry( 1, 1, 32);
    var spherematerial = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
    this.sphere = new THREE.Mesh( spheregeometry, spherematerial );
    this.sphere.position.set(2, 0, 0)
    this.scene.add( this.sphere );
  }

  render() {
    return (
        <Animated.View style={style.wrapper}>
          <GLView
            style={{ ...StyleSheet.absoluteFillObject }}
            onContextCreate={this._onContextCreate}
          />
        </Animated.View>
    );
  }
}

const style = {
  wrapper: {
    flex: 1
  }
}

I'm currently considering porting a Three.js game for mobile and want to make sure that the app will run correctly on current devices properly. If there are any compatibility/performance issues with older models, I'd like to be able to indicate this to users accurately.

It strikes me as odd if this issue is just related to the device's capabilities that it hasn't been mentioned on this library or expo-graphics nor expo-gl (which is why I feel like there's a good chance it's because of something I'm doing wrong, not the device).

[Gradner]

I guess more useful than somebody trying to troubleshoot my specific issue here, it'd be nice to hear from anyone else using an iPhone 6 or 6 plus on whether they've run into similar issues. I'm feeling more and more like it's a device/OS/Heat issue given the lack of logs/errors.

I realized last night that it isn't "Crashing" per se, it's actually just pushing the app to the background. You can switch back to it at which point it behaves as if expo has disconnected (shows my profile page and list of projects). Unfortunately this means no logs are being generated so there's not a whole lot to go on.