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

Posted 点燃火柴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 响应事件注册

我们需要用canvasaddEventListener() 函数注册上下文丢失事件和上下文恢复事件的响应函数,接下来说明一下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上下文丢失事件与上下文恢复事件处理的主要内容,如果未能解决你的问题,请参考以下文章

webgl丢失上下文

WebGL入门(四十二)-使用(FBO)实现阴影效果

WebGL入门(四十二)-使用(FBO)实现阴影效果

Autodesk Forge 上的 WebGL 上下文丢失错误

WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体

WebGL入门(四十一)-使用帧缓冲区对象(FBO)实现将渲染结果作为纹理绘制到另一个物体上