autumnplot-gl 3.2.0 → 4.0.0

package/lib/Contour.d.ts

@@ -1,9 +1,11 @@
-import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
+import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
 import { MapLikeType } from './Map';
 import { PlotComponent } from './PlotComponent';
 import { RawScalarField } from './RawField';
 import { LineStyle } from './PolylineCollection';
 import { ColorMap } from './Colormap';
+import { StructuredGrid } from './Grid';
+/** Options for {@link Contour} components */
 interface ContourOptions {
     /**
      * The color of the contours as a hex color string
@@ -39,6 +41,10 @@ interface ContourOptions {
      * @default '-'
      */
     line_style?: LineStyle | ((level: number) => LineStyle);
+    /**
+     *
+     */
+    quad_as_tri?: boolean;
 }
 /**
  * A field of contoured data.
@@ -47,7 +53,7 @@ interface ContourOptions {
  * // meters).
  * const contours = new Contour(height_field, {color: '#000000', interval: 30});
  */
-declare class Contour<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+declare class Contour<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private field;
     readonly opts: Required<ContourOptions>;
     private gl_elems;
@@ -57,12 +63,12 @@ declare class Contour<ArrayType extends TypedArray, MapType extends MapLikeType>
      * @param field - The field to contour
      * @param opts  - Options for creating the contours
      */
-    constructor(field: RawScalarField<ArrayType>, opts: ContourOptions);
+    constructor(field: RawScalarField<ArrayType, GridType>, opts: ContourOptions);
     /**
      * Update the data displayed as contours
      * @param field - The new field to contour
      */
-    updateField(field: RawScalarField<ArrayType>): Promise<void>;
+    updateField(field: RawScalarField<ArrayType, GridType>): Promise<void>;
     getContours(): Promise<import("./AutumnTypes").ContourData>;
     /**
      * @internal
@@ -73,8 +79,9 @@ declare class Contour<ArrayType extends TypedArray, MapType extends MapLikeType>
      * @internal
      * Render the contours
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
+/** Options for {@link ContourLabels} */
 interface ContourLabelOptions {
     /**
      * Number of decimal places to use in the contour labels
@@ -110,13 +117,26 @@ interface ContourLabelOptions {
      * @default false
      */
     halo?: boolean;
+    /**
+     * Label density. 2 makes the labels twice as dense, 0.5 makes them half as dense.
+     * @default 1
+     */
+    density?: number;
 }
-declare class ContourLabels<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+/**
+ * Label the contours on a plot
+ * @example
+ * // Contour some data
+ * const contours = new Contour(height_field, {color: '#000000', interval: 30});
+ * // Label the contours
+ * const labels = new ContourLabels(contours, {text_color: '#ffffff', halo: true});
+ */
+declare class ContourLabels<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private readonly contours;
     private gl_elems;
     private text_collection;
     private readonly opts;
-    constructor(contours: Contour<ArrayType, MapType>, opts?: ContourLabelOptions);
+    constructor(contours: Contour<ArrayType, GridType, MapType>, opts?: ContourLabelOptions);
     /**
      * Update contour labels when the field for the associated Contour object has been changed.
      */
@@ -130,7 +150,7 @@ declare class ContourLabels<ArrayType extends TypedArray, MapType extends MapLik
      * @internal
      * Render the contour labels
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
 export default Contour;
 export { ContourLabels };

package/lib/Contour.js

@@ -4,14 +4,15 @@ import { PolylineCollection, isLineStyle } from './PolylineCollection';
 import { TextCollection } from './TextCollection';
 import { Color } from './Color';
 import { normalizeOptions } from './utils';
