From 74077d77b7fddafdbd2f7687a9d26601deae6af2 Mon Sep 17 00:00:00 2001
From: Lucas Wojciechowski <lucas@lucaswoj.com>
Date: Wed, 2 Nov 2016 18:42:52 -0700
Subject: [PATCH] Fix flicker when rendering image source (#3522)

* Fix flicker when image source

* Fix warnings when rendering video

* Ensure tile.state === 'loaded' iff the tile has data
---
 js/render/painter.js      |  2 +-
 js/source/image_source.js | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/js/render/painter.js b/js/render/painter.js
index b1495d9a501..9c8421c0961 100644
--- a/js/render/painter.js
+++ b/js/render/painter.js
@@ -240,12 +240,12 @@ class Painter {
             let j;
             let coords = [];
             if (sourceCache) {
+                if (sourceCache.prepare) sourceCache.prepare();
                 coords = sourceCache.getVisibleCoordinates();
                 for (j = 0; j < coords.length; j++) {
                     coords[j].posMatrix = this.transform.calculatePosMatrix(coords[j], sourceCache.getSource().maxzoom);
                 }
                 this.clearStencil();
-                if (sourceCache.prepare) sourceCache.prepare();
                 if (sourceCache.getSource().isTileClipped) {
                     this._renderTileClippingMasks(coords);
                 }
diff --git a/js/source/image_source.js b/js/source/image_source.js
index f3d8b96dae3..fcaf13c9667 100644
--- a/js/source/image_source.js
+++ b/js/source/image_source.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const util = require('../util/util');
+const window = require('../util/window');
 const TileCoord = require('./tile_coord');
 const LngLat = require('../geo/lng_lat');
 const Point = require('point-geometry');
@@ -66,7 +67,6 @@ class ImageSource extends Evented {
             if (err) return this.fire('error', {error: err});
 
             this.image = image;
-            this._loaded = true;
 
             this._finishLoading();
         });
@@ -127,7 +127,6 @@ class ImageSource extends Evented {
     }
 
     _setTile(tile) {
-        this._prepared = false;
         this.tile = tile;
         const maxInt16 = 32767;
         const array = new RasterBoundsArray();
@@ -140,17 +139,16 @@ class ImageSource extends Evented {
 
         this.tile.boundsBuffer = Buffer.fromStructArray(array, Buffer.BufferType.VERTEX);
         this.tile.boundsVAO = new VertexArrayObject();
-        this.tile.state = 'loaded';
     }
 
     prepare() {
-        if (!this.tile || !this._loaded || !this.image || !this.image.complete) return;
+        if (!this.tile || !this.image || !this.image.complete) return;
         this._prepareImage(this.map.painter.gl, this.image);
     }
 
     _prepareImage(gl, image) {
-        if (!this._prepared) {
-            this._prepared = true;
+        if (this.tile.state !== 'loaded') {
+            this.tile.state = 'loaded';
             this.tile.texture = gl.createTexture();
             gl.bindTexture(gl.TEXTURE_2D, this.tile.texture);
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -158,7 +156,7 @@ class ImageSource extends Evented {
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-        } else {
+        } else if (image instanceof window.HTMLVideoElement) {
             gl.bindTexture(gl.TEXTURE_2D, this.tile.texture);
             gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
         }