autumnplot-gl 3.1.0 → 4.0.0-beta

package/lib/TextCollection.d.ts

@@ -1,5 +1,7 @@
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
-import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { Color } from "./Color";
+import { ShaderProgramManager } from "./ShaderManager";
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
 interface TextSpec {
     lat: number;
     lon: number;
@@ -12,20 +14,22 @@ interface TextCollectionOptions {
     horizontal_align?: HorizontalAlign;
     vertical_align?: VerticalAlign;
     font_size?: number;
-    text_color?: [number, number, number];
-    halo_color?: [number, number, number];
+    text_color?: Color;
+    halo_color?: Color;
     halo?: boolean;
+    offset_x?: number;
+    offset_y?: number;
 }
 declare class TextCollection {
-    readonly program: WGLProgram;
+    readonly shader_manager: ShaderProgramManager;
     readonly anchors: WGLBuffer;
     readonly offsets: WGLBuffer;
     readonly texcoords: WGLBuffer;
     readonly texture: WGLTexture;
     readonly opts: Required<TextCollectionOptions>;
     private constructor();
-    static make(gl: WebGLAnyRenderingContext, text_locs: TextSpec[], fontstack_url: string, opts?: TextCollectionOptions): Promise<TextCollection>;
-    render(gl: WebGLAnyRenderingContext, matrix: number[], [map_width, map_height]: [number, number], map_zoom: number): void;
+    static make(gl: WebGLAnyRenderingContext, text_locs: TextSpec[], fontstack_url_template: string, opts?: TextCollectionOptions): Promise<TextCollection>;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg, [map_width, map_height]: [number, number], map_zoom: number): void;
 }
 export { TextCollection };
-export type { TextSpec, TextCollectionOptions };
+export type { TextSpec, TextCollectionOptions, HorizontalAlign, VerticalAlign };

package/lib/TextCollection.js

@@ -1,22 +1,24 @@
-import { isWebGL2Ctx } from "./AutumnTypes";
+import { getRendererData, isWebGL2Ctx } from "./AutumnTypes";
+import { Color } from "./Color";
 import { LngLat } from "./Map";
+import { ShaderProgramManager } from "./ShaderManager";
 import { Cache, normalizeOptions } from "./utils";
-import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
 import Protobuf from 'pbf';
 import potpack from "potpack";
-const text_vertex_shader_src = `
-uniform mat4 u_matrix;
+const text_vertex_shader_src = `#version 300 es
+
 uniform int u_offset;
 uniform highp float u_map_width;
 uniform highp float u_map_height;
 uniform highp float u_map_zoom;
 uniform highp float u_font_size;
 
-attribute vec3 a_pos;
-attribute vec2 a_offset;
-attribute vec2 a_tex_coord;
+in vec3 a_pos;
+in vec2 a_offset;
+in vec2 a_tex_coord;
 
