Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Simplify and optimize drawFill #3501

Merged
merged 2 commits into from
Nov 1, 2016
Merged

Simplify and optimize drawFill #3501

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6387c9
simplify & dry up drawFill
mourner Nov 1, 2016
d91dbd2
avoid redundant setUniforms in draw fill
mourner Nov 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 45 additions & 78 deletions js/render/draw_fill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,28 @@

const setPattern = require('./set_pattern');

module.exports = draw;
module.exports = drawFill;

function draw(painter, sourceCache, layer, coords) {
function drawFill(painter, sourceCache, layer, coords) {
const gl = painter.gl;
gl.enable(gl.STENCIL_TEST);

const isOpaque = (
const isOpaque =
!layer.paint['fill-pattern'] &&
layer.isPaintValueFeatureConstant('fill-color') &&
layer.isPaintValueFeatureConstant('fill-opacity') &&
layer.paint['fill-color'][3] === 1 &&
layer.paint['fill-opacity'] === 1
);
layer.paint['fill-opacity'] === 1;

// Draw fill
if (painter.isOpaquePass === isOpaque) {
// Once we switch to earcut drawing we can pull most of the WebGL setup
// outside of this coords loop.
painter.setDepthSublayer(1);
for (let i = 0; i < coords.length; i++) {
drawFill(painter, sourceCache, layer, coords[i]);
}
drawFillTiles(painter, sourceCache, layer, coords, drawFillTile);
}

// Draw stroke
if (!painter.isOpaquePass && layer.paint['fill-antialias']) {
painter.lineWidth(2);
painter.depthMask(false);
Expand All @@ -39,97 +37,66 @@ function draw(painter, sourceCache, layer, coords) {
// the current shape, some pixels from the outline stroke overlapped
// the (non-antialiased) fill.
painter.setDepthSublayer(layer.getPaintProperty('fill-outline-color') ? 2 : 0);

for (let j = 0; j < coords.length; j++) {
drawStroke(painter, sourceCache, layer, coords[j]);
}
drawFillTiles(painter, sourceCache, layer, coords, drawStrokeTile);
}
}

function drawFill(painter, sourceCache, layer, coord) {
const tile = sourceCache.getTile(coord);
const bucket = tile.getBucket(layer);
if (!bucket) return;

const buffers = bucket.buffers;
const gl = painter.gl;

const image = layer.paint['fill-pattern'];
const layerData = buffers.layerData[layer.id];

let program;

if (!image) {
const programConfiguration = layerData.programConfiguration;
program = painter.useProgram('fill', programConfiguration);
programConfiguration.setUniforms(gl, program, layer, {zoom: painter.transform.zoom});
function drawFillTiles(painter, sourceCache, layer, coords, drawFn) {
let firstTile = true;
for (const coord of coords) {
const tile = sourceCache.getTile(coord);
const bucket = tile.getBucket(layer);
if (!bucket) continue;

} else {
// Draw texture fill
program = painter.useProgram('fillPattern');
setPattern(image, tile, coord, painter, program, false);
gl.uniform1f(program.u_opacity, layer.paint['fill-opacity']);

gl.activeTexture(gl.TEXTURE0);
painter.spriteAtlas.bind(gl, true);
painter.enableTileClippingMask(coord);
drawFn(painter, sourceCache, layer, tile, coord, bucket.buffers, firstTile);
firstTile = false;
}
}

gl.uniformMatrix4fv(program.u_matrix, false, painter.translatePosMatrix(
coord.posMatrix,
tile,
layer.paint['fill-translate'],
layer.paint['fill-translate-anchor']
));
function drawFillTile(painter, sourceCache, layer, tile, coord, buffers, firstTile) {
const gl = painter.gl;
const layerData = buffers.layerData[layer.id];

painter.enableTileClippingMask(coord);
const program = setFillProgram('fill', layer.paint['fill-pattern'], painter, layerData, layer, tile, coord, firstTile);

for (const segment of buffers.segments) {
segment.vaos[layer.id].bind(gl, program, buffers.layoutVertexBuffer, buffers.elementBuffer, layerData.paintVertexBuffer, segment.vertexOffset);
gl.drawElements(gl.TRIANGLES, segment.primitiveLength * 3, gl.UNSIGNED_SHORT, segment.primitiveOffset * 3 * 2);
}
}

function drawStroke(painter, sourceCache, layer, coord) {
const tile = sourceCache.getTile(coord);
const bucket = tile.getBucket(layer);
if (!bucket) return;

const buffers = bucket.buffers;
const layerData = buffers.layerData[layer.id];
function drawStrokeTile(painter, sourceCache, layer, tile, coord, buffers, firstTile) {
const gl = painter.gl;
const layerData = buffers.layerData[layer.id];
const usePattern = layer.paint['fill-pattern'] && !layer.getPaintProperty('fill-outline-color');

const image = layer.paint['fill-pattern'];
const isOutlineColorDefined = layer.getPaintProperty('fill-outline-color');
let program;
const program = setFillProgram('fillOutline', usePattern, painter, layerData, layer, tile, coord, firstTile);
gl.uniform2f(program.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);

if (image && !isOutlineColorDefined) {
program = painter.useProgram('fillOutlinePattern');
gl.uniform2f(program.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
for (const segment of buffers.segments2) {
segment.vaos[layer.id].bind(gl, program, buffers.layoutVertexBuffer, buffers.elementBuffer2, layerData.paintVertexBuffer, segment.vertexOffset);
gl.drawElements(gl.LINES, segment.primitiveLength * 2, gl.UNSIGNED_SHORT, segment.primitiveOffset * 2 * 2);
}
}

function setFillProgram(programId, usePattern, painter, layerData, layer, tile, coord, firstTile) {
let program;
const prevProgram = painter.currentProgram;
if (!usePattern) {
program = painter.useProgram(programId, layerData.programConfiguration);
if (firstTile || program !== prevProgram) {
layerData.programConfiguration.setUniforms(painter.gl, program, layer, {zoom: painter.transform.zoom});
}
} else {
const programConfiguration = layerData.programConfiguration;
program = painter.useProgram('fillOutline', programConfiguration);
programConfiguration.setUniforms(gl, program, layer, {zoom: painter.transform.zoom});
gl.uniform2f(program.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
program = painter.useProgram(`${programId}Pattern`);
painter.gl.uniform1f(program.u_opacity, layer.paint['fill-opacity']);
setPattern(layer.paint['fill-pattern'], tile, coord, painter, program, false);
}

gl.uniform1f(program.u_opacity, layer.paint['fill-opacity']);

gl.uniformMatrix4fv(program.u_matrix, false, painter.translatePosMatrix(
coord.posMatrix,
tile,
painter.gl.uniformMatrix4fv(program.u_matrix, false, painter.translatePosMatrix(
coord.posMatrix, tile,
layer.paint['fill-translate'],
layer.paint['fill-translate-anchor']
));

if (image) {
setPattern(image, tile, coord, painter, program, false);
}

painter.enableTileClippingMask(coord);

for (const segment of buffers.segments2) {
segment.vaos[layer.id].bind(gl, program, buffers.layoutVertexBuffer, buffers.elementBuffer2, layerData.paintVertexBuffer, segment.vertexOffset);
gl.drawElements(gl.LINES, segment.primitiveLength * 2, gl.UNSIGNED_SHORT, segment.primitiveOffset * 2 * 2);
}
return program;
}