autumnplot-gl 3.0.0 → 3.2.0

package/lib/Barbs.d.ts

@@ -2,12 +2,27 @@ import { PlotComponent } from "./PlotComponent";
 import { RawVectorField } from "./RawField";
 import { MapLikeType } from "./Map";
 import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { ColorMap } from "./Colormap";
 interface BarbsOptions {
     /**
      * The color to use for the barbs as a hex color string;.
      * @default '#000000'
      */
     color?: string;
+    /**
+     * A color map to use to color the barbs by magnitude. Specifying cmap overrides the color argument.
+     */
+    cmap?: ColorMap | null;
+    /**
+     * The width of the lines to use for the barbs
+     * @default 2
+     */
+    line_width?: number;
+    /**
+     * A multiplier for the barb size
+     * @default 1
+     */
+    barb_size_multiplier?: number;
     /**
      * How much to thin the barbs at zoom level 1 on the map. This effectively means to plot every `n`th barb in the i and j directions, where `n` =
      * `thin_fac`. `thin_fac` should be a power of 2.
@@ -26,9 +41,10 @@ interface BarbsOptions {
 declare class Barbs<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
     /** The vector field */
     private fields;
-    readonly color: [number, number, number];
-    readonly thin_fac: number;
+    readonly opts: Required<BarbsOptions>;
+    private readonly color;
     private gl_elems;
+    private barb_texture;
     /**
      * Create a field of wind barbs
      * @param fields - The vector field to plot as barbs

package/lib/Barbs.js

@@ -1,7 +1,8 @@
 import { PlotComponent } from "./PlotComponent";
 import { BillboardCollection } from './BillboardCollection';
-import { hex2rgba } from './utils';
-const BARB_DIMS = {
+import { normalizeOptions } from './utils';
+import { Color } from "./Color";
+const BASE_BARB_DIMS = {
     BB_WIDTH: 85,
     BB_HEIGHT: 256,
     BB_TEX_WIDTH: 1024,
@@ -10,12 +11,13 @@ const BARB_DIMS = {
     BB_MAG_WRAP: 60,
     BB_MAG_BIN_SIZE: 5,
 };
-function _createBarbTexture() {
+const LINE_WIDTH_MULTIPLIER = 4;
+function createBarbTexture(dimensions, line_width) {
     let canvas = document.createElement('canvas');
-    canvas.width = BARB_DIMS.BB_TEX_WIDTH;
-    canvas.height = BARB_DIMS.BB_TEX_HEIGHT;
+    canvas.width = dimensions.BB_TEX_WIDTH;
+    canvas.height = dimensions.BB_TEX_HEIGHT;
     function drawWindBarb(ctx, tipx, tipy, mag) {
-        const elem_full_size = BARB_DIMS.BB_WIDTH / 2 - 4;
+        const elem_full_size = dimensions.BB_WIDTH / 2 - 4;
         const elem_spacing = elem_full_size / 2;
         if (mag < 2.5) {
             ctx.beginPath();
@@ -87,16 +89,22 @@ function _createBarbTexture() {
     if (ctx === null) {
         throw "Could not get rendering context for the wind barb canvas";
     }
-    ctx.lineWidth = 8;
+    ctx.lineWidth = line_width;
     ctx.miterLimit = 4;
-    for (let ibarb = 0; ibarb <= BARB_DIMS.BB_MAG_MAX; ibarb += BARB_DIMS.BB_MAG_BIN_SIZE) {
-        const x_pos = (ibarb % BARB_DIMS.BB_MAG_WRAP) / BARB_DIMS.BB_MAG_BIN_SIZE * BARB_DIMS.BB_WIDTH + BARB_DIMS.BB_WIDTH / 2;
-        const y_pos = Math.floor(ibarb / BARB_DIMS.BB_MAG_WRAP) * BARB_DIMS.BB_HEIGHT + BARB_DIMS.BB_WIDTH / 2;
+    for (let ibarb = 0; ibarb <= dimensions.BB_MAG_MAX; ibarb += dimensions.BB_MAG_BIN_SIZE) {
+        const x_pos = (ibarb % dimensions.BB_MAG_WRAP) / dimensions.BB_MAG_BIN_SIZE * dimensions.BB_WIDTH + dimensions.BB_WIDTH / 2;
+        const y_pos = Math.floor(ibarb / dimensions.BB_MAG_WRAP) * dimensions.BB_HEIGHT + dimensions.BB_WIDTH / 2;
         drawWindBarb(ctx, x_pos, y_pos, ibarb);
     }
     return canvas;
 }
-let BARB_TEXTURE = null;
+const barb_opt_defaults = {
+    color: '#000000',
+    cmap: null,
+    line_width: 2,
+    barb_size_multiplier: 1,
+    thin_fac: 1
+};
 /**
  * A class representing a field of wind barbs. The barbs are automatically thinned based on the zoom level on the map; the user only has to provide a
  * thinning factor at zoom level 1.
@@ -114,9 +122,9 @@ class Barbs extends PlotComponent {
     constructor(fields, opts) {
         super();
         this.fields = fields;
-        const color = hex2rgba(opts.color || '#000000');
-        this.color = [color[0], color[1], color[2]];
-        this.thin_fac = opts.thin_fac || 1;
+        this.opts = normalizeOptions(opts, barb_opt_defaults);
+        this.color = Color.fromHex(this.opts.color);
+        this.barb_texture = createBarbTexture(BASE_BARB_DIMS, this.opts.line_width / this.opts.barb_size_multiplier * LINE_WIDTH_MULTIPLIER);
         this.gl_elems = null;
     }
     /**
@@ -138,11 +146,9 @@ class Barbs extends PlotComponent {
         gl.getExtension('OES_texture_float');
         gl.getExtension('OES_texture_float_linear');
         const map_max_zoom = map.getMaxZoom();
-        if (BARB_TEXTURE === null) {
-            BARB_TEXTURE = _createBarbTexture();
-        }
-        const barb_image = { format: gl.RGBA, type: gl.UNSIGNED_BYTE, image: BARB_TEXTURE, mag_filter: gl.NEAREST };
-        const barb_billboards = new BillboardCollection(this.fields, this.thin_fac, map_max_zoom, barb_image, BARB_DIMS, this.color, 0.1);
+        const barb_image = { format: gl.RGBA, type: gl.UNSIGNED_BYTE, image: this.barb_texture, mag_filter: gl.NEAREST };
+        const cmap = this.opts.cmap === null ? undefined : this.opts.cmap;
+        const barb_billboards = new BillboardCollection(this.fields, this.opts.thin_fac, map_max_zoom, barb_image, BASE_BARB_DIMS, 0.1 * this.opts.barb_size_multiplier, { color: this.color, cmap: cmap });
         await barb_billboards.setup(gl);
         this.gl_elems = {
             map: map, barb_billboards: barb_billboards

package/lib/BillboardCollection.d.ts

@@ -1,10 +1,17 @@
 import { BillboardSpec, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { Color } from "./Color";
+import { ColorMap } from "./Colormap";
 import { RawVectorField } from "./RawField";
 import { WGLTextureSpec } from "autumn-wgl";
+interface BillboardCollectionOpts {
+    color?: Color;
+    cmap?: ColorMap;
+}
 declare class BillboardCollection<ArrayType extends TypedArray> {
     private field;
     readonly spec: BillboardSpec;
-    readonly color: [number, number, number];
+    readonly color: Color;
+    readonly cmap: ColorMap | null;
     readonly size_multiplier: number;
     readonly thin_fac: number;
     readonly max_zoom: number;
@@ -13,7 +20,7 @@ declare class BillboardCollection<ArrayType extends TypedArray> {
     private wind_textures;
     private readonly trim_inaccessible;
     private show_field;
-    constructor(field: RawVectorField<ArrayType>, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_color: [number, number, number], billboard_size_mult: number);
+    constructor(field: RawVectorField<ArrayType>, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_size_mult: number, opts?: BillboardCollectionOpts);
     updateField(field: RawVectorField<ArrayType>): void;
     setup(gl: WebGLAnyRenderingContext): Promise<void>;
     render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;

package/lib/BillboardCollection.js

@@ -1,3 +1,5 @@
+import { Color } from "./Color";
+import { ColorMapGPUInterface } from "./Colormap";
 import { getGLFormatTypeAlignment } from "./PlotComponent";
 import { WGLProgram, WGLTexture } from "autumn-wgl";
 const billboard_vertex_shader_src = `uniform mat4 u_matrix;
@@ -20,6 +22,9 @@ uniform sampler2D u_v_sampler;
 uniform sampler2D u_rot_sampler;
 
 varying highp vec2 v_tex_coord;
+#ifdef COLORMAP
+varying highp float v_mag;
+#endif
 
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
     return mat4(x_scale, 0.0,     0.0,     0.0,
@@ -64,6 +69,9 @@ void main() {
     lowp float bb_aspect = u_bb_width / u_bb_height;
     lowp float ang = (abs(u) < 1e-6 && abs(v) < 1e-6) ? 0. : atan(v, u) - 3.141592654 / 2.0;
     highp float mag = length(vec2(u, v));
+#ifdef COLORMAP
+    v_mag = mag;
+#endif
     mag = floor(mag / u_bb_mag_bin_size + 0.5) * u_bb_mag_bin_size;
 
     vec4 offset = vec4(0.0, 0.0, 0.0, 0.0);
@@ -100,20 +108,34 @@ void main() {
 }`
 const billboard_fragment_shader_src = `varying highp vec2 v_tex_coord;
 
+#ifdef COLORMAP
+varying highp float v_mag;
+#else
+uniform lowp vec4 u_bb_color;
+#endif
+
 uniform sampler2D u_sampler;
-uniform lowp vec3 u_bb_color;
 
 void main() {
     lowp vec4 tex_color = texture2D(u_sampler, v_tex_coord);
-    gl_FragColor = vec4(u_bb_color, tex_color.a); 
+
+    lowp vec4 color;
+#ifdef COLORMAP
+    color = apply_colormap(v_mag);
+#else
+    color = u_bb_color;
+#endif
+
+    color.a *= tex_color.a;
+    gl_FragColor = color; 
 }`
-class BillboardCollectionGLElems {
-}
 class BillboardCollection {
-    constructor(field, thin_fac, max_zoom, billboard_image, billboard_spec, billboard_color, billboard_size_mult) {
+    constructor(field, thin_fac, max_zoom, billboard_image, billboard_spec, billboard_size_mult, opts) {
+        opts = opts === undefined ? {} : opts;
+        this.color = opts.color === undefined ? new Color([0, 0, 0, 1]) : opts.color;
+        this.cmap = opts.cmap === undefined ? null : opts.cmap;
         this.field = field;
         this.spec = billboard_spec;
-        this.color = billboard_color;
         this.size_multiplier = billboard_size_mult;
         this.thin_fac = thin_fac;
         this.max_zoom = max_zoom;
@@ -151,12 +173,21 @@ class BillboardCollection {
         }
     }
     async setup(gl) {
-        const program = new WGLProgram(gl, billboard_vertex_shader_src, billboard_fragment_shader_src);
         const thinned_field = this.field.getThinnedField(this.trim_inaccessible, this.trim_inaccessible);
         const { vertices, texcoords } = await thinned_field.grid.getWGLBillboardBuffers(gl, this.thin_fac / this.trim_inaccessible, this.max_zoom);
         const { rotation: proj_rotation_tex } = thinned_field.grid.getVectorRotationTexture(gl);
         const texture = new WGLTexture(gl, this.billboard_image);
-        this.gl_elems = { gl: gl, program: program, vertices: vertices, texcoords: texcoords, texture: texture, proj_rot_texture: proj_rotation_tex };
+        const shader_defines = [];
+        let fragment_src = billboard_fragment_shader_src;
+        let cmap_gpu = null;
+        if (this.cmap !== null) {
+            fragment_src = ColorMapGPUInterface.applyShader(fragment_src);
+            cmap_gpu = new ColorMapGPUInterface(this.cmap);
+            cmap_gpu.setupShaderVariables(gl, gl.NEAREST);
+            shader_defines.push('COLORMAP');
+        }
+        const program = new WGLProgram(gl, billboard_vertex_shader_src, fragment_src, { define: shader_defines });
+        this.gl_elems = { gl: gl, program: program, vertices: vertices, texcoords: texcoords, texture: texture, proj_rot_texture: proj_rotation_tex, cmap_gpu: cmap_gpu };
     }
     render(gl, matrix, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
         if (this.gl_elems === null || this.wind_textures === null || !this.show_field)
@@ -169,7 +200,13 @@ class BillboardCollection {
         const bb_height = this.spec.BB_HEIGHT / this.spec.BB_TEX_HEIGHT;
         gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_bb_size': bb_size, 'u_bb_width': bb_width, 'u_bb_height': bb_height,
             'u_bb_mag_bin_size': this.spec.BB_MAG_BIN_SIZE, 'u_bb_mag_wrap': this.spec.BB_MAG_WRAP, 'u_offset': 0,
-            'u_bb_color': this.color, 'u_matrix': matrix, 'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_map_bearing': map_bearing }, { 'u_sampler': gl_elems.texture, 'u_u_sampler': this.wind_textures.u, 'u_v_sampler': this.wind_textures.v, 'u_rot_sampler': gl_elems.proj_rot_texture });
+            'u_matrix': matrix, 'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_map_bearing': map_bearing }, { 'u_sampler': gl_elems.texture, 'u_u_sampler': this.wind_textures.u, 'u_v_sampler': this.wind_textures.v, 'u_rot_sampler': gl_elems.proj_rot_texture });
+        if (gl_elems.cmap_gpu !== null) {
+            gl_elems.cmap_gpu.bindShaderVariables(gl_elems.program);
+        }
+        else {
+            gl_elems.program.setUniforms({ 'u_bb_color': this.color.toRGBATuple() });
+        }
         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();

package/lib/Color.d.ts

@@ -0,0 +1,56 @@
+declare class Color {
+    private rgba;
+    /**
+     * Create a new color object
+     * @param rgba - An RGBA tuple of floats between 0 and 1
+     */
+    constructor(rgba: [number, number, number, number]);
+    /**
+     * The red component of the color as a float value between 0 and 1
+     */
+    get r(): number;
+    /**
+     * The green component of the color as a float value between 0 and 1
+     */
+    get g(): number;
+    /**
+     * The blue component of the color as a float value between 0 and 1
+     */
+    get b(): number;
+    /**
+     * The alpha component (opacity) of the color as a float value between 0 and 1
+     */
+    get a(): number;
+    /**
+     * @param opacity - The new alpha component (opacity)
+     * @returns A new color with the alpha component set to opacity.
+     */
+    withOpacity(opacity: number): Color;
+    /**
+     * @returns The color as an RGB hex string (e.g., '#dedbef')
+     */
+    toRGBHex(): string;
+    /**
+     * @returns The color as an RGBA hex string (e.g., '#dedbefff')
+     */
+    toRGBAHex(): string;
+    /**
+     * @returns The color as an RGBA float tuple
+     */
+    toRGBATuple(): [number, number, number, number];
+    /**
+     * @returns The color as a tuple of HSV values
+     */
+    toHSVTuple(): [number, number, number];
+    /**
+     * @param hex - An RGB or RGBA hex string to parse
+     * @returns a new Color object
+     */
+    static fromHex(hex: string): Color;
+    /**
+     * @param hsv - A tuple of HSV values
+     * @returns a new Color object
+     */
+    static fromHSVTuple(hsv: [number, number, number]): Color;
+}
+export { Color };

