I'm trying to render a 3D animation using @react-three/fiber, @react-three/drei, and three. But it leads to an empty screen. No error logs are displayed. I checked whether WebGL was being supported by the browser, but it wasn't. I don't understand why WebGL is not being supported or how to enable its support. I'm working in Google Chrome.

Below is the code:

import { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls, Sphere } from "@react-three/drei";
import { pointsInner, pointsOuter } from "../utils/particlesRing";
import { Group } from "three";

const ParticleRing = () => {
  
    console.log("Rendering ParticleRing"); // Debug log

    const checkWebGL = () => {
        try {
          const canvas = document.createElement("canvas");
          return !!window.WebGLRenderingContext && !!canvas.getContext("webgl");
        } catch (e) {
          return false;
        }
      };
      
      console.log("WebGL supported:", checkWebGL()); // Debug log
      
      if (!checkWebGL()) {
        return <div>WebGL is not supported on this browser.</div>;
      }      

  return (
    <div className="relative">
      <Canvas
        camera={{
          position: [10, -7.5, -5],
        }}
        style={{ height: "100vh" }}
        className="bg-slate-900"
        gl={{ preserveDrawingBuffer: true, alpha: true }}
      >
        <OrbitControls maxDistance={20} minDistance={10} />
        <directionalLight />
        <pointLight position={[-30, 0, -30]} power={10.0} />
        <PointCircle />
      </Canvas>

      <h1 className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] text-slate-200 font-medium text-2xl md:text-5xl pointer-events-none">
        Drag & Zoom
      </h1>
    </div>
  );
};

const PointCircle = () => {
  const ref = useRef<Group | null>(null);

  useFrame(({ clock }) => {
    if (ref.current?.rotation) {
      ref.current.rotation.z = clock.getElapsedTime() * 0.05;
      console.log("Group Rotation Z:", ref.current.rotation.z); // Debug log
    }
  });

  console.log("Rendering PointCircle"); // Debug log

  return (
    <group ref={ref}>
      {pointsInner.map((point) => (
        <Point key={point.idx} position={point.position} color={point.color} />
      ))}
      {pointsOuter.map((point) => (
        <Point key={point.idx} position={point.position} color={point.color} />
      ))}
    </group>
  );
};

const Point = ({ position, color }: { position: number[]; color: string }) => {
    console.log("Rendering Point", { position, color }); // Debug log
  return (
    // @ts-expect-error - Passing a num array as opposed to a Vector3 is acceptable
    // and the referenced method in the documentation
    <Sphere position={position} args={[0.1, 10, 10]}>
      <meshStandardMaterial
        emissive={color}
        emissiveIntensity={0.5}
        roughness={0.5}
        color={color}
      />
    </Sphere>
  );
};

export default ParticleRing;

All the values being passed to this component are being calculated properly in the ../utils/particlesRing file. An example of inner point calculation is this: Inner Point { idx: 2500, x: -4.215781192148523, y: 6.582876266161056, z: 0.10719960039981924, color: '#7162f3' Inner Point { idx: 2499, x: -5.047596896942507, y: 9.535877506964761, z: 1.812652989410303, color: '#7063f3' }

There's something preventing the canvas from being rendered. However, the “Drag & Zoom” text written inside the component is displayed on the screen.

I have tried to debug every way I could, but it's just not working.

Any insight would be greatly appreciated!