Fix gradient texture invalidation across zoom levels

Use a generation identifier instead of a single boolean to prevent stale data.

src/data/bucket/line_bucket.js

@@ -104,6 +104,7 @@ class LineBucket implements Bucket {
     layoutVertexBuffer2: VertexBuffer;
     gradientTexture: ?Texture;
     gradient: ?RGBAImage;
+    gradientGeneration: number;
 
     indexArray: TriangleIndexArray;
     indexBuffer: IndexBuffer;

src/render/draw_line.js

@@ -81,7 +81,7 @@ export default function drawLine(painter: Painter, sourceCache: SourceCache, lay
             painter.lineAtlas.bind(context);
         } else if (gradient) {
             let gradientTexture = bucket.gradientTexture;
-            if (!gradientTexture || layer.gradientTextureInvalidated) {
+            if (!gradientTexture || (gradientTexture && layer.gradientGeneration !== bucket.gradientGeneration)) {
                 const sourceMaxZoom = sourceCache.getSource().maxzoom;
                 const potentialOverzoom = coord.canonical.z === sourceMaxZoom ?
                     Math.ceil(1 << (painter.transform.maxZoom - coord.canonical.z)) : 1;
@@ -103,6 +103,7 @@ export default function drawLine(painter: Painter, sourceCache: SourceCache, lay
             }
             context.activeTexture.set(gl.TEXTURE0);
             gradientTexture.bind(layer.stepInterpolant ? gl.NEAREST : gl.LINEAR, gl.CLAMP_TO_EDGE);
+            bucket.gradientGeneration = layer.gradientGeneration;
         }
 
         program.draw(context, gl.TRIANGLES, depthMode,
@@ -113,6 +114,4 @@ export default function drawLine(painter: Painter, sourceCache: SourceCache, lay
         firstTile = false;
         // once refactored so that bound texture state is managed, we'll also be able to remove this firstTile/programChanged logic
     }
-
-    layer.gradientTextureInvalidated = false;
 }

src/style/style_layer/line_style_layer.js

@@ -7,7 +7,7 @@ import LineBucket from '../../data/bucket/line_bucket';
 import {polygonIntersectsBufferedMultiLine} from '../../util/intersection_tests';
 import {getMaximumPaintValue, translateDistance, translate} from '../query_utils';
 import properties from './line_style_layer_properties';
-import {extend} from '../../util/util';
+import {extend, MAX_SAFE_INTEGER} from '../../util/util';
 import EvaluationParameters from '../evaluation_parameters';
 import {Transitionable, Transitioning, Layout, PossiblyEvaluated, DataDrivenProperty} from '../properties';
 
@@ -44,7 +44,7 @@ class LineStyleLayer extends StyleLayer {
     _unevaluatedLayout: Layout<LayoutProps>;
     layout: PossiblyEvaluated<LayoutProps>;
 
-    gradientTextureInvalidated: boolean;
+    gradientGeneration: number;
     stepInterpolant: boolean;
 
     _transitionablePaint: Transitionable<PaintProps>;
@@ -53,13 +53,14 @@ class LineStyleLayer extends StyleLayer {
 
     constructor(layer: LayerSpecification) {
         super(layer, properties);
+        this.gradientGeneration = 0;
     }
 
     _handleSpecialPaintPropertyUpdate(name: string) {
         if (name === 'line-gradient') {
             const expression: ZoomConstantExpression<'source'> = ((this._transitionablePaint._values['line-gradient'].value.expression): any);
             this.stepInterpolant = expression._styleExpression.expression instanceof Step;
-            this.gradientTextureInvalidated = true;
+            this.gradientGeneration = (this.gradientGeneration + 1) % MAX_SAFE_INTEGER;
         }
     }
 

src/util/util.js

@@ -7,6 +7,9 @@ import window from './window';
 
 import type {Callback} from '../types/callback';
 
+// Number.MAX_SAFE_INTEGER not available in IE
+export const MAX_SAFE_INTEGER = Math.pow(2, 53) - 1;
+
 /**
  * @module util
  * @private