From 0a37e12e94fcfaf5ea84d4be672822d77234b98a Mon Sep 17 00:00:00 2001 From: Molly Lloyd Date: Mon, 24 Oct 2016 18:52:59 -0700 Subject: [PATCH] more rebasing, get tests to pass --- js/data/bucket/line_bucket.js | 89 ++++++++++++++++++++++++-------- js/data/program_configuration.js | 13 +++-- js/render/draw_line.js | 11 +--- js/util/browser.js | 13 +++-- 4 files changed, 85 insertions(+), 41 deletions(-) diff --git a/js/data/bucket/line_bucket.js b/js/data/bucket/line_bucket.js index 968f380b1f5..0973febf2a2 100644 --- a/js/data/bucket/line_bucket.js +++ b/js/data/bucket/line_bucket.js @@ -39,27 +39,74 @@ const LINE_DISTANCE_SCALE = 1 / 2; // The maximum line distance, in tile units, that fits in the buffer. const MAX_LINE_DISTANCE = Math.pow(2, LINE_DISTANCE_BUFFER_BITS - 1) / LINE_DISTANCE_SCALE; -const lineInterface = { - layoutVertexArrayType: createVertexArrayType([{ - name: 'a_pos', - components: 2, - type: 'Int16' - }, { - name: 'a_data', - components: 4, - type: 'Uint8' - }]), - paintAttributes: [{ - name: 'a_color', - components: 4, - type: 'Uint8', - getValue: (layer, globalProperties, featureProperties) => { - return layer.getPaintValue("line-color", globalProperties, featureProperties); - }, - multiplier: 255, - paintProperty: 'line-color' - }], - elementArrayType: createElementArrayType() +const lineInterfaces = { + line: { + layoutVertexArrayType: new VertexArrayType([{ + name: 'a_pos', + components: 2, + type: 'Int16' + }, { + name: 'a_data', + components: 4, + type: 'Uint8' + }]), + paintAttributes: [{ + name: 'a_color', + components: 4, + type: 'Uint8', + getValue: (layer, globalProperties, featureProperties) => { + return layer.getPaintValue("line-color", globalProperties, featureProperties); + }, + multiplier: 255, + paintProperty: 'line-color' + }, { + name: 'a_blur', + components: 1, + type: 'Uint8', + getValue: function(layer, globalProperties, featureProperties) { + return [layer.getPaintValue("line-blur", globalProperties, featureProperties)]; + }, + multiplier: 10, + paintProperty: 'line-blur' + }, { + name: 'a_opacity', + components: 1, + type: 'Uint8', + getValue: function(layer, globalProperties, featureProperties) { + return [layer.getPaintValue("line-opacity", globalProperties, featureProperties)]; + }, + multiplier: 10, + paintProperty: 'line-opacity' + }, { + name: 'a_width', + components: 1, + type: 'Uint8', + getValue: function(layer, globalProperties, featureProperties) { + return [layer.getPaintValue("line-width", globalProperties, featureProperties) / 2]; + }, + multiplier: 10, + paintProperty: 'line-width' + }, { + name: 'a_gapwidth', + components: 1, + type: 'Uint8', + getValue: function(layer, globalProperties, featureProperties) { + return [layer.getPaintValue("line-gap-width", globalProperties, featureProperties) / 2]; + }, + multiplier: 10, + paintProperty: 'line-gap-width' + }, { + name: 'a_offset', + components: 1, + type: 'Uint8', + getValue: function(layer, globalProperties, featureProperties) { + return [-1 * layer.getPaintValue("line-offset", globalProperties, featureProperties)]; + }, + multiplier: 10, + paintProperty: 'line-offset' + }], + elementArrayType: createElementArrayType() + } }; function addLineVertex(layoutVertexBuffer, point, extrude, tx, ty, dir, linesofar) { diff --git a/js/data/program_configuration.js b/js/data/program_configuration.js index 7e7b33a2be7..7f45e6fc3d3 100644 --- a/js/data/program_configuration.js +++ b/js/data/program_configuration.js @@ -4,6 +4,7 @@ const createVertexArrayType = require('./vertex_array_type'); const util = require('../util/util'); const shaders = require('mapbox-gl-shaders'); const assert = require('assert'); +const browser = require('../util/browser'); /** * ProgramConfiguration contains the logic for binding style layer properties and tile @@ -161,21 +162,23 @@ class ProgramConfiguration { const program = gl.createProgram(); const definition = shaders[name]; - let definesSource = '#define MAPBOX_GL_JS;\n'; - if (showOverdraw) { - definesSource += '#define OVERDRAW_INSPECTOR;\n'; + defines = this.defines.concat(defines); + + let definesSource = `#define MAPBOX_GL_JS\n#define DEVICE_PIXEL_RATIO ${browser.devicePixelRatio.toFixed(1)}\n`; + for (let j = 0; j < defines.length; j++) { + definesSource += `#define ${defines[j]};\n`; } const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, applyPragmas(definesSource + definition.fragmentSource, this.fragmentPragmas)); gl.compileShader(fragmentShader); - assert(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS), gl.getShaderInfoLog(fragmentShader)); + assert(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS), `${name}.fragment.glsl error:\n${gl.getShaderInfoLog(fragmentShader)}`); gl.attachShader(program, fragmentShader); const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, applyPragmas(definesSource + shaders.util + definition.vertexSource, this.vertexPragmas)); gl.compileShader(vertexShader); - assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), gl.getShaderInfoLog(vertexShader)); + assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), `${name}.vertex.glsl error:\n${gl.getShaderInfoLog(vertexShader)}`); gl.attachShader(program, vertexShader); gl.linkProgram(program); diff --git a/js/render/draw_line.js b/js/render/draw_line.js index bebeb77b405..d9ada28aaaf 100644 --- a/js/render/draw_line.js +++ b/js/render/draw_line.js @@ -108,17 +108,8 @@ function drawLineTile(program, painter, tile, buffers, layer, coord, layerData, gl.uniform1f(program.u_fade, image.t); } - // the distance over which the line edge fades out. - // Retina devices need a smaller distance to avoid aliasing. - const antialiasing = 1 / browser.devicePixelRatio; - - gl.uniform1f(program.u_linewidth, layer.paint['line-width'] / 2); - gl.uniform1f(program.u_gapwidth, layer.paint['line-gap-width'] / 2); - gl.uniform1f(program.u_antialiasing, antialiasing / 2); - gl.uniform1f(program.u_blur, layer.paint['line-blur'] + antialiasing); - gl.uniform1f(program.u_opacity, layer.paint['line-opacity']); + gl.uniformMatrix2fv(program.u_antialiasingmatrix, false, painter.transform.lineAntialiasingMatrix); - gl.uniform1f(program.u_offset, -layer.paint['line-offset']); gl.uniform1f(program.u_extra, painter.transform.lineStretch); } diff --git a/js/util/browser.js b/js/util/browser.js index 7a7721de811..d54eb3f234a 100755 --- a/js/util/browser.js +++ b/js/util/browser.js @@ -91,10 +91,13 @@ Object.defineProperty(exports, 'devicePixelRatio', { exports.supportsWebp = false; -const webpImgTest = window.document.createElement('img'); -webpImgTest.onload = function() { - exports.supportsWebp = true; -}; -webpImgTest.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA='; +if (window.document) { + const webpImgTest = window.document.createElement('img'); + webpImgTest.onload = function() { + exports.supportsWebp = true; + }; + webpImgTest.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA='; +} + exports.supportsGeolocation = !!window.navigator.geolocation;