如何防止 Chrome 在切换选项卡后处置（？）我的 webgl 绘图上下文？

Question

我在使用 Chrome（当前）时遇到了意外问题。我有一个 Web 应用程序，它使用 webGL 画布进行一些基本的图像处理，然后将 webGL 画布复制到 2d 画布以保存图像数据。问题是，在我切换选项卡后，webgl 画布的绘图上下文似乎在 Chrome 中丢失了。在我尝试过的任何其他浏览器（FF、IE 11/Edge、Safari）中都不会发生这种情况。

如果确实发生了这种情况，我希望 Chrome 也会触发 webgl 上下文丢失事件，但我从未收到该事件。

这是一个非常简单的小提琴来演示这个问题。

https://jsfiddle.net/JoeBlow/m14evgzj/

1) 加载绘制到 webgl 画布的页面

2）切换到新标签页

3）切换回原来的标签

4) 单击“复制图像”。

如果我重新初始化 3d 画布（重新加载所有内容并重新绘制），那么即使在选项卡切换后一切都会按预期工作，但我试图避免捕获窗口/视口上的模糊/焦点事件。

这是简化的代码：

window.canvasSource  = document.getElementById("source");
var canvasDestination = document.getElementById("destination");
var buttonCopy = document.getElementById("btnCopy");
var btnToggle = document.getElementById("btnToggle");
var btnClear = document.getElementById("btnClear");
var btnInit3d = document.getElementById('btnInit3d');

var canvasOptions = { preserveDrawingBuffer: true };

//var sourceContext = canvasSource.getContext("2d", options);
var destinationContext = canvasDestination.getContext("2d", canvasOptions);

window.canvasSource.addEventListener("webglcontextlost", function(event) {
console.log('context lost');
    event.preventDefault();
}, false);

window.canvasSource.addEventListener("webglcontextrestored", init3d, false);

btnToggle.addEventListener('click', function() {
    if (window.canvasSource.style.visibility != "hidden") {
      window.canvasSource.style['visibility']='hidden';
    }
  else {
   window.canvasSource.style['visibility'] = 'visible';
  }
});

btnCopy.addEventListener('click', function() {
    destinationContext.drawImage(window.canvasSource,0,0);
});

btnClear.addEventListener('click', function() {
    destinationContext.clearRect(0,0, 1500, 1500);
});

btnInit3d.addEventListener('click', function() {
    init3d();
});

function init3d() {
console.log('init3d()');
window.gl = window.canvasSource.getContext("webgl", canvasOptions);
var gl = window.gl;
if (gl==null)
 console.log("couldn't get webgl context");
else 
 console.log(gl);

gl.viewport(0, 0, window.canvasSource.width, window.canvasSource.height);
gl.clearColor(0, 0.5, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

var v = document.getElementById("vertex").firstChild.nodeValue;
var f = document.getElementById("fragment").firstChild.nodeValue;

var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs);

var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs);

program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
}

init3d();

Answer 1

我想这个问题与这个有关。

显然，当选项卡模糊时，chrome 确实会清除绘图缓冲区，即使您确实告诉它不要这样做。

一种可能的解决方法是为自己创建一个preserveDrawingBuffer对象。

2DContext 不受此错误的影响，因此preserveDrawingBuffer您可以创建一个离屏 2D 上下文，而不是在 wegbl 启动时进行设置，您将在每个新的draw.

var canvasSource = document.getElementById("source");
var canvasDestination = document.getElementById("destination");
var buttonCopy = document.getElementById("btnCopy");
//var btnToggle = document.getElementById("btnToggle");
var btnClear = document.getElementById("btnClear");
var btnInit3d = document.getElementById('btnInit3d');
var gl;

// we don't need to preserve the drawing buffer anymore
// since we'll do it manually
//var canvasOptions = { preserveDrawingBuffer: true};
var bufferContext = canvasSource.cloneNode().getContext('2d');
// 2D context don't have an preserveDrawingBuffer option
var destinationContext = canvasDestination.getContext("2d");

btnCopy.addEventListener('click', function() {
  var error = gl.getError();
  if (error) {
    console.log('Gl Error: ' + error);
  }
  // we draw the buffer canvas instead of the webgl one
  destinationContext.drawImage(bufferContext.canvas, 0, 0);
});

btnClear.addEventListener('click', function() {
  destinationContext.clearRect(0, 0, 1500, 1500);
});

function init3d() {
  gl = canvasSource.getContext("webgl");
  if (gl == null)
    console.log("couldn't get webgl context");

  gl.viewport(0, 0, canvasSource.width, canvasSource.height);
  gl.clearColor(0, 0.5, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  // at each draw, save the webgl state
  bufferContext.drawImage(canvasSource, 0,0);
}

init3d();

<canvas id="source"> </canvas>
<canvas id="destination"> </canvas>
<div>
  <button id="btnCopy">Copy Image</button>
  <button id="btnClear">Clear Copy</button>
</div>