响应上下文丢失

什么是响应上下文丢失

就是指在WebGL程序运行时，另一个程序接管了图形硬件，或者操作系统进入了休眠状态，
总之就是 浏览器失去使用图形硬件资源的权利，
会导致存储在硬件中的数据（响应上下文）丢失。

ELEL的奇妙比喻

这就像你妈（操作系统）分配给你和你兄弟姐妹们各种点心（硬件资源），
如果你兄弟把你的点心抢走了（其他程序抢占资源），
或者你妈打盹过头忘了分给你了（操作系统长时间休眠导致数据丢失），
导致你没有点心吃，只好口头反抗（控制台报错）

可能会报

1	WebGL error CONTEXT_LOST_WEBGL in uniformMatrix4fv([object WebGLUniformLocation, false, [object Float32Array]])

如何响应上下文丢失

通过对上下文事件监听

webglcontextlost 上下文丢失时触发
webglcontextrestored 浏览器重置WebGL时触发

RotatingTriangle_contextLost

let ANGLE_STEP = 45.0
let g_currentAngle = 0.0
let g_requestID
function main() {
    let canvas = document.getElementById('webgl')
    canvas.addEventListener('webglcontextlost', contextLost, false)
    canvas.addEventListener('webglcontextrestored', function (ev) { start(canvas) }, false)

    start(canvas)
}

重绘事件

function start(canvas) { 
  let gl = getWebGLContext(canvas)
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }
  var n = initVertexBuffers(gl);   // Write the positions of vertices to a vertex shader
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);   // Specify the color for clearing <canvas>

  // Get storage location of u_ModelMatrix
  var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
  if (!u_ModelMatrix) { 
    console.log('Failed to get the storage location of u_ModelMatrix');
    return;
  }
  var modelMatrix = new Matrix4();   // Create a model matrix
  let tick = function () { 
    g_currentAngle = animate(g_currentAngle)
    draw(gl, n, g_currentAngle, modelMatrix, u_ModelMatrix)
    g_requestID = requestAnimationFrame(tick,canvas)
  }
  tick()
}

上下文丢失事件

function contextLost(ev) { 
  cancelAnimationFrame(g_requestID) //停止动画
  ev.preventDefault() // 阻止默认事件
}