react-three-fiber on expo not working

[GGAlanSmithee]

As explained in this discussion the tutorial on getting started with react-three-fiber and expo / react-native does not work.

When you run the application (rendering a simple scene with one Box and some basic lighting) you get the warning

THREE.WebGLRenderer:` OES_vertex_array_object extension not supported

When searching for this issue, I am yet to find any clear reason to this, except for incompatabilities with WebGL2, but that seems unlikely.

Since the discussion, which was opened in april, hasn't gotten any relevant feedback, and that this seems to be a hard stop for just starting a new expo project with r3f from scratch, I think this warrants an issue.

Thanks in advance

[CodyJasonBennett]

Have you tried https://docs.pmnd.rs/react-three-fiber/getting-started/installation#react-native? This should work, and OES_vertex_array_object is not an extension which should be reachable as it's WebGL 1. Unfortunately, I don't see many discussions so any problems which aren't reported as issues get lost.

[GGAlanSmithee]

@CodyJasonBennett

thanks for your answer, and I totally understand not being able to read every discussion.

The getting started guide that you linked is exactly the one I followed (with the expo path, I have not tried vanilla RN). The reproduction should therefor be simple, just follow the steps in the guide you linked, and you should get the warning directly.

The consequence, on top of the warning, is that lightning does not work (except for ambient light, which does seem to work).

I have not been able to do extensive testing, but possible reasons could be the virtualization target in Android Studio (Pixel XL API 31) and/or versions of three. I did try another boilerplate I found at github, but it had the same issues.

Regarding WebGL 1/2, I mentioned that simply because that was all I could find when googling (I do not understand the nature of this well enough to draw any conclusions from it). I will try to do some more experiments to see if I can deduce anything.

[CodyJasonBennett]

I'd try on a real device. The warning shouldn't be blocking render, although it's concerning to see since it might mean three.js is falling back to WebGL 1. That is a deprecated code path.

[GGAlanSmithee]

Thanks, I will try that and get back to you

[GGAlanSmithee]

@CodyJasonBennett

When running on a physical device (via expo-go on Android), I get the below error, which seems to back up your guess:

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. WARN THREE.WebGLRenderer: WebGL 1 support was deprecated in r153 and will be removed in r163. at anonymous (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:198645:24) at FiberProvider (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:196546:36) at CanvasWrapper at App at withDevTools(App) (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:129883:27) at RCTView at View (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63020:43) at RCTView at View (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63020:43) at AppContainer (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:62860:36) at main(RootComponent) (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:109215:28) WARN THREE.WebGLRenderer: EXT_blend_minmax extension not supported. at anonymous (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:198645:24) at FiberProvider (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:196546:36) at CanvasWrapper at App at withDevTools(App) (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:129883:27) at RCTView at View (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63020:43) at RCTView at View (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63020:43) at AppContainer (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:62860:36) at main(RootComponent) (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:109215:28) WARN THREE.WebGLRenderer: OES_vertex_array_object extension not supported. at anonymous (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:198645:24) at FiberProvider (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:196546:36) at CanvasWrapper at App at withDevTools(App) (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:129883:27) at RCTView at View (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63020:43) at RCTView at View (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63020:43) at AppContainer (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:62860:36) at main(RootComponent) (http://192.168.1.141:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:109215:28)

[GGAlanSmithee]

The very first warning that appears (maybe unrelated) is

Scripts "build/three.js" and "build/three.min.js" are deprecated with r150+, and will be removed with r160. Please use ES Modules or alternatives: https://threejs.org/docs/index.html#manual/en/introduction/Installation

so maybe it is using the incorrect import for some reason

[GGAlanSmithee]

@CodyJasonBennett

I have been able to do some more testing, and it seems like there might be some potential issues, but no blockers.

Somewhere around three 0.150, or a version just after that, they must have changed how light intensity work - because the default scene - with just an ambient light, makes the scene very dark. Either that or something else is wrong. I noticed the change when testing version for version, and found that intensity={1} in previous versions correlates to intensity={5} in later versions of three.js (see screenshot, using latest stable three.js and @react-three/fiber/native.

Having said that, the console warning is still there, but does not seem to do any harm from what I can tell, not in this simple scene anyhow.

UPDATE: When testing with @react-three/fiber (non-native version) it does behave similar in regards to exposure/intensity, so it does seem to be intentional

[GGAlanSmithee]

However, when attempting to use <Environment /> from @react-three/drei/native I get the error

EXGL: gl.pixelStorei() doesn't support this parameter yet!

I will do some more testing with different versions tomorrow

[CodyJasonBennett]

Physical lights are the default since r155. You can opt out (temporarily) with <Canvas gl={{ useLegacyLights: true }} />. What you are seeing are warnings from WebGL features which are not implemented in expo-gl -- this would previously be flipY and now only premultipliedAlpha for gl.pixelStorei. They are harmless. Further warnings are from Metro reading the wrong package field from three.js since it doesn't correctly understand NPM/Node resolution yet. That will resolve itself with time.

[GGAlanSmithee]

ok, thanks @CodyJasonBennett that correlates with my own tests and observations as well, thanks a lot, I will close this issue!