Reactjs - 创建手动 webGl 检查，因为 pixi 没有使用回退

Question

我目前正在使用 pixi.js 来处理 webGl，因此我需要一个后备。

我已经在使用旧版：

import * as PIXI from 'pixi.js-legacy'

但不知何故，当不支持 webGl 说我需要使用旧版本时，它仍然会引发错误。

由于这不起作用，我需要在其他地方检查 webGl。我已经制定了以下代码，它适用于 webGl 被禁用的情况但如果它不受支持则不起作用。我该如何检查呢？

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
return gl && gl instanceof WebGLRenderingContext;

Answer 1

检查浏览器是否太旧以至于不支持 WebGL 的唯一方法是检查 WebGLRenderingContext 是否存在。注意：如果浏览器太旧，则不能使用const，因为浏览器只会将其视为语法错误。

if (typeof WebGLRenderingContext === 'undefined') {
  // this browser doesn't even know what WebGL is
} else {
  var gl = document.createElement('canvas').getContext('webgl');
  if (!gl) {
     // webgl failed to initialize for any number of reasons
     // including it's turned off, the browser blacklisted the drivers,
     // it's out of memory, other.
  }
}

检查experimental-webgl 基本上意味着检查有错误的webgl，所以如果你关心使用有已知错误的webgl 版本，那么你可以添加它。