fix(webgl): handle dirty context for textures/quads

Author: BryonLewis

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