-import { kdTree } from 'kd-tree-javascript';
+import { UnstructuredGrid } from './Grid';
 const contour_opt_defaults = {
     color: '#000000',
     cmap: null,
     interval: 1,
     levels: null,
     line_width: 2,
-    line_style: '-'
+    line_style: '-',
+    quad_as_tri: false
 };
 /**
  * A field of contoured data.
@@ -87,7 +88,7 @@ class Contour extends PlotComponent {
     }
     async getContours() {
         const levels = this.opts.levels === null ? undefined : this.opts.levels;
-        return await this.field.getContours({ interval: this.opts.interval, levels: levels });
+        return await this.field.getContours({ interval: this.opts.interval, levels: levels, quad_as_tri: this.opts.quad_as_tri });
     }
     /**
      * @internal
@@ -103,18 +104,16 @@ class Contour extends PlotComponent {
      * @internal
      * Render the contours
      */
-    render(gl, matrix) {
+    render(gl, arg) {
         if (this.gl_elems === null || this.contours === null)
             return;
         const gl_elems = this.gl_elems;
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
         const zoom = gl_elems.map.getZoom();
         const map_width = gl_elems.map.getCanvas().width;
         const map_height = gl_elems.map.getCanvas().height;
         const bearing = gl_elems.map.getBearing();
         const pitch = gl_elems.map.getPitch();
-        this.contours.forEach(cnt => cnt.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch));
+        this.contours.forEach(cnt => cnt.render(gl, arg, [map_width, map_height], zoom, bearing, pitch));
     }
 }
 const contour_label_opt_defaults = {
@@ -124,8 +123,17 @@ const contour_label_opt_defaults = {
     font_url_template: '',
     text_color: '#000000',
     halo_color: '#000000',
-    halo: false
+    halo: false,
+    density: 1
 };
+/**
+ * Label the contours on a plot
+ * @example
+ * // Contour some data
+ * const contours = new Contour(height_field, {color: '#000000', interval: 30});
+ * // Label the contours
+ * const labels = new ContourLabels(contours, {text_color: '#ffffff', halo: true});
+ */
 class ContourLabels extends PlotComponent {
     constructor(contours, opts) {
         super();
@@ -146,14 +154,13 @@ class ContourLabels extends PlotComponent {
         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 ContourLabels";
-        const font_url = font_url_template.replace('{range}', '0-255').replace('{fontstack}', this.opts.font_face);
+        const font_url = font_url_template.replace('{fontstack}', this.opts.font_face);
         const label_pos = [];
         const contour_data = await this.contours.getContours();
         const contour_levels = Object.keys(contour_data).map(parseFloat);
         contour_levels.sort((a, b) => a - b);
         const map_max_zoom = map.getMaxZoom();
-        const contour_label_spacing = 0.01 * Math.pow(2, 7 - map_max_zoom);
-        let min_label_lat = null, max_label_lat = null, min_label_lon = null, max_label_lon = null;
+        const contour_label_spacing = 0.006 / this.opts.density * Math.pow(2, 7 - map_max_zoom);
         Object.entries(contour_data).forEach(([level, contours]) => {
             const icntr = (parseFloat(level) - contour_levels[0]);
             const level_str = level.toString();
@@ -176,63 +183,29 @@ class ContourLabels extends PlotComponent {
                 let n_labels_placed = 0;
                 for (let idist = 1; idist < dist.length; idist++) {
                     const target_dist = contour_label_spacing * (n_labels_placed + (icntr / 2) % 1);
+                    // This works fine when contour_label_spacing > the spacing between points along a contour, but when you allow the map to zoom in
+                    //  (and therefore contour_label_spacing gets small), dist[idist] outruns target_dist, so it doesn't put any more labels after the first.
                     if (dist[idist - 1] <= target_dist && target_dist < dist[idist]) {
                         const pt1 = contour[idist - 1];
                         const pt2 = contour[idist];
                         const alpha = (target_dist - dist[idist - 1]) / (dist[idist] - dist[idist - 1]);
                         const pt_lon = (1 - alpha) * pt1[0] + alpha * pt2[0];
                         const pt_lat = (1 - alpha) * pt1[1] + alpha * pt2[1];
-                        if (min_label_lon === null || pt_lon < min_label_lon)
-                            min_label_lon = pt_lon;
-                        if (max_label_lon === null || pt_lon > max_label_lon)
-                            max_label_lon = pt_lon;
-                        if (min_label_lat === null || pt_lat < min_label_lat)
-                            min_label_lat = pt_lat;
-                        if (max_label_lat === null || pt_lat > max_label_lat)
-                            max_label_lat = pt_lat;
-                        label_pos.push({ lon: pt_lon, lat: pt_lat, min_zoom: map_max_zoom, text: level_str });
+                        label_pos.push({ coord: { lon: pt_lon, lat: pt_lat }, text: level_str });
                         n_labels_placed++;
                     }
                 }
             });
         });
-        const tree = new kdTree(label_pos, (a, b) => Math.hypot(a.lon - b.lon, a.lat - b.lat), ['lon', 'lat']);
-        if (min_label_lon === null || min_label_lat === null || max_label_lon === null || max_label_lat === null) {
-            return;
-        }
-        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(4 * thin_grid_width / contour_label_spacing);
-        const nj_thin_grid = Math.round(4 * thin_grid_height / contour_label_spacing);
-        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);
-        }
-        let skip = 1;
-        for (let zoom = map_max_zoom - 1; zoom >= 0; zoom--) {
-            for (let idx = 0; idx < ni_thin_grid; idx += skip) {
-                for (let jdy = 0; jdy < nj_thin_grid; jdy += skip) {
-                    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, text: "" }, 1)[0];
-                    label.min_zoom = zoom;
-                }
-            }
-            skip *= 2;
-        }
+        const label_grid = new UnstructuredGrid(label_pos.map(lp => lp.coord));
+        const min_zoom = label_grid.getMinVisibleZoom(4);
+        const text_specs = label_pos.map((lp, ilp) => ({ ...lp.coord, min_zoom: min_zoom[ilp], text: lp.text }));
         const tc_opts = {
             horizontal_align: 'center', vertical_align: 'middle', font_size: this.opts.font_size,
             halo: this.opts.halo,
             text_color: Color.fromHex(this.opts.text_color), halo_color: Color.fromHex(this.opts.halo_color),
         };
