Low performance when rendering FBX model in Chrome

[nikolagigic]

I tried rendering a 3D model imported from Mixamo with basic rotation updater - when rendered in Chrome FPS goes down to 10 or lower, but when rendered in Firefox FPS stays at 60 and I can't figure out why.
I tried looking up some WebGL issues with Chrome, but nothing seems to come up.

Here is the code for Canvas:

const Precompile: FC = (): null => {
  const { gl, scene, camera } = useThree();
  useLayoutEffect(() => gl.compile(scene, camera), [gl, scene, camera]);
  return null;
};

const Wrapper = () => {
  const [pixelRatio, setPixelRatio] = useState(null);
  const [widthSize, setWidthSize] = useState(0);
  const [heightSize, setHeightSize] = useState(0);

  useEffect(() => {
    setPixelRatio(window.devicePixelRatio);
    setWidthSize(window.innerWidth);
    setHeightSize(window.innerHeight);
  }, []);

  return (
    <Grid container style={{ height: "100vh" }}>
      <Grid item xs={12}>
        <Canvas
          mode="concurrent"
          performance={{ current: 1, min: 0.1, max: 1, debounce: 200 }}
          gl={{
            antialias: false,
            pixelRatio: pixelRatio,
            outputEncoding: THREE.sRGBEncoding,
          }}
        >
          <ambientLight intensity={2} />
          <Suspense fallback={null}>
            <Scene
              position={[0, 0, 0]}
              modelPath={"/fbx/Y Bot - Idle.fbx"}
            />
            <Precompile />
          </Suspense>
          <Stats />
        </Canvas>
      </Grid>
    </Grid>
  );
};

and here is the code of the Scene:

const Scene: FC<TokenRendererProps> = ({ position, modelPath }) => {
  const mesh = useRef();
  const fbx = useFBX(modelPath);

  // @ts-ignore: Object is possibly 'null'.
  useFrame(() => (mesh.current.rotation.y += 0.01));

  return (
    <instancedMesh position={position} ref={mesh}>
      <primitive object={fbx} scale={0.01} dispose={null} />
    </instancedMesh>
  );
};

Any advice on how to solve this would be of great help! Thank you in advance.

[drcmda]

try looking into the webgl status report, perhaps webgl bails out and it's falling back to the cpu.

[nikolagigic]

I think everything is fine with WebGL - I solved the issue by switching to gLTF models instead.

[drcmda]

the fbx must've been gigantic in that case

btw, the props on your canvas

<Canvas dpr={[1, 2]}>

there is no concurrent mode, react has switched to opt in, nothing to be done on the canvas. it has a dpr option for pixelratio clamp (no lower than 1, no higher than 2, prefer 2 if devicepixelratio allows), and it is srgb by default.