[react-native]: Texture disappearing on rotation

[carmenchapa]

Hi all,
I have a model of a body human rendered on React Native divided in two parts: head and body. I'm loading it as a glb file with the textures as images (due the known issue with textures in RN). The body is all fine, but the head stop showing the texture when the model spins further than certain point.
I suspect this is due the complexity of the model here, something related to the number of vertex that can be rendered

I also read a similar issue where it suggest to increase tessellation but I don't think my model uses tessellation.

Is there a way to increase the number of vertex that can be rendered (or something similar)?

This is my code:

import React, { Suspense, useState, useEffect, useMemo  } from 'react'
import { Canvas, useThree, useGraph } from '@react-three/fiber/native';
import {TextureLoader, THREE} from 'expo-three'; 

import { Environment, useAnimations } from '@react-three/drei/native';

import OrbitControlsView from 'expo-three-orbit-controls';
import {loadGLTFAsync} from './loadFile'

const loadFile = (file) => {
  return loadGLTFAsync({asset: file, onAssetRequested: (...args) => console.log(args)}).catch((...args)=> console.log(args))
}

function Stuff({glft, ...props}) {
  const {scene, animations} = glft
  const { ref, actions, names } = useAnimations(animations)
  const { nodes, materials } = useGraph(scene)  

  const headTexture = new TextureLoader().load(require("../assets/matthew/HeadUVs1.png"));
  const bodyTexture = new TextureLoader().load(require("../assets/matthew/BodyUVs4.png"));

  return (
    <group ref={ref} {...props} dispose={null}>
      <primitive object={scene} />
      {
          bodyTexture && nodes &&  <skinnedMesh
              castShadow
              receiveShadow
              geometry={nodes?.Body?.geometry}
              skeleton={nodes?.Body?.skeleton}
              rotation={[-Math.PI / 2, 0, 0]}
              scale={100}> 
            <meshStandardMaterial map={bodyTexture} map-flipY={false} skinning attach="material"/>
          </skinnedMesh>
        }
       {
          headTexture && nodes && <skinnedMesh
              castShadow
              receiveShadow
              geometry={nodes?.Head?.geometry}
              skeleton={nodes?.Head?.skeleton}
              rotation={[-Math.PI / 2, 0, 0]}
              scale={100}>
            <meshStandardMaterial map={headTexture} map-flipY={false} skinning /> 
           </skinnedMesh>
        }
    </group>)
}

function Model({ file, ...rest }) {
  const [glft, setGlft] =useState()

  useEffect(() => {
    const loadGlft= async () => {
      if(!file) return;
      const gl= await loadFile(file)
      setGlft(gl)
    }
    loadGlft()

  }, [file]);

  if (!glft) return null;
  return <Stuff glft={glft} />

}


export default function Matthew() {
  const [file, setFile] = useState()
  const [camera, setCamera] = useState(null);

  useEffect(() => {
    const loadFile = async() => {
      const fl = await require('../assets/model.glb')
      setFile(fl)
    }
    loadFile()
  },[])

  function Camera(props) {
    const { camera } = useThree();
    useEffect(() => {
      setCamera(camera);
    }, []);
    return (
      <perspectiveCamera {...camera} />
    );
  }


  return (
    <OrbitControlsView
      style={{ flex: 1 }}
      camera={camera}
      position0={[0, 0, 0]}
    > 
      <Canvas 
        gl={{ physicallyCorrectLights: true }} 
        camera={{ position: [0, 0, 16], fov: 36 }} 
        onCreated={(state) => {
          const _gl = state.gl.getContext()
          const pixelStorei = _gl.pixelStorei.bind(_gl)
          _gl.pixelStorei = function(...args) {
            const [parameter] = args
            switch(parameter) {
              case _gl.UNPACK_FLIP_Y_WEBGL:
                return pixelStorei(...args)
            }
          }
        }}
      >
        <color attach="background" args={[0xA9A9A9]} />
        <ambientLight />
        <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
        <Suspense>
          <Environment preset="park" />
          {file  && <Model file={file} /> }
        </Suspense>
        <Camera />
      </Canvas>
    </OrbitControlsView>
  )
}

[carmenchapa]

Solution here:
#2643