如何检测Safari中WebGL 2.0、WebGL via Metal等实验性功能是否启用

可以通过前端API实现这两项功能的启用状态检测，具体实现方式如下：

直接尝试创建WebGL2渲染上下文即可完成检测，判断逻辑非常稳定：

function isWebGL2Enabled() {
  const testCanvas = document.createElement('canvas');
  return !!(window.WebGL2RenderingContext && testCanvas.getContext('webgl2'));
}

返回true代表WebGL 2.0已启用，返回false代表功能未开启或当前Safari版本/设备不支持WebGL 2.0。

没有直接的专属API用于检测，但可以通过WebGL上下文的渲染器标识间接判断：Safari启用Metal后端时，WebGL上下文的渲染器参数会携带Metal相关字段，检测代码如下：

function isWebGLViaMetalEnabled() {
  // 先校验当前环境为Safari，避免其他使用Metal后端的浏览器误判
  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  if (!isSafari) return false;

  const testCanvas = document.createElement('canvas');
  const gl = testCanvas.getContext('webgl') || testCanvas.getContext('experimental-webgl');
  if (!gl) return false;

  const rendererInfo = gl.getParameter(gl.RENDERER).toLowerCase();
  return rendererInfo.includes('metal');
}

有两个注意事项：

• 该方法仅适用于Safari 15及以上版本，更早的Safari版本不支持WebGL via Metal开关，默认使用OpenGL后端
• 不要在非Safari环境下调用该检测逻辑，部分Chromium内核的Mac浏览器也会使用Metal渲染，会出现误判

内容的提问来源于stack exchange，提问作者Georg Molzer