-        this.text_collection = await TextCollection.make(gl, label_pos, font_url, tc_opts);
+        this.text_collection = await TextCollection.make(gl, text_specs, font_url, tc_opts);
         map.triggerRepaint();
     }
     /**
@@ -249,14 +222,14 @@ class ContourLabels extends PlotComponent {
      * @internal
      * Render the contour labels
      */
-    render(gl, matrix) {
+    render(gl, arg) {
         if (this.gl_elems === null || this.text_collection === null)
             return;
         const gl_elems = this.gl_elems;
         const map_width = gl_elems.map.getCanvas().width;
         const map_height = gl_elems.map.getCanvas().height;
         const map_zoom = gl_elems.map.getZoom();
-        this.text_collection.render(gl, matrix, [map_width, map_height], map_zoom);
+        this.text_collection.render(gl, arg, [map_width, map_height], map_zoom);
     }
 }
 export default Contour;

package/lib/ContourCreator.d.ts

@@ -2,7 +2,11 @@ import { MarchingSquaresModule } from './cpp/marchingsquares';
 import './cpp/marchingsquares.wasm';
 import { Grid } from "./Grid";
 import { ContourData, TypedArray } from "./AutumnTypes";
-declare function initMSModule(): Promise<MarchingSquaresModule>;
+interface InitMSModuleOpts {
+    document_script?: string;
+}
+declare function initMSModule(opts: InitMSModuleOpts): Promise<MarchingSquaresModule>;
+/** Options for contouring data via {@link RawScalarField.getContours | RawScalarField.getContours()} */
 interface FieldContourOpts {
     /**
      * The interval at which to create contours. The field will be contoured at this interval from its minimum to its maximum.
@@ -12,6 +16,10 @@ interface FieldContourOpts {
      * Contour the field at these specific levels.
      */
     levels?: number[];
+    /**
+     * Add triangles in the contouring, which takes longer and generates more detailed (not necessarily smoother or better) contours
+     */
+    quad_as_tri?: boolean;
 }
 declare function contourCreator<ArrayType extends TypedArray>(data: ArrayType, grid: Grid, opts: FieldContourOpts): Promise<ContourData>;
 export { contourCreator, initMSModule };

