react-three - 3D model displays a blank white square on Android phone devices

Question

I am developing a portfolio application using Nextjs and 3D libraries such as Three and React-Three.

I use Vercel to deploy the app.

I am experiencing a problem where the 3D model in the deployed app is displaying as a blank white square on Android phones:

• Xiaomi red mi note 7 / MI browser

• Samsung s10 / chrome browser.

Is there a solution to this issue?

Deployed Site: https://portfolio2-nu-ruddy.vercel.app/

Git Repo: https://github.com/ItayTur/Portfolio

3D model component:

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useLoader, Canvas } from "@react-three/fiber";
import { Suspense, useEffect, useState } from "react";
import { OrbitControls, Preload } from "@react-three/drei";
import Loader from "./Loader";

const Computers = ({ isMobile = false }) => {
  const gltf = useLoader(GLTFLoader, "/desktop_pc/scene.gltf");
  return (
    <mesh>
      <hemisphereLight intensity={0.15} groundColor="black" />
      <pointLight intensity={1} />
      <spotLight
        position={[-20, 50, 10]}
        angle={0.12}
        penumbra={1}
        intensity={1}
        castShadow
        shadow-mapSize={1024}
      />
      <primitive
        scale={isMobile ? 0.7 : 0.75}
        position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
        rotation={[-0.01, -0.2, -0.1]}
        object={gltf.scene}
      />
    </mesh>
  );
};

const ComputersCanvas = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia("(max-width: 500px)");

    setIsMobile(mediaQuery.matches);

    const onMediaQueryChange = (event: MediaQueryListEvent) => {
      setIsMobile(event.matches);
    };

    mediaQuery.addEventListener("change", onMediaQueryChange);

    return () => {
      mediaQuery.removeEventListener("change", onMediaQueryChange);
    };
  }, []);
  return (
    <Canvas
      frameloop="demand"
      shadows
      camera={{ position: [20, 3, 5], fov: 25 }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<Loader />}>
        <OrbitControls
          enableZoom={false}
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers isMobile={isMobile} />
      </Suspense>
      <Preload all />
    </Canvas>
  );
};

export default ComputersCanvas;

Answer 1

The issue has been reproduced on my Samsung Galaxy A32.

Solution

The problem lies in Hero.tsx; add alpha: true to the webGL configuration.

// Hero.tsx
<Canvas
  frameloop="demand"
  shadows
  camera={{ position: [20, 3, 5], fov: 25 }}
  // add alpha: true here.
  gl={{ preserveDrawingBuffer: true, alpha: true }}
>
{/* ... */}
</Canvas>

Explanation

The reason isn't very clear at current moment. I can only guess, since the console message shows that the r3f instances are not properly destroyed. The message was fetched from chrome://inspect.

WARNING: Too many active WebGL contexts. Oldest context will be lost., THREE.WebGLRenderer: Context Lost.

These messages mean that every time a 3d canvas gets mounted, there's another unnecessary webGL instance is created. Proper implementation of multiple canvas should hold only one webGL instance and share it among canvases manually or by using portal.

I assumed that webGL buffer is somehow got corrupted, so forced the background to be transparent by changing the configuration.

The error is not reproducible in desktop browser; this may need another deep investigation.

Answer 2

I tried to debug your code. Something is preventing rendering of your Canvas component in android's chrome browser. I have tried to resolve it and it seems to be working. Could you try updating Computers.txs file with the following code.?
The remaining code should be same.

const ComputersCanvas = () => {
    const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
        const mediaQuery = window.matchMedia("(max-width: 500px)");

        setIsMobile(mediaQuery.matches);

        const onMediaQueryChange = (event: MediaQueryListEvent) => {
            setIsMobile(event.matches);
        };

        mediaQuery.addEventListener("change", onMediaQueryChange);

        return () => {
            mediaQuery.removeEventListener("change", onMediaQueryChange);
        };
    }, []);

    const [initialized, setInitialized] = useState(false)

    useEffect(() => {
        if (!initialized) {
            setInitialized(true);
        }
    }, [initialized]);

    if (!initialized) {
        return <div></div>
    }

    return (
        <Canvas
            frameloop="demand"
            shadows
            camera={{position: [20, 3, 5], fov: 25}}
            gl={{preserveDrawingBuffer: true, alpha: true}}
        >
            <Suspense fallback={<Loader/>}>
                <OrbitControls
                    enableZoom={false}
                    maxPolarAngle={Math.PI / 2}
                    minPolarAngle={Math.PI / 2}
                />
                <Computers isMobile={isMobile}/>
            </Suspense>
            <Preload all/>
        </Canvas>
    );
};

This works because initially we are rendering div element.
After the first render we are forcing to it to re-render with Canvas element.
Hope this resolves your issue.
Thanks :)

Update:
I am sorry I am unable to resolve your issue because it needs experimenting with different approaches. However I can give some suggestions and ideas that may ease your process. The main issues lies with canvas behavior on android/mobile browser. Browser limits the number of canvas context. I have seen it to be eight in general, but they can be any number.
You may have noticed the console message THREE.WebGLRenderer: Context Lost.

• You can either use one canvas context and reusing the same.This could be cumbersome, especially with your app.
  
• You can try a workaround in your app in a way that your app listens to scroll and create canvas only for the view that is active/visible. In the current state, your app is creating canvas for all the views/components on the page.
• You can of course try googling and searching, how others overcame similar situation.
• You can increase the bounty on this question to attract attention and wait for the good solution.
• etc.