autumnplot-gl 2.0.0 → 2.2.0

package/lib/AutumnTypes.d.ts

@@ -1,3 +1,4 @@
+import { Float16Array } from "@petamoriken/float16";
 interface WindProfile {
     lat: number;
     lon: number;
@@ -33,5 +34,6 @@ interface LineSpec {
 }
 type WebGLAnyRenderingContext = WebGLRenderingContext | WebGL2RenderingContext;
 declare function isWebGL2Ctx(gl: WebGLAnyRenderingContext): gl is WebGL2RenderingContext;
+type TypedArray = Float16Array | Float32Array;
 export { isWebGL2Ctx };
-export type { WindProfile, BillboardSpec, PolylineSpec, LineSpec, WebGLAnyRenderingContext };
+export type { WindProfile, BillboardSpec, PolylineSpec, LineSpec, WebGLAnyRenderingContext, TypedArray };

package/lib/Barbs.d.ts

@@ -1,8 +1,7 @@
 import { PlotComponent } from "./PlotComponent";
-import { BillboardCollection } from './BillboardCollection';
 import { RawVectorField } from "./RawField";
 import { MapType } from "./Map";
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 interface BarbsOptions {
     /**
      * The color to use for the barbs as a hex color string;.
@@ -16,10 +15,6 @@ interface BarbsOptions {
      */
     thin_fac?: number;
 }
-interface BarbsGLElems {
-    map: MapType | null;
-    barb_billboards: BillboardCollection | null;
-}
 /**
  * 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.
@@ -28,19 +23,18 @@ interface BarbsGLElems {
  * const vector_field = new RawVectorField(grid, u_data, v_data);
  * const barbs = new Barbs(vector_field, {color: '#000000', thin_fac: 16});
  */
-declare class Barbs extends PlotComponent {
+declare class Barbs<ArrayType extends TypedArray> extends PlotComponent {
     /** The vector field */
-    readonly fields: RawVectorField;
+    private readonly fields;
     readonly color: [number, number, number];
     readonly thin_fac: number;
-    /** @private */
-    gl_elems: BarbsGLElems | null;
+    private gl_elems;
     /**
      * Create a field of wind barbs
      * @param fields - The vector field to plot as barbs
      * @param opts   - Options for creating the wind barbs
      */
-    constructor(fields: RawVectorField, opts: BarbsOptions);
+    constructor(fields: RawVectorField<ArrayType>, opts: BarbsOptions);
     /**
      * @internal
      * Add the barb field to a map

package/lib/BillboardCollection.d.ts

@@ -1,17 +1,17 @@
-import { BillboardSpec, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { BillboardSpec, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { RawVectorField } from "./RawField";
-import { WGLBuffer, WGLProgram, WGLTexture, WGLTextureSpec } from "autumn-wgl";
-declare class BillboardCollection {
+import { WGLTextureSpec } from "autumn-wgl";
+declare class BillboardCollection<ArrayType extends TypedArray> {
     readonly spec: BillboardSpec;
     readonly color: [number, number, number];
     readonly size_multiplier: number;
-    readonly program: WGLProgram;
-    vertices: WGLBuffer | null;
-    texcoords: WGLBuffer | null;
-    readonly texture: WGLTexture;
-    readonly u_texture: WGLTexture;
-    readonly v_texture: WGLTexture;
-    constructor(gl: WebGLAnyRenderingContext, field: RawVectorField, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_color: [number, number, number], billboard_size_mult: number);
+    private readonly program;
+    private vertices;
+    private texcoords;
+    private readonly texture;
+    private readonly u_texture;
+    private readonly v_texture;
+    constructor(gl: WebGLAnyRenderingContext, field: RawVectorField<ArrayType>, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_color: [number, number, number], billboard_size_mult: number);
     render(gl: WebGLAnyRenderingContext, matrix: number[], [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
 export { BillboardCollection };

package/lib/BillboardCollection.js

@@ -1,5 +1,6 @@
-import { isWebGL2Ctx } from "./AutumnTypes";
+import { getGLFormatTypeAlignment } from "./PlotComponent";
 import { WGLProgram, WGLTexture } from "autumn-wgl";
+import { Cache } from "./utils";
 const billboard_vertex_shader_src = `uniform mat4 u_matrix;
 
 attribute vec3 a_pos;    
@@ -100,12 +101,13 @@ void main() {
     lowp vec4 tex_color = texture2D(u_sampler, v_tex_coord);
     gl_FragColor = vec4(u_bb_color, tex_color.a); 
 }`
+const program_cache = new Cache((gl) => new WGLProgram(gl, billboard_vertex_shader_src, billboard_fragment_shader_src));
 class BillboardCollection {
     constructor(gl, field, thin_fac, max_zoom, billboard_image, billboard_spec, billboard_color, billboard_size_mult) {
         this.spec = billboard_spec;
         this.color = billboard_color;
         this.size_multiplier = billboard_size_mult;
-        this.program = new WGLProgram(gl, billboard_vertex_shader_src, billboard_fragment_shader_src);
+        this.program = program_cache.getValue(gl);
         this.vertices = null;
         this.texcoords = null;
         const n_density_tiers = Math.log2(thin_fac);
@@ -119,14 +121,14 @@ class BillboardCollection {
             this.vertices = vertices;
             this.texcoords = texcoords;
         })();
-        const format = isWebGL2Ctx(gl) ? gl.R32F : gl.LUMINANCE;
-        const u_image = { 'format': format, 'type': gl.FLOAT,
-            'width': u_thin.grid.ni, 'height': u_thin.grid.nj, 'image': u_thin.data,
-            'mag_filter': gl.NEAREST,
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, u_thin.isFloat16());
+        const u_image = { 'format': format, 'type': type,
+            'width': u_thin.grid.ni, 'height': u_thin.grid.nj, 'image': u_thin.getTextureData(),
+            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
         };
-        const v_image = { 'format': format, 'type': gl.FLOAT,
-            'width': v_thin.grid.ni, 'height': v_thin.grid.nj, 'image': v_thin.data,
-            'mag_filter': gl.NEAREST,
+        const v_image = { 'format': format, 'type': type,
+            'width': v_thin.grid.ni, 'height': v_thin.grid.nj, 'image': v_thin.getTextureData(),
+            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
         };
         this.texture = new WGLTexture(gl, billboard_image);
         this.u_texture = new WGLTexture(gl, u_image);

package/lib/ColorBar.d.ts

@@ -25,6 +25,11 @@ interface ColorBarOptions {
      * @default 'sans-serif'
      */
     fontface?: string;
+    /**
+     * The font size (in points) to use for the tick labels
+     * @default 12
+     */
+    ticklabelsize?: number;
 }
 /**
  * Make an SVG containing a color bar. The color bar can either be oriented horizontal or vertical, and a label can be provided.

package/lib/ColorBar.js

@@ -29,6 +29,7 @@ function makeColorBar(colormap, opts) {
     const ticks = opts.ticks || colormap.levels;
     const orientation = opts.orientation || 'vertical';
     const fontface = opts.fontface || 'sans-serif';
+    const tickfontsize = opts.ticklabelsize || 12;
     const tick_dir = opts.tick_direction || (orientation == 'vertical' ? 'left' : 'bottom');
     if (orientation == 'vertical' && (tick_dir == 'top' || tick_dir == 'bottom') ||
         orientation == 'horizontal' && (tick_dir == 'left' || tick_dir == 'right')) {
@@ -41,7 +42,7 @@ function makeColorBar(colormap, opts) {
     const chars_right = getNChar(ticks[ticks.length - 1]);
     const bar_long_size = 600;
     const bar_cross_size = bar_long_size / 9;
-    const bar_long_pad = orientation == 'horizontal' ? Math.max(chars_left, chars_right) * 6 : 5;
+    const bar_long_pad = orientation == 'horizontal' ? Math.max(chars_left, chars_right) * 6 : 8;
     const bar_cross_pad = 3;
     const bar_thickness = 10;
     let height, width, bar_left, bar_top, bar_width, bar_height;
@@ -86,8 +87,14 @@ function makeColorBar(colormap, opts) {
         }
         createElement('rect', { ...attrs, fill: color.color, opacity: color.opacity }, gbar);
     });
-    ticks.forEach(level => {
-        const ilevel = colormap.levels.indexOf(level);
+    const first_level = colormap.levels[0];
+    const last_level = colormap.levels[colormap.levels.length - 1];
+    ticks.filter(level => first_level <= level && level <= last_level).forEach(level => {
+        const diffs = colormap.levels.map(l => Math.abs(l - level));
+        let ilevel = diffs.indexOf(diffs.reduce((a, b) => Math.min(a, b)));
+        if (level <= colormap.levels[ilevel] && ilevel > 0)
+            ilevel -= 1;
+        ilevel += (level - colormap.levels[ilevel]) / (colormap.levels[ilevel + 1] - colormap.levels[ilevel]);
         const tickattrs = orientation == 'vertical' ? { transform: `translate(0, ${bar_height * (1 - ilevel / n_colors)})` } :
             { transform: `translate(${bar_width * ilevel / n_colors}, 0)` };
         const gtick = createElement('g', tickattrs, gticks);
@@ -106,7 +113,7 @@ function makeColorBar(colormap, opts) {
         else {
             textattrs = tick_dir == 'bottom' ? { y: 9, dy: '0.8em' } : { y: -9, dy: '0em' };
         }
-        const text = createElement('text', { ...textattrs, fill: '#000000', style: `font-family: ${fontface};` }, gtick);
+        const text = createElement('text', { ...textattrs, fill: '#000000', style: `font-family: ${fontface}; font-size: ${tickfontsize}pt` }, gtick);
         text.textContent = level.toString();
     });
     const outline_attrs = {

package/lib/Colormap.d.ts

@@ -44,6 +44,7 @@ declare const pw_speed850mb: ColorMap;
 declare const pw_cape: ColorMap;
 declare const pw_t2m: ColorMap;
 declare const pw_td2m: ColorMap;
+declare const nws_storm_clear_refl: ColorMap;
 /**
  * Create a diverging red/blue colormap, where red corresponds to the lowest value and blue corresponds to the highest value
  * @param level_min - The lowest value in the color map
@@ -66,5 +67,5 @@ declare const bluered: (level_min: number, level_max: number, n_colors: number)
  * @returns A canvas element containing each color of the color map
  */
 declare function makeTextureImage(colormap: ColorMap): HTMLCanvasElement;
-export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, makeTextureImage };
+export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, nws_storm_clear_refl, makeTextureImage };
 export type { Color };