package/lib/ContourCreator.js

@@ -1,9 +1,9 @@
 import Module from './cpp/marchingsquares';
 import './cpp/marchingsquares.wasm';
 let msm_promise = null;
-function initMSModule() {
+function initMSModule(opts) {
     if (msm_promise === null) {
-        msm_promise = Module();
+        msm_promise = Module({ 'locateFile': (fname, dir) => (opts.document_script === undefined ? dir : opts.document_script) + fname });
     }
     return msm_promise;
 }
@@ -12,12 +12,13 @@ async function contourCreator(data, grid, opts) {
         throw "Must supply either an interval or levels to contourCreator()";
     }
     const interval = opts.interval === undefined ? 0 : opts.interval;
-    const msm = await initMSModule();
+    const quad_as_tri = opts.quad_as_tri === undefined ? false : opts.quad_as_tri;
+    const msm = await initMSModule({});
     const grid_coords = grid.getGridCoords();
     const getContourLevels = data instanceof Float32Array ? msm.getContourLevelsFloat32 : msm.getContourLevelsFloat16;
     const makeContours = data instanceof Float32Array ? msm.makeContoursFloat32 : msm.makeContoursFloat16;
     const levels = opts.levels === undefined ? getContourLevels(data, grid.ni, grid.nj, interval) : opts.levels;
-    const contours = makeContours(data, grid_coords.x, grid_coords.y, levels, (x, y) => grid.transform(x, y, { inverse: true }));
+    const contours = makeContours(data, grid_coords.x, grid_coords.y, levels, (x, y) => grid.transform(x, y, { inverse: true }), quad_as_tri);
     return contours;
 }
 export { contourCreator, initMSModule };

package/lib/Fill.d.ts

@@ -2,37 +2,51 @@ import { PlotComponent } from './PlotComponent';
 import { ColorMap } from './Colormap';
 import { RawScalarField } from './RawField';
 import { MapLikeType } from './Map';
-import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
+import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
+import { StructuredGrid } from './Grid';
+/** Options for {@link ContourFill} components */
 interface ContourFillOptions {
-    /** The color map to use when creating the fills */
-    cmap: ColorMap;
+    /** The color maps to use when creating the fills */
+    cmap: ColorMap | ColorMap[];
+    /**
+     * A mask specifying where to use each color map. This should be on the same grid as the RawScalarField passed.
+     * A 1 in the mask means to use the first colormap, a 2 means to use the second colormap, etc.
+     */
+    cmap_mask?: Uint8Array | null;
     /**
      * The opacity for the filled contours
      * @default 1
      */
     opacity?: number;
 }
+/** Options for {@link Raster} components */
 interface RasterOptions {
     /** The color map to use when creating the raster plot */
-    cmap: ColorMap;
+    cmap: ColorMap | ColorMap[];
+    /**
+     * A mask specifying where to use each color map. This should be on the same grid as the RawScalarField passed.
+     * A 1 in the mask means to use the first colormap, a 2 means to use the second colormap, etc.
+     */
+    cmap_mask?: Uint8Array | null;
     /**
      * The opacity for the raster plot
      * @default 1
      */
     opacity?: number;
 }
-declare class PlotComponentFill<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+declare class PlotComponentFill<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private field;
     readonly opts: Required<ContourFillOptions>;
     private readonly cmap_gpu;
     private gl_elems;
     private fill_texture;
+    private mask_texture;
     protected image_mag_filter: number | null;
     protected cmap_mag_filter: number | null;
