diff --git a/src/data/array_types.js b/src/data/array_types.js index 35dca5c6ec8..c502d723a53 100644 --- a/src/data/array_types.js +++ b/src/data/array_types.js @@ -150,10 +150,11 @@ register('StructArrayLayout2i4ub8', StructArrayLayout2i4ub8); /** * Implementation of the StructArray layout: * [0]: Uint16[8] + * [16]: Uint8[2] * * @private */ -class StructArrayLayout8ui16 extends StructArray { +class StructArrayLayout8ui2ub18 extends StructArray { uint8: Uint8Array; uint16: Uint16Array; @@ -162,14 +163,15 @@ class StructArrayLayout8ui16 extends StructArray { this.uint16 = new Uint16Array(this.arrayBuffer); } - emplaceBack(v0: number, v1: number, v2: number, v3: number, v4: number, v5: number, v6: number, v7: number) { + emplaceBack(v0: number, v1: number, v2: number, v3: number, v4: number, v5: number, v6: number, v7: number, v8: number, v9: number) { const i = this.length; this.resize(i + 1); - return this.emplace(i, v0, v1, v2, v3, v4, v5, v6, v7); + return this.emplace(i, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9); } - emplace(i: number, v0: number, v1: number, v2: number, v3: number, v4: number, v5: number, v6: number, v7: number) { - const o2 = i * 8; + emplace(i: number, v0: number, v1: number, v2: number, v3: number, v4: number, v5: number, v6: number, v7: number, v8: number, v9: number) { + const o2 = i * 9; + const o1 = i * 18; this.uint16[o2 + 0] = v0; this.uint16[o2 + 1] = v1; this.uint16[o2 + 2] = v2; @@ -178,12 +180,14 @@ class StructArrayLayout8ui16 extends StructArray { this.uint16[o2 + 5] = v5; this.uint16[o2 + 6] = v6; this.uint16[o2 + 7] = v7; + this.uint8[o1 + 16] = v8; + this.uint8[o1 + 17] = v9; return i; } } -StructArrayLayout8ui16.prototype.bytesPerElement = 16; -register('StructArrayLayout8ui16', StructArrayLayout8ui16); +StructArrayLayout8ui2ub18.prototype.bytesPerElement = 18; +register('StructArrayLayout8ui2ub18', StructArrayLayout8ui2ub18); /** * Implementation of the StructArray layout: @@ -1054,7 +1058,7 @@ export { StructArrayLayout4i8, StructArrayLayout2i4i12, StructArrayLayout2i4ub8, - StructArrayLayout8ui16, + StructArrayLayout8ui2ub18, StructArrayLayout4i4ui4i24, StructArrayLayout3f12, StructArrayLayout1ul4, @@ -1078,7 +1082,7 @@ export { StructArrayLayout2i4i12 as FillExtrusionLayoutArray, StructArrayLayout2i4 as HeatmapLayoutArray, StructArrayLayout2i4ub8 as LineLayoutArray, - StructArrayLayout8ui16 as PatternLayoutArray, + StructArrayLayout8ui2ub18 as PatternLayoutArray, StructArrayLayout4i4ui4i24 as SymbolLayoutArray, StructArrayLayout3f12 as SymbolDynamicLayoutArray, StructArrayLayout1ul4 as SymbolOpacityArray, diff --git a/src/data/bucket/pattern_attributes.js b/src/data/bucket/pattern_attributes.js index a46d42cc057..f47b64ca115 100644 --- a/src/data/bucket/pattern_attributes.js +++ b/src/data/bucket/pattern_attributes.js @@ -4,5 +4,7 @@ import {createLayout} from '../../util/struct_array'; export default createLayout([ // [tl.x, tl.y, br.x, br.y] {name: 'a_pattern_from', components: 4, type: 'Uint16'}, - {name: 'a_pattern_to', components: 4, type: 'Uint16'} + {name: 'a_pattern_to', components: 4, type: 'Uint16'}, + {name: 'a_pixel_ratio_from', components: 1, type: 'Uint8'}, + {name: 'a_pixel_ratio_to', components: 1, type: 'Uint8'}, ]); diff --git a/src/data/program_configuration.js b/src/data/program_configuration.js index 22e9cba0d3f..cd7110dd9f6 100644 --- a/src/data/program_configuration.js +++ b/src/data/program_configuration.js @@ -86,7 +86,7 @@ interface AttributeBinder { interface UniformBinder { uniformNames: Array; setUniform(uniform: Uniform<*>, globals: GlobalProperties, currentValue: PossiblyEvaluatedPropertyValue<*>, uniformName: string): void; - getBinding(context: Context, location: WebGLUniformLocation): $Shape>; + getBinding(context: Context, location: WebGLUniformLocation, name: string): $Shape>; } class ConstantBinder implements UniformBinder { @@ -104,7 +104,7 @@ class ConstantBinder implements UniformBinder { uniform.set(currentValue.constantOr(this.value)); } - getBinding(context: Context, location: WebGLUniformLocation): $Shape> { + getBinding(context: Context, location: WebGLUniformLocation, _: string): $Shape> { return (this.type === 'color') ? new UniformColor(context, location) : new Uniform1f(context, location); @@ -115,27 +115,37 @@ class CrossFadedConstantBinder implements UniformBinder { uniformNames: Array; patternFrom: ?Array; patternTo: ?Array; + pixelRatioFrom: number; + pixelRatioTo: number; constructor(value: mixed, names: Array) { this.uniformNames = names.map(name => `u_${name}`); this.patternFrom = null; this.patternTo = null; + this.pixelRatioFrom = 1.0; + this.pixelRatioTo = 1.0; } setConstantPatternPositions(posTo: ImagePosition, posFrom: ImagePosition) { - this.patternTo = posTo.tlbr; + this.pixelRatioFrom = posFrom.pixelRatio; + this.pixelRatioTo = posTo.pixelRatio; this.patternFrom = posFrom.tlbr; + this.patternTo = posTo.tlbr; } setUniform(uniform: Uniform<*>, globals: GlobalProperties, currentValue: PossiblyEvaluatedPropertyValue, uniformName: string) { const pos = uniformName === 'u_pattern_to' ? this.patternTo : - uniformName === 'u_pattern_from' ? this.patternFrom : null; + uniformName === 'u_pattern_from' ? this.patternFrom : + uniformName === 'u_pixel_ratio_to' ? this.pixelRatioTo : + uniformName === 'u_pixel_ratio_from' ? this.pixelRatioFrom : null; if (pos) uniform.set(pos); } - getBinding(context: Context, location: WebGLUniformLocation): $Shape> { - return new Uniform4f(context, location); + getBinding(context: Context, location: WebGLUniformLocation, name: string): $Shape> { + return name.startsWith('u_pattern') ? + new Uniform4f(context, location) : + new Uniform1f(context, location); } } @@ -283,7 +293,7 @@ class CompositeExpressionBinder implements AttributeBinder, UniformBinder { uniform.set(factor); } - getBinding(context: Context, location: WebGLUniformLocation): Uniform1f { + getBinding(context: Context, location: WebGLUniformLocation, _: string): Uniform1f { return new Uniform1f(context, location); } } @@ -345,11 +355,15 @@ class CrossFadedCompositeBinder implements AttributeBinder { for (let i = start; i < end; i++) { this.zoomInPaintVertexArray.emplace(i, imageMid.tl[0], imageMid.tl[1], imageMid.br[0], imageMid.br[1], - imageMin.tl[0], imageMin.tl[1], imageMin.br[0], imageMin.br[1] + imageMin.tl[0], imageMin.tl[1], imageMin.br[0], imageMin.br[1], + imageMid.pixelRatio, + imageMin.pixelRatio, ); this.zoomOutPaintVertexArray.emplace(i, imageMid.tl[0], imageMid.tl[1], imageMid.br[0], imageMid.br[1], - imageMax.tl[0], imageMax.tl[1], imageMax.br[0], imageMax.br[1] + imageMax.tl[0], imageMax.tl[1], imageMax.br[0], imageMax.br[1], + imageMid.pixelRatio, + imageMax.pixelRatio, ); } } @@ -503,7 +517,7 @@ export default class ProgramConfiguration { if (binder instanceof ConstantBinder || binder instanceof CrossFadedConstantBinder || binder instanceof CompositeExpressionBinder) { for (const name of binder.uniformNames) { if (locations[name]) { - const binding = binder.getBinding(context, locations[name]); + const binding = binder.getBinding(context, locations[name], name); uniforms.push({name, property, binding}); } } @@ -620,9 +634,9 @@ function paintAttributeNames(property, type) { 'text-halo-width': ['halo_width'], 'icon-halo-width': ['halo_width'], 'line-gap-width': ['gapwidth'], - 'line-pattern': ['pattern_to', 'pattern_from'], - 'fill-pattern': ['pattern_to', 'pattern_from'], - 'fill-extrusion-pattern': ['pattern_to', 'pattern_from'], + 'line-pattern': ['pattern_to', 'pattern_from', 'pixel_ratio_to', 'pixel_ratio_from'], + 'fill-pattern': ['pattern_to', 'pattern_from', 'pixel_ratio_to', 'pixel_ratio_from'], + 'fill-extrusion-pattern': ['pattern_to', 'pattern_from', 'pixel_ratio_to', 'pixel_ratio_from'], }; return attributeNameExceptions[property] || [property.replace(`${type}-`, '').replace(/-/g, '_')]; diff --git a/src/render/program/fill_extrusion_program.js b/src/render/program/fill_extrusion_program.js index ab0bd31039e..39dec5cf055 100644 --- a/src/render/program/fill_extrusion_program.js +++ b/src/render/program/fill_extrusion_program.js @@ -6,7 +6,6 @@ import { Uniform1f, Uniform2f, Uniform3f, - Uniform4f, UniformMatrix4f } from '../uniform_binding'; @@ -41,7 +40,7 @@ export type FillExtrusionPatternUniformsType = {| 'u_image': Uniform1i, 'u_pixel_coord_upper': Uniform2f, 'u_pixel_coord_lower': Uniform2f, - 'u_scale': Uniform4f, + 'u_scale': Uniform3f, 'u_fade': Uniform1f, 'u_opacity': Uniform1f |}; @@ -67,7 +66,7 @@ const fillExtrusionPatternUniforms = (context: Context, locations: UniformLocati 'u_texsize': new Uniform2f(context, locations.u_texsize), 'u_pixel_coord_upper': new Uniform2f(context, locations.u_pixel_coord_upper), 'u_pixel_coord_lower': new Uniform2f(context, locations.u_pixel_coord_lower), - 'u_scale': new Uniform4f(context, locations.u_scale), + 'u_scale': new Uniform3f(context, locations.u_scale), 'u_fade': new Uniform1f(context, locations.u_fade), 'u_opacity': new Uniform1f(context, locations.u_opacity) }); diff --git a/src/render/program/fill_program.js b/src/render/program/fill_program.js index 3c2b79e0c2c..8bc83d141f8 100644 --- a/src/render/program/fill_program.js +++ b/src/render/program/fill_program.js @@ -5,7 +5,7 @@ import { Uniform1i, Uniform1f, Uniform2f, - Uniform4f, + Uniform3f, UniformMatrix4f } from '../uniform_binding'; import {extend} from '../../util/util'; @@ -32,7 +32,7 @@ export type FillPatternUniformsType = {| 'u_image': Uniform1i, 'u_pixel_coord_upper': Uniform2f, 'u_pixel_coord_lower': Uniform2f, - 'u_scale': Uniform4f, + 'u_scale': Uniform3f, 'u_fade': Uniform1f |}; @@ -44,7 +44,7 @@ export type FillOutlinePatternUniformsType = {| 'u_image': Uniform1i, 'u_pixel_coord_upper': Uniform2f, 'u_pixel_coord_lower': Uniform2f, - 'u_scale': Uniform4f, + 'u_scale': Uniform3f, 'u_fade': Uniform1f |}; @@ -58,7 +58,7 @@ const fillPatternUniforms = (context: Context, locations: UniformLocations): Fil 'u_texsize': new Uniform2f(context, locations.u_texsize), 'u_pixel_coord_upper': new Uniform2f(context, locations.u_pixel_coord_upper), 'u_pixel_coord_lower': new Uniform2f(context, locations.u_pixel_coord_lower), - 'u_scale': new Uniform4f(context, locations.u_scale), + 'u_scale': new Uniform3f(context, locations.u_scale), 'u_fade': new Uniform1f(context, locations.u_fade) }); @@ -75,7 +75,7 @@ const fillOutlinePatternUniforms = (context: Context, locations: UniformLocation 'u_texsize': new Uniform2f(context, locations.u_texsize), 'u_pixel_coord_upper': new Uniform2f(context, locations.u_pixel_coord_upper), 'u_pixel_coord_lower': new Uniform2f(context, locations.u_pixel_coord_lower), - 'u_scale': new Uniform4f(context, locations.u_scale), + 'u_scale': new Uniform3f(context, locations.u_scale), 'u_fade': new Uniform1f(context, locations.u_fade) }); diff --git a/src/render/program/line_program.js b/src/render/program/line_program.js index 78d38e207e3..4ab16c3e5c8 100644 --- a/src/render/program/line_program.js +++ b/src/render/program/line_program.js @@ -4,7 +4,7 @@ import { Uniform1i, Uniform1f, Uniform2f, - Uniform4f, + Uniform3f, UniformMatrix4f } from '../uniform_binding'; import pixelsToTileUnits from '../../source/pixels_to_tile_units'; @@ -42,7 +42,7 @@ export type LinePatternUniformsType = {| 'u_device_pixel_ratio': Uniform1f, 'u_units_to_pixels': Uniform2f, 'u_image': Uniform1i, - 'u_scale': Uniform4f, + 'u_scale': Uniform3f, 'u_fade': Uniform1f |}; @@ -82,7 +82,7 @@ const linePatternUniforms = (context: Context, locations: UniformLocations): Lin 'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio), 'u_image': new Uniform1i(context, locations.u_image), 'u_units_to_pixels': new Uniform2f(context, locations.u_units_to_pixels), - 'u_scale': new Uniform4f(context, locations.u_scale), + 'u_scale': new Uniform3f(context, locations.u_scale), 'u_fade': new Uniform1f(context, locations.u_fade) }); @@ -143,8 +143,7 @@ const linePatternUniformValues = ( 'u_ratio': 1 / pixelsToTileUnits(tile, 1, transform.zoom), 'u_device_pixel_ratio': browser.devicePixelRatio, 'u_image': 0, - // this assumes all images in the icon atlas texture have the same pixel ratio - 'u_scale': [browser.devicePixelRatio, tileZoomRatio, crossfade.fromScale, crossfade.toScale], + 'u_scale': [tileZoomRatio, crossfade.fromScale, crossfade.toScale], 'u_fade': crossfade.t, 'u_units_to_pixels': [ 1 / transform.pixelsToGLUnits[0], diff --git a/src/render/program/pattern.js b/src/render/program/pattern.js index d33718abc9f..283fca5d9e2 100644 --- a/src/render/program/pattern.js +++ b/src/render/program/pattern.js @@ -5,10 +5,9 @@ import { Uniform1i, Uniform1f, Uniform2f, - Uniform4f + Uniform3f } from '../uniform_binding'; import pixelsToTileUnits from '../../source/pixels_to_tile_units'; -import browser from '../../util/browser'; import type Painter from '../painter'; import type {OverscaledTileID} from '../../source/tile_id'; @@ -39,7 +38,7 @@ export type PatternUniformsType = {| // pattern uniforms: 'u_image': Uniform1i, 'u_texsize': Uniform2f, - 'u_scale': Uniform4f, + 'u_scale': Uniform3f, 'u_fade': Uniform1f, 'u_pixel_coord_upper': Uniform2f, 'u_pixel_coord_lower': Uniform2f @@ -60,8 +59,7 @@ function patternUniformValues(crossfade: CrossfadeParameters, painter: Painter, return { 'u_image': 0, 'u_texsize': tile.imageAtlasTexture.size, - // this assumes all images in the icon atlas texture have the same pixel ratio - 'u_scale': [browser.devicePixelRatio, tileRatio, crossfade.fromScale, crossfade.toScale], + 'u_scale': [tileRatio, crossfade.fromScale, crossfade.toScale], 'u_fade': crossfade.t, // split the pixel coord into two pairs of 16 bit numbers. The glsl spec only guarantees 16 bits of precision. 'u_pixel_coord_upper': [pixelX >> 16, pixelY >> 16], diff --git a/src/shaders/fill_extrusion_pattern.fragment.glsl b/src/shaders/fill_extrusion_pattern.fragment.glsl index f3243d74b71..1edd25eac45 100644 --- a/src/shaders/fill_extrusion_pattern.fragment.glsl +++ b/src/shaders/fill_extrusion_pattern.fragment.glsl @@ -11,12 +11,16 @@ varying vec4 v_lighting; #pragma mapbox: define lowp float height #pragma mapbox: define lowp vec4 pattern_from #pragma mapbox: define lowp vec4 pattern_to +#pragma mapbox: define lowp float pixel_ratio_from +#pragma mapbox: define lowp float pixel_ratio_to void main() { #pragma mapbox: initialize lowp float base #pragma mapbox: initialize lowp float height #pragma mapbox: initialize mediump vec4 pattern_from #pragma mapbox: initialize mediump vec4 pattern_to + #pragma mapbox: initialize lowp float pixel_ratio_from + #pragma mapbox: initialize lowp float pixel_ratio_to vec2 pattern_tl_a = pattern_from.xy; vec2 pattern_br_a = pattern_from.zw; diff --git a/src/shaders/fill_extrusion_pattern.vertex.glsl b/src/shaders/fill_extrusion_pattern.vertex.glsl index 2761d56b6a9..2428580f9ca 100644 --- a/src/shaders/fill_extrusion_pattern.vertex.glsl +++ b/src/shaders/fill_extrusion_pattern.vertex.glsl @@ -2,7 +2,7 @@ uniform mat4 u_matrix; uniform vec2 u_pixel_coord_upper; uniform vec2 u_pixel_coord_lower; uniform float u_height_factor; -uniform vec4 u_scale; +uniform vec3 u_scale; uniform float u_vertical_gradient; uniform lowp float u_opacity; @@ -21,28 +21,31 @@ varying vec4 v_lighting; #pragma mapbox: define lowp float height #pragma mapbox: define lowp vec4 pattern_from #pragma mapbox: define lowp vec4 pattern_to +#pragma mapbox: define lowp float pixel_ratio_from +#pragma mapbox: define lowp float pixel_ratio_to void main() { #pragma mapbox: initialize lowp float base #pragma mapbox: initialize lowp float height #pragma mapbox: initialize mediump vec4 pattern_from #pragma mapbox: initialize mediump vec4 pattern_to + #pragma mapbox: initialize lowp float pixel_ratio_from + #pragma mapbox: initialize lowp float pixel_ratio_to vec2 pattern_tl_a = pattern_from.xy; vec2 pattern_br_a = pattern_from.zw; vec2 pattern_tl_b = pattern_to.xy; vec2 pattern_br_b = pattern_to.zw; - float pixelRatio = u_scale.x; - float tileRatio = u_scale.y; - float fromScale = u_scale.z; - float toScale = u_scale.w; + float tileRatio = u_scale.x; + float fromScale = u_scale.y; + float toScale = u_scale.z; vec3 normal = a_normal_ed.xyz; float edgedistance = a_normal_ed.w; - vec2 display_size_a = vec2((pattern_br_a.x - pattern_tl_a.x) / pixelRatio, (pattern_br_a.y - pattern_tl_a.y) / pixelRatio); - vec2 display_size_b = vec2((pattern_br_b.x - pattern_tl_b.x) / pixelRatio, (pattern_br_b.y - pattern_tl_b.y) / pixelRatio); + vec2 display_size_a = (pattern_br_a - pattern_tl_a) / pixel_ratio_from; + vec2 display_size_b = (pattern_br_b - pattern_tl_b) / pixel_ratio_to; base = max(0.0, base); height = max(0.0, height); diff --git a/src/shaders/fill_outline_pattern.vertex.glsl b/src/shaders/fill_outline_pattern.vertex.glsl index ac5ed0c423f..8d47ca56638 100644 --- a/src/shaders/fill_outline_pattern.vertex.glsl +++ b/src/shaders/fill_outline_pattern.vertex.glsl @@ -2,7 +2,7 @@ uniform mat4 u_matrix; uniform vec2 u_world; uniform vec2 u_pixel_coord_upper; uniform vec2 u_pixel_coord_lower; -uniform vec4 u_scale; +uniform vec3 u_scale; attribute vec2 a_pos; @@ -13,26 +13,29 @@ varying vec2 v_pos; #pragma mapbox: define lowp float opacity #pragma mapbox: define lowp vec4 pattern_from #pragma mapbox: define lowp vec4 pattern_to +#pragma mapbox: define lowp float pixel_ratio_from +#pragma mapbox: define lowp float pixel_ratio_to void main() { #pragma mapbox: initialize lowp float opacity #pragma mapbox: initialize mediump vec4 pattern_from #pragma mapbox: initialize mediump vec4 pattern_to + #pragma mapbox: initialize lowp float pixel_ratio_from + #pragma mapbox: initialize lowp float pixel_ratio_to vec2 pattern_tl_a = pattern_from.xy; vec2 pattern_br_a = pattern_from.zw; vec2 pattern_tl_b = pattern_to.xy; vec2 pattern_br_b = pattern_to.zw; - float pixelRatio = u_scale.x; - float tileRatio = u_scale.y; - float fromScale = u_scale.z; - float toScale = u_scale.w; + float tileRatio = u_scale.x; + float fromScale = u_scale.y; + float toScale = u_scale.z; gl_Position = u_matrix * vec4(a_pos, 0, 1); - vec2 display_size_a = vec2((pattern_br_a.x - pattern_tl_a.x) / pixelRatio, (pattern_br_a.y - pattern_tl_a.y) / pixelRatio); - vec2 display_size_b = vec2((pattern_br_b.x - pattern_tl_b.x) / pixelRatio, (pattern_br_b.y - pattern_tl_b.y) / pixelRatio); + vec2 display_size_a = (pattern_br_a - pattern_tl_a) / pixel_ratio_from; + vec2 display_size_b = (pattern_br_b - pattern_tl_b) / pixel_ratio_to; v_pos_a = get_pattern_pos(u_pixel_coord_upper, u_pixel_coord_lower, fromScale * display_size_a, tileRatio, a_pos); v_pos_b = get_pattern_pos(u_pixel_coord_upper, u_pixel_coord_lower, toScale * display_size_b, tileRatio, a_pos); diff --git a/src/shaders/fill_pattern.vertex.glsl b/src/shaders/fill_pattern.vertex.glsl index a3be3320186..e6f75d441c7 100644 --- a/src/shaders/fill_pattern.vertex.glsl +++ b/src/shaders/fill_pattern.vertex.glsl @@ -1,7 +1,7 @@ uniform mat4 u_matrix; uniform vec2 u_pixel_coord_upper; uniform vec2 u_pixel_coord_lower; -uniform vec4 u_scale; +uniform vec3 u_scale; attribute vec2 a_pos; @@ -11,24 +11,27 @@ varying vec2 v_pos_b; #pragma mapbox: define lowp float opacity #pragma mapbox: define lowp vec4 pattern_from #pragma mapbox: define lowp vec4 pattern_to +#pragma mapbox: define lowp float pixel_ratio_from +#pragma mapbox: define lowp float pixel_ratio_to void main() { #pragma mapbox: initialize lowp float opacity #pragma mapbox: initialize mediump vec4 pattern_from #pragma mapbox: initialize mediump vec4 pattern_to + #pragma mapbox: initialize lowp float pixel_ratio_from + #pragma mapbox: initialize lowp float pixel_ratio_to vec2 pattern_tl_a = pattern_from.xy; vec2 pattern_br_a = pattern_from.zw; vec2 pattern_tl_b = pattern_to.xy; vec2 pattern_br_b = pattern_to.zw; - float pixelRatio = u_scale.x; - float tileZoomRatio = u_scale.y; - float fromScale = u_scale.z; - float toScale = u_scale.w; + float tileZoomRatio = u_scale.x; + float fromScale = u_scale.y; + float toScale = u_scale.z; - vec2 display_size_a = vec2((pattern_br_a.x - pattern_tl_a.x) / pixelRatio, (pattern_br_a.y - pattern_tl_a.y) / pixelRatio); - vec2 display_size_b = vec2((pattern_br_b.x - pattern_tl_b.x) / pixelRatio, (pattern_br_b.y - pattern_tl_b.y) / pixelRatio); + vec2 display_size_a = (pattern_br_a - pattern_tl_a) / pixel_ratio_from; + vec2 display_size_b = (pattern_br_b - pattern_tl_b) / pixel_ratio_to; gl_Position = u_matrix * vec4(a_pos, 0, 1); v_pos_a = get_pattern_pos(u_pixel_coord_upper, u_pixel_coord_lower, fromScale * display_size_a, tileZoomRatio, a_pos); diff --git a/src/shaders/line_pattern.fragment.glsl b/src/shaders/line_pattern.fragment.glsl index 21f086358c0..c9b1adc4004 100644 --- a/src/shaders/line_pattern.fragment.glsl +++ b/src/shaders/line_pattern.fragment.glsl @@ -1,7 +1,7 @@ uniform lowp float u_device_pixel_ratio; uniform vec2 u_texsize; uniform float u_fade; -uniform mediump vec4 u_scale; +uniform mediump vec3 u_scale; uniform sampler2D u_image; @@ -13,12 +13,16 @@ varying float v_width; #pragma mapbox: define lowp vec4 pattern_from #pragma mapbox: define lowp vec4 pattern_to +#pragma mapbox: define lowp float pixel_ratio_from +#pragma mapbox: define lowp float pixel_ratio_to #pragma mapbox: define lowp float blur #pragma mapbox: define lowp float opacity void main() { #pragma mapbox: initialize mediump vec4 pattern_from #pragma mapbox: initialize mediump vec4 pattern_to + #pragma mapbox: initialize lowp float pixel_ratio_from + #pragma mapbox: initialize lowp float pixel_ratio_to #pragma mapbox: initialize lowp float blur #pragma mapbox: initialize lowp float opacity @@ -28,13 +32,12 @@ void main() { vec2 pattern_tl_b = pattern_to.xy; vec2 pattern_br_b = pattern_to.zw; - float pixelRatio = u_scale.x; - float tileZoomRatio = u_scale.y; - float fromScale = u_scale.z; - float toScale = u_scale.w; + float tileZoomRatio = u_scale.x; + float fromScale = u_scale.y; + float toScale = u_scale.z; - vec2 display_size_a = (pattern_br_a - pattern_tl_a) / pixelRatio; - vec2 display_size_b = (pattern_br_b - pattern_tl_b) / pixelRatio; + vec2 display_size_a = (pattern_br_a - pattern_tl_a) / pixel_ratio_from; + vec2 display_size_b = (pattern_br_b - pattern_tl_b) / pixel_ratio_to; vec2 pattern_size_a = vec2(display_size_a.x * fromScale / tileZoomRatio, display_size_a.y); vec2 pattern_size_b = vec2(display_size_b.x * toScale / tileZoomRatio, display_size_b.y); diff --git a/src/shaders/line_pattern.vertex.glsl b/src/shaders/line_pattern.vertex.glsl index 0b217ccdfff..fff2daa110a 100644 --- a/src/shaders/line_pattern.vertex.glsl +++ b/src/shaders/line_pattern.vertex.glsl @@ -32,6 +32,8 @@ varying float v_width; #pragma mapbox: define lowp float floorwidth #pragma mapbox: define lowp vec4 pattern_from #pragma mapbox: define lowp vec4 pattern_to +#pragma mapbox: define lowp float pixel_ratio_from +#pragma mapbox: define lowp float pixel_ratio_to void main() { #pragma mapbox: initialize lowp float blur @@ -42,6 +44,8 @@ void main() { #pragma mapbox: initialize lowp float floorwidth #pragma mapbox: initialize mediump vec4 pattern_from #pragma mapbox: initialize mediump vec4 pattern_to + #pragma mapbox: initialize lowp float pixel_ratio_from + #pragma mapbox: initialize lowp float pixel_ratio_to // the distance over which the line edge fades out. // Retina devices need a smaller distance to avoid aliasing. @@ -50,7 +54,7 @@ void main() { vec2 a_extrude = a_data.xy - 128.0; float a_direction = mod(a_data.z, 4.0) - 1.0; float a_linesofar = (floor(a_data.z / 4.0) + a_data.w * 64.0) * LINE_DISTANCE_SCALE; - // float tileRatio = u_scale.y; + // float tileRatio = u_scale.x; vec2 pos = floor(a_pos_normal * 0.5); // x is 1 if it's a round cap, 0 otherwise diff --git a/test/integration/render-tests/fill-extrusion-pattern/1.5x-on-1x-add-image/expected.png b/test/integration/render-tests/fill-extrusion-pattern/1.5x-on-1x-add-image/expected.png new file mode 100644 index 00000000000..554e1afa3a2 Binary files /dev/null and b/test/integration/render-tests/fill-extrusion-pattern/1.5x-on-1x-add-image/expected.png differ diff --git a/test/integration/render-tests/fill-extrusion-pattern/1.5x-on-1x-add-image/style.json b/test/integration/render-tests/fill-extrusion-pattern/1.5x-on-1x-add-image/style.json new file mode 100644 index 00000000000..833132a7a65 --- /dev/null +++ b/test/integration/render-tests/fill-extrusion-pattern/1.5x-on-1x-add-image/style.json @@ -0,0 +1,93 @@ +{ + "version": 8, + "metadata": { + "test": { + "height": 256, + "width": 256, + "pixelRatio": 1, + "operations": [ + [ + "wait" + ], + [ + "addImage", + "pattern", + "./image/marker.png", + { + "pixelRatio": 1.5 + } + ], + [ + "wait" + ], + [ + "addSource", + "geojson", + { + "type": "geojson", + "data": { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "property": 20 + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [ + -0.0001, + -0.0001 + ], + [ + -0.0001, + 0.0001 + ], + [ + 0.0001, + 0.0001 + ], + [ + 0.0001, + -0.0001 + ], + [ + -0.0001, + -0.0001 + ] + ] + ] + } + } + ] + } + } + ], + [ + "wait" + ], + [ + "addLayer", + { + "id": "extrusion", + "type": "fill-extrusion", + "source": "geojson", + "paint": { + "fill-extrusion-pattern": "pattern", + "fill-extrusion-height": 10 + } + } + ], + [ + "wait" + ] + ] + } + }, + "pitch": 60, + "zoom": 19, + "sources": {}, + "layers": [] +} diff --git a/test/integration/render-tests/fill-pattern/3x-on-2x-add-image/expected.png b/test/integration/render-tests/fill-pattern/3x-on-2x-add-image/expected.png new file mode 100644 index 00000000000..3116105e8eb Binary files /dev/null and b/test/integration/render-tests/fill-pattern/3x-on-2x-add-image/expected.png differ diff --git a/test/integration/render-tests/fill-pattern/3x-on-2x-add-image/style.json b/test/integration/render-tests/fill-pattern/3x-on-2x-add-image/style.json new file mode 100644 index 00000000000..485b531f73f --- /dev/null +++ b/test/integration/render-tests/fill-pattern/3x-on-2x-add-image/style.json @@ -0,0 +1,79 @@ +{ + "version": 8, + "metadata": { + "test": { + "width": 64, + "height": 64, + "pixelRatio": 2, + "operations": [ + [ + "wait" + ], + [ + "addImage", + "pattern", + "./image/marker.png", + { + "pixelRatio": 3 + } + ], + [ + "wait" + ], + [ + "addSource", + "geojson", + { + "type": "geojson", + "data": { + "type": "Polygon", + "coordinates": [ + [ + [ + -10, + -10 + ], + [ + -10, + 10 + ], + [ + 10, + 10 + ], + [ + 10, + -10 + ], + [ + -10, + -10 + ] + ] + ] + } + } + ], + [ + "wait" + ], + [ + "addLayer", + { + "id": "fill", + "type": "fill", + "source": "geojson", + "paint": { + "fill-pattern": "pattern" + } + } + ], + [ + "wait" + ] + ] + } + }, + "sources": {}, + "layers": [] +} diff --git a/test/integration/render-tests/line-pattern/3x-on-2x-add-image/expected.png b/test/integration/render-tests/line-pattern/3x-on-2x-add-image/expected.png new file mode 100644 index 00000000000..b3a33bba570 Binary files /dev/null and b/test/integration/render-tests/line-pattern/3x-on-2x-add-image/expected.png differ diff --git a/test/integration/render-tests/line-pattern/3x-on-2x-add-image/style.json b/test/integration/render-tests/line-pattern/3x-on-2x-add-image/style.json new file mode 100644 index 00000000000..425c467c887 --- /dev/null +++ b/test/integration/render-tests/line-pattern/3x-on-2x-add-image/style.json @@ -0,0 +1,66 @@ +{ + "version": 8, + "metadata": { + "test": { + "width": 64, + "height": 32, + "pixelRatio": 2, + "operations": [ + [ + "wait" + ], + [ + "addImage", + "pattern", + "./image/marker.png", + { + "pixelRatio": 3 + } + ], + [ + "wait" + ], + [ + "addSource", + "geojson", + { + "type": "geojson", + "data": { + "type": "LineString", + "coordinates": [ + [ + -20, + 0 + ], + [ + 20, + 0 + ] + ] + } + } + ], + [ + "wait" + ], + [ + "addLayer", + { + "id": "a", + "type": "line", + "source": "geojson", + "paint": { + "line-width": 8, + "line-pattern": "pattern" + } + } + ], + [ + "wait" + ] + ] + } + }, + "sources": {}, + "layers": [] +}