Trying to complete the flappy bird demo, but THREE.WebGLRenderer is causing problems

Expo SDK
1

I’m using XDE and have my phone connected.

I’ve been able to get other demos to run including the basic “Hello World” and the “Audio Recording Example”.

I was able to get it the flappy birds app to start, however, it refuses to load the basic screen. Here is the message(s) in XDE

THREE.WebGLRenderer 88

2:48:33 PM

▶THREE.WebGLRenderer: OES_texture_float_linear extension not supported.

2:48:35 PM

▶THREE.WebGLRenderer: OES_texture_half_float extension not supported.

2:48:36 PM

▶THREE.WebGLRenderer: OES_texture_half_float_linear extension not supported.

2:48:37 PM

▶THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.

2:48:39 PM

▶THREE.WebGLRenderer: OES_texture_float extension not supported.

2:48:40 PM

▶THREE.WebGLRenderer: ANGLE_instanced_arrays extension not supported.

2:48:42 PM

▶THREE.WebGLRenderer: OES_element_index_uint extension not supported.

2:48:43 PM

▶THREE.WebGLRenderer: OES_standard_derivatives extension not supported.

Any ideas what might be causing this?

2

@nikki @bacon - we should silence these perhaps! or warn people that they will… get these warnings :sweat_smile:

@vincentk42 - expo doesn’t yet support 100% of the webgl spec, but these warnings aren’t relevant to this example and also to many other apps

1 Like
3

@vincentk42 nothing to worry about here, just some things that three.js does in it’s compatibility check.

TL;DR:

@ben made a cool workaround which prevents this from happening, I already updated the Flappy Snack to use it!

There are some API things in WebGL that don’t line up with OpenGL ES (The native version of OpenGL :nerd_face:).
As far as I know this isn’t preventing us from anything, and in the future we could PR three.js to better support EXGL.
Our current solution is to use a filter on console.warn to prevent those specific warnings! We do this through expo-three: ^2.0.7 using something like this:

THREE.suppressExpoWarnings(suppressExpoWarnings: boolean)

import {THREE} from 'expo-three' // <- This manages the global instance of three

class App extends React.Component {
  componentWillMount() {
    THREE.suppressExpoWarnings(true)
  }
  componentWillUnmount() {
    THREE.suppressExpoWarnings(false)
  }
}