Add handling for webgl context loss

- Tracking state is reset upon context loss
- Extensions objects are no longer cached because new ones will be returned after context loss/restore
- Ensured each context/extension is only augmented once
- Removed unused origFuncs and an unused local const

Author: lojjic

src/augment-api.js

@@ -68,30 +68,33 @@ import {
  * @param {string} nameOfClass (eg, webgl, webgl2, OES_texture_float)
  */
 export function augmentAPI(ctx, nameOfClass, options = {}) {
+  // Only augment this object once
+  if (ctx.__webgl_memory_augmented) {
+    return ctx;
+  }
+  ctx.__webgl_memory_augmented = true;
+
   const origGLErrorFn = options.origGLErrorFn || ctx.getError;
 
   function createSharedState(ctx) {
     const drawingBufferInfo = getDrawingbufferInfo(ctx);
     const sharedState = {
       baseContext: ctx,
       config: options,
-      apis: {
-        // custom extension
+      customExtensions: {
         gman_webgl_memory: {
-          ctx: {
-            getMemoryInfo() {
-              const drawingbuffer = computeDrawingbufferSize(ctx, drawingBufferInfo);
-              return {
-                memory: {
-                  ...memory,
-                  drawingbuffer,
-                  total: drawingbuffer + memory.buffer + memory.texture + memory.renderbuffer,
-                }, 
-                resources: {
-                  ...resources,
-                }
-              };
-            },
+          getMemoryInfo() {
+            const drawingbuffer = computeDrawingbufferSize(ctx, drawingBufferInfo);
+            return {
+              memory: {
+                ...memory,
+                drawingbuffer,
+                total: drawingbuffer + memory.buffer + memory.texture + memory.renderbuffer,
+              },
+              resources: {
+                ...resources,
+              },
+            };
           },
         },
       },
@@ -105,26 +108,38 @@ export function augmentAPI(ctx, nameOfClass, options = {}) {
       defaultVertexArray: {},
       webglObjectToMemory: new Map(),
     };
-    sharedState.webglObjectToMemory.set(sharedState.defaultVertexArray, {});
-    sharedState.currentVertexArray = sharedState.defaultVertexArray;
+
+    function resetSharedState() {
+      sharedState.bindings.clear();
+      sharedState.webglObjectToMemory.clear();
+      sharedState.webglObjectToMemory.set(sharedState.defaultVertexArray, {});
+      sharedState.currentVertexArray = sharedState.defaultVertexArray;
+      [sharedState.resources, sharedState.memory].forEach(function(obj) {
+        for (let prop in obj) {
+          obj[prop] = 0;
+        }
+      });
+    }
+
+    if (ctx.canvas) {
+      ctx.canvas.addEventListener('webglcontextlost', resetSharedState);
+    }
+
+    resetSharedState();
     return sharedState;
   }
 
   const sharedState = options.sharedState || createSharedState(ctx);
   options.sharedState = sharedState;
 
   const {
-    apis,
-    baseContext,
     bindings,
-    config,
     memory,
     resources,
     webglObjectToMemory,
+    customExtensions,
   } = sharedState;
 
-  const origFuncs = {};
-
   function noop() {
   }
 
@@ -230,14 +245,14 @@ export function augmentAPI(ctx, nameOfClass, options = {}) {
     info.mips[level] = info.mips[level] || [];
     const mipFaceInfo = info.mips[level][faceNdx] || {}
     info.size -= mipFaceInfo.size || 0;
-    
+
     mipFaceInfo.size = newMipSize;
     mipFaceInfo.internalFormat = internalFormat;
     mipFaceInfo.type = type;
     mipFaceInfo.width = width;
     mipFaceInfo.height = height;
     mipFaceInfo.depth = depth;
-  
+
     info.mips[level][faceNdx] = mipFaceInfo;
     info.size += newMipSize;
 
@@ -546,15 +561,14 @@ export function augmentAPI(ctx, nameOfClass, options = {}) {
       const origFn = ctx[propertyName];
       ctx[propertyName] = function(...args) {
         const extensionName = args[0].toLowerCase();
-        const api = apis[extensionName];
-        if (api) {
-          return api.ctx;
-        }
-        const ext = origFn.call(ctx, ...args);
-        if (ext) {
-          augmentAPI(ext, extensionName, {...options, origGLErrorFn});
+        let ext = customExtensions[extensionName];
+        if (!ext) {
+          ext = origFn.call(ctx, ...args);
+          if (ext) {
+            augmentAPI(ext, extensionName, { ...options, origGLErrorFn });
+          }
         }
-        return ext;
+        return ext || null;
       };
     },
   };
@@ -570,7 +584,6 @@ export function augmentAPI(ctx, nameOfClass, options = {}) {
     ctx[funcName] = function(...args) {
       preCheck(ctx, funcName, args);
       const result = origFn.call(ctx, ...args);
-      const gl = baseContext;
       postCheck(ctx, funcName, args, result);
       return result;
     };
@@ -583,11 +596,8 @@ export function augmentAPI(ctx, nameOfClass, options = {}) {
   // Wrap each function
   for (const propertyName in ctx) {
     if (typeof ctx[propertyName] === 'function') {
-      origFuncs[propertyName] = ctx[propertyName];
       makeErrorWrapper(ctx, propertyName);
     }
   }
-
-  apis[nameOfClass.toLowerCase()] = { ctx, origFuncs };
 }
 

test/index.js

@@ -3,6 +3,7 @@
 /* global window */
 
 import './tests/buffer-tests.js';
+import './tests/contextloss-tests.js';
 import './tests/info-tests.js';
 import './tests/program-tests.js';
 import './tests/renderbuffer-tests.js';

test/tests/contextloss-tests.js

@@ -0,0 +1,46 @@
+import { describe, it } from '../mocha-support.js';
+import { createContext } from '../webgl.js';
+import { MemInfoTracker } from './test-utils.js';
+
+describe('webgl context loss tests', () => {
+  it('test context loss', async () => {
+    const { gl } = createContext();
+    // To enable context restoration we must preventDefault on the context loss event:
+    gl.canvas.addEventListener('webglcontextlost', e => e.preventDefault());
+    const ext = gl.getExtension('WEBGL_lose_context');
+    const tracker = new MemInfoTracker(gl, 'texture');
+
+    // Add a texture
+    const tex1 = gl.createTexture();
+    tracker.addObjects(1);
+    gl.bindTexture(gl.TEXTURE_2D, tex1);
+    const texSize = 32 * 16 * 4;
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 32, 16, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    tracker.addMemory(texSize);
+
+    // Force context loss and wait for event loop to complete
+    ext.loseContext();
+    await delay(1);
+
+    // Verify memory tracking was zeroed out
+    tracker.deleteObjectAndMemory(texSize, 1);
+
+    // Force context restoration and wait for event loop to complete
+    ext.restoreContext();
+    await delay(1);
+
+    // Verify you can still add new things
+    const tex2 = gl.createTexture();
+    tracker.addObjects(1);
+    gl.bindTexture(gl.TEXTURE_2D, tex2);
+    const texSize2 = 64 * 24 * 4;
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 64, 24, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    tracker.addMemory(texSize2);
+  });
+});
+
+async function delay(ms) {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}