Merge pull request #1476 from OpenGeoscience/webrender-setup-call

fix contextrestored webgl renderer call

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

@@ -126,20 +126,30 @@ vgl.renderWindow = function (canvas) {
    * Create the window.
    *
    * @param {vgl.renderState} renderState
+   * @param {boolean} forceContextChanged
+   *   If true, force a context change even if the context is the same as the old context.
    * @returns {boolean}
    */
-  this._setup = function (renderState) {
+  this._setup = function (renderState, forceContextChanged) {
+    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;
+      if (forceContextChanged) {
+        didContextChange = true;
+      }
 
       // 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);
@@ -241,15 +270,20 @@ vgl.shaderProgram = function () {
    * Compile and link a shader.
    *
    * @param {vgl.renderState} renderState
+   * @returns {boolean} True if the program was compiled and linked successfully, false otherwise.
    */
   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 +297,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 +311,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/vgl/texture.js

@@ -33,6 +33,7 @@ vgl.texture = function () {
   this.m_texture = null;
 
   var m_setupTimestamp = timestamp(),
+      m_setupContext = null,
       m_that = this;
 
   function activateTextureUnit(renderState) {
@@ -52,8 +53,11 @@ vgl.texture = function () {
     // Activate the texture unit first
     activateTextureUnit(renderState);
 
-    renderState.m_context.deleteTexture(this.m_textureHandle);
+    if (this.m_textureHandle && m_setupContext === renderState.m_context) {
+      renderState.m_context.deleteTexture(this.m_textureHandle);
+    }
     this.m_textureHandle = renderState.m_context.createTexture();
+    m_setupContext = renderState.m_context;
     renderState.m_context.bindTexture(vgl.GL.TEXTURE_2D, this.m_textureHandle);
     renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D,
                                         vgl.GL.TEXTURE_MIN_FILTER,
@@ -101,7 +105,9 @@ vgl.texture = function () {
    */
   this.bind = function (renderState) {
     // TODO Call setup via material setup
-    if (this.getMTime() > m_setupTimestamp.getMTime()) {
+    if (renderState.m_contextChanged ||
+        m_setupContext !== renderState.m_context ||
+        this.getMTime() > m_setupTimestamp.getMTime()) {
       this.setup(renderState);
     }
 
@@ -289,6 +295,16 @@ vgl.texture = function () {
     return this.m_textureHandle;
   };
 
+  /**
+   * Return true if the texture handle belongs to the specified context.
+   *
+   * @param {WebGLRenderingContext} context A candidate GL context.
+   * @returns {boolean} True if the texture has been setup for the context.
+   */
+  this.hasContext = function (context) {
+    return !!this.m_textureHandle && m_setupContext === context;
+  };
+
   return this;
 };
 

src/webgl/quadFeature.js

@@ -55,9 +55,12 @@ var webgl_quadFeature = function (arg) {
         newbuf = false;
 
     if (m_quads.imgQuads.length) {
+      if (renderState.m_contextChanged) {
+        m_glBuffers.imgQuadsPosition = null;
+      }
       if (!m_imgposbuf || m_imgposbuf.length < m_quads.imgQuads.length * 12 ||
           !m_glBuffers.imgQuadsPosition) {
-        if (m_glBuffers.imgQuadsPosition) {
+        if (m_glBuffers.imgQuadsPosition && !renderState.m_contextChanged) {
           context.deleteBuffer(m_glBuffers.imgQuadsPosition);
         }
         m_glBuffers.imgQuadsPosition = context.createBuffer();
@@ -93,9 +96,12 @@ var webgl_quadFeature = function (arg) {
         newbuf = false;
 
     if (m_quads.clrQuads.length) {
+      if (renderState.m_contextChanged) {
+        m_glBuffers.clrQuadsPosition = null;
+      }
       if (!m_clrposbuf || m_clrposbuf.length < m_quads.clrQuads.length * 12 ||
           !m_glBuffers.clrQuadsPosition) {
-        if (m_glBuffers.clrQuadsPosition) {
+        if (m_glBuffers.clrQuadsPosition && !renderState.m_contextChanged) {
           context.deleteBuffer(m_glBuffers.clrQuadsPosition);
         }
         m_glBuffers.clrQuadsPosition = context.createBuffer();
@@ -393,7 +399,10 @@ var webgl_quadFeature = function (arg) {
         nearestPixel = curZoom >= nearestPixel;
       }
       m_quads.imgQuads.forEach((quad) => {
-        if ((quad.image || quad.imageTexture) && quad.texture && quad.texture.nearestPixel() !== nearestPixel && quad.texture.textureHandle()) {
+        if ((quad.image || quad.imageTexture) && quad.texture &&
+            quad.texture.nearestPixel() !== nearestPixel &&
+            quad.texture.textureHandle() &&
+            quad.texture.hasContext(renderState.m_context)) {
           /* This could just be
            *   quad.texture.setNearestPixel(nearestPixel);
            * but that needlessly redecodes the image.  Instead, just change the

src/webgl/webglRenderer.js

@@ -34,6 +34,7 @@ var webglRenderer = function (arg) {
       m_contextRenderer = null,
       m_viewer = null,
       m_lastZoom,
+      m_contextLost = false,
       m_updateCamera = false,
       s_init = this._init,
       s_exit = this._exit;
@@ -92,8 +93,22 @@ var webglRenderer = function (arg) {
     m_viewer.init();
     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()._init(), false);
+    canvas.get(0).addEventListener('webglcontextlost', function (evt) {
+      m_contextLost = true;
+      evt.preventDefault();
+    }, false);
+    canvas.get(0).addEventListener('webglcontextrestored', function () {
+      if (!m_viewer) {
+        return;
+      }
+      m_contextLost = false;
+      // Reinitialize GL objects, then force a camera sync before redraw.
+      // While the context is lost and restored it could be the same context,
+      // so we need to force a context change for gpu resources to be re-created.
+      m_viewer.renderWindow()._setup(undefined, true);
+      m_updateCamera = true;
+      m_this._render();
+    }, false);
 
     if (m_viewer.renderWindow().renderers().length > 0) {
       m_contextRenderer.setLayer(m_viewer.renderWindow().renderers().length);
@@ -154,6 +169,9 @@ var webglRenderer = function (arg) {
    */
   this._renderFrame = function () {
     if (m_viewer) {
+      if (m_contextLost) {
+        return;
+      }
       if (m_updateCamera) {
         m_updateCamera = false;
         m_this._updateRendererCamera();

tests/gl-cases/osmLayer.js

@@ -22,6 +22,26 @@ describe('osmLayer', function () {
     imageTest.imageTest('osmLayerVgl', null, 0.0015, done, myMap.onIdle, 0, 2);
   });
 
+  it('lose context and recover', function (done) {
+    myMap = common.createOsmMap({center: {x: -78, y: 21}}, {
+      renderer: 'webgl',
+      attribution: '&copy; <a href="http://some-unvisited-domain.org">OpenStreetMap</a> contributors'
+    });
+    myMap.draw();
+    myMap.center({x: 60, y: 20}).zoom(3);
+    const gl = myMap.node().find('canvas')[0].getContext('webgl');
+    const ext = gl.getExtension('WEBGL_lose_context');
+    // we must wait until the context is available and then until it is lost
+    window.setTimeout(() => {
+      ext.loseContext();
+      window.setTimeout(() => {
+        ext.restoreContext();
+        myMap.center({x: 0, y: 0}).zoom(2.5);
+        imageTest.imageTest('osmLayerVgl', null, 0.0015, done, myMap.onIdle, 0, 2);
+      }, 10);
+    }, 10);
+  });
+
   it('canvas renderer', function (done) {
     myMap = common.createOsmMap({}, {
       renderer: 'canvas',