autumnplot-gl 3.1.0 → 4.0.0-beta

package/lib/Contour.js

@@ -1,13 +1,18 @@
 import { LngLat } from './Map';
 import { PlotComponent } from './PlotComponent';
-import { PolylineCollection } from './PolylineCollection';
+import { PolylineCollection, isLineStyle } from './PolylineCollection';
 import { TextCollection } from './TextCollection';
-import { hex2rgb, normalizeOptions } from './utils';
-import { kdTree } from 'kd-tree-javascript';
+import { Color } from './Color';
+import { normalizeOptions } from './utils';
+import { UnstructuredGrid } from './Grid';
 const contour_opt_defaults = {
     color: '#000000',
+    cmap: null,
     interval: 1,
-    levels: undefined
+    levels: null,
+    line_width: 2,
+    line_style: '-',
+    quad_as_tri: false
 };
 /**
  * A field of contoured data.
@@ -39,14 +44,51 @@ class Contour extends PlotComponent {
             return;
         const gl = this.gl_elems.gl;
         const contour_data = await this.getContours();
-        const line_data = Object.values(contour_data).flat().map(c => {
-            return { vertices: c };
+        const line_data = [];
+        // Make contour data and sort them by line width and line style
+        Object.entries(contour_data).forEach(([cv, cd]) => {
+            const cv_ = parseFloat(cv);
+            const contour_style = isLineStyle(this.opts.line_style) ? this.opts.line_style : this.opts.line_style(cv_);
+            const contour_width = typeof this.opts.line_width === 'number' ? this.opts.line_width : this.opts.line_width(cv_);
+            const polyline_data = cd.map(c => {
+                const ld = { vertices: c };
+                if (this.opts.cmap !== null) {
+                    ld.data = c.map(() => cv_);
+                }
+                return ld;
+            });
+            const line_data_filtered = line_data.filter(ld => ld.line_style == contour_style && ld.line_width == contour_width);
+            let contour_line_data;
+            if (line_data_filtered.length == 0) {
+                contour_line_data = { data: [], line_width: contour_width, line_style: contour_style };
+                line_data.push(contour_line_data);
+            }
+            else {
+                contour_line_data = line_data_filtered[0];
+            }
+            contour_line_data.data = contour_line_data.data.concat(polyline_data);
+        });
+        // Make one PolylineCollection for each combination of line width and line style
+        const promises = line_data.map(async (ld) => {
+            const plc_opts = { line_width: ld.line_width, line_style: ld.line_style };
+            if (this.opts.cmap !== null) {
+                plc_opts.cmap = this.opts.cmap;
+            }
+            else {
+                plc_opts.color = this.opts.color;
+            }
+            return await PolylineCollection.make(gl, ld.data, plc_opts);
+        });
+        Promise.all(promises).then(values => {
+            if (this.gl_elems === null)
+                return;
+            this.contours = values;
+            this.gl_elems.map.triggerRepaint();
         });
-        this.contours = await PolylineCollection.make(gl, line_data, { line_width: 2, color: this.opts.color });
-        this.gl_elems.map.triggerRepaint();
     }
     async getContours() {
-        return await this.field.getContours({ interval: this.opts.interval, levels: this.opts.levels });
+        const levels = this.opts.levels === null ? undefined : this.opts.levels;
+        return await this.field.getContours({ interval: this.opts.interval, levels: levels, quad_as_tri: this.opts.quad_as_tri });
     }
     /**
      * @internal
@@ -62,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.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 = {
@@ -83,7 +123,8 @@ const contour_label_opt_defaults = {
     font_url_template: '',
     text_color: '#000000',
     halo_color: '#000000',
-    halo: false
+    halo: false,
+    density: 1
 };
 class ContourLabels extends PlotComponent {
     constructor(contours, opts) {
@@ -103,14 +144,15 @@ class ContourLabels extends PlotComponent {
         const gl = this.gl_elems.gl;
         const map_style = map.getStyle();
         const font_url_template = this.opts.font_url_template == '' ? map_style.glyphs : this.opts.font_url_template;
-        const font_url = font_url_template.replace('{range}', '0-255').replace('{fontstack}', this.opts.font_face);
+        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('{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();
@@ -139,54 +181,21 @@ class ContourLabels extends PlotComponent {
                         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']);
-        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: hex2rgb(this.opts.text_color), halo_color: hex2rgb(this.opts.halo_color),
+            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();
     }
     /**
@@ -203,14 +212,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

@@ -12,6 +12,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

@@ -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 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,10 +2,16 @@ 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';
 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
@@ -14,26 +20,31 @@ interface ContourFillOptions {
 }
 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_image;
-    private readonly index_map;
+    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
@@ -41,18 +52,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
@@ -70,18 +81,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,62 +1,70 @@
-import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
-import { ColorMap, makeIndexMap, makeTextureImage } from './Colormap';
-import { WGLProgram, WGLTexture } from 'autumn-wgl';
-import { hex2rgb, normalizeOptions } from './utils';
-const contourfill_vertex_shader_src = `uniform mat4 u_matrix;
+import { PlotComponent } from './PlotComponent';
+import { ColorMap, ColorMapGPUInterface } from './Colormap';
+import { WGLTexture } from 'autumn-wgl';
+import { RawScalarField } from './RawField';
+import { getRendererData } from './AutumnTypes';
+import { normalizeOptions } from './utils';
+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;
-uniform sampler2D u_cmap_sampler;
-uniform sampler2D u_cmap_nonlin_sampler;
-uniform highp float u_cmap_min;
-uniform highp float u_cmap_max;
+
+#ifdef MASK
+uniform sampler2D u_mask_sampler;
+#endif
+
 uniform highp float u_opacity;
-uniform highp vec4 u_underflow_color;
-uniform highp vec4 u_overflow_color;
-uniform int u_n_index;
+#ifdef MASK
+uniform int u_mask_val;
+#endif
+
+out highp vec4 fragColor;
 
 void main() {
-    lowp float index_buffer = 1. / (2. * float(u_n_index));
-    highp float fill_val = texture2D(u_fill_sampler, v_tex_coord).r;
-    lowp float normed_val = (fill_val - u_cmap_min) / (u_cmap_max - u_cmap_min);
-    
-    lowp vec4 color;
-    if (normed_val < 0.0) {
-        color = u_underflow_color;
-    }
-    else if (normed_val > 1.0) {
-        color = u_overflow_color;
-    }
-    else {
-        normed_val = index_buffer + normed_val * (1. - 2. * index_buffer); 
-        highp float nonlin_val = texture2D(u_cmap_nonlin_sampler, vec2(normed_val, 0.5)).r;
-        color = texture2D(u_cmap_sampler, vec2(nonlin_val, 0.5));
+    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) || 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 {
@@ -64,77 +72,91 @@ class PlotComponentFill extends PlotComponent {
         super();
         this.field = field;
         this.opts = normalizeOptions(opts, contour_fill_opt_defaults);
-        this.cmap_image = makeTextureImage(this.opts.cmap);
-        this.index_map = makeIndexMap(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 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 { vertices: vertices, texcoords: texcoords } = await this.field.grid.getWGLBuffers(gl);
+        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 program = new WGLProgram(gl, contourfill_vertex_shader_src, contourfill_fragment_shader_src);
-        const { vertices: verts_buf, texcoords: tex_coords_buf } = await this.field.grid.getWGLBuffers(gl);
-        const vertices = verts_buf;
-        const texcoords = tex_coords_buf;
-        const cmap_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': this.cmap_image, 'mag_filter': this.cmap_mag_filter };
-        const cmap_texture = new WGLTexture(gl, cmap_image);
-        const { format: format_nonlin, type: type_nonlin, row_alignment: row_alignment_nonlin } = getGLFormatTypeAlignment(gl, true);
-        const cmap_nonlin_image = { 'format': format_nonlin, 'type': type_nonlin,
-            'width': this.index_map.length, 'height': 1,
-            'image': new Uint16Array(this.index_map.buffer),
-            'mag_filter': gl.LINEAR, 'row_alignment': row_alignment_nonlin,
-        };
-        const cmap_nonlin_texture = new WGLTexture(gl, cmap_nonlin_image);
+        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,
-            cmap_texture: cmap_texture, cmap_nonlin_texture: cmap_nonlin_texture,
+            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];
-        const cmap = this.opts.cmap;
-        const underflow_color = cmap.underflow_color === null ? [0, 0, 0, 0] : hex2rgb(cmap.underflow_color.color).concat(cmap.underflow_color.opacity);
-        const overflow_color = cmap.overflow_color === null ? [0, 0, 0, 0] : hex2rgb(cmap.overflow_color.color).concat(cmap.overflow_color.opacity);
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_cmap_min': cmap.levels[0], 'u_cmap_max': cmap.levels[cmap.levels.length - 1], 'u_matrix': matrix, 'u_opacity': this.opts.opacity,
-            'u_n_index': this.index_map.length, 'u_underflow_color': underflow_color, 'u_overflow_color': overflow_color, 'u_offset': 0 }, { 'u_fill_sampler': this.fill_texture, 'u_cmap_sampler': gl_elems.cmap_texture, 'u_cmap_nonlin_sampler': gl_elems.cmap_nonlin_texture });
-        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();
+            }
+        });
     }
 }
 /**
@@ -156,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
@@ -195,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