WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
Posted 点燃火柴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WebGL入门(四十四)-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')
//初始化着色器
if (!initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('初始化着色器失败')
return
}
// 设置canvas的背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT)
//初始化顶点坐标和顶点颜色
var n = initVertexBuffers(gl)
//获取顶点着色器uniform变量u_ModelMatrix的存储地址
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
var modelMatrix = new Matrix4() //声明一个模型矩阵
var currentAngle = 0.0
var tick = function () {
currentAngle = getCurrentAngle(currentAngle) //获取当前要旋转的角度
draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) //绘图
g_requestID = requestAnimationFrame(tick, canvas) //获取requestAnimationFrame函数返回的id
}
tick() // 调用tick
}
3. demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--通过canvas标签创建一个800px*800px大小的画布-->
<canvas id="webgl" width="800" height="800"></canvas>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script>
//顶点着色器
var VSHADER_SOURCE = '' +
'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
'attribute vec4 a_Color;\\n' + //声明attribute变量a_Color，用来存放顶点颜色信息
'uniform mat4 u_ModelMatrix;\\n' + //声明uniform变量u_ModelMatrix，用来存放模型矩阵
'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来向片元着色器传值顶点颜色信息
'void main(){\\n' +
' gl_Position = u_ModelMatrix * a_Position;\\n' + //将模型矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
' v_Color = a_Color;\\n' + //将顶点颜色信息传给片元着色器，
'}\\n';
//片元着色器
var FSHADER_SOURCE = '' +
'#ifdef GL_ES\\n' +
' precision mediump float;\\n' + //设置精度
'#endif\\n' +
'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息
'void main(){\\n' +
' gl_FragColor = v_Color;\\n' + //将顶点着色器传送的片元颜色赋值给内置变量gl_FragColor
'}\\n'
//初始化着色器函数
function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
//创建顶点着色器对象
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, VSHADER_SOURCE)
//创建片元着色器对象
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, FSHADER_SOURCE)
if (!vertexShader || !fragmentShader) {
return null
}
//创建程序对象program
var program = gl.createProgram()
if (!gl.createProgram()) {
return null
}
//分配顶点着色器和片元着色器到program
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
//链接program
gl.linkProgram(program)
//检查程序对象是否连接成功
var linked = gl.getProgramParameter(program, gl.LINK_STATUS)
if (!linked) {
var error = gl.getProgramInfoLog(program)
console.log('程序对象连接失败: ' + error)
gl.deleteProgram(program)
gl.deleteShader(fragmentShader)
gl.deleteShader(vertexShader)
return null
}
//使用program
gl.useProgram(program)
gl.program = program
//返回程序program对象
return program
}
function loadShader(gl, type, source) {
//创建顶点着色器对象
var shader = gl.createShader(type)
if (shader == null) {
console.log('创建着色器失败')
return null
}
//引入着色器源代码
gl.shaderSource(shader, source)
//编译着色器
gl.compileShader(shader)
//检查顶是否编译成功
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
if (!compiled) {
var error = gl.getShaderInfoLog(shader)
console.log('编译着色器失败: ' + error)
gl.deleteShader(shader)
return null
}
return shader
}
function init() {
//通过getElementById()方法获取canvas画布
var canvas = document.getElementById('webgl')
//注册上下文丢失和上下文恢复事件
canvas.addEventListener('webglcontextlost', contextLost, false)
canvas.addEventListener('webglcontextrestored', function (ev) {
start(canvas)
}, false)
start(canvas)
}
var g_requestID //requestAnimationFrame函数的返回值
function start(canvas) {
//通过方法getContext()获取WebGL上下文
var gl = canvas.getContext('webgl')
//初始化着色器
if (!initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('初始化着色器失败')
return
}
//设置canvas的背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT)
//初始化顶点坐标和顶点颜色
var n = initVertexBuffers(gl)
//获取顶点着色器uniform变量u_ModelMatrix的存储地址
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
var modelMatrix = new Matrix4() //声明一个模型矩阵
var currentAngle = 0.0
var tick = function () {
currentAngle = getCurrentAngle(currentAngle) //获取当前要旋转的角度
draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) //绘图
g_requestID = requestAnimationFrame(tick, canvas) //获取requestAnimationFrame函数返回的id
}
tick() //调用tick
}
var g_LastTime = Date.now() //上次绘制的时间
var ANGLE_SET = 30.0 //旋转速度（度/秒）
function getCurrentAngle(angle) {
var now = Date.now()
var elapsed = now - g_LastTime //上次调用与当前时间差
g_LastTime = now
var newAngle = angle + (ANGLE_SET * elapsed) / 1000
return (newAngle %= 360)
}
function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
//设置模型矩阵的旋转角度
modelMatrix.setRotate(currentAngle, 0, 0, 1)
//模型矩阵传值给顶点着色器
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT)
//绘制图形
gl.drawArrays(gl.TRIANGLES, 0, n)
}
function contextLost(ev) { //上下文丢失事件触发处理
cancelAnimationFrame(g_requestID) //停止动画
ev.preventDefault() //阻止浏览器的默认行为
}
//初始化顶点坐标和顶点颜色
function initVertexBuffers(gl) {
var verticesColors = new Float32Array([
0.0, 0.5, 0, 1.0, 0.0, 0.0,
-0.5, -0.5, 0, 1.0, 0.0, 0.0,
0.5, -0.5, 0, 1.0, 0.0, 0.0,
])
//创建缓冲区对象
var vertexColorBuffer = gl.createBuffer()
if (!vertexColorBuffer) {
console.log('创建缓冲区对象失败！')
return -1
}
//将顶点坐标和顶点颜色信息写入缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)
//获取类型化数组中每个元素的大小
var FSIZE = verticesColors.BYTES_PER_ELEMENT
//获取顶点着色器attribute变量a_Position的存储地址, 分配缓存并开启
var a_Position = gl.getAttribLocation(gl.program, 'a_Position')
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0)
gl.enableVertexAttribArray(a_Position)
//获取顶点着色器attribute变量a_Color(顶点颜色信息)的存储地址, 分配缓存并开启
var a_Color = gl.getAttribLocation(gl.program, 'a_Color')
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3)
gl.enableVertexAttribArray(a_Color)
//解绑缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, null)
return verticesColors.length / 6
}
init()
</script>
</body>
</html>
以上是关于WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理的主要内容，如果未能解决你的问题，请参考以下文章
Autodesk Forge 上的 WebGL 上下文丢失错误