-    constructor(field: RawScalarField<ArrayType>, opts: ContourFillOptions);
-    updateField(field: RawScalarField<ArrayType>): Promise<void>;
+    constructor(field: RawScalarField<ArrayType, GridType>, opts: ContourFillOptions);
+    updateField(field: RawScalarField<ArrayType, GridType>, mask?: Uint8Array): Promise<void>;
     onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
 /**
  * A raster (i.e. pixel) plot
@@ -40,18 +54,18 @@ declare class PlotComponentFill<ArrayType extends TypedArray, MapType extends Ma
  * // Create a raster plot with the provided color map
  * const raster = new Raster(wind_speed_field, {cmap: color_map});
  */
-declare class Raster<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponentFill<ArrayType, MapType> {
+declare class Raster<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponentFill<ArrayType, GridType, MapType> {
     /**
      * Create a raster plot
      * @param field - The field to create the raster plot from
      * @param opts  - Options for creating the raster plot
      */
-    constructor(field: RawScalarField<ArrayType>, opts: RasterOptions);
+    constructor(field: RawScalarField<ArrayType, GridType>, opts: RasterOptions);
     /**
      * Update the data displayed as a raster plot
      * @param field - The new field to display as a raster plot
      */
-    updateField(field: RawScalarField<ArrayType>): Promise<void>;
+    updateField(field: RawScalarField<ArrayType, GridType>, mask?: Uint8Array): Promise<void>;
     /**
      * @internal
      * Add the raster plot to a map
@@ -69,18 +83,18 @@ declare class Raster<ArrayType extends TypedArray, MapType extends MapLikeType>
  * // Create a field of filled contours with the provided color map
  * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
  */
-declare class ContourFill<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponentFill<ArrayType, MapType> {
+declare class ContourFill<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponentFill<ArrayType, GridType, MapType> {
     /**
      * Create a filled contoured field
      * @param field - The field to create filled contours from
      * @param opts  - Options for creating the filled contours
      */
-    constructor(field: RawScalarField<ArrayType>, opts: ContourFillOptions);
+    constructor(field: RawScalarField<ArrayType, GridType>, opts: ContourFillOptions);
     /**
      * Update the data displayed as filled contours
      * @param field - The new field to display as filled contours
      */
-    updateField(field: RawScalarField<ArrayType>): Promise<void>;
+    updateField(field: RawScalarField<ArrayType, GridType>, mask?: Uint8Array): Promise<void>;
     /**
      * @internal
      * Add the filled contours to a map

package/lib/Fill.js

@@ -1,49 +1,70 @@
-import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
+import { PlotComponent } from './PlotComponent';
 import { ColorMap, ColorMapGPUInterface } from './Colormap';
-import { WGLProgram, WGLTexture } from 'autumn-wgl';
+import { WGLTexture } from 'autumn-wgl';
+import { RawScalarField } from './RawField';
+import { getRendererData } from './AutumnTypes';
 import { normalizeOptions } from './utils';
-const contourfill_vertex_shader_src = `uniform mat4 u_matrix;
+import { ShaderProgramManager } from './ShaderManager';
+const contourfill_vertex_shader_src = `#version 300 es
+
 uniform int u_offset;
 
-attribute vec2 a_pos;
-attribute vec2 a_tex_coord;
+in vec2 a_pos;
+in vec2 a_tex_coord;
 
-varying highp vec2 v_tex_coord;
+out highp vec2 v_tex_coord;
 
 void main() {
     float globe_width = 1.;
     vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
 
-    gl_Position = u_matrix * vec4(a_pos + globe_offset, 0.0, 1.0);
+    gl_Position = projectTile(a_pos.xy + globe_offset);
     v_tex_coord = a_tex_coord;
 }`
-const contourfill_fragment_shader_src = `varying highp vec2 v_tex_coord;
+const contourfill_fragment_shader_src = `#version 300 es
+
+in highp vec2 v_tex_coord;
 
 uniform sampler2D u_fill_sampler;
+
+#ifdef MASK
+uniform sampler2D u_mask_sampler;
+#endif
+
 uniform highp float u_opacity;
+#ifdef MASK
+uniform int u_mask_val;
+#endif
 
-bool isnan(highp float val) {
-    return ( val < 0.0 || 0.0 < val || val == 0.0 ) ? false : true;
-}
+out highp vec4 fragColor;
 
 void main() {
-    highp float fill_val = texture2D(u_fill_sampler, v_tex_coord).r;
+    highp float fill_val = texture(u_fill_sampler, v_tex_coord).r;
+
+    int draw_mask = 1;
+
+#ifdef MASK
+    highp float mask_val = texture(u_mask_sampler, v_tex_coord).r;
+    draw_mask = int(mask_val * 255.0) == u_mask_val ? 1 : 0;
+#endif
 
-    if (isnan(fill_val)) {
+    if (isnan(fill_val) || draw_mask == 0) {
         discard;
     }
 
     lowp vec4 color = apply_colormap(fill_val);
     color.a = color.a * u_opacity;
-    gl_FragColor = color;
+    fragColor = color;
 }`
 const default_cmap = new ColorMap([0, 1], ['#000000'], { overflow_color: '#000000', underflow_color: '#000000' });
 const contour_fill_opt_defaults = {
-    cmap: default_cmap,
+    cmap: [default_cmap],
+    cmap_mask: null,
     opacity: 1,
 };
 const raster_opt_defaults = {
-    cmap: default_cmap,
+    cmap: [default_cmap],
+    cmap_mask: null,
     opacity: 1,
 };
 class PlotComponentFill extends PlotComponent {
@@ -51,65 +72,91 @@ class PlotComponentFill extends PlotComponent {
         super();
         this.field = field;
         this.opts = normalizeOptions(opts, contour_fill_opt_defaults);
-        this.cmap_gpu = new ColorMapGPUInterface(this.opts.cmap);
+        this.opts.cmap = Array.isArray(this.opts.cmap) ? this.opts.cmap : [this.opts.cmap];
+        this.cmap_gpu = this.opts.cmap.map(cm => new ColorMapGPUInterface(cm));
         this.gl_elems = null;
         this.fill_texture = null;
+        this.mask_texture = null;
         this.image_mag_filter = null;
         this.cmap_mag_filter = null;
     }
-    async updateField(field) {
+    async updateField(field, mask) {
         this.field = field;
         if (this.image_mag_filter === null || this.cmap_mag_filter === null) {
-            throw `Implement magnification filtes in a subclass`;
+            throw `Implement magnification filters in a subclass`;
         }
         if (this.gl_elems === null)
             return;
         const gl = this.gl_elems.gl;
         const map = this.gl_elems.map;
-        const tex_data = this.field.getTextureData();
-        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, !(tex_data instanceof Float32Array));
-        const fill_image = { 'format': format, 'type': type,
-            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': tex_data,
-            'mag_filter': this.image_mag_filter, 'row_alignment': row_alignment,
-        };
+        const fill_image = this.field.getWGLTextureSpec(gl, this.image_mag_filter);
         if (this.fill_texture === null) {
             this.fill_texture = new WGLTexture(gl, fill_image);
         }
         else {
             this.fill_texture.setImageData(fill_image);
         }
+        if (mask !== undefined) {
+            if (this.opts.cmap_mask === null) {
+                console.warn("A mask was passed to updateField on a Fill component that didn't have a mask. The updated mask will be ignored.");
+                return;
+            }
+            const mask_field = new RawScalarField(this.field.grid, mask);
+            const mask_image = mask_field.getWGLTextureSpec(gl, gl.NEAREST);
+            if (this.mask_texture === null) {
+                this.mask_texture = new WGLTexture(gl, mask_image);
+            }
+            else {
+                this.mask_texture.setImageData(mask_image);
+            }
+        }
         map.triggerRepaint();
     }
     async onAdd(map, gl) {
         // Basic procedure for the filled contours inspired by https://blog.mbq.me/webgl-weather-globe/
-        if (this.image_mag_filter === null || this.cmap_mag_filter === null) {
-            throw `Implement magnification filtes in a subclass`;
-        }
-        const program = new WGLProgram(gl, contourfill_vertex_shader_src, ColorMapGPUInterface.applyShader(contourfill_fragment_shader_src));
         const { vertices: vertices, texcoords: texcoords } = await this.field.grid.getWGLBuffers(gl);
-        this.cmap_gpu.setupShaderVariables(gl, this.cmap_mag_filter);
+        this.cmap_gpu.forEach(cmg => {
+            if (this.image_mag_filter === null || this.cmap_mag_filter === null) {
+                throw `Implement magnification filters in a subclass`;
+            }
+            cmg.setupShaderVariables(gl, this.cmap_mag_filter);
+        });
+        const shader_defines = [];
+        if (this.opts.cmap_mask !== null) {
+            shader_defines.push('MASK');
+        }
+        const shader_manger = new ShaderProgramManager(contourfill_vertex_shader_src, ColorMapGPUInterface.applyShader(contourfill_fragment_shader_src), shader_defines);
         this.gl_elems = {
-            gl: gl, map: map, program: program, vertices: vertices, texcoords: texcoords,
+            gl: gl, shader_manager: shader_manger, map: map, vertices: vertices, texcoords: texcoords,
         };
-        this.updateField(this.field);
+        this.updateField(this.field, this.opts.cmap_mask === null ? undefined : this.opts.cmap_mask);
     }
-    render(gl, matrix) {
+    render(gl, arg) {
         if (this.gl_elems === null || this.fill_texture === null)
             return;
         const gl_elems = this.gl_elems;
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opts.opacity, 'u_offset': 0 }, { 'u_fill_sampler': this.fill_texture });
-        this.cmap_gpu.bindShaderVariables(gl_elems.program);
-        gl.enable(gl.BLEND);
-        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': -2 });
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': -1 });
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': 1 });
-        gl_elems.program.draw();
+        const render_data = getRendererData(arg);
+        const program = this.gl_elems.shader_manager.getShaderProgram(gl, render_data.shaderData);
+        program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_opacity': this.opts.opacity, ...this.gl_elems.shader_manager.getShaderUniforms(render_data) }, { 'u_fill_sampler': this.fill_texture });
+        this.cmap_gpu.forEach((cmg, icmg) => {
+            program.setUniforms({ 'u_offset': 0 });
+            if (this.opts.cmap_mask !== null && this.mask_texture !== null) {
+                program.setUniforms({ 'u_mask_val': icmg + 1 });
+                program.bindTextures({ 'u_mask_sampler': this.mask_texture });
+            }
+            cmg.bindShaderVariables(program);
+            gl.enable(gl.BLEND);
+            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            program.draw();
+            if (render_data.type != 'maplibre' || !render_data.shaderData.define.includes('GLOBE')) {
+                program.setUniforms({ 'u_offset': -2 });
+                program.draw();
+                program.setUniforms({ 'u_offset': -1 });
+                program.draw();
+                program.setUniforms({ 'u_offset': 1 });
+                program.draw();
+            }
+        });
     }
 }
 /**
@@ -131,8 +178,8 @@ class Raster extends PlotComponentFill {
      * Update the data displayed as a raster plot
      * @param field - The new field to display as a raster plot
      */
-    async updateField(field) {
-        await super.updateField(field);
+    async updateField(field, mask) {
+        await super.updateField(field, mask);
     }
     /**
      * @internal
@@ -170,8 +217,8 @@ class ContourFill extends PlotComponentFill {
      * Update the data displayed as filled contours
      * @param field - The new field to display as filled contours
      */
-    async updateField(field) {
-        await super.updateField(field);
+    async updateField(field, mask) {
+        await super.updateField(field, mask);
     }
     /**
      * @internal