WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理

1. demo效果

2. 相关知识点

2.1 上下文丢失介绍

WebGL 绘图时会使用计算机的图形处理硬件，这部分资源被操作系统统一管理，由浏览器在内的多个应用程序共享，当系统进入休眠状态或一些特殊情况下，浏览器会失去使用这些资源的权利，会导致存贮在硬件中的数据丢失，这时WebGL会出现 上下文丢失 的情况，例如在电脑或智能机上在浏览器中运行WebGL程序，当进入休眠状态，再重新唤醒后，会发现浏览器中运行的WebGL程序看不到了，一片空白，控制台上会打印出如下信息

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

2.2 WebGL提供的响应事件

为了处理上述情况，WebGL提供了两个响应事件，一个是

• 上下文丢失事件 (webglcontextlost)，当WebGL上下文丢失时触发
• 上下文恢复事件 (webglcontext-restored)，当浏览器完成WebGL系统的重置后触发

2.3 响应事件处理

2.3.1 响应事件注册

我们需要用canvas 的 addEventListener() 函数注册上下文丢失事件和上下文恢复事件的响应函数，接下来说明一下addEventListener()函数

canvas.addEventListener(type, handler, useCapture)
-----------------------------------------------------------------------------------
函数功能：将handler作为type事件的响应函数注册到canvas元素上
-----------------------------------------------------------------------------------
参数		
			type 		指定监听事件的名称，字符串
			handler 	指定事件触发时调用的响应函数，函数只有一个参数即事件对象
			useCapture	指定事件触发后是否捕获，
						  如果为true，则捕获事件，canvas的父元素就不会在触发该事件
						  如果为false，事件触发后继续向上传递，即canvas的父元素可以
						  继续捕获到该事件
-----------------------------------------------------------------------------------			
返回值		无	

2.3.2 响应事件实现说明

• 上下文丢失事件，当该事件触发，我们需要做两件事，一是停止调用产生动画的函数，二是要阻止浏览器对上下文丢失事件的默认处理行为
• 上下文恢复事件，当该事件触发，处理和上下文有关的所有事情，如重新获取WebGL的上下文， 初始化着色器，初始化顶点，传输变量以及绘图，这些事情和我们一开始绘制图形时一样，所以把他们放在一个start()函数中，当上下文恢复事件触发是调用start()函数即可

上下文丢失事件和上下文恢复事件处理函数如下

//注册上下文丢失和上下文恢复事件
canvas.addEventListener('webglcontextlost', contextLost, false)
canvas.addEventListener('webglcontextrestored', function (ev) {
   
   
  start(canvas)
}, false)

//上下文丢失事件触发处理
function contextLost(ev) {
   
   
  cancelAnimationFrame(g_requestID) //停止动画
  ev.preventDefault() //阻止浏览器的默认行为
}

function start(canvas) {
   
   
  //通过方法getContext()获取WebGL上下文
  var gl = canvas.getContext('webgl')