fix(webgl): context dirty management and restoration

Author: BryonLewis

src/vgl/mapper.js

@@ -38,8 +38,12 @@ vgl.mapper = function (arg) {
    */
   this.deleteVertexBufferObjects = function (renderState) {
     var i;
+    if (renderState && renderState.m_contextChanged) {
+      // The old context is already gone, so deleting its buffers is invalid.
+      return;
+    }
     var context = m_context;
-    if (renderState) {
+    if (renderState && !m_context) {
       context = renderState.m_context;
     }
     if (context) {

src/vgl/renderWindow.js

@@ -129,17 +129,22 @@ vgl.renderWindow = function (canvas) {
    * @returns {boolean}
    */
   this._setup = function (renderState) {
+    var oldContext = m_context;
     m_context = null;
 
     try {
       // Try to grab the standard context. If it fails, fallback to
       // experimental.
       m_context = m_canvas.getContext('webgl') ||
             m_canvas.getContext('experimental-webgl');
+      var didContextChange = !!oldContext && oldContext !== m_context;
 
       // Set width and height of renderers if not set already
       var i;
       for (i = 0; i < m_renderers.length; i += 1) {
+        if (didContextChange && m_renderers[i]._contextChanged) {
+          m_renderers[i]._contextChanged();
+        }
         if ((m_renderers[i].width() > m_width) ||
             m_renderers[i].width() === 0 ||
             (m_renderers[i].height() > m_height) ||

src/vgl/renderer.js

@@ -128,6 +128,15 @@ vgl.renderer = function (arg) {
     return m_this.m_camera;
   };
 
+  /**
+   * Mark that the GL context changed and cached GL resources need to be
+   * recreated on the next render pass.
+   */
+  this._contextChanged = function () {
+    m_this.m_contextChanged = true;
+    m_this.modified();
+  };
+
   /**
    * Render the scene.
    */

src/vgl/shader.js

@@ -95,11 +95,14 @@ vgl.shader = function (type) {
    */
   this.compile = function (renderState) {
     var entry = this._getContextEntry(renderState);
-    if (this.getMTime() < entry.compileTimestamp.getMTime()) {
+    if (!renderState.m_contextChanged &&
+        this.getMTime() < entry.compileTimestamp.getMTime()) {
       return entry.shaderHandle;
     }
 
-    renderState.m_context.deleteShader(entry.shaderHandle);
+    if (!renderState.m_contextChanged) {
+      renderState.m_context.deleteShader(entry.shaderHandle);
+    }
     entry.shaderHandle = renderState.m_context.createShader(m_shaderType);
     renderState.m_context.shaderSource(entry.shaderHandle, m_shaderSource);
     renderState.m_context.compileShader(entry.shaderHandle);

src/vgl/shaderProgram.js

@@ -20,6 +20,7 @@ vgl.shaderProgram = function () {
 
   var m_this = this,
       m_programHandle = 0,
+      m_programContext = null,
       m_compileTimestamp = timestamp(),
       m_bindTimestamp = timestamp(),
       m_shaders = [],
@@ -28,6 +29,22 @@ vgl.shaderProgram = function () {
       m_uniformNameToLocation = {},
       m_vertexAttributeNameToLocation = {};
 
+  function hasContextChanged(renderState) {
+    return m_programContext !== renderState.m_context ||
+      renderState.m_contextChanged;
+  }
+
+  function clearLocationCaches() {
+    m_uniformNameToLocation = {};
+    m_vertexAttributeNameToLocation = {};
+  }
+
+  function resetProgramState() {
+    m_programHandle = 0;
+    m_programContext = null;
+    clearLocationCaches();
+  }
+
   /**
    * Query uniform location in the program.
    *
@@ -184,7 +201,7 @@ vgl.shaderProgram = function () {
    * @param {vgl.renderState} renderState
    */
   this.use = function (renderState) {
-    renderState.m_context.useProgram(m_programHandle);
+    renderState.m_context.useProgram(m_programHandle || null);
   };
 
   /**
@@ -193,8 +210,13 @@ vgl.shaderProgram = function () {
    * @param {vgl.renderState} renderState
    */
   this._setup = function (renderState) {
+    if (m_programHandle && hasContextChanged(renderState)) {
+      // A restored/replaced context invalidates all cached program state.
+      resetProgramState();
+    }
     if (m_programHandle === 0) {
       m_programHandle = renderState.m_context.createProgram();
+      m_programContext = renderState.m_context;
     }
   };
 
@@ -215,10 +237,11 @@ vgl.shaderProgram = function () {
    * @param {vgl.renderState} renderState
    */
   this.deleteProgram = function (renderState) {
-    if (m_programHandle) {
+    if (m_programHandle && renderState &&
+        m_programContext === renderState.m_context) {
       renderState.m_context.deleteProgram(m_programHandle);
     }
-    m_programHandle = 0;
+    resetProgramState();
   };
 
   /**
@@ -229,8 +252,14 @@ vgl.shaderProgram = function () {
   this.deleteVertexAndFragment = function (renderState) {
     var i;
     for (i = 0; i < m_shaders.length; i += 1) {
+      if (renderState && renderState.m_contextChanged) {
+        // After context loss there is nothing to detach/delete in GL.
+        m_shaders[i].removeContext(renderState);
+        continue;
+      }
       if (m_shaders[i].shaderHandle(renderState)) {
-        renderState.m_context.detachShader(m_programHandle, m_shaders[i].shaderHandle(renderState));
+        renderState.m_context.detachShader(
+          m_programHandle, m_shaders[i].shaderHandle(renderState));
       }
       renderState.m_context.deleteShader(m_shaders[i].shaderHandle(renderState));
       m_shaders[i].removeContext(renderState);
@@ -244,12 +273,16 @@ vgl.shaderProgram = function () {
    */
   this.compileAndLink = function (renderState) {
     var i;
+    // Rebuild if timestamps are stale or we switched GL contexts.
+    var contextChanged = hasContextChanged(renderState) || !m_programHandle;
+
+    m_this._setup(renderState);
 
-    if (m_compileTimestamp.getMTime() >= this.getMTime()) {
-      return;
+    if (!contextChanged && m_compileTimestamp.getMTime() >= this.getMTime()) {
+      return !!m_programHandle;
     }
 
-    m_this._setup(renderState);
+    clearLocationCaches();
 
     // Compile shaders
     for (i = 0; i < m_shaders.length; i += 1) {
@@ -263,9 +296,11 @@ vgl.shaderProgram = function () {
     if (!m_this.link(renderState)) {
       console.log('[ERROR] Failed to link Program');  // eslint-disable-line no-console
       m_this._cleanup(renderState);
+      return false;
     }
 
     m_compileTimestamp.modified();
+    return true;
   };
 
   /**
@@ -275,16 +310,24 @@ vgl.shaderProgram = function () {
    */
   this.bind = function (renderState) {
     var i = 0;
+    var needBind = renderState.m_contextChanged ||
+      m_bindTimestamp.getMTime() < m_this.getMTime() ||
+      m_programContext !== renderState.m_context;
 
-    if (m_bindTimestamp.getMTime() < m_this.getMTime()) {
+    if (needBind) {
 
       // Compile shaders
-      m_this.compileAndLink(renderState);
+      if (!m_this.compileAndLink(renderState)) {
+        return;
+      }
 
       m_this.use(renderState);
       m_this.bindUniforms(renderState);
       m_bindTimestamp.modified();
     } else {
+      if (!m_programHandle) {
+        return;
+      }
       m_this.use(renderState);
     }
 

src/webgl/webglRenderer.js

@@ -93,7 +93,15 @@ var webglRenderer = function (arg) {
     m_contextRenderer = m_viewer.renderWindow().activeRenderer();
     m_contextRenderer.setResetScene(false);
     canvas.get(0).addEventListener('webglcontextlost', (evt) => evt.preventDefault(), false);
-    canvas.get(0).addEventListener('webglcontextrestored', () => m_viewer.renderWindow()._setup(), false);
+    canvas.get(0).addEventListener('webglcontextrestored', function () {
+      if (!m_viewer) {
+        return;
+      }
+      // Reinitialize GL objects, then force a camera sync before redraw.
+      m_viewer.renderWindow()._setup();
+      m_updateCamera = true;
+      m_this._render();
+    }, false);
 
     if (m_viewer.renderWindow().renderers().length > 0) {
       m_contextRenderer.setLayer(m_viewer.renderWindow().renderers().length);