package/lib/Colormap.js

@@ -4,6 +4,7 @@ const spd850_colormap_data = {     "levels": [20, 21, 22, 23, 24, 25, 26, 27, 28
 const cape_colormap_data = {     "levels": [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400,         1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900,         3000, 3100, 3200, 3300, 3400, 3500, 3600, 3700, 3800, 3900, 4000, 4100, 4200, 4300, 4400,         4500, 4600, 4700, 4800, 4900, 5000, 5100, 5200, 5300, 5400, 5500, 5600, 5700, 5800, 5900,         6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000],     "colors": [         "#ffffff", "#f0f0f0", "#e1e1e1", "#d2d2d2", "#c3c3c3", "#a5a5a5", "#969696", "#878787", "#787878", "#696969",         "#37536a", "#436075", "#506d80", "#5c7a8b", "#698796", "#7594a2", "#82a1ad", "#8eaeb8", "#9bbbc3", "#a7c8ce",         "#e9dd96", "#e8d186", "#e7c575", "#e6b865", "#e5ac54", "#e5a044", "#e49433", "#e38723", "#e27b12", "#e16f02",         "#dc4110", "#d33b17", "#ca351e", "#c12e25", "#b8282c", "#af2234", "#a61c3b", "#9d1542", "#940f49", "#8b0950",         "#73088a", "#7e1894", "#8a289f", "#9538a9", "#a148b3", "#ac59be", "#b869c8", "#c379d2", "#cf89dd", "#da99e7",         "#e9bec3", "#e3b0b7", "#dda3ac", "#d795a0", "#d18894", "#ca7a89", "#c46d7d", "#be5f71", "#b85266", "#b2445a",         "#893d48", "#8f4752", "#96525b", "#9c5c65", "#a2676f", "#a97178", "#af7c82", "#b6868b"     ] } 
 const t2m_colormap_data = {     "levels": [-60, -59, -58, -57, -56, -55, -54, -53, -52, -51, -50, -49, -48, -47, -46, -45, -44, -43, -42, -41,         -40, -39, -38, -37, -36, -35, -34, -33, -32, -31, -30, -29, -28, -27, -26, -25, -24, -23, -22, -21,         -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1,         0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,         20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,         40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,         60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79,         80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99,         100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119,         120],     "colors": [         "#235877", "#2a5f7c", "#316782", "#396e87", "#40768c", "#477d91", "#4e8497", "#558c9c", "#5d93a1", "#649ba6",         "#6ba2ac", "#72a9b1", "#79b1b6", "#81b8bb", "#88c0c1", "#8fc7c6", "#96cecb", "#9dd6d0", "#a5ddd6", "#ace5db",         "#b3ece0", "#b3ece0", "#b1e7df", "#b0e1dd", "#aedcdc", "#add7da", "#abd2d9", "#aaccd8", "#a8c7d6", "#a7c2d5",         "#a5bcd4", "#a4b7d2", "#a2b2d1", "#9fa7ce", "#9ea2cd", "#9c9dcb", "#9c9dcb", "#9b97ca", "#9992c8", "#988dc7",         "#9688c6", "#9582c4", "#9278c2", "#9073c0", "#8f6dbf", "#8d68bd", "#8c63bc", "#8a5dbb", "#8958b9", "#8753b8",         "#864eb6", "#8448b5", "#8343b4", "#813eb2", "#8038b1", "#7e33b0", "#7d33ae", "#7b29ad", "#7a23ab", "#781eaa",         "#a037af", "#a443b3", "#a74fb7", "#ab5cbb", "#af68bf", "#b374c3", "#b680c7", "#ba8dcc", "#be99d0", "#c1a5d4",         "#c5b1d8", "#c9bddc", "#cdcae0", "#d0d6e4", "#d4e2e8", "#deecf2", "#d1e2ee", "#c5d9ea", "#b8cfe6", "#acc5e3",         "#9fbbdf", "#92b2db", "#86a8d7", "#799ed3", "#6c94cf", "#608bcb", "#5381c7", "#4777c4", "#3a6dc0", "#2d64bc",         "#215ab8", "#1450b4", "#0f4455", "#1c4e5a", "#2a585f", "#376363", "#456d68", "#52776d", "#5f8172", "#6d8c77",         "#7a967c", "#88a080", "#95aa85", "#a3b58a", "#b0bf8f", "#bdc994", "#cbd399", "#d8de9d", "#e6e8a2", "#f3f2a7",         "#f8eea2", "#f0e199", "#e8d591", "#e1c888", "#d9bc80", "#d1af77", "#c9a36f", "#c19666", "#ba8a5e", "#b27d55",         "#aa714d", "#a26444", "#9b583c", "#8b3f2b", "#833222", "#7b261a", "#7b261a", "#741911", "#6c0d09", "#640000",         "#5f0000", "#630507", "#670a0e", "#6c0f15", "#70141c", "#741824", "#781d2b", "#7d2232", "#812739", "#852c40",         "#73372d", "#7a4036", "#80493f", "#875349", "#8e5c52", "#94655b", "#9b6e64", "#a88177", "#af8a80", "#b69389",         "#bd9c92", "#c3a69c", "#caafa5", "#d1b8ae", "#d7c1b7", "#decac0", "#e5d4ca", "#ebddd3", "#f2e6dc", "#e8dfd6",         "#e0d7cf", "#d8d0c8", "#d0c8c0", "#c8c0b9", "#c0b9b2", "#b7b1ab", "#afa9a4", "#a7a29c", "#9f9a95", "#97938e",         "#8f8b87", "#878380", "#7f7c78", "#777471", "#6f6c6a", "#666563", "#5e5d5c", "#565554", "#4e4e4d", "#464646"     ] } 
 const td2m_colormap_data = {     "levels": [-40, -39, -38, -37, -36, -35, -34, -33, -32, -31, -30, -29, -28, -27, -26, -25, -24, -23, -22, -21,         -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1,         0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,         20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,         40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,         60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79,         80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90],     "colors": [         "#986d4d", "#966c4c", "#946b4c", "#926a4b", "#90694b", "#8e684a", "#8c664a", "#8a6549", "#886448", "#866348", "#846247",         "#826147", "#806046", "#7e5f46", "#7c5e45", "#7a5d44", "#785b44", "#765a43", "#745943", "#725842", "#715742", "#6f5641",         "#6d5540", "#6b5440", "#69533f", "#67523f", "#65503e", "#634f3d", "#614e3d", "#5f4d3c", "#5d4c3c", "#5b4b3b", "#594a3b",         "#57493a", "#554839", "#534739", "#514538", "#4f4438", "#4d4337", "#4b4237", "#494136", "#4d4334", "#514738", "#564c3c",         "#5a5041", "#5e5545", "#625949", "#675e4d", "#6b6251", "#6f6755", "#746b5a", "#78705e", "#7c7462", "#807966", "#857d6a",         "#89826f", "#8d8673", "#928b77", "#968f7b", "#9a947f", "#9e9883", "#a39d88", "#a7a18c", "#aba690", "#afaa94", "#b8b39c",         "#b8b39c", "#bcb8a1", "#c1bca5", "#c9c5ad", "#c9cab1", "#d2ceb6", "#d2ceb6", "#d6d3ba", "#dfdcc2", "#e3e0c6", "#e7e5ca",         "#ebe9cf", "#f0eed3", "#f4f2d7", "#e6f5e6", "#d7f0d7", "#c8eac8", "#b9e5b9", "#aadfaa", "#9bda9b", "#8cd48c", "#7dcf7d",         "#6ec96e", "#5fc45f", "#30ae30", "#2ca32c", "#279927", "#238e23", "#1e831e", "#1a791a", "#156e15", "#116311", "#0c590c",         "#084e08", "#61a3af", "#5896a0", "#508992", "#477b83", "#3e6e74", "#366166", "#2d5457", "#244648", "#1c393a", "#132c2b",         "#66669a", "#605e94", "#59568e", "#534e88", "#4d4682", "#463e7c", "#403676", "#3a2e70", "#33266a", "#2d1e64", "#724071",         "#784573", "#7d4b75", "#835076", "#885678", "#8e5b7a", "#93617c", "#99667d", "#9e6c7f", "#a47181"     ] } 
+const nws_storm_clear_refl_colormap_data = {     "levels": [         -15, -14.53608247, -14.07216495, -13.60824742, -13.1443299, -12.68041237, -12.21649485, -11.75257732,         -11.28865979, -10.82474227, -10.36082474, -9.89690722, -9.43298969, -8.96907216, -8.50515464, -8.04123711,         -7.57731959, -7.11340206, -6.64948454, -6.18556701, -5.72164948, -5.25773196, -4.79381443, -4.32989691,         -3.86597938, -3.40206186, -2.93814433, -2.4742268, -2.01030928, -1.54639175, -1.08247423, -0.6185567,         -0.15463918, 0.30927835, 0.77319588, 1.2371134, 1.70103093, 2.16494845, 2.62886598, 3.09278351,         3.55670103, 4.02061856, 4.48453608, 4.94845361, 5.41237113, 5.87628866, 6.34020619, 6.80412371,         7.26804124, 7.73195876, 8.19587629, 8.65979381, 9.12371134, 9.58762887, 10.05154639, 10.51546392,         10.97938144, 11.44329897, 11.90721649, 12.37113402, 12.83505155, 13.29896907, 13.7628866, 14.22680412,         14.69072165, 15.15463918, 15.6185567, 16.08247423, 16.54639175, 17.01030928, 17.4742268, 17.93814433,         18.40206186, 18.86597938, 19.32989691, 19.79381443, 20.25773196, 20.72164948, 21.18556701, 21.64948454,         22.11340206, 22.57731959, 23.04123711, 23.50515464, 23.96907216, 24.43298969, 24.89690722, 25.36082474,         25.82474227, 26.28865979, 26.75257732, 27.21649485, 27.68041237, 28.1443299, 28.60824742, 29.07216495,         29.53608247, 30, 30.46391753, 30.92783505, 31.39175258, 31.8556701, 32.31958763, 32.78350515,         33.24742268, 33.71134021, 34.17525773, 34.63917526, 35.10309278, 35.56701031, 36.03092784, 36.49484536,         36.95876289, 37.42268041, 37.88659794, 38.35051546, 38.81443299, 39.27835052, 39.74226804, 40.20618557,         40.67010309, 41.13402062, 41.59793814, 42.06185567, 42.5257732, 42.98969072, 43.45360825, 43.91752577,         44.3814433, 44.84536082, 45.30927835, 45.77319588, 46.2371134, 46.70103093, 47.16494845, 47.62886598,         48.09278351, 48.55670103, 49.02061856, 49.48453608, 49.94845361, 50.41237113, 50.87628866, 51.34020619,         51.80412371, 52.26804124, 52.73195876, 53.19587629, 53.65979381, 54.12371134, 54.58762887, 55.05154639,         55.51546392, 55.97938144, 56.44329897, 56.90721649, 57.37113402, 57.83505155, 58.29896907, 58.7628866,         59.22680412, 59.69072165, 60.15463918, 60.6185567, 61.08247423, 61.54639175, 62.01030928, 62.4742268,         62.93814433, 63.40206186, 63.86597938, 64.32989691, 64.79381443, 65.25773196, 65.72164948, 66.18556701,         66.64948454, 67.11340206, 67.57731959, 68.04123711, 68.50515464, 68.96907216, 69.43298969, 69.89690722,         70.36082474, 70.82474227, 71.28865979, 71.75257732, 72.21649485, 72.68041237, 73.1443299, 73.60824742,         74.07216495, 74.53608247, 75     ],     "colors": [         "#959052", "#979356", "#9c9a60", "#a09c64", "#a3a067", "#a8a570", "#aaa875", "#acac79", "#b1b182", "#b5b587",         "#b6b88c", "#bcbd93", "#bfc199", "#c1c39c", "#c1c39c", "#c6caa5", "#cacdaa", "#cccfaf", "#cfd1b3", "#cccfb3",         "#c8ccb3", "#c6c8b3", "#bfc3b3", "#bfc3b3", "#bcc1b3", "#b8bdb3", "#b5bab3", "#afb5b3", "#acb3b3", "#aaafb3",         "#a7aeb3", "#a3aab3", "#a0a8b3", "#9ca5b3", "#9aa1b3", "#97a0b3", "#939cb3", "#909ab3", "#939ab5", "#8c95b3",         "#8791b1", "#838eb1", "#808caf", "#7c89af", "#7785ae", "#7482ac", "#7080aa", "#6b7caa", "#6275a8", "#5e72a7",         "#5e72a7", "#5b70a5", "#566da3", "#5269a3", "#4f67a1", "#4b64a1", "#4660a0", "#425d9e", "#4260a1", "#4467a5",         "#486eaa", "#4975ae", "#4d7cb1", "#4f83b5", "#508aba", "#5491bf", "#5699c3", "#599ec6", "#5ba5ca", "#5daccf",         "#60b3d4", "#62bad8", "#64c1db", "#67c8df", "#69cfe4", "#6ed6e8", "#67d6d6", "#60d6c4", "#59d6b3", "#52d6a1",         "#4bd690", "#42d67e", "#3bd66d", "#34d65b", "#11d418", "#11d116", "#0fcd16", "#0fc816", "#0fc316", "#0fbf15",         "#0fbc15", "#0fb613", "#0eb313", "#0eaf13", "#0eaa13", "#0ca511", "#0ca111", "#0c9e11", "#0c9911", "#0c950f",         "#0c900f", "#0a8c0f", "#0a870f", "#0a830e", "#0a800e", "#0a7c0c", "#0a770c", "#08720c", "#086e0c", "#086b0a",         "#08660a", "#08620a", "#085d08", "#1c6708", "#317208", "#467c08", "#5b8707", "#6e9107", "#839c05", "#97a805",         "#acb105", "#c1bc05", "#d6c603", "#e9d103", "#ffe200", "#ffd800", "#ffd300", "#ffc800", "#ffc300", "#ffba00",         "#ffb500", "#ffb000", "#ffac00", "#ffa700", "#ff9e00", "#ff9900", "#ff9300", "#ff8900", "#ff8500", "#ff7f00",         "#ff0000", "#f70000", "#f00000", "#e90000", "#e20000", "#db0000", "#d40000", "#cd0000", "#c60000", "#bf0000",         "#b80000", "#b10000", "#aa0000", "#a30000", "#9a0000", "#930000", "#8c0000", "#850000", "#7e0000", "#770000",         "#700000", "#ffffff", "#fff4ff", "#ffe9ff", "#ffdfff", "#ffd4ff", "#ffc8ff", "#ffbdff", "#ffb3ff", "#ffa8ff",         "#ff9cff", "#ff91ff", "#ff75ff", "#fb6bfd", "#f960f9", "#f656f6", "#f24bf4", "#ef3ff0", "#ed36ef", "#e92aeb",         "#e61fe8", "#e416e6", "#e10ae2", "#b100ff", "#ac00fb", "#a300f6", "#9a00f4", "#9300ef", "#8700e9", "#8200e8",         "#7900e2", "#7200dd", "#6900db", "#6200d6"     ] } 
 function isColor(obj) {
     return (typeof obj == 'object') && 'color' in obj && 'opacity' in obj;
 }
@@ -39,8 +40,21 @@ class ColorMap {
      * @returns A new color map
      */
     withOpacity(func) {
-        const new_colors = this.colors.map((c, ic) => { return { 'color': c['color'], 'opacity': func(this.levels[ic], this.levels[ic + 1]) }; });
-        return new ColorMap(this.levels, new_colors);
+        const new_colors = [];
+        const new_levels = [];
+        for (let ic = 0; ic < this.colors.length; ic++) {
+            const color = this.colors[ic];
+            const level_lower = this.levels[ic];
+            const level_upper = this.levels[ic + 1];
+            const new_color = { 'color': color['color'], 'opacity': func(level_lower, level_upper) };
+            if (new_color['opacity'] > 0) {
+                if (new_levels[new_levels.length - 1] != level_lower)
+                    new_levels.push(level_lower);
+                new_levels.push(level_upper);
+                new_colors.push(new_color);
+            }
+        }
+        return new ColorMap(new_levels, new_colors);
     }
     /**
      * Create a diverging color map using two input colors
@@ -95,6 +109,7 @@ const pw_speed850mb = new ColorMap(spd850_colormap_data.levels, spd850_colormap_
 const pw_cape = new ColorMap(cape_colormap_data.levels, cape_colormap_data.colors).withOpacity((levl, levu) => Math.min(levu / 1000., 1.));
 const pw_t2m = new ColorMap(t2m_colormap_data.levels, t2m_colormap_data.colors);
 const pw_td2m = new ColorMap(td2m_colormap_data.levels, td2m_colormap_data.colors);
+const nws_storm_clear_refl = new ColorMap(nws_storm_clear_refl_colormap_data.levels, nws_storm_clear_refl_colormap_data.colors);
 /**
  * Create a diverging red/blue colormap, where red corresponds to the lowest value and blue corresponds to the highest value
  * @param level_min - The lowest value in the color map
@@ -134,4 +149,4 @@ function makeTextureImage(colormap) {
     });
     return cmap_image;
 }
-export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, makeTextureImage };
+export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, nws_storm_clear_refl, makeTextureImage };

package/lib/Contour.d.ts

@@ -1,8 +1,7 @@
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
 import { MapType } from './Map';
 import { PlotComponent } from './PlotComponent';
 import { RawScalarField } from './RawField';
-import { WGLBuffer, WGLProgram, WGLTexture } from 'autumn-wgl';
 interface ContourOptions {
     /**
      * The color of the contours as a hex color string
@@ -26,14 +25,6 @@ interface ContourOptions {
      */
     thinner?: (zoom: number) => number;
 }
-interface ContourGLElems {
-    map: MapType;
-    program: WGLProgram;
-    vertices: WGLBuffer;
-    grid_cell_size: WGLBuffer;
-    fill_texture: WGLTexture;
-    texcoords: WGLBuffer;
-}
 /**
  * A field of contoured data. The contours can optionally be thinned based on map zoom level.
  * @example
@@ -42,20 +33,19 @@ interface ContourGLElems {
  * const contours = new Contour(height_field, {color: '#000000', interval: 30,
  *                                                  thinner: zoom => zoom < 5 ? 2 : 1});
  */
-declare class Contour extends PlotComponent {
-    readonly field: RawScalarField;
+declare class Contour<ArrayType extends TypedArray> extends PlotComponent {
+    private readonly field;
     readonly color: [number, number, number];
     readonly interval: number;
     readonly levels: number[];
     readonly thinner: (zoom: number) => number;
-    /** @private */
-    gl_elems: ContourGLElems | null;
+    private gl_elems;
     /**
      * Create a contoured field
      * @param field - The field to contour
      * @param opts  - Options for creating the contours
      */
-    constructor(field: RawScalarField, opts: ContourOptions);
+    constructor(field: RawScalarField<ArrayType>, opts: ContourOptions);
     /**
      * @internal
      * Add the contours to a map

package/lib/Contour.js

@@ -1,6 +1,5 @@
-import { isWebGL2Ctx } from './AutumnTypes';
-import { PlotComponent } from './PlotComponent';
-import { hex2rgba } from './utils';
+import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
+import { Cache, hex2rgba } from './utils';
 import { WGLProgram, WGLTexture } from 'autumn-wgl';
 const contour_vertex_shader_src = `uniform mat4 u_matrix;
 
@@ -40,16 +39,20 @@ uniform lowp float u_zoom_fac;
 void main() {
     highp float field_val = texture2D(u_fill_sampler, v_tex_coord).r;
 
-    
+    lowp vec2 grid_point = fract(v_tex_coord / u_step_size + vec2(0.5, 0.5));
+    highp vec2 grid_sw = v_tex_coord - grid_point * u_step_size;
+
     lowp vec2 ihat = vec2(u_step_size.x, 0.0);
     lowp vec2 jhat = vec2(0.0, u_step_size.y);
-    highp float fv_xp1 = texture2D(u_fill_sampler, v_tex_coord + ihat).r;
-    highp float fv_xm1 = texture2D(u_fill_sampler, v_tex_coord - ihat).r;
-    highp float fv_yp1 = texture2D(u_fill_sampler, v_tex_coord + jhat).r;
-    highp float fv_ym1 = texture2D(u_fill_sampler, v_tex_coord - jhat).r;
-    highp float fwidth_field = sqrt(((fv_xp1 - fv_xm1) * (fv_xp1 - fv_xm1) + (fv_yp1 - fv_ym1) * (fv_yp1 - fv_ym1)) / (5e5 * v_grid_cell_size));
+    highp float fv_sw = texture2D(u_fill_sampler, grid_sw).r;
+    highp float fv_se = texture2D(u_fill_sampler, grid_sw + ihat).r;
+    highp float fv_nw = texture2D(u_fill_sampler, grid_sw + jhat).r;
+    highp float fv_ne = texture2D(u_fill_sampler, grid_sw + ihat + jhat).r;
+
+    highp float dfdx = mix(fv_se, fv_ne, grid_point.y) - mix(fv_sw, fv_nw, grid_point.y);
+    highp float dfdy = mix(fv_nw, fv_ne, grid_point.x) - mix(fv_sw, fv_se, grid_point.x);
+    highp float fwidth_field = sqrt((dfdx * dfdx + dfdy * dfdy) / (5e5 * v_grid_cell_size));
 
-    
     lowp float plot_val;
 
     if (u_num_contours > 0) {
@@ -97,9 +100,10 @@ void main() {
 
     gl_FragColor = vec4(u_color, 1. - (plot_val * plot_val / (u_line_cutoff * u_line_cutoff)));
 }`
+const program_cache = new Cache((gl) => new WGLProgram(gl, contour_vertex_shader_src, contour_fragment_shader_src));
 /**
  * A field of contoured data. The contours can optionally be thinned based on map zoom level.
- * &example
+ * @example
  * // Create a contoured height field, with black contours every 30 m (assuming the height field is in
  * // meters) and only using every other contour when the map zoom level is less than 5.
  * const contours = new Contour(height_field, {color: '#000000', interval: 30,
@@ -108,8 +112,8 @@ void main() {
 class Contour extends PlotComponent {
     /**
      * Create a contoured field
-     * &param field - The field to contour
-     * &param opts  - Options for creating the contours
+     * @param field - The field to contour
+     * @param opts  - Options for creating the contours
      */
     constructor(field, opts) {
         super();
@@ -122,23 +126,21 @@ class Contour extends PlotComponent {
         this.gl_elems = null;
     }
     /**
-     * &internal
+     * @internal
      * Add the contours to a map
      */
     async onAdd(map, gl) {
         // Basic procedure for these contours from https://www.shadertoy.com/view/lltBWM
-        gl.getExtension('OES_texture_float');
-        gl.getExtension('OES_texture_float_linear');
-        gl.getExtension('OES_standard_derivatives');
-        const program = new WGLProgram(gl, contour_vertex_shader_src, contour_fragment_shader_src);
+        gl.getExtension("OES_standard_derivatives");
+        const program = program_cache.getValue(gl);
         const { vertices: verts_buf, texcoords: tex_coords_buf, cellsize: cellsize_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
         const texcoords = tex_coords_buf;
         const grid_cell_size = cellsize_buf;
-        const format = isWebGL2Ctx(gl) ? gl.R32F : gl.LUMINANCE;
-        const fill_image = { 'format': format, 'type': gl.FLOAT,
-            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.data,
-            'mag_filter': gl.LINEAR,
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, this.field.isFloat16());
+        const fill_image = { 'format': format, 'type': type,
+            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.getTextureData(),
+            'mag_filter': gl.LINEAR, 'row_alignment': row_alignment,
         };
         const fill_texture = new WGLTexture(gl, fill_image);
         this.gl_elems = {
@@ -146,7 +148,7 @@ class Contour extends PlotComponent {
         };
     }
     /**
-     * &internal
+     * @internal
      * Render the contours
      */
     render(gl, matrix) {
@@ -155,8 +157,8 @@ class Contour extends PlotComponent {
         const gl_elems = this.gl_elems;
         const zoom = gl_elems.map.getZoom();
         const intv = this.thinner(zoom) * this.interval;
-        const cutoff = 0.5 / intv;
-        const step_size = [0.25 / this.field.grid.ni, 0.25 / this.field.grid.nj];
+        const cutoff = 0.3 / intv;
+        const step_size = [1 / this.field.grid.ni, 1 / this.field.grid.nj];
         const zoom_fac = Math.pow(2, zoom);
         let uniforms = { 'u_contour_interval': intv, 'u_line_cutoff': cutoff, 'u_color': this.color, 'u_step_size': step_size, 'u_zoom_fac': zoom_fac,
             'u_matrix': matrix, 'u_num_contours': 0, 'u_contour_levels': [0] };

package/lib/Fill.d.ts

@@ -0,0 +1,86 @@
+import { PlotComponent } from './PlotComponent';
+import { ColorMap } from './Colormap';
+import { RawScalarField } from './RawField';
+import { MapType } from './Map';
+import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
+interface ContourFillOptions {
+    /** The color map to use when creating the fills */
+    cmap: ColorMap;
+    /**
+     * The opacity for the filled contours
+     * @default 1
+     */
+    opacity?: number;
+}
+interface RasterOptions {
+    /** The color map to use when creating the raster plot */
+    cmap: ColorMap;
+    /**
+     * The opacity for the raster plot
+     * @default 1
+     */
+    opacity?: number;
+}
+declare class PlotComponentFill<ArrayType extends TypedArray> extends PlotComponent {
+    private readonly field;
+    readonly cmap: ColorMap;
+    readonly opacity: number;
+    private readonly cmap_image;
+    private readonly index_map;
+    private gl_elems;
+    protected image_mag_filter: number | null;
+    protected cmap_mag_filter: number | null;
+    constructor(field: RawScalarField<ArrayType>, opts: ContourFillOptions);
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+/**
+ * A raster (i.e. pixel) plot
+ * @example
+ * // 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> extends PlotComponentFill<ArrayType> {
+    /**
+     * 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);
+    /**
+     * @internal
+     * Add the raster plot to a map
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    /**
+     * @internal
+     * Render the raster plot
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+/**
+ * A filled contoured field
+ * @example
+ * // 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> extends PlotComponentFill<ArrayType> {
+    /**
+     * 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);
+    /**
+     * @internal
+     * Add the filled contours to a map
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    /**
+     * @internal
+     * Render the filled contours
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+export { ContourFill, Raster };
+export type { ContourFillOptions, RasterOptions };