-varying highp vec2 v_tex_coord;
+out highp vec2 v_tex_coord;
 
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
     return mat4(x_scale, 0.0,     0.0,     0.0,
@@ -37,38 +39,43 @@ void main() {
 
     mat4 map_stretch_matrix = scalingMatrix(u_map_height / u_map_width, 1., 1.);
 
-    gl_Position = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0) + u_font_size / 12. * 1.5 * map_stretch_matrix * vec4(offset, 0., 0.);
+    gl_Position = projectTile(a_pos.xy + globe_offset) + u_font_size / 12. * 1.5 * map_stretch_matrix * vec4(offset, 0., 0.);
     v_tex_coord = a_tex_coord;
 }`
-const text_fragment_shader_src = `
-varying highp vec2 v_tex_coord;
+const text_fragment_shader_src = `#version 300 es
+
+in highp vec2 v_tex_coord;
 uniform sampler2D u_sdf_sampler;
 uniform int u_is_halo;
 
-uniform lowp vec3 u_text_color;
-uniform lowp vec3 u_halo_color;
+uniform lowp vec4 u_text_color;
+uniform lowp vec4 u_halo_color;
 
 #define SDF_FILL 0.75
 #define SDF_HALO 0.45
 
+out highp vec4 fragColor;
+
 void main() {
-    highp float sdf_val = texture2D(u_sdf_sampler, v_tex_coord).r;
+    highp float sdf_val = texture(u_sdf_sampler, v_tex_coord).r;
 
     lowp float step_width = 0.08;
     lowp float alpha = smoothstep(SDF_FILL - step_width, SDF_FILL + step_width, sdf_val);
 
-    lowp vec3 color = u_is_halo == 1 ? u_halo_color : u_text_color;
+    lowp vec4 color = u_is_halo == 1 ? u_halo_color : u_text_color;
 
     if (u_is_halo == 1) {
         alpha = min(smoothstep(SDF_HALO - step_width, SDF_HALO + step_width, sdf_val), 1.0 - alpha);
     }
 
-    gl_FragColor = vec4(color, alpha);
+    color.a *= alpha;
+    fragColor = color;
 }`
