WebGL：强制 canvas 丢失上下文

Question

我正在制作一个千载难逢的场景。我已经设置了事件处理程序来响应这些情况，现在需要测试它们。

我试过gl.getExtension('WEBGL_lose_context').loseContext();，但没有触发以下事件：

var elem = document.querySelector('#canvas');
elem.addEventListener('webglcontextlost', function(e) {
  console.log('context lost')
  e.preventDefault();
}, false);

有没有办法手动丢失 WebGL 上下文？ khronos.org 给一些 JS 实用程序一个 link ，它可以强制一个人失去上下文，但是 link 已经死了。非常欢迎其他人就此问题提供任何想法！

Answer 1

啊哈，我的场景在 Three.js，所以我需要在渲染器的上下文中调用 loseContext() 方法：

renderer.context.getExtension('WEBGL_lose_context').loseContext();

Answer 2

或者干脆

renderer.forceContextLoss();

[docs]

Answer 3

您可以对任何类型的 canvas 执行此操作。

var canvas = document.getElementById('canvas'); 
// OR if no Id
// var canvas = document.getElementsByTagName('canvas')[0];
var gl = canvas.getContext('webgl');

canvas.addEventListener('webglcontextlost', function(e) {
  console.log(`Lost WebGL context \n${e}`);
  e.preventDefault();
}, false);

// Bye bye canvas :)
gl.getExtension('WEBGL_lose_context').loseContext();

参考：https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context/loseContext

WebGL：强制 canvas 丢失上下文

WebGL: Force canvas to lose context

webgl