package/lib/Color.js

@@ -0,0 +1,160 @@
+const hex2rgba = (hexstr, out_type) => {
+    out_type = out_type === undefined ? 'float' : out_type;
+    const match = hexstr.match(/#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?/i);
+    if (match === null) {
+        throw `Got '${hexstr}' in hex2rgba, which does not look like a hex color`;
+    }
+    let rgba = match.slice(1).filter(c => c !== undefined).map(c => parseInt(c, 16));
+    if (out_type == 'float') {
+        rgba = rgba.map(c => c / 255);
+    }
+    return rgba[3] === undefined ? [rgba[0], rgba[1], rgba[2], 1] : [rgba[0], rgba[1], rgba[2], rgba[3]];
+};
+const rgba2hex = (rgba, in_type) => {
+    in_type = in_type === undefined ? 'float' : in_type;
+    let rgba_ = rgba;
+    if (in_type == 'float') {
+        rgba_ = rgba_.map(c => Math.round(c * 255));
+    }
+    return '#' + rgba_.map(c => c.toString(16).padStart(2, '0').toUpperCase()).join('');
+};
+const rgb2hsv = (rgb) => {
+    const [r, g, b] = rgb;
+    const Cmax = Math.max(r, g, b);
+    const Cmin = Math.min(r, g, b);
+    const Delta = Cmax - Cmin;
+    let H;
+    if (Delta == 0) {
+        H = 0;
+    }
+    else if (Cmax == r) {
+        H = 60 * ((g - b) / Delta) % 6;
+    }
+    else if (Cmax == g) {
+        H = 60 * ((b - r) / Delta + 2);
+    }
+    else if (Cmax == b) {
+        H = 60 * ((r - g) / Delta + 4);
+    }
+    else {
+        throw "You've messed something up in rgb2hsv()";
+    }
+    let S = Cmax == 0 ? 0 : Delta / Cmax;
+    let V = Cmax;
+    return [H, S, V];
+};
+const hsv2rgb = (hsv) => {
+    const [H, S, V] = hsv;
+    const C = V * S;
+    const X = C * (1 - Math.abs(H / 60 % 2 - 1));
+    const m = V - C;
+    let r_prime, g_prime, b_prime;
+    if (0 <= H && H < 60) {
+        r_prime = C;
+        g_prime = X, b_prime = 0;
+    }
+    else if (60 <= H && H < 120) {
+        r_prime = X;
+        g_prime = C, b_prime = 0;
+    }
+    else if (120 <= H && H < 180) {
+        r_prime = 0;
+        g_prime = C, b_prime = X;
+    }
+    else if (180 <= H && H < 240) {
+        r_prime = 0;
+        g_prime = X, b_prime = C;
+    }
+    else if (240 <= H && H < 300) {
+        r_prime = X;
+        g_prime = 0, b_prime = C;
+    }
+    else if (300 <= H && H < 360) {
+        r_prime = C;
+        g_prime = 0, b_prime = X;
+    }
+    else {
+        throw "H is out of bounds in hsv2rgb";
+    }
+    return [r_prime + m, g_prime + m, b_prime + m];
+};
+class Color {
+    /**
+     * Create a new color object
+     * @param rgba - An RGBA tuple of floats between 0 and 1
+     */
+    constructor(rgba) {
+        this.rgba = rgba;
+    }
+    /**
+     * The red component of the color as a float value between 0 and 1
+     */
+    get r() {
+        return this.rgba[0];
+    }
+    /**
+     * The green component of the color as a float value between 0 and 1
+     */
+    get g() {
+        return this.rgba[1];
+    }
+    /**
+     * The blue component of the color as a float value between 0 and 1
+     */
+    get b() {
+        return this.rgba[2];
+    }
+    /**
+     * The alpha component (opacity) of the color as a float value between 0 and 1
+     */
+    get a() {
+        return this.rgba[3];
+    }
+    /**
+     * @param opacity - The new alpha component (opacity)
+     * @returns A new color with the alpha component set to opacity.
+     */
+    withOpacity(opacity) {
+        return new Color([this.r, this.g, this.b, opacity]);
+    }
+    /**
+     * @returns The color as an RGB hex string (e.g., '#dedbef')
+     */
+    toRGBHex() {
+        return this.toRGBAHex().slice(0, -2);
+    }
+    /**
+     * @returns The color as an RGBA hex string (e.g., '#dedbefff')
+     */
+    toRGBAHex() {
+        return rgba2hex(this.rgba);
+    }
+    /**
+     * @returns The color as an RGBA float tuple
+     */
+    toRGBATuple() {
+        return this.rgba;
+    }
+    /**
+     * @returns The color as a tuple of HSV values
+     */
+    toHSVTuple() {
+        return rgb2hsv([this.r, this.g, this.b]);
+    }
+    /**
+     * @param hex - An RGB or RGBA hex string to parse
+     * @returns a new Color object
+     */
+    static fromHex(hex) {
+        return new Color(hex2rgba(hex));
+    }
+    /**
+     * @param hsv - A tuple of HSV values
+     * @returns a new Color object
+     */
+    static fromHSVTuple(hsv) {
+        const rgb = hsv2rgb(hsv);
+        return new Color([rgb[0], rgb[1], rgb[2], 1]);
+    }
+}
+export { Color };

package/lib/ColorBar.d.ts

@@ -1,4 +1,5 @@
-import { Color, ColorMap } from "./Colormap";
+import { ColorMap } from "./Colormap";
+import { Color } from "./Color";
 type ColorbarOrientation = 'horizontal' | 'vertical';
 type ColorbarTickDirection = 'top' | 'bottom' | 'left' | 'right';
 interface ColorBarOptions {

package/lib/ColorBar.js

@@ -97,7 +97,7 @@ function makeColorBar(colormap, opts) {
         else {
             attrs = { x: bar_left + bar_width * icolor / n_colors, y: bar_top, width: bar_width / n_colors, height: bar_height };
         }
-        createElement('rect', { ...attrs, fill: color.color, opacity: color.opacity }, gbar);
+        createElement('rect', { ...attrs, fill: color.toRGBHex(), opacity: color.a }, gbar);
     });
     // Make the overflow and underflow triangles
     if (colormap.underflow_color !== null) {
@@ -108,7 +108,7 @@ function makeColorBar(colormap, opts) {
         else {
             point_list = `${bar_left} ${bar_bottom}, ${bar_low_arrow} ${bar_middle}, ${bar_left} ${bar_top}, ${bar_left} ${bar_bottom}`;
         }
-        const underflow_attrs = { points: point_list, fill: colormap.underflow_color.color, opacity: colormap.underflow_color.opacity };
+        const underflow_attrs = { points: point_list, fill: colormap.underflow_color.toRGBHex(), opacity: colormap.underflow_color.a };
         createElement('polygon', underflow_attrs, gbar);
     }
     if (colormap.overflow_color !== null) {
@@ -119,7 +119,7 @@ function makeColorBar(colormap, opts) {
         else {
             point_list = `${bar_right} ${bar_top}, ${bar_high_arrow} ${bar_middle}, ${bar_right} ${bar_bottom}, ${bar_right} ${bar_top}`;
         }
-        const overflow_attrs = { points: point_list, fill: colormap.overflow_color.color, opacity: colormap.overflow_color.opacity };
+        const overflow_attrs = { points: point_list, fill: colormap.overflow_color.toRGBHex(), opacity: colormap.overflow_color.a };
         createElement('polygon', overflow_attrs, gbar);
     }
     // Make the ticks marks and labels
@@ -219,8 +219,8 @@ function makePaintballKey(colors, labels, opts) {
         const icol = Math.floor(icolor / n_rows);
         let opacity = 1.;
         if (typeof color != 'string') {
-            opacity = color.opacity;
-            color = color.color;
+            opacity = color.a;
+            color = color.toRGBHex();
         }
         const x = swatch_width_pad + icol * (swatch_width + swatch_text_pad + swatch_text_space + swatch_width_pad);
         const y = swatch_height_pad + irow * (swatch_height + swatch_height_pad);

package/lib/Colormap.d.ts

@@ -1,14 +1,10 @@
-import { Float16Array } from "@petamoriken/float16";
-interface Color {
-    /** The color as a hex color string */
-    color: string;
-    /** The opacity as a number from 0 to 1 */
-    opacity: number;
-}
+import { WGLProgram, WGLTexture } from "autumn-wgl";
+import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { Color } from "./Color";
 interface ColorMapOptions {
-    /** The color to use for areas where the value is below the lowest value in the color map */
-    overflow_color?: Color | string;
     /** The color to use for areas where the value is above the highest value in the color map */
+    overflow_color?: Color | string;
+    /** The color to use for areas where the value is below the lowest value in the color map */
     underflow_color?: Color | string;
 }
 /** A mapping from values to colors */
@@ -71,12 +67,17 @@ declare const redblue: (level_min: number, level_max: number, n_colors: number)
  * @returns a Colormap object
  */
 declare const bluered: (level_min: number, level_max: number, n_colors: number) => ColorMap;
-/**
- * Make a canvas image corresponding to a color map
- * @param colormap - The color map to use
- * @returns A canvas element containing each color of the color map
- */
-declare function makeTextureImage(colormap: ColorMap): HTMLCanvasElement;
-declare function makeIndexMap(colormap: ColorMap): Float16Array;
-export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, nws_storm_clear_refl, makeTextureImage, makeIndexMap };
-export type { Color, ColorMapOptions };
+interface ColorMapGLElems {
+    cmap_texture: WGLTexture;
+    cmap_nonlin_texture: WGLTexture;
+}
+declare class ColorMapGPUInterface {
+    readonly colormap: ColorMap;
+    gl_elems: ColorMapGLElems | null;
+    constructor(colormap: ColorMap);
+    static applyShader(shader_src: string): string;
+    setupShaderVariables(gl: WebGLAnyRenderingContext, mag_filter: number): void;
+    bindShaderVariables(program: WGLProgram): void;
+}
+export { ColorMap, ColorMapGPUInterface, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, nws_storm_clear_refl };
+export type { ColorMapOptions };