-const program_cache = new Cache((gl) => new WGLProgram(gl, text_vertex_shader_src, text_fragment_shader_src));
 const PADDING = 3;
 function parseFontPBF(data) {
     const readGlyph = (tag, glyph, pbf) => {
+        if (pbf === undefined)
+            return;
         switch (tag) {
             case 1:
                 glyph.id = pbf.readVarint();
@@ -94,12 +101,16 @@ function parseFontPBF(data) {
         }
     };
     const readFontStack = (tag, glyphs, pbf) => {
+        if (glyphs === undefined || pbf === undefined)
+            return;
         if (tag == 3) {
             const glyph = pbf.readMessage(readGlyph, {});
             glyphs.push(glyph);
         }
     };
     const readFontStacks = (tag, glyphs, pbf) => {
+        if (pbf === undefined)
+            return;
         if (tag == 1) {
             pbf.readMessage(readFontStack, glyphs);
         }
@@ -117,12 +128,16 @@ function createAtlas(pbf_glyphs) {
     const { w: img_width, h: img_height } = potpack(bins);
     const atlas_data = new Uint8Array(img_width * img_height);
     const glyphs = {};
+    let max_glyph_height = 0;
     glyph_bins.forEach(glyph_bin => {
         const { bin, glyph } = glyph_bin;
+        if (bin.x === undefined || bin.y === undefined)
+            throw `Potpack couldn't pack this pot, I guess?`;
         glyphs[glyph.id] = {
             id: glyph.id, width: glyph.width, height: glyph.height, left: glyph.left, top: glyph.top,
             atlas_i: bin.x, atlas_j: bin.y, advance: glyph.advance
         };
+        max_glyph_height = Math.max(max_glyph_height, glyph.height);
         for (let i = 0; i < glyph.width; i++) {
             for (let j = 0; j < glyph.height; j++) {
                 const glyph_idx = i + glyph.width * j;
@@ -132,38 +147,46 @@ function createAtlas(pbf_glyphs) {
         }
     });
     const glyph_M = glyphs['M'.charCodeAt(0)];
-    const baseline = glyph_M.height - glyph_M.top;
-    const top = -glyph_M.top;
+    const baseline = glyph_M === undefined ? max_glyph_height : glyph_M.height - glyph_M.top;
+    const top = glyph_M === undefined ? 0 : -glyph_M.top;
     return { atlas: atlas_data, atlas_width: img_width, atlas_height: img_height, baseline: baseline, top: top, glyph_info: glyphs };
 }
-async function getFontAtlas(url) {
-    const resp = await fetch(url);
-    const blob = await resp.blob();
-    const data_buffer = await blob.arrayBuffer();
-    // Parse the PBF and get the glyph data
-    const glyphs = parseFontPBF(new Uint8Array(data_buffer));
+const FONT_ATLAS_CACHE = new Cache(async (urls) => {
+    const promises = urls.map(async (url) => {
+        const resp = await fetch(url);
+        const blob = await resp.blob();
+        const data_buffer = await blob.arrayBuffer();
+        // Parse the PBF and get the glyph data
+        return parseFontPBF(new Uint8Array(data_buffer));
+    });
+    const glyphs = (await Promise.all(promises)).flat();
     // Create an atlas for the glyphs
     return createAtlas(glyphs);
-}
+});
 const text_collection_opt_defaults = {
     horizontal_align: 'left',
     vertical_align: 'baseline',
     font_size: 12,
-    text_color: [0, 0, 0],
-    halo_color: [0, 0, 0],
-    halo: false
+    text_color: new Color([0, 0, 0, 1]),
+    halo_color: new Color([0, 0, 0, 1]),
+    halo: false,
+    offset_x: 0,
+    offset_y: 0
 };
 class TextCollection {
     constructor(gl, text_locs, font_atlas, opts) {
-        this.program = program_cache.getValue(gl);
         this.opts = normalizeOptions(opts, text_collection_opt_defaults);
         const is_webgl2 = isWebGL2Ctx(gl);
         const format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
         const type = gl.UNSIGNED_BYTE;
         const row_alignment = 1;
+        const empty_atlas = font_atlas.atlas_width == 0 || font_atlas.atlas_height == 0 || font_atlas.atlas.length == 0;
+        const atlas_width = empty_atlas ? 1 : font_atlas.atlas_width;
+        const atlas_height = empty_atlas ? 1 : font_atlas.atlas_height;
+        const atlas_data = empty_atlas ? new Uint8Array([0, 0, 0, 0]) : font_atlas.atlas;
         const image = {
-            'format': format, 'type': type, 'width': font_atlas.atlas_width, 'height': font_atlas.atlas_height,
-            'image': font_atlas.atlas, 'row_alignment': row_alignment, 'mag_filter': gl.LINEAR
+            'format': format, 'type': type, 'width': atlas_width, 'height': atlas_height,
+            'image': atlas_data, 'row_alignment': row_alignment, 'mag_filter': gl.LINEAR
         };
         this.texture = new WGLTexture(gl, image);
         const n_verts = text_locs.map(tl => tl.text.length).reduce((a, b) => a + b, 0) * 6;
@@ -175,7 +198,8 @@ class TextCollection {
             const { lat, lon, text } = loc;
             const min_zoom = loc.min_zoom === undefined ? 0 : loc.min_zoom;
             const { x: anchor_x, y: anchor_y } = new LngLat(lon, lat).toMercatorCoord();
-            let x_offset = 0;
+            let x_offset = this.opts.offset_x;
+            let y_offset = this.opts.offset_y;
             const init_i_off = i_off;
             for (let i = 0; i < text.length; i++) {
                 const glyph_code = text.charCodeAt(i);
@@ -204,17 +228,17 @@ class TextCollection {
                 anchor_data[i_anch++] = anchor_y;
                 anchor_data[i_anch++] = min_zoom;
                 offset_data[i_off++] = x_offset;
-                offset_data[i_off++] = font_atlas.baseline + glyph_info.top - glyph_info.height;
+                offset_data[i_off++] = y_offset + font_atlas.baseline + glyph_info.top - glyph_info.height;
                 offset_data[i_off++] = x_offset;
-                offset_data[i_off++] = font_atlas.baseline + glyph_info.top - glyph_info.height;
+                offset_data[i_off++] = y_offset + font_atlas.baseline + glyph_info.top - glyph_info.height;
                 offset_data[i_off++] = x_offset + glyph_info.width;
-                offset_data[i_off++] = font_atlas.baseline + glyph_info.top - glyph_info.height;
+                offset_data[i_off++] = y_offset + font_atlas.baseline + glyph_info.top - glyph_info.height;
                 offset_data[i_off++] = x_offset;
-                offset_data[i_off++] = font_atlas.baseline + glyph_info.top;
+                offset_data[i_off++] = y_offset + font_atlas.baseline + glyph_info.top;
                 offset_data[i_off++] = x_offset + glyph_info.width;
-                offset_data[i_off++] = font_atlas.baseline + glyph_info.top;
+                offset_data[i_off++] = y_offset + font_atlas.baseline + glyph_info.top;
                 offset_data[i_off++] = x_offset + glyph_info.width;
-                offset_data[i_off++] = font_atlas.baseline + glyph_info.top;
+                offset_data[i_off++] = y_offset + font_atlas.baseline + glyph_info.top;
                 tc_data[i_tc++] = glyph_info.atlas_i / font_atlas.atlas_width;
                 tc_data[i_tc++] = (glyph_info.atlas_j + glyph_info.height) / font_atlas.atlas_height;
                 tc_data[i_tc++] = glyph_info.atlas_i / font_atlas.atlas_width;
@@ -229,66 +253,84 @@ class TextCollection {
                 tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
                 x_offset += glyph_info.advance - glyph_info.left;
             }
-            if (opts.horizontal_align == 'center') {
+            if (this.opts.horizontal_align == 'center') {
                 for (let i = init_i_off; i < init_i_off + text.length * 12; i += 2) {
-                    offset_data[i] -= x_offset / 2;
+                    offset_data[i] -= (x_offset - this.opts.offset_x) / 2;
                 }
             }
-            else if (opts.horizontal_align == 'right') {
+            else if (this.opts.horizontal_align == 'right') {
                 for (let i = init_i_off; i < init_i_off + text.length * 12; i += 2) {
-                    offset_data[i] -= x_offset;
+                    offset_data[i] -= (x_offset - this.opts.offset_x);
                 }
             }
-            if (opts.vertical_align == 'top') {
+            if (this.opts.vertical_align == 'top') {
                 for (let i = init_i_off + 1; i < init_i_off + text.length * 12; i += 2) {
                     offset_data[i] -= (font_atlas.baseline - font_atlas.top);
                 }
             }
-            else if (opts.vertical_align == 'middle') {
+            else if (this.opts.vertical_align == 'middle') {
                 for (let i = init_i_off + 1; i < init_i_off + text.length * 12; i += 2) {
                     offset_data[i] -= (font_atlas.baseline - font_atlas.top) / 2;
                 }
             }
         });
+        this.shader_manager = new ShaderProgramManager(text_vertex_shader_src, text_fragment_shader_src, []);
         this.anchors = new WGLBuffer(gl, anchor_data, 3, gl.TRIANGLE_STRIP);
         this.offsets = new WGLBuffer(gl, offset_data, 2, gl.TRIANGLE_STRIP);
         this.texcoords = new WGLBuffer(gl, tc_data, 2, gl.TRIANGLE_STRIP);
     }
-    static async make(gl, text_locs, fontstack_url, opts) {
-        const atlas = await getFontAtlas(fontstack_url);
+    static async make(gl, text_locs, fontstack_url_template, opts) {
+        const FONT_GROUP_SIZE = 256;
+        const characters = text_locs.map(tl => [...tl.text]).flat().map(c => c.charCodeAt(0)).filter((c, i, ary) => ary.indexOf(c) == i);
+        const char_code_min = Math.min(...characters);
+        const char_code_max = Math.max(...characters);
+        const stack_start = Math.floor(char_code_min / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
+        const stack_end = Math.floor(char_code_max / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
+        const fontstack_urls = [];
+        for (let istack = stack_start; istack <= stack_end; istack += FONT_GROUP_SIZE) {
+            fontstack_urls.push(fontstack_url_template.replace('{range}', `${istack}-${istack + FONT_GROUP_SIZE - 1}`));
+        }
+        const atlas = await FONT_ATLAS_CACHE.getValue(fontstack_urls);
+        if (atlas.atlas_height == 0 || atlas.atlas_width == 0 || atlas.atlas.length == 0)
+            console.warn(`No font data from '${fontstack_url_template}'`);
         return new TextCollection(gl, text_locs, atlas, opts);
     }
-    render(gl, matrix, [map_width, map_height], map_zoom) {
+    render(gl, arg, [map_width, map_height], map_zoom) {
+        const render_data = getRendererData(arg);
+        const program = this.shader_manager.getShaderProgram(gl, render_data.shaderData);
         const uniforms = {
-            'u_matrix': matrix, 'u_map_width': map_width, 'u_map_height': map_height, 'u_map_zoom': map_zoom, 'u_font_size': this.opts.font_size,
-            'u_text_color': this.opts.text_color, 'u_halo_color': this.opts.halo_color, 'u_offset': 0
+            'u_map_width': map_width, 'u_map_height': map_height, 'u_map_zoom': map_zoom, 'u_font_size': this.opts.font_size,
+            'u_text_color': this.opts.text_color.toRGBATuple(), 'u_halo_color': this.opts.halo_color.toRGBATuple(), 'u_offset': 0,
+            ...this.shader_manager.getShaderUniforms(render_data)
         };
         uniforms['u_is_halo'] = this.opts.halo ? 1 : 0;
-        this.program.use({ 'a_pos': this.anchors, 'a_offset': this.offsets, 'a_tex_coord': this.texcoords }, uniforms, { 'u_sdf_sampler': this.texture });
+        program.use({ 'a_pos': this.anchors, 'a_offset': this.offsets, 'a_tex_coord': this.texcoords }, uniforms, { 'u_sdf_sampler': this.texture });
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-        this.program.draw();
-        if (this.opts.halo) {
-            this.program.setUniforms({ 'u_is_halo': 0 });
-            this.program.draw();
-        }
-        this.program.setUniforms({ 'u_offset': -2, 'u_is_halo': this.opts.halo ? 1 : 0 });
-        this.program.draw();
-        if (this.opts.halo) {
-            this.program.setUniforms({ 'u_is_halo': 0 });
-            this.program.draw();
-        }
-        this.program.setUniforms({ 'u_offset': -1, 'u_is_halo': this.opts.halo ? 1 : 0 });
-        this.program.draw();
+        program.draw();
         if (this.opts.halo) {
-            this.program.setUniforms({ 'u_is_halo': 0 });
-            this.program.draw();
+            program.setUniforms({ 'u_is_halo': 0 });
+            program.draw();
         }
-        this.program.setUniforms({ 'u_offset': 1, 'u_is_halo': this.opts.halo ? 1 : 0 });
-        this.program.draw();
-        if (this.opts.halo) {
-            this.program.setUniforms({ 'u_is_halo': 0 });
-            this.program.draw();
+        if (render_data.type != 'maplibre' || !render_data.shaderData.define.includes('GLOBE')) {
+            program.setUniforms({ 'u_offset': -2, 'u_is_halo': this.opts.halo ? 1 : 0 });
+            program.draw();
+            if (this.opts.halo) {
+                program.setUniforms({ 'u_is_halo': 0 });
+                program.draw();
+            }
+            program.setUniforms({ 'u_offset': -1, 'u_is_halo': this.opts.halo ? 1 : 0 });
+            program.draw();
+            if (this.opts.halo) {
+                program.setUniforms({ 'u_is_halo': 0 });
+                program.draw();
+            }
+            program.setUniforms({ 'u_offset': 1, 'u_is_halo': this.opts.halo ? 1 : 0 });
+            program.draw();
+            if (this.opts.halo) {
+                program.setUniforms({ 'u_is_halo': 0 });
+                program.draw();
+            }
         }
     }
 }