React Native - useGLTF causes EXGL: gl.pixelStorei() doesn't support this parameter yet!

[dpsilvaa97]

Hi im currently using r3f in a react native project. Im loading a .glb model and it works but im getting a spam of logs saying that 'EXGL: gl.pixelStorei() doesn't support this parameter yet!'. I believe it comes from the function useGLTF:
import { useGLTF } from '@react-three/drei/native'.
const { nodes } = useGLTF(url)

Any idea about this? Btw, im not exporting neither using textures here.

Sample of the code:

[CodyJasonBennett]

That warning comes from three with calls to gl.pixelStorei for handling Texture.flipY or Texture.unpackAlignment for data textures. The latter parameter is unimplemented in expo-gl, so I'm afraid there isn't much we can do here without a champion downstream. As far as your use case, this should be a non-issue or resolvable through UVs.

[dpsilvaa97]

Thanks for the fast reply. Do you know any workaround to ignore these logs?

[dpsilvaa97]

The only thread that I saw that talks about this was related to the useTexture function, but it isnt called in the useGLTF right?

[CodyJasonBennett]

useGLTF calls GLTFLoader which creates CPU Texture representations for embedded assets within your model. This can be albedo maps, normals, etc. Whenever the model is rendered and compiled on the GPU via WebGLRenderer#render and WebGLRenderer#compile, three will create a WebGLTexture and configure it with the above calls.

If you want to hack expo-gl or three around this warning, you could overwrite gl.pixelStorei to only handle the gl.UNPACK_FLIP_Y_WEBGL parameter -- all else is unimplemented and will warn.

const pixelStorei = gl.pixelStorei.bind(gl)
gl.pixelStorei = function(...args) {
  const [parameter] = args

  switch(parameter) {
    // expo-gl only supports the flipY param
    case gl.UNPACK_FLIP_Y_WEBGL:
      return pixelStorei(...args)
  }
}

[dpsilvaa97]

gl.pixelStorei

Alright sounds interesting. Im not very familiar yet with these 3d graphic libs so im still learning what is being called on each single function.
To make this work, do I need to go into both expo-gl and three libraries and find out where this function is implemented and then remove all cases except the 'gl.UNPACK_FLIP_Y_WEBGL' ?

[CodyJasonBennett]

You could modify both libraries, but a user-land hack like I provided above should also do. It may need some tweaking as I haven't tested whether the bind call is necessary etc.

[dpsilvaa97]

Alright I get the logic but im still kinda confused and it might sounds stupid and I apologize for that. But where should I write this user-land hack and how do I get access to this 'gl' variable?

[CodyJasonBennett]

gl would be the WebGL context, which I realize is confusing here. You can get that from WebGLRenderer#getContext.

<Canvas
  onCreated={(state) => {
    const _gl = state.gl.getContext()

    const pixelStorei = _gl.pixelStorei.bind(_gl)
    _gl.pixelStorei = function(...args) {
      const [parameter] = args

      switch(parameter) {
        // expo-gl only supports the flipY param
        case _gl.UNPACK_FLIP_Y_WEBGL:
          return pixelStorei(...args)
      }
    }
  }}
/>

[dpsilvaa97]

gl would be the WebGL context, which I realize is confusing here. You can get that from WebGLRenderer#getContext.

<Canvas
  onCreated={(state) => {
    const _gl = state.gl.getContext()

    const pixelStorei = _gl.pixelStorei.bind(_gl)
    _gl.pixelStorei = function(...args) {
      const [parameter] = args

      switch(parameter) {
        // expo-gl only supports the flipY param
        case _gl.UNPACK_FLIP_Y_WEBGL:
          return pixelStorei(...args)
      }
    }
  }}
/>

Holyyyyy I just go rid of these annoying logs. I'll check if everything is working in production aswell which I believe it is.
I want to thank you, really thanks a lot Cody! Thanks for each minute you gave to this thread, you just saved me on this one. This 3D hand is just a little part in my master thesis, which will receive orietantion values from IMU's and rotate in real time action. I'll make sure to mention this library and a special thanks to you! Big hug :)

[dpsilvaa97]

gl would be the WebGL context, which I realize is confusing here. You can get that from WebGLRenderer#getContext.

<Canvas
  onCreated={(state) => {
    const _gl = state.gl.getContext()

    const pixelStorei = _gl.pixelStorei.bind(_gl)
    _gl.pixelStorei = function(...args) {
      const [parameter] = args

      switch(parameter) {
        // expo-gl only supports the flipY param
        case _gl.UNPACK_FLIP_Y_WEBGL:
          return pixelStorei(...args)
      }
    }
  }}
/>

Im actually having a little problem in production. The glb/gltf files are in the raw folder as I believe its expected but they are not being loaded properly. Im running the app in android and the model is undefined.

[CodyJasonBennett]

Can you create another issue with a reproduction of some kind? I can take a look but it might be related to #1972 where embedded textures can't be decoded since react-native doesn't implement ArrayBuffer => Blob. In that case, see #1972 (comment).