New text renderer. Use contex2d to create text texture.

Support all languages and fonts?
kalenkevich · Feb 12, 2024 · 11aa58d · 11aa58d
1 parent f8eae58
commit 11aa58d
Show file tree

Hide file tree

Showing 21 changed files with 350 additions and 511 deletions.
diff --git a/src/demo/map_styles.ts b/src/demo/map_styles.ts
@@ -160,8 +160,7 @@ export const VectorTileStyles: DataTileStyles = {
         type: MapTileFeatureType.text,
         color: ['$rgba', 0, 0, 0, 1],
         text: ['$get', 'properties.class'],
-        // font: 'opensans',
-        font: 'fontAtlas',
+        font: 'opensans',
         fontSize: 10,
       },
       minzoom: 12,
@@ -223,10 +222,9 @@ export const VectorTileStyles: DataTileStyles = {
       feature: {
         type: MapTileFeatureType.text,
         color: ['$rgba', 0, 0, 0, 1],
-        // show: ['$lte', ['$get', 'properties.rank'], 15],
+        show: ['$lte', ['$get', 'properties.rank'], 15],
         text: ['$get', 'properties.name'],
-        // font: 'opensans',
-        font: 'fontAtlas',
+        font: 'opensans',
         fontSize: [
           '$switch',
           ['$get', 'properties.class'],
@@ -261,8 +259,7 @@ export const VectorTileStyles: DataTileStyles = {
         type: MapTileFeatureType.text,
         color: ['$rgba', 0, 0, 0, 1],
         text: ['$get', 'properties.housenumber'],
-        // font: 'opensans',
-        font: 'fontAtlas',
+        font: 'opensans',
         fontSize: 10,
       },
       minzoom: 16,

diff --git a/src/map/atlas/atlas_config.ts b/src/map/atlas/atlas_config.ts
@@ -2,7 +2,7 @@ export interface AtlasTextrureConfig {
   name: string;
   width: number;
   height: number;
-  source: string | ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement;
+  source: string | ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | OffscreenCanvas;
   mapping: string | Record<string, AtlasTextrureMapping>;
 }
 
@@ -14,3 +14,9 @@ export interface AtlasTextrureMapping {
   visible: boolean;
   pixelRatio: number;
 }
+
+export interface TextureAtlas {
+  width: number;
+  height: number;
+  source: ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | OffscreenCanvas;
+}
diff --git a/src/map/atlas/atlas_manager.ts b/src/map/atlas/atlas_manager.ts
@@ -6,7 +6,7 @@ export interface AtlasTextureState {
   width: number;
   height: number;
   ready: boolean;
-  source: ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement;
+  source: ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | OffscreenCanvas;
   mapping: Record<string, AtlasTextrureMapping>;
 }
 

diff --git a/src/map/map.ts b/src/map/map.ts
@@ -156,6 +156,7 @@ export class GlideMap extends Evented<MapEventType> {
       this.mapOptions.tileStyles,
       this.mapOptions.tileBuffer || 1,
       this.mapOptions.tileStyles.tileSize,
+      this.pixelRatio,
       this.maxZoom,
       this.projection,
       this.atlasTextureManager

diff --git a/src/map/renderer/webgl/glyph/glyph_group_builder.ts b/src/map/renderer/webgl/glyph/glyph_group_builder.ts
@@ -12,13 +12,14 @@ export class GlyphGroupBuilder extends ObjectGroupBuilder<WebGlGlyph> {
     protected readonly projectionViewMat: mat3,
     protected readonly canvasWidth: number,
     protected readonly canvasHeight: number,
+    protected readonly pixelRatio: number,
     protected readonly zoom: number,
     protected readonly tileSize: number,
     protected readonly projection: Projection,
     protected readonly featureFlags: MapFeatureFlags,
     private readonly atlasesMappingState: AtlasTextureMappingState
   ) {
-    super(projectionViewMat, canvasWidth, canvasHeight, zoom, tileSize, projection, featureFlags);
+    super(projectionViewMat, canvasWidth, canvasHeight, pixelRatio, zoom, tileSize, projection, featureFlags);
   }
 
   addObject(glyph: WebGlGlyph): void {
@@ -51,15 +52,14 @@ export class GlyphGroupBuilder extends ObjectGroupBuilder<WebGlGlyph> {
 
       const textureWidth = textureAtlas.width;
       const textureHeight = textureAtlas.height;
-
-      const customScaleFactor = 0.0001;
-      const glyphScaledWidth = glyphMapping.width / glyphMapping.pixelRatio / this.canvasWidth;
+      const glyphScaledWidth = this.scalarScale(glyphMapping.width / glyphMapping.pixelRatio);
+      const glyphScaledHeight = this.scalarScale(glyphMapping.height / glyphMapping.pixelRatio);
 
       let [x1, y1] = this.projection.fromLngLat([glyph.center[0], glyph.center[1]]);
-      x1 = x1 - (glyphScaledWidth / 2) * customScaleFactor;
-      y1 = y1 - (glyphScaledWidth / 2) * customScaleFactor;
-      const x2 = x1 + glyphScaledWidth * customScaleFactor;
-      const y2 = y1 + glyphScaledWidth * customScaleFactor;
+      x1 = x1 - glyphScaledWidth / 2;
+      y1 = y1 - glyphScaledHeight / 2;
+      const x2 = x1 + glyphScaledWidth;
+      const y2 = y1 + glyphScaledHeight;
 
       const u1 = glyphMapping.x / textureWidth;
       const v1 = glyphMapping.y / textureHeight;

diff --git a/src/map/renderer/webgl/glyph/glyph_program.ts b/src/map/renderer/webgl/glyph/glyph_program.ts
@@ -35,14 +35,18 @@ export class GlyphProgram extends ObjectProgram {
     this.setupTextures();
   }
 
-  public link(): void {
+  public onLink(): void {
     const gl = this.gl;
 
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
     gl.depthMask(false);
-    gl.useProgram(this.program);
-    this.setFeatureFlags();
+  }
+
+  public onUnlink() {
+    const gl = this.gl;
+
+    gl.disable(gl.BLEND);
   }
 
   protected setupTextures() {
@@ -55,7 +59,6 @@ export class GlyphProgram extends ObjectProgram {
       gl.activeTexture(gl.TEXTURE0 + textureIndex);
       gl.bindTexture(gl.TEXTURE_2D, texture);
       gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-      // gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureInfo.source);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

diff --git a/src/map/renderer/webgl/glyph/glyph_text_group_builder.ts b/src/map/renderer/webgl/glyph/glyph_text_group_builder.ts
diff --git a/src/map/renderer/webgl/line/line_program.ts b/src/map/renderer/webgl/line/line_program.ts
@@ -39,15 +39,19 @@ export class LineProgram extends ObjectProgram {
     this.gl.bindVertexArray(null);
   }
 
-  link() {
-    this.gl.useProgram(this.program);
-    this.setFeatureFlags();
-
+  public onLink(): void {
     const gl = this.gl;
+
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   }
 
+  public onUnlink() {
+    const gl = this.gl;
+
+    gl.disable(gl.BLEND);
+  }
+
   drawObjectGroup(lineGroup: WebGlLineBufferredGroup) {
     const gl = this.gl;
 

diff --git a/src/map/renderer/webgl/object/object_group_builder.ts b/src/map/renderer/webgl/object/object_group_builder.ts
@@ -11,6 +11,7 @@ export abstract class ObjectGroupBuilder<ObjectType extends WebGlObject> {
     protected readonly projectionViewMat: mat3,
     protected readonly canvasWidth: number,
     protected readonly canvasHeight: number,
+    protected readonly pixelRatio: number,
     protected readonly zoom: number,
     protected readonly tileSize: number,
     protected readonly projection: Projection,
@@ -40,5 +41,5 @@ export abstract class ObjectGroupBuilder<ObjectType extends WebGlObject> {
     return [-1.0 + position[0] * 2.0, +1.0 - position[1] * 2.0];
   }
 
-  abstract build(): WebGlObjectBufferredGroup;
+  abstract build(): Promise<WebGlObjectBufferredGroup> | WebGlObjectBufferredGroup;
 }
diff --git a/src/map/renderer/webgl/object/object_program.ts b/src/map/renderer/webgl/object/object_program.ts
@@ -120,9 +120,17 @@ export abstract class ObjectProgram {
   link() {
     this.gl.useProgram(this.program);
     this.setFeatureFlags();
-    this.gl.disable(this.gl.BLEND);
+    this.onLink();
   }
 
+  unlink() {
+    this.onUnlink();
+  }
+
+  abstract onLink(): void;
+
+  abstract onUnlink(): void;
+
   setMatrix(matrix: mat3) {
     this.gl.uniformMatrix3fv(this.u_matrixLocation, false, matrix);
   }

diff --git a/src/map/renderer/webgl/point/point_program.ts b/src/map/renderer/webgl/point/point_program.ts
@@ -13,6 +13,10 @@ export class PointProgram extends ObjectProgram {
     super(gl, featureFlags, vertexShaderSource, fragmentShaderSource);
   }
 
+  onLink(): void {}
+
+  onUnlink(): void {}
+
   drawObjectGroup(objectGroup: WebGlPointBufferredGroup) {
     const gl = this.gl;
 

diff --git a/src/map/renderer/webgl/polygon/polygon_program.ts b/src/map/renderer/webgl/polygon/polygon_program.ts
@@ -16,6 +16,10 @@ export class PolygonProgram extends ObjectProgram {
     super(gl, featureFlags, vertexShaderSource, fragmentShaderSource);
   }
 
+  onLink(): void {}
+
+  onUnlink(): void {}
+
   drawObjectGroup(objectGroup: WebGlPolygonBufferredGroup) {
     const gl = this.gl;
 

diff --git a/src/map/renderer/webgl/text/text.ts b/src/map/renderer/webgl/text/text.ts
@@ -1,5 +1,6 @@
 import { vec4, vec2 } from 'gl-matrix';
 import { MapTileFeatureType } from '../../../tile/tile';
+import { TextureAtlas } from '../../../atlas/atlas_config';
 import {
   WebGlObject,
   WebGlObjectBufferredGroup,
@@ -20,12 +21,23 @@ export interface WebGlText extends WebGlObject {
   borderColor: vec4;
 }
 
+export interface TextMapping {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  text: string;
+  font: string;
+  fontSize: number;
+}
+
 export interface WebGlTextBufferredGroup extends WebGlObjectBufferredGroup {
   type: MapTileFeatureType.text;
   size: number; // group size | number of instances;
   numElements: number; // number of elements
-  color: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 4, Float32Array>; // Array<vec4>;
+  texture: TextureAtlas;
   vertecies: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 2, Float32Array>; // Array<vec2>;
-  borderWidth: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 1, Float32Array>; // Array<number>;
-  borderColor: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 4, Float32Array>; // Array<vec4>;
+  textcoords: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 2, Float32Array>; // Array<vec2>;
+  color: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 4, Float32Array>; // Array<vec4>;
+  mappings: TextMapping[];
 }