javascript - 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 版本，那么您可以添加它。