Fix render scale issues.

Calculate relevant scaled value for line width, circle radius, etc.
Provide zoom, tileSize and canvas width and height to the scale.

src/demo/map_styles.ts

@@ -117,7 +117,7 @@ export const VectorTileStyles: DataTileStyles = {
         type: MapTileFeatureType.line,
         show: ['$lte', ['$get', 'properties.admin_level'], 7],
         color: ['$rgba', 120, 123, 140, 1],
-        width: 10,
+        width: 2,
       },
       maxzoom: 15,
       minzoom: 0,
@@ -147,7 +147,7 @@ export const VectorTileStyles: DataTileStyles = {
           ['motorway', ['$rgba', 233, 201, 43, 1]],
           ['$default', ['$rgba', 215, 218, 226, 1]],
         ],
-        width: ['$switch', ['$get', 'properties.class'], ['primary', 24], ['$default', 8]],
+        width: ['$switch', ['$get', 'properties.class'], ['primary', 6], ['$default', 4]],
       },
       minzoom: 6,
     },

src/map/atlas/atlas_manager.ts

@@ -84,9 +84,9 @@ export class AtlasTextureManager {
           const char = String.fromCharCode(i);
 
           mapping[char] = {
-            x: currentX,
+            x: currentX + 5,
             y: currentY,
-            width,
+            width: width,
             height,
             pixelRatio,
             visible: true,

src/map/camera/map_camera.ts

@@ -132,13 +132,14 @@ export class MapCamera {
 
   private updateProjectionMatrix() {
     // update camera matrix
-    const zoomScale = 1 / Math.pow(2, this.zoom); // inverted
-    const tileWidthScale = this.tileSize / this.width;
-    const tileHeightScale = this.tileSize / this.height;
+    const zoomScale = Math.pow(2, this.zoom);
 
     const cameraMat = mat3.create();
     mat3.translate(cameraMat, cameraMat, [this.x, this.y]);
-    mat3.scale(cameraMat, cameraMat, [zoomScale / tileWidthScale, zoomScale / tileHeightScale]);
+    mat3.scale(cameraMat, cameraMat, [
+      this.width / (this.tileSize * zoomScale),
+      this.height / (this.tileSize * zoomScale),
+    ]);
     mat3.rotate(cameraMat, cameraMat, (Math.PI / 180) * this.rotationInDegree);
 
     // update view projection matrix

src/map/map.ts

@@ -46,7 +46,7 @@ export interface MapOptions {
   zoom?: number;
   /** Initial rotation value of the map. */
   rotation?: number;
-  /** Number of tiles to featch around. */
+  /** Number of tiles to fetch around. */
   tileBuffer?: number;
   /** Custom value of device pixel ratio. By defauled would be used `window.devicePixelRatio`. */
   devicePixelRatio?: number;
@@ -107,8 +107,8 @@ export class GlideMap extends Evented<MapEventType> {
   private minZoom: number;
   private maxZoom: number;
 
-  statsWidget: HTMLElement;
-  frameStats: {
+  private statsWidget: HTMLElement;
+  private frameStats: {
     elapsed: number;
   };
 
@@ -149,6 +149,7 @@ export class GlideMap extends Evented<MapEventType> {
       this.mapOptions.tilesUrl,
       this.mapOptions.tileStyles,
       this.mapOptions.tileBuffer || 1,
+      this.mapOptions.tileStyles.tileSize,
       this.maxZoom,
       this.projection,
       this.fontManager,
@@ -300,9 +301,9 @@ export class GlideMap extends Evented<MapEventType> {
   }
 
   rerender(): Promise<void> {
-    this.tilesGrid.updateTiles(this.camera, this.width, this.height);
+    const zoom = this.getZoom();
+    this.tilesGrid.updateTiles(this.camera, zoom, this.width, this.height);
 
-    this.renderQueue.clear();
     return this.renderQueue.render(() => {
       this.render();
       this.fire(MapEventType.RENDER);
@@ -317,9 +318,9 @@ export class GlideMap extends Evented<MapEventType> {
 
     const tiles = this.tilesGrid.getCurrentViewTiles();
     const zoom = this.getZoom();
-    const projectionMatrix = this.camera.getProjectionMatrix();
+    const viewMatrix = this.camera.getProjectionMatrix();
 
-    this.renderer.render(tiles, zoom, projectionMatrix);
+    this.renderer.render(tiles, viewMatrix, zoom, this.mapOptions.tileStyles.tileSize);
 
     this.statsWidget.style.display = 'none';
 

src/map/render_queue/render_queue.ts

@@ -39,11 +39,11 @@ export class RenderQueue {
     }
 
     this.isActive = true;
-    const renderFn = this.queue[index][0];
-    const resolveFn = this.queue[index][1];
+    const [renderFn, resolveFn] = this.queue[index];
 
     // invoke render
     renderFn();
+
     // we don't need to cancel it anymore
     delete this.rafIds[index];
     this.rafIds[index + 1] = requestAnimationFrame(() => this.invokeRender(index + 1));

src/map/renderer/renderer.ts

@@ -13,5 +13,5 @@ export interface Renderer {
 
   resize(width: number, height: number): void;
 
-  render(tiles: MapTile[], zoom: number, matrix: mat3): void;
+  render(tiles: MapTile[], viewMatrix: mat3, zoom: number, tileSize: number): void;
 }

src/map/renderer/webgl/glyph/glyph_group_builder.ts

@@ -9,10 +9,12 @@ export class GlyphGroupBuilder extends ObjectGroupBuilder<WebGlGlyph> {
   constructor(
     protected readonly canvasWidth: number,
     protected readonly canvasHeight: number,
+    protected readonly zoom: number,
+    protected readonly tileSize: number,
     protected readonly projection: Projection,
     private readonly atlasesMappingState: AtlasTextureMappingState
   ) {
-    super(canvasWidth, canvasHeight, projection);
+    super(canvasWidth, canvasHeight, zoom, tileSize, projection);
   }
 
   addObject(glyph: WebGlGlyph): void {

src/map/renderer/webgl/glyph/glyph_shaders.ts

@@ -8,6 +8,9 @@ export default {
 
     uniform mat3 u_matrix;
     uniform float u_zoom;
+    uniform float u_width;
+    uniform float u_height;
+    uniform float u_tile_size;
 
     attribute vec2 a_position;
     attribute vec2 a_texCoord;

src/map/renderer/webgl/glyph/glyph_text_group_builder.ts

@@ -13,10 +13,12 @@ export class GlyphTextGroupBuilder extends ObjectGroupBuilder<WebGlText> {
   constructor(
     protected readonly canvasWidth: number,
     protected readonly canvasHeight: number,
+    protected readonly zoom: number,
+    protected readonly tileSize: number,
     protected readonly projection: Projection,
     private readonly atlasesMappingState: AtlasTextureMappingState
   ) {
-    super(canvasWidth, canvasHeight, projection);
+    super(canvasWidth, canvasHeight, zoom, tileSize, projection);
   }
 
   addObject(text: WebGlText): void {

src/map/renderer/webgl/line/line_program.ts

@@ -18,8 +18,8 @@ export class LineProgram extends ObjectProgram {
   protected a_colorBuffer: WebGLBuffer;
   protected a_colorAttributeLocation: number = 3;
 
-  protected a_widthBuffer: WebGLBuffer;
-  protected a_widthAttributeLocation: number = 4;
+  protected a_line_widthBuffer: WebGLBuffer;
+  protected a_line_widthAttributeLocation: number = 4;
 
   protected vao: WebGLVertexArrayObjectOES;
 
@@ -68,11 +68,11 @@ export class LineProgram extends ObjectProgram {
     gl.vertexAttribPointer(this.a_colorAttributeLocation, 4, this.gl.FLOAT, false, 0, 0);
     this.gl.vertexAttribDivisor(this.a_colorAttributeLocation, 1);
 
-    this.a_widthBuffer = gl.createBuffer();
-    gl.enableVertexAttribArray(this.a_widthAttributeLocation);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.a_widthBuffer);
-    gl.vertexAttribPointer(this.a_widthAttributeLocation, 1, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(this.a_widthAttributeLocation, 1);
+    this.a_line_widthBuffer = gl.createBuffer();
+    gl.enableVertexAttribArray(this.a_line_widthAttributeLocation);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.a_line_widthBuffer);
+    gl.vertexAttribPointer(this.a_line_widthAttributeLocation, 1, this.gl.FLOAT, false, 0, 0);
+    this.gl.vertexAttribDivisor(this.a_line_widthAttributeLocation, 1);
 
     this.gl.bindVertexArray(null);
   }
@@ -99,7 +99,7 @@ export class LineProgram extends ObjectProgram {
     gl.bindBuffer(gl.ARRAY_BUFFER, this.a_colorBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, lineGroup.color.buffer as Float32Array, gl.STATIC_DRAW);
 
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.a_widthBuffer);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.a_line_widthBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, lineGroup.width.buffer as Float32Array, gl.STATIC_DRAW);
 
     gl.drawArraysInstanced(gl.TRIANGLES, 0, POSITION_BUFFER.length / 2, lineGroup.numElements - 1);

src/map/renderer/webgl/line/line_shaders.ts

@@ -13,15 +13,22 @@ export default {
 
     uniform mat3 u_matrix;
     uniform float u_zoom;
+    uniform float u_width;
+    uniform float u_height;
+    uniform float u_tile_size;
 
     attribute vec2 a_position;
     attribute vec3 point_a;
     attribute vec3 point_b;
     attribute vec4 a_color;
-    attribute float a_width;
+    attribute float a_line_width;
 
     varying vec4 v_color;
 
+    float getScaledLineWidth() {
+      return a_line_width / (pow(2.0, u_zoom) * u_tile_size);
+    }
+
     void main() {
       if (point_a.z == -1.0) {
         // trasparent
@@ -30,11 +37,13 @@ export default {
         v_color = a_color;
       }
 
+      float lineWidth = getScaledLineWidth();
+
       vec2 point_a_projected = mercatorProject(point_a);
       vec2 point_b_projected = mercatorProject(point_b);
       vec2 xBasis = point_b_projected - point_a_projected;
       vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
-      vec2 pos = point_a_projected + xBasis * a_position.x + yBasis * a_width * a_position.y;
+      vec2 pos = point_a_projected + xBasis * a_position.x + yBasis * lineWidth * a_position.y;
 
       gl_Position = vec4(applyMatrix(u_matrix, clipSpace(pos)), 0, 1);
     }

src/map/renderer/webgl/object/object_group_builder.ts

@@ -8,6 +8,8 @@ export abstract class ObjectGroupBuilder<ObjectType extends WebGlObject> {
   constructor(
     protected readonly canvasWidth: number,
     protected readonly canvasHeight: number,
+    protected readonly zoom: number,
+    protected readonly tileSize: number,
     protected readonly projection: Projection
   ) {}
 
@@ -17,5 +19,10 @@ export abstract class ObjectGroupBuilder<ObjectType extends WebGlObject> {
     return this.objects.length === 0;
   }
 
+  /** Scales value for webgl canvas value according to the current zoom and tileSize */
+  scale(val: number): number {
+    return val / (Math.pow(2, this.zoom) * this.tileSize);
+  }
+
   abstract build(): WebGlObjectBufferredGroup;
 }

src/map/renderer/webgl/object/object_program.ts

@@ -22,6 +22,9 @@ export abstract class ObjectProgram {
   // uniform locations
   protected u_matrixLocation: WebGLUniformLocation;
   protected u_zoomLocation: WebGLUniformLocation;
+  protected u_widthLocation: WebGLUniformLocation;
+  protected u_heightLocation: WebGLUniformLocation;
+  protected u_tile_sizeLocation: WebGLUniformLocation;
 
   protected vao: WebGLVertexArrayObjectOES;
 
@@ -101,6 +104,9 @@ export abstract class ObjectProgram {
   protected setupUniforms() {
     this.u_matrixLocation = this.gl.getUniformLocation(this.program, 'u_matrix');
     this.u_zoomLocation = this.gl.getUniformLocation(this.program, 'u_zoom');
+    this.u_widthLocation = this.gl.getUniformLocation(this.program, 'u_width');
+    this.u_heightLocation = this.gl.getUniformLocation(this.program, 'u_height');
+    this.u_tile_sizeLocation = this.gl.getUniformLocation(this.program, 'u_tile_size');
   }
 
   link() {
@@ -116,5 +122,17 @@ export abstract class ObjectProgram {
     this.gl.uniform1f(this.u_zoomLocation, zoom);
   }
 
+  setWidth(width: number) {
+    this.gl.uniform1f(this.u_widthLocation, width);
+  }
+
+  setHeight(height: number) {
+    this.gl.uniform1f(this.u_heightLocation, height);
+  }
+
+  setTileSize(tileSize: number) {
+    this.gl.uniform1f(this.u_tile_sizeLocation, tileSize);
+  }
+
   abstract drawObjectGroup(objectGroup: WebGlObjectBufferredGroup): void;
 }

src/map/renderer/webgl/point/point_builder.ts

@@ -9,7 +9,7 @@ export class PointGroupBuilder extends ObjectGroupBuilder<WebGlPoint> {
     const objectSize = verticesFromPoint(
       this.vertecies,
       this.projection.fromLngLat([point.center[0], point.center[1]]),
-      point.radius,
+      this.scale(point.radius),
       point.components
     );
 

src/map/renderer/webgl/point/point_shaders.ts

@@ -13,6 +13,9 @@ export default {
 
     uniform mat3 u_matrix;
     uniform float u_zoom;
+    uniform float u_width;
+    uniform float u_height;
+    uniform float u_tile_size;
 
     attribute vec2 a_position;
     attribute vec4 a_color;

src/map/renderer/webgl/polygon/polygon_shaders.ts

@@ -13,6 +13,9 @@ export default {
 
     uniform mat3 u_matrix;
     uniform float u_zoom;
+    uniform float u_width;
+    uniform float u_height;
+    uniform float u_tile_size;
 
     attribute vec2 a_position;
     attribute vec4 a_color;

src/map/renderer/webgl/text/text_builder.ts

@@ -6,14 +6,17 @@ import { FontManager } from '../../../font/font_manager';
 import { MapTileFeatureType } from '../../../tile/tile';
 import { Projection } from '../../../geo/projection/projection';
 
+/** @deprecated Please use GlyphGroupBuilder instead. */
 export class TextGroupBuilder extends ObjectGroupBuilder<WebGlText> {
   constructor(
     protected readonly canvasWidth: number,
     protected readonly canvasHeight: number,
+    protected readonly zoom: number,
+    protected readonly tileSize: number,
     protected readonly projection: Projection,
     private readonly fontManager: FontManager
   ) {
-    super(canvasWidth, canvasHeight, projection);
+    super(canvasWidth, canvasHeight, zoom, tileSize, projection);
   }
 
   addObject(text: WebGlText) {

src/map/renderer/webgl/text/text_shaders.ts

@@ -11,11 +11,14 @@ export default {
     ${MAT_UTILS}
     ${MERCATOR_PROJECTION_UTILS}
 
-    attribute vec2 a_position;
-    attribute vec4 a_color;
-
     uniform mat3 u_matrix;
     uniform float u_zoom;
+    uniform float u_width;
+    uniform float u_height;
+    uniform float u_tile_size;
+
+    attribute vec2 a_position;
+    attribute vec4 a_color;
 
     varying vec4 v_color;