diff --git a/src/render/draw_raster.js b/src/render/draw_raster.js index b2fc0f86581..7b33dcc2fb1 100644 --- a/src/render/draw_raster.js +++ b/src/render/draw_raster.js @@ -77,6 +77,11 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: StyleLaye const vao = source.boundsVAO; vao.bind(gl, program, buffer); gl.drawArrays(gl.TRIANGLE_STRIP, 0, buffer.length); + } else if (tile.maskedBoundsBuffer && tile.maskedBoundsVAO) { + const buffer = tile.maskedBoundsBuffer; + const vao = tile.maskedBoundsVAO; + vao.bind(gl, program, buffer); + gl.drawArrays(gl.TRIANGLE_STRIP, 0, buffer.length); } else { const buffer = painter.rasterBoundsBuffer; const vao = painter.rasterBoundsVAO; @@ -85,19 +90,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: StyleLaye } } - // cross-fade parameters - gl.uniform2fv(program.u_tl_parent, parentTL || [0, 0]); - gl.uniform1f(program.u_scale_parent, parentScaleBy || 1); - gl.uniform1f(program.u_buffer_scale, 1); - gl.uniform1f(program.u_fade_t, fade.mix); - gl.uniform1f(program.u_opacity, fade.opacity * layer.paint['raster-opacity']); - gl.uniform1i(program.u_image0, 0); - gl.uniform1i(program.u_image1, 1); - - 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); + gl.depthFunc(gl.LEQUAL); } function spinWeights(angle) { diff --git a/src/render/painter.js b/src/render/painter.js index f4e802c26de..3bc9f087238 100644 --- a/src/render/painter.js +++ b/src/render/painter.js @@ -14,7 +14,6 @@ const PosArray = require('../data/pos_array'); const {ProgramConfiguration} = require('../data/program_configuration'); const shaders = require('../shaders'); const Program = require('./program'); -const assert = require('assert'); const updateTileMasks = require('./tile_mask'); const draw = { @@ -277,7 +276,7 @@ class Painter { const sourceCache = rasterSources[key]; const coords = sourceCache.getVisibleCoordinates(); const visibleTiles = coords.map((c)=>{ return sourceCache.getTile(c); }); - updateTileMasks(visibleTiles); + updateTileMasks(visibleTiles, this.gl); } this.isOpaquePass = true; diff --git a/src/render/tile_mask.js b/src/render/tile_mask.js index 7fe87dd787e..d359355f295 100644 --- a/src/render/tile_mask.js +++ b/src/render/tile_mask.js @@ -56,7 +56,7 @@ import type Tile from './../source/tile'; // 2/1/3, since it is not a descendant of it. -module.exports = function(renderableTiles: Array) { +module.exports = function(renderableTiles: Array, gl: WebGLRenderingContext) { const sortedRenderables = 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++) { @@ -69,7 +69,7 @@ module.exports = function(renderableTiles: Array) { // can never be children of the current wrap. computeTileMasks(tile.coord.wrapped(), tile.coord, childArray, new TileCoord(0, 0, 0, tile.coord.w + 1), mask); - tile.setMask(mask); + tile.setMask(mask, gl); } }; diff --git a/src/source/source_cache.js b/src/source/source_cache.js index 37b19b4a71e..2060154695c 100644 --- a/src/source/source_cache.js +++ b/src/source/source_cache.js @@ -9,7 +9,6 @@ const Coordinate = require('../geo/coordinate'); const util = require('../util/util'); const EXTENT = require('../data/extent'); const Point = require('@mapbox/point-geometry'); -const updateTileMasks = require('../render/tile_mask').updateTileMasks; import type {Source} from './source'; diff --git a/src/source/tile.js b/src/source/tile.js index 88cac83843b..09882a774fd 100644 --- a/src/source/tile.js +++ b/src/source/tile.js @@ -15,7 +15,7 @@ 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 VertexBuffer = require('../gl/vertex_buffer'); const VertexArrayObject = require('../render/vertex_array_object'); const CLOCK_SKEW_RETRY_TIMEOUT = 30000; @@ -66,12 +66,9 @@ class Tile { workerID: number; vtLayers: {[string]: VectorTileLayer}; mask: Array; - aborted: ?boolean; - boundsBuffer: any; - boundsVAO: any; - maskedRasterBoundsBuffer: any; - maskedRasterBoundsVAO: any; + maskedBoundsBuffer: ?VertexBuffer; + maskedBoundsVAO: ?VertexArrayObject; request: any; texture: any; sourceCache: any; @@ -324,33 +321,34 @@ class Tile { } } - setMask(mask: Array) { + setMask(mask: Array, gl: WebGLRenderingContext) { // don't redo buffer work if the mask is the same; if (util.deepEqual(this.mask, mask)) return; + + this.mask = mask; + this.maskedBoundsBuffer = undefined; + this.maskedBoundsVAO = undefined; + // 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(); + 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(); + this.maskedBoundsBuffer = new VertexBuffer(gl, maskedBoundsArray); + this.maskedBoundsVAO = new VertexArrayObject(); } hasData() { diff --git a/test/unit/source/tile.test.js b/test/unit/source/tile.test.js index 973f776a246..106e7bfb824 100644 --- a/test/unit/source/tile.test.js +++ b/test/unit/source/tile.test.js @@ -136,62 +136,19 @@ test('Tile#setMask', (t) => { t.test('simple mask', (t)=>{ const tile = new Tile(0, 0, 0); - tile.setMask([new TileCoord(1, 0, 0).id, new TileCoord(1, 1, 1).id]); - const vertexBuffer = new Int16Array(tile.maskedRasterBoundsBuffer.arrayBuffer); - t.deepEqual(vertexBuffer, [ // 1/0/1 - 0, 0, 0, 0, - 4096, 0, 4096, 0, - 0, 4096, 0, 4096, - 4096, 4096, 4096, 4096, - // 1/1/1 - 4096, 4096, 4096, 4096, - 8192, 4096, 8192, 4096, - 4096, 8192, 4096, 8192, - 8192, 8192, 8192, 8192]); + const gl = require('gl')(10, 10); + tile.setMask([new TileCoord(1, 0, 0).id, new TileCoord(1, 1, 1).id], gl); + t.deepEqual(tile.mask, [new TileCoord(1, 0, 0).id, new TileCoord(1, 1, 1).id]); t.end(); }); t.test('complex mask', (t) => { const tile = new Tile(0, 0, 0); + const gl = require('gl')(10, 10); tile.setMask([new TileCoord(1, 0, 1).id, new TileCoord(1, 1, 0).id, new TileCoord(2, 2, 3).id, + new TileCoord(2, 3, 2).id, new TileCoord(3, 6, 7).id, new TileCoord(3, 7, 6).id], gl); + t.deepEqual(tile.mask, [new TileCoord(1, 0, 1).id, new TileCoord(1, 1, 0).id, new TileCoord(2, 2, 3).id, new TileCoord(2, 3, 2).id, new TileCoord(3, 6, 7).id, new TileCoord(3, 7, 6).id]); - const vertexBuffer = new Int16Array(tile.maskedRasterBoundsBuffer.arrayBuffer); - t.deepEqual(vertexBuffer, [ - // 1/0/1 - 0, 4096, 0, 4096, - 4096, 4096, 4096, 4096, - 0, 8192, 0, 8192, - 4096, 8192, 4096, 8192, - - // 1/1/0 - 4096, 0, 4096, 0, - 8192, 0, 8192, 0, - 4096, 4096, 4096, 4096, - 8192, 4096, 8192, 4096, - - // 2/2/3 - 4096, 6144, 4096, 6144, - 6144, 6144, 6144, 6144, - 4096, 8192, 4096, 8192, - 6144, 8192, 6144, 8192, - - // 2/3/2 - 6144, 4096, 6144, 4096, - 8192, 4096, 8192, 4096, - 6144, 6144, 6144, 6144, - 8192, 6144, 8192, 6144, - - // 3/6/7 - 6144, 7168, 6144, 7168, - 7168, 7168, 7168, 7168, - 6144, 8192, 6144, 8192, - 7168, 8192, 7168, 8192, - - // 3/7/6 - 7168, 6144, 7168, 6144, - 8192, 6144, 8192, 6144, - 7168, 7168, 7168, 7168, - 8192, 7168, 8192, 7168 ]); t.end(); });