网页加载Unity WebGL时无法创建WebGL上下文报错求助

网页内有一个z-index为负值的canvas，点击按钮后通过Promise加载Unity脚本启动游戏，Promise执行正常，但脚本加载完成后出现WebGL上下文创建失败的错误。原本使用requestAnimationFrame()运行的背景粒子效果，会在Unity脚本开始加载前通过cancelAnimationFrame()终止。

错误日志 #

Creating WebGL 2.0 context.
unity.loader.js:1 Unable to create WebGL context.
unity.loader.js:1 exception thrown: TypeError: Cannot read properties of undefined (reading 'getParameter'),TypeError: Cannot read properties of undefined (reading 'getParameter')
    at _glGetString (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:248153)
    at http://localhost:5500/scripts/unity/Build/unity.wasm:wasm-function[29563]:0x8cc821
    at http://localhost:5500/scripts/unity/Build/unity.wasm:wasm-function[25931]:0x82d2c6
    at Module._main (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:299245)
    at callMain (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:364104)
    at doRun (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:364664)
    at run (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:364836)
    at runCaller (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:363763)
    at Object.removeRunDependency (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:16089)
    at http://localhost:5500/scripts/unity/Build/unity.framework.js:3:1948
    at doCallback (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:92358)
    at done (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:92512)
    at transaction.oncomplete (http://localhost:5500/scripts/unity/Build/unity.framework.js:3:85617)

可能的解决方案 #

• 调整Canvas可见性：z-index为负值的canvas可能被完全遮挡，部分浏览器会限制不可见canvas创建WebGL上下文。可以在Unity加载阶段临时将目标canvas的z-index设为正值，游戏启动完成后再恢复原层级。
• 清理旧WebGL上下文：背景粒子效果的canvas可能残留未释放的WebGL上下文，导致浏览器资源不足。在调用cancelAnimationFrame()后，主动销毁粒子canvas的上下文：

  const particleCanvas = document.getElementById('particle-canvas');
  const gl = particleCanvas.getContext('webgl') || particleCanvas.getContext('experimental-webgl');
  if (gl) {
    const loseCtx = gl.getExtension('WEBGL_lose_context');
    loseCtx?.loseContext();
  }
  

• 明确指定Unity的Canvas元素：确保Unity加载时指向正确的canvas，避免自动选择出错，在加载配置中指定canvas参数：

  createUnityInstance(document.getElementById('unity-canvas'), {
    // 其他配置项
  }).then((unityInstance) => {
    // 启动后的逻辑
  });
  

• 提前检测WebGL支持：在加载前检查浏览器是否支持WebGL 2.0，避免无效加载：

  if (!document.createElement('canvas').getContext('webgl2')) {
    alert('当前浏览器不支持WebGL 2.0，无法运行该Unity游戏');
  }
  

内容的提问来源于stack exchange，提问作者Lavnish Chaudhary