56 WebGL处理响应上下文丢失

这将是WebGL基础的最后一节的更新，以后请关注three.js框架的相关学习的更新。

案例查看地址：点击这里

WebGL使用了计算机的图形硬件，而这部分资源是被操作系统管理，由包括浏览器在内的多个应用程序共享。在某些特殊情况下，入另一个程序接管了图形硬件，或者操作系统进入休眠，浏览器就会失去使用这些资源的权利，并导致存储在硬件中的数据丢失。在这种情况下，WebGL绘图上下文就会丢失，比如，如果你正在一台笔记本电脑或智能手机上运行WebGL程序，然后使其进入休眠状态，通常此时浏览器的控制台会显示一条错误新消息。当你将电脑或手机重新唤醒后，操作系统确实回到了休眠前的状态，但是浏览器中运行的WebGL程序却不见了，网页上面将显示一片空白。

如果你的计算机进入休眠状态导致WebGL的上下文丢失，控制台会出现相关错误，比如：

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

这条信息表示，系统进入休眠状态前或被唤醒后，浏览器正在调用gl.uniformMatrix4fv()函数并出错了。这条消息的具体内容依赖于进入上下文丢失时程序正在做什么。这一节就来解释如何处理上下文丢失的问题。

如何响应上下文丢失

如前所述，在某些情况下，上下文可能会丢失。实际上，WebGL提供了两个事件来表示这种情况，上下文丢失事件（webglcontextlost）和上下文恢复事件（webglcontaxtrestored）。

当上下文事件丢失的时候，由getWebGLContext()函数获得的渲染上下文对象gl就失效了，而之前在gl上的所有操作，入创建缓冲区对象和纹理对象、初始化着色器、设置背景色等等，也都失效了。浏览器重置WebGL系统后，就触发了上下文恢复事件，这时我们需要重新完成上述步骤。在javascript中保存的变量不会受到影响，可以照常使用。

研究示例代码前，我们需要使用的addEventListener()函数注册上下文丢失事件和上下文恢复事件的响应函数。

这一节就是事件的获取问题，能够获取到事件，并在事件触发的时候讲数据信息重新填入WebGL即可。