Reactjs-由于pixi不使用回退而创建手动webGl检查

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版本，则可以添加它。