autumnplot-gl 3.2.0 → 4.0.0

package/lib/StationPlot.js

@@ -1,73 +1,222 @@
-import { kdTree } from "kd-tree-javascript";
-import { LngLat } from "./Map";
 import { PlotComponent } from "./PlotComponent";
-import { getMinZoom, normalizeOptions } from "./utils";
-class UnstructuredGrid {
-    constructor(coords) {
-        this.coords = coords;
+import { normalizeOptions } from "./utils";
+import { TextCollection } from "./TextCollection";
+import { Color } from "./Color";
+import Barbs from "./Barbs";
+const SYMBOLS = {
+    // Sky cover symbols
+    '0/8': 59658, '1/8': 59659, '2/8': 59660, '3/8': 59661, '4/8': 59662, '5/8': 59663, '6/8': 59664, '7/8': 59665, '8/8': 59666,
+    'clr': 59658, 'few': 59660, 'sct': 59662, 'bkn': 59664, 'ovc': 59666, 'obsc': 59667,
+    // Present weather symbols
+    'va': 59810, 'fu': 59810, 'hz': 59811, 'du': 59812, 'bldu': 59814, 'sa': 59814, 'blsa': 59814, 'vcblsa': 59814, 'vcbldu': 59814, 'blpy': 59814,
+    'po': 59816, 'vcpo': 59816, 'vcds': 59817, 'vcss': 59817,
+    'br': 59818, 'bcbr': 59818, 'bc': 59819, 'mifg': 59820,
+    'vcts': 59821, 'virga': 59822, 'vcsh': 59824, 'ts': 59825, 'thdr': 59825, 'vctshz': 59825,
+    'tsfzfg': 59825, 'tsbr': 59825, 'tsdz': 59825, 'vctsup': 59825,
+    '-tsup': 59825, 'tsup': 59825, '+tsup': 59825,
+    'sq': 59826, 'fc': 59827, '+fc': 59827,
+    'ds': 59839, 'ss': 59839, 'drsa': 59839, 'drdu': 59839, '+ds': 59842, '+ss': 59842,
+    'drsn': 59844, '+drsn': 59845, '-blsn': 59846, 'blsn': 59846, '+blsn': 59847, 'vcblsn': 59846,
+    'vcfg': 59848, 'bcfg': 59849, 'prfg': 59852, 'fg': 59853, 'fzfg': 59857,
+    '-vctsdz': 59859, '-dz': 59859, '-dzbr': 59859, 'vctsdz': 59861, 'dz': 59861, '+vctsdz': 59863, '+dz': 59863,
+    '-fzdz': 59864, '-fzdzsn': 59864, 'fzdz': 59865, '+fzdz': 59865, 'fzdzsn': 59865,
+    '-dzra': 59866, 'dzra': 59867, '+dzra': 59867, '-ra': 59869, '-rabr': 59869, 'ra': 59871, 'rabr': 59871, 'rafg': 59871, 'vcra': 59871, '+ra': 59873,
+    '-fzra': 59874, '-fzrasn': 59874, '-fzrabr': 59874, '-fzrapl': 59874, '-fzrasnpl': 59874, 'tsfzrapl': 59875, '-tsfzra': 59875,
+    'fzra': 59875, '+fzra': 59875, 'fzrasn': 59875, 'tsfzra': 59875,
+    '-dzsn': 59876, '-rasn': 59876, '-snra': 59876, '-sndz': 59876, 'rasn': 59877, '+rasn': 59877, 'snra': 59877, 'dzsn': 59877, 'sndz': 59877, '+dzsn': 59877, '+sndz': 59877,
+    '-sn': 59879, '-snbr': 59879, 'sn': 59881, '+sn': 59883, '-snsg': 59885, 'sg': 59885, '-sg': 59885, 'ic': 59886,
+    '-fzdzpl': 59887, '-fzdzplsn': 59887, 'fzdzpl': 59887, '-fzraplsn': 59887, 'fzrapl': 59887, '+fzrapl': 59887,
+    '-rapl': 59887, '-rasnpl': 59887, '-raplsn': 59887, '+rapl': 59887, 'rapl': 59887, '-snpl': 59887, 'snpl': 59887,
+    '-pl': 59887, 'pl': 59887, '-plsn': 59887, '-plra': 59887, 'plra': 59887, '-pldz': 59887, '+pl': 59887, 'plsn': 59887, 'plup': 59887, '+plsn': 59887,
+    '-sh': 59888, '-shra': 59888, 'sh': 59889, 'shra': 59889, '+sh': 59889, '+shra': 59889, '-shrasn': 59891, '-shsnra': 59891, '+shrabr': 59892,
+    'shrasn': 59892, '+shrasn': 59892, 'shsnra': 59892, '+shsnra': 59892, '-shsn': 59893, 'shsn': 59894, '+shsn': 59894,
+    '-gs': 59895, '-shgs': 59895, 'fzraplgs': 59896, '-sngs': 59896, 'gsplsn': 59896, 'gspl': 59896, 'plgssn': 59896, 'gs': 59896, 'shgs': 59896, '+gs': 59896, '+shgs': 59896,
+    '-gr': 59897, '-shgr': 59897, '-sngr': 59898, 'gr': 59898, 'shgr': 59898, '+gr': 59898, '+shgr': 59898,
+    '-tsrasn': 59907, 'tsrasn': 59907, '-tssnra': 59907, 'tssnra': 59907, '-vctsra': 59908, '-tsra': 59908, 'tsra': 59908, '-tsdz': 59908, 'vctsra': 59908,
+    'tspl': 59909, '-tssn': 59909, '-tspl': 59909, 'tssn': 59909, '-vctssn': 59909, 'vctssn': 59909, 'tsplsn': 59909, 'tssnpl': 59909, '-tssnpl': 59909, '-tsragr': 59910,
+    'tsrags': 59910, 'tsragr': 59910, 'tsgs': 59910, 'tsgr': 59910,
+    '+tsfzrapl': 59911, '+vctsra': 59912, '+tsra': 59912, '+tsfzra': 59912, '+tssn': 59913, '+tspl': 59913, '+tsplsn': 59913, '+vctssn': 59913,
+    'tssa': 59914, 'tsds': 59914, 'tsdu': 59914, '+tsgs': 59915, '+tsgr': 59915, '+tsrags': 59915, '+tsragr': 59915, 'in': 59750,
+    '-up': 59750, 'up': 59750, '+up': 59751, '-fzup': 59756, 'fzup': 59756, '+fzup': 59757,
+};
+const station_plot_opts_defaults = {
+    config: {},
+    thin_fac: 1,
+    font_face: 'Trebuchet MS',
+    font_size: 12,
+    font_url_template: '',
+};
+function positionToAlignmentAndOffset(pos, off_size) {
+    off_size = off_size === undefined ? 10 : off_size;
+    let ha, va;
+    let xoff, yoff;
+    if (pos == 'll' || pos == 'cl' || pos == 'ul') {
+        ha = 'right';
+        xoff = -off_size;
     }
-    getZoomThinning(thin_fac, map_max_zoom) {
-        let min_label_lon = null, min_label_lat = null, max_label_lon = null, max_label_lat = null;
-        this.coords.forEach(coord => {
-            if (min_label_lon === null || coord.lon < min_label_lon)
-                min_label_lon = coord.lon;
-            if (max_label_lon === null || coord.lon > max_label_lon)
-                max_label_lon = coord.lon;
-            if (min_label_lat === null || coord.lat < min_label_lat)
-                min_label_lat = coord.lat;
-            if (max_label_lat === null || coord.lat > max_label_lat)
-                max_label_lat = coord.lat;
-        });
-        if (min_label_lon === null || min_label_lat === null || max_label_lon === null || max_label_lat === null)
-            return [];
-        const kd_nodes = this.coords.map(c => ({ lon: c.lon, lat: c.lat, min_zoom: map_max_zoom }));
-        const tree = new kdTree(kd_nodes, (a, b) => Math.hypot(a.lon - b.lon, a.lat - b.lat), ['lon', 'lat']);
-        const { x: min_label_x, y: max_label_y } = new LngLat(min_label_lon, min_label_lat).toMercatorCoord();
-        const { x: max_label_x, y: min_label_y } = new LngLat(max_label_lon, max_label_lat).toMercatorCoord();
-        const thin_grid_width = max_label_x - min_label_x;
-        const thin_grid_height = max_label_y - min_label_y;
-        const ni_thin_grid = Math.round(thin_grid_width * thin_fac); // thin_fac was 4 / contour_label_spacing for the contour labels
-        const nj_thin_grid = Math.round(thin_grid_height * thin_fac);
-        const thin_grid_xs = [];
-        const thin_grid_ys = [];
-        for (let idx = 0; idx < ni_thin_grid; idx++) {
-            thin_grid_xs.push(min_label_x + (idx / ni_thin_grid) * thin_grid_width);
-        }
-        for (let jdy = 0; jdy < nj_thin_grid; jdy++) {
-            thin_grid_ys.push(min_label_y + (jdy / nj_thin_grid) * thin_grid_height);
-        }
-        for (let idx = 0; idx < ni_thin_grid; idx++) {
-            for (let jdy = 0; jdy < nj_thin_grid; jdy++) {
-                const zoom = getMinZoom(jdy, idx, Math.pow(2, map_max_zoom));
-                const grid_x = thin_grid_xs[idx];
-                const grid_y = thin_grid_ys[jdy];
-                const ll = LngLat.fromMercatorCoord(grid_x, grid_y);
-                const [label, dist] = tree.nearest({ lon: ll.lng, lat: ll.lat, min_zoom: 0 }, 1)[0];
-                label.min_zoom = zoom;
-            }
-        }
-        return kd_nodes.map(n => n.min_zoom);
+    else if (pos == 'lc' || pos == 'c' || pos == 'uc') {
+        ha = 'center';
+        xoff = 0;
     }
-}
-class ObsField {
-    constructor(data) {
-        this.grid = new UnstructuredGrid(data.map(d => d.coord));
-        this.data = data;
+    else {
+        ha = 'left';
+        xoff = off_size;
+    }
+    if (pos == 'll' || pos == 'lc' || pos == 'lr') {
+        va = 'top';
+        yoff = -off_size;
+    }
+    else if (pos == 'cl' || pos == 'c' || pos == 'cr') {
+        va = 'middle';
+        yoff = 0;
     }
+    else {
+        va = 'baseline';
+        yoff = off_size;
+    }
+    return { horizontal_align: ha, vertical_align: va, offset_x: xoff, offset_y: yoff };
 }
-const station_plot_opts_defaults = {};
+/**
+ * Station model plots for observed data
+ * @example
+ * // Specify how to set up the station plot
+ * const station_plot_locs = {
+ *     tmpf: {type: 'number', pos: 'ul', color: '#cc0000', formatter: val => val === null ? '' : val.toFixed(0)},
+ *     dwpf: {type: 'number', pos: 'll', color: '#00aa00', formatter: val => val === null ? '' : val.toFixed(0)},
+ *     wind: {type: 'barb', pos: 'c'},
+ *     preswx: {type: 'symbol', pos: 'cl', color: '#ff00ff'},
+ *     skyc: {type: 'symbol', pos: 'c'},
+ * };
+ *
+ * // Create the station plot
+ * const station_plot = new StationPlot(obs_field, {config: station_plot_locs, thin_fac: 8, font_size: 14});
+ */
 class StationPlot extends PlotComponent {
-    constructor(field, data_positions, opts) {
+    /**
+     * Create station plots
+     * @param field - A field containing the observed data
+     * @param opts  - Various options for the station plots
+     */
+    constructor(field, opts) {
         super();
         this.field = field;
-        this.data_positions = data_positions;
-        this.opts = normalizeOptions(opts, station_plot_opts_defaults);
+        this.opts = normalizeOptions(opts, station_plot_opts_defaults); // Is there a way to do this without invoking `as`?
+        this.gl_elems = null;
+        this.text_components = null;
+    }
+    /**
+     * Update the data displayed as station plots
+     * @param field - The new field to display as station plots
+     */
+    async updateField(field) {
+        this.field = field;
+        if (this.gl_elems === null)
+            return;
+        const map = this.gl_elems.map;
+        const gl = this.gl_elems.gl;
+        const barb_components = this.gl_elems.barb_components;
+        const map_style = map.getStyle();
+        const font_url_template = this.opts.font_url_template == '' ? map_style.glyphs : this.opts.font_url_template;
+        if (font_url_template === undefined)
+            throw "The map style doesn't have any glyph information. Please pass the font_url_template option to StationPlot";
+        const font_url = font_url_template.replace('{fontstack}', this.opts.font_face);
+        let ibarb = 0;
+        const sub_component_promises = Object.entries(this.opts.config).map(async ([k_, config]) => {
+            const k = k_;
+            if (config.type == 'number' || config.type == 'string') {
+                const pos = config.pos;
+                const color = config.color === undefined ? Color.fromHex('#000000') : Color.normalizeColor(config.color);
+                const halo_color = config.halo_color === undefined ? Color.fromHex('#ffffff') : Color.normalizeColor(config.halo_color);
+                const halo = config.halo === undefined ? true : config.halo;
+                const coords = this.field.grid.getEarthCoords();
+                const zoom = this.field.grid.getMinVisibleZoom(this.opts.thin_fac);
+                let text_specs;
+                if (config.type == 'number') {
+                    const comp = this.field.getScalar(k);
+                    const formatter = config.formatter === undefined ? (val) => val === null ? 'null' : val.toString() : config.formatter;
+                    text_specs = comp.map((v, i) => ({ text: formatter(v), lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
+                }
+                else {
+                    const comp = this.field.getStrings(k);
+                    text_specs = comp.map((v, i) => ({ text: v === null ? '' : v, lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
+                }
+                const tc_opts = {
+                    ...positionToAlignmentAndOffset(pos),
+                    font_size: this.opts.font_size, halo: halo,
+                    text_color: color, halo_color: halo_color,
+                };
+                return await TextCollection.make(gl, text_specs, font_url, tc_opts);
+            }
+            else if (config.type == 'barb') {
+                const comp = this.field.getVector(k);
+                const barb_comp = barb_components[ibarb++];
+                barb_comp.updateField(comp);
+            }
+            else if (config.type == 'symbol') {
+                const pos = config.pos;
+                const color = config.color === undefined ? Color.fromHex('#000000') : Color.normalizeColor(config.color);
+                const halo_color = config.halo_color === undefined ? Color.fromHex('#ffffff') : Color.normalizeColor(config.halo_color);
+                const halo = config.halo === undefined ? true : config.halo;
+                const comp = this.field.getStrings(k);
+                const coords = this.field.grid.getEarthCoords();
+                const zoom = this.field.grid.getMinVisibleZoom(this.opts.thin_fac);
+                const wxsym_font_url = font_url_template.replace('{fontstack}', 'wx_symbols');
+                const text_specs = comp.map((v, i) => ({ text: v === null ? '' : String.fromCharCode(SYMBOLS[v]),
+                    lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
+                const tc_opts = {
+                    ...positionToAlignmentAndOffset(pos),
+                    font_size: this.opts.font_size, halo: halo,
+                    text_color: color, halo_color: halo_color,
+                };
+                if (tc_opts.offset_x !== undefined)
+                    tc_opts.offset_x -= 3;
+                return await TextCollection.make(gl, text_specs, wxsym_font_url, tc_opts);
+            }
+            else {
+                throw `Unknown station plot configuration type ${config.type}`;
+            }
+        });
+        this.text_components = (await Promise.all(sub_component_promises)).filter((c) => c !== undefined);
+        map.triggerRepaint();
     }
+    /** @internal */
     async onAdd(map, gl) {
+        const barb_promises = Object.entries(this.opts.config).map(async ([k_, config]) => {
+            const k = k_;
+            if (config.type == 'barb') {
+                const comp = this.field.getVector(k);
+                const color = config.color === undefined ? '#000000' : config.color;
+                const barb_size = config.barb_size_multipler === undefined ? 1 : config.barb_size_multipler;
+                const barb_comp = new Barbs(comp, { thin_fac: this.opts.thin_fac, color: color, barb_size_multiplier: barb_size });
+                await barb_comp.onAdd(map, gl);
+                return barb_comp;
+            }
+        });
+        const barb_components = (await Promise.all(barb_promises)).filter((c) => c !== undefined);
+        this.gl_elems = {
+            map: map, gl: gl, barb_components: barb_components
+        };
+        this.updateField(this.field);
     }
-    render(gl, matrix) {
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
+    /** @internal */
+    render(gl, arg) {
+        if (this.gl_elems === null || this.text_components === null)
+            return;
+        const gl_elems = this.gl_elems;
+        const text_components = this.text_components;
+        const barb_components = this.gl_elems.barb_components;
+        const map_width = gl_elems.map.getCanvas().width;
+        const map_height = gl_elems.map.getCanvas().height;
+        const map_zoom = gl_elems.map.getZoom();
+        let itext = 0, ibarb = 0;
+        Object.values(this.opts.config).forEach(comp => {
+            if (comp.type == 'barb') {
+                barb_components[ibarb++].render(gl, arg);
+            }
+            else {
+                text_components[itext++].render(gl, arg, [map_width, map_height], map_zoom);
+            }
+        });
     }
 }
-export { StationPlot };
+export default StationPlot;

package/lib/TextCollection.d.ts

@@ -1,6 +1,7 @@
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { Color } from "./Color";
-import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+import { ShaderProgramManager } from "./ShaderManager";
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
 interface TextSpec {
     lat: number;
     lon: number;
@@ -16,17 +17,19 @@ interface TextCollectionOptions {
     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,23 +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,
@@ -38,11 +39,12 @@ 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;
 
@@ -52,8 +54,10 @@ 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);
@@ -65,9 +69,8 @@ void main() {
     }
 
     color.a *= alpha;
-    gl_FragColor = color;
+    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) => {
@@ -125,6 +128,7 @@ 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)
@@ -133,6 +137,7 @@ function createAtlas(pbf_glyphs) {
             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;
@@ -142,38 +147,49 @@ 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);
+        if (resp.status != 200) {
+            throw `Error ${resp.status} retrieving font pbf from '${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: new Color([0, 0, 0, 1]),
     halo_color: new Color([0, 0, 0, 1]),
-    halo: false
+    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;
@@ -185,7 +201,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);
@@ -214,17 +231,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;
@@ -241,12 +258,12 @@ class TextCollection {
             }
             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 (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 (this.opts.vertical_align == 'top') {
@@ -260,45 +277,63 @@ class TextCollection {
                 }
             }
         });
+        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.toRGBATuple(), 'u_halo_color': this.opts.halo_color.toRGBATuple(), '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();
+        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': -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();
-        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();
-        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();
+            }
         }
     }
 }