useSupportWebGL.ts

export function useSupportWebGL() {
  const [hasWebGLSupport, setHasWebGLSupport] = useState<boolean>();

  useEffect(() => {
    const canvas = window.document.createElement('canvas');
    try {
      const gl = canvas.getContext('webgl');
      if (gl === null) throw new Error('not supported');
      gl.getSupportedExtensions();
      setHasWebGLSupport(true);
    } catch (e) {
      const glExperimental = canvas.getContext('experimental-webgl');
      if (glExperimental !== null && 'getSupportedExtensions' in glExperimental) {
        glExperimental.getSupportedExtensions();
        setHasWebGLSupport(true);
        return;
      }
      // WebGL isn't properly supported
      alert('WebGL not supported');
      setHasWebGLSupport(false);
      return;
    }
  }, []);

  return hasWebGLSupport;
}