MENU


Lost Context

Information in the shared graphics hardware can be lost when another program takes over the hardware or when the machine hibernates, resulting in a lost display.

To circumvent the problem, use addEventListener(type, handler, useCapture). 'type' can be 'webglcontextlost' or 'webglcontextrestored'. 'handler' is the function to call when the event occurs. 'useCapture' specifies whether the event needs to be captured.


RESETRUNFULL
<!DOCTYPE html><html><head>
<script src="/shared/webgl-library.js"></script>
<script id="vs" type="x-shader/x-vertex">
   attribute vec4 a_Position;
   uniform mat4 u_ModelMatrix;
   void main() {
     gl_Position = u_ModelMatrix * a_Position;
   }
</script>
<script id="fs" type="x-shader/x-fragment">
   void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
   }
</script>
<script>
function main() {
   var canvas = document.getElementById("myCanvas");
   canvas.addEventListener('webglcontextlost', contextLost, false);
   canvas.addEventListener('webglcontextrestored', function(ev) { start(canvas); }, false);
   start(canvas); 
}
var ANGLE_STEP = 45.0;
var g_currentAngle = 0.0;
var g_requestID;
function start(canvas) {
  var gl = canvas.getContext("webgl");
  initShaders(gl, "vs", "fs");
  var n = initVertexBuffers(gl);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
  var modelMatrix = new Matrix4();
  var 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();
}
function initVertexBuffers(gl) {
  var vertices = new Float32Array ([
    0.0,  0.5,
   -0.5, -0.5,
    0.5, -0.5
  ]);
  initArrayBuffer(gl,'a_Position',vertices,2);
  return 3;
}
function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
  modelMatrix = new Matrix4();
  modelMatrix.rotate(currentAngle, 0, 0, 1);
  gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.entries);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, n);
}
var g_last = Date.now();
function animate(angle) {
  var now = Date.now();
  var elapsed = now - g_last;
  g_last = now;
  var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
  return newAngle %= 360;
}
</script>
</head>
<body onload="main()">
   <canvas id="myCanvas" width="500" height="500"></canvas>
</body></html>

isContextLost() returns true if the context is lost.