Update raster masks on every frame and use buffers to display masked …

…tiles

src/render/draw_raster.js

@@ -21,7 +21,6 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: StyleLaye
     gl.depthFunc(gl.LESS);
 
     const minTileZ = coords.length && coords[0].z;
-
     for (let i = 0; i < coords.length; i++) {
         const coord = coords[i];
         // set the lower zoom level to sublayer 0, and higher zoom levels to higher sublayers
@@ -81,8 +80,8 @@ function drawRasterTile(painter, sourceCache, layer, coord) {
     gl.uniform1i(program.u_image0, 0);
     gl.uniform1i(program.u_image1, 1);
 
-    const buffer = tile.boundsBuffer || painter.rasterBoundsBuffer;
-    const vao = tile.boundsVAO || painter.rasterBoundsVAO;
+    const buffer = tile.maskedRasterBoundsBuffer || tile.boundsBuffer || painter.rasterBoundsBuffer;
+    const vao = tile.maskedRasterBoundsVAO || tile.boundsVAO || painter.rasterBoundsVAO;
     vao.bind(gl, program, buffer);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, buffer.length);
 }

src/render/painter.js

@@ -14,6 +14,7 @@ const PosArray = require('../data/pos_array');
 const ProgramConfiguration = require('../data/program_configuration');
 const shaders = require('../shaders');
 const assert = require('assert');
+const updateTileMasks = require('./tile_mask');
 
 const draw = {
     symbol: require('./draw_symbol'),
@@ -268,7 +269,14 @@ class Painter {
         this.showOverdrawInspector(options.showOverdrawInspector);
 
         this.depthRange = (style._order.length + 2) * this.numSublayers * this.depthEpsilon;
+        const rasterSources = util.filterObject(this.style.sourceCaches, (sc) => { return sc._source.type === 'raster'; });
+        for (const key in rasterSources) {
+            const sourceCache = rasterSources[key];
+            const coords = sourceCache.getVisibleCoordinates();
+            const visibleTiles = coords.map((c)=>{ return sourceCache.getTile(c); });
+            updateTileMasks(visibleTiles);
 
+        }
         this.isOpaquePass = true;
         this.renderPass();
         this.isOpaquePass = false;

src/render/tile_mask.js

@@ -53,7 +53,7 @@ const TileCoord = require('../source/tile_coord');
 // 2/1/3, since it is not a descendant of it.
 
 
-exports.updateTileMasks = function(renderableTiles) {
+module.exports = function(renderableTiles) {
     const sortedRenderables = util.objectValues(renderableTiles).sort((a, b) => { return a.coord.isLessThan(b.coord) ? -1 : b.coord.isLessThan(a.coord) ? 1 : 0; });
 
     for (let i = 0; i < sortedRenderables.length; i++) {

src/source/source_cache.js

@@ -8,7 +8,6 @@ const Cache = require('../util/lru_cache');
 const Coordinate = require('../geo/coordinate');
 const util = require('../util/util');
 const EXTENT = require('../data/extent');
-const updateTileMasks = require('../render/tile_mask').updateTileMasks;
 
 
 import type {Source} from './source';
@@ -217,9 +216,7 @@ class SourceCache extends Evented {
         if (previousState === 'expired') tile.refreshedUponExpiration = true;
         this._setTileReloadTimer(id, tile);
         this._source.fire('data', {dataType: 'source', tile: tile, coord: tile.coord});
-        if (this._source.type === 'raster') {
-            updateTileMasks(util.filterObject(this._tiles, (value) => { return value.hasData(); }));
-        }
+
         // HACK this is necessary to fix https://github.com/mapbox/mapbox-gl-js/issues/2986
         if (this.map) this.map.painter.tileExtentVAO.vao = null;
     }

src/source/tile.js

@@ -10,10 +10,17 @@ const featureFilter = require('../style-spec/feature_filter');
 const CollisionTile = require('../symbol/collision_tile');
 const CollisionBoxArray = require('../symbol/collision_box');
 const Throttler = require('../util/throttler');
+const RasterBoundsArray = require('../data/raster_bounds_array');
+const TileCoord = require('./tile_coord');
+const EXTENT = require('../data/extent');
+const Point = require('@mapbox/point-geometry');
+const Buffer = require('../data/buffer');
+const VertexArrayObject = require('../render/vertex_array_object');
+
 
 const CLOCK_SKEW_RETRY_TIMEOUT = 30000;
 
-import type TileCoord from './tile_coord';
+
 import type {WorkerTileResult} from './worker_source';
 
 export type TileState =
@@ -274,7 +281,32 @@ class Tile {
     }
 
     setMask(mask: any) {
-        console.log(mask);
+
+        // don't redo buffer work if the mask is the same;
+        if (util.deepEqual(this.mask, mask)) return;
+        // We want to render the full tile, and keeping the segments/vertices/indices empty means
+        // using the global shared buffers for covering the entire tile.
+        this.mask = mask;
+        this.maskedRasterBoundsBuffer = undefined;
+        this.maskedRasterBoundsVAO = undefined;
+        if (util.deepEqual(mask, [0])) return;
+        const maskedBoundsArray = new RasterBoundsArray();
+
+        for (let i = 0; i < mask.length; i++) {
+            const maskCoord = TileCoord.fromID(mask[i]);
+            const vertexExtent = EXTENT >> maskCoord.z;
+            const tlVertex = new Point(maskCoord.x * vertexExtent, maskCoord.y * vertexExtent);
+            const brVertex = new Point(tlVertex.x * vertexExtent, tlVertex.y * vertexExtent);
+
+            maskedBoundsArray.emplaceBack(tlVertex.x, tlVertex.y, tlVertex.x, tlVertex.y);
+            maskedBoundsArray.emplaceBack(brVertex.x, tlVertex.y, brVertex.x, tlVertex.y);
+            maskedBoundsArray.emplaceBack(tlVertex.x, brVertex.y, tlVertex.x, brVertex.y);
+            maskedBoundsArray.emplaceBack(brVertex.x, brVertex.y, brVertex.x, brVertex.y);
+        }
+
+        this.maskedRasterBoundsBuffer = Buffer.fromStructArray(maskedBoundsArray, Buffer.BufferType.VERTEX);
+        this.maskedRasterBoundsVAO = new VertexArrayObject();
+
     }
 
     hasData() {

test/unit/source/tile_mask.test.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const test = require('mapbox-gl-js-test').test;
-const updateTileMasks = require('../../../src/render/tile_mask').updateTileMasks;
+const updateTileMasks = require('../../../src/render/tile_mask');
 const TileCoord = require('../../../src/source/tile_coord');