autumnplot-gl 2.0.0-beta.1

package/lib/Paintball.js

@@ -0,0 +1,104 @@
+import { isWebGL2Ctx } from "./AutumnTypes";
+import { PlotComponent } from "./PlotComponent";
+import { hex2rgba } from "./utils";
+import { WGLProgram, WGLTexture } from "autumn-wgl";
+const paintball_vertex_shader_src = `uniform mat4 u_matrix;
+
+attribute vec2 a_pos;
+attribute vec2 a_tex_coord;
+
+varying highp vec2 v_tex_coord;
+
+void main() {
+    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
+    v_tex_coord = a_tex_coord;
+}`
+const paintball_fragment_shader_src = `#define MAX_N_COLORS 24
+
+varying highp vec2 v_tex_coord;
+
+uniform sampler2D u_fill_sampler;
+uniform lowp vec4 u_colors[MAX_N_COLORS];
+uniform int u_num_colors;
+uniform highp float u_opacity;
+
+void main() {
+    highp float fill_val = texture2D(u_fill_sampler, v_tex_coord).r;
+    
+    if (fill_val < 0.5) {
+        discard;
+    }
+
+    lowp vec4 color = vec4(0., 0., 0., 0.);
+
+    for (int nclr = 0; nclr < MAX_N_COLORS ; nclr++) {
+        if (nclr >= u_num_colors || fill_val < 0.99) { break; }
+
+        lowp float mem_active = mod(fill_val, 2.);
+        color = mix(color, u_colors[nclr], mem_active);
+        fill_val = floor(fill_val / 2.);
+    }
+
+    color.a = color.a * u_opacity;
+    gl_FragColor = color;
+}`
+/**
+ * A class representing a paintball plot, which is a plot of objects in every member of an ensemble. Objects are usually defined by a single threshold on
+ * a field (such as simulated reflectivity greater than 40 dBZ), but could in theory be defined by any arbitrarily complicated method. In autumnplot-gl,
+ * the data for the paintball plot is given as a single field with the objects from each member encoded as "bits" in the field. Because the field is made up
+ * of single-precision floats, this works for up to 24 members. (Technically speaking, I don't need the quotes around "bits", as they're bits of the
+ * significand of an IEEE 754 float.)
+ */
+class Paintball extends PlotComponent {
+    /**
+     * Create a paintball plot
+     * &param field - A scalar field containing the member objects encoded as "bits." The numerical value of each grid point can be constructed like
+     *               `1.0 * M1 + 2.0 * M2 + 4.0 * M3 + 8.0 * M4 ...`, where `M1` is 1 if that grid point is in an object in member 1 and 0 otherwise,
+     *               `M2` is the same thing for member 2, and `M3` and `M4` and up to `Mn` are the same thing for the rest of the members.
+     * &param opts  - Options for creating the paintball plot
+     */
+    constructor(field, opts) {
+        super();
+        this.field = field;
+        opts = opts !== undefined ? opts : {};
+        const colors = opts.colors !== undefined ? [...opts.colors] : ['#000000'];
+        this.colors = colors.reverse().map(color => hex2rgba(color)).flat();
+        this.opacity = opts.opacity !== undefined ? opts.opacity : 1.;
+        this.gl_elems = null;
+    }
+    /**
+     * &internal
+     * Add the paintball plot to a map.
+     */
+    async onAdd(map, gl) {
+        gl.getExtension('OES_texture_float');
+        const program = new WGLProgram(gl, paintball_vertex_shader_src, paintball_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 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.NEAREST,
+        };
+        const fill_texture = new WGLTexture(gl, fill_image);
+        this.gl_elems = {
+            program: program, vertices: vertices, fill_texture: fill_texture, texcoords: texcoords,
+        };
+    }
+    /**
+     * &internal
+     * Render the paintball plot
+     */
+    render(gl, matrix) {
+        if (this.gl_elems === null)
+            return;
+        const gl_elems = this.gl_elems;
+        // Render to framebuffer
+        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opacity, 'u_colors': this.colors, 'u_num_colors': this.colors.length / 4 }, { 'u_fill_sampler': gl_elems.fill_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();
+    }
+}
+export default Paintball;

package/lib/PlotComponent.d.ts

@@ -0,0 +1,20 @@
+import * as Comlink from 'comlink';
+import { MapType } from './Map';
+import { WebGLAnyRenderingContext } from './AutumnTypes';
+declare const layer_worker: Comlink.Remote<{
+    makeBBElements: (field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, thin_fac_base: number, max_zoom: number) => {
+        pts: Float32Array;
+        tex_coords: Float32Array;
+    };
+    makeDomainVerticesAndTexCoords: (field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, texcoord_margin_r: number, texcoord_margin_s: number) => {
+        vertices: Float32Array;
+        tex_coords: Float32Array;
+        grid_cell_size: Float32Array;
+    };
+    makePolyLines: (lines: import("./AutumnTypes").LineSpec[]) => import("./AutumnTypes").PolylineSpec;
+}>;
+declare abstract class PlotComponent {
+    abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    abstract render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+export { PlotComponent, layer_worker };

package/lib/PlotComponent.js

@@ -0,0 +1,6 @@
+import * as Comlink from 'comlink';
+const worker = new Worker(new URL('./PlotLayer.worker', import.meta.url));
+const layer_worker = Comlink.wrap(worker);
+class PlotComponent {
+}
+export { PlotComponent, layer_worker };

package/lib/PlotLayer.d.ts

@@ -0,0 +1,96 @@
+import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { MapType } from './Map';
+import { PlotComponent } from './PlotComponent';
+declare abstract class PlotLayerBase {
+    readonly type: 'custom';
+    readonly id: string;
+    constructor(id: string);
+    abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): void;
+    abstract render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+/**
+ * A static map layer. The data are assumed to be static in time. If the data have a time component (e.g., a model forecast), an {@link MultiPlotLayer}
+ * may be more appropriate.
+ * @example
+ * // Create map layers from provided fields
+ * const height_layer = new PlotLayer('height-contours', height_contours);
+ * const wind_speed_layer = new PlotLayer('wind-speed-fill', wind_speed_fill);
+ * const barb_layer = new PlotLayer('barbs', wind_barbs);
+ */
+declare class PlotLayer extends PlotLayerBase {
+    readonly field: PlotComponent;
+    /**
+     * Create a map layer from a field
+     * @param id    - A unique id for this layer
+     * @param field - The field to plot in this layer
+     */
+    constructor(id: string, field: PlotComponent);
+    /**
+     * @internal
+     * Add this layer to a map
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): void;
+    /**
+     * @internal
+     * Render this layer
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+/**
+ * A varying map layer. If the data don't have a varying component, such as over time, it might be easier to use an {@link PlotLayer} instead.
+ * @example
+ * // Create a varying map layer
+ * height_layer = new MultiPlotLayer('height-contours');
+ *
+ * // Add some fields to it
+ * height_layer.addField(height_contour_f00, '20230112_1200');
+ * height_layer.addField(height_contour_f01, '20230112_1300');
+ * height_layer.addField(height_contour_f02, '20230112_1400');
+ *
+ * // Set the date/time in the map layer
+ * height_layer.setActiveKey('20230112_1200');
+ */
+declare class MultiPlotLayer extends PlotLayerBase {
+    /** @private */
+    fields: Record<string, PlotComponent>;
+    /** @private */
+    field_key: string | null;
+    /** @private */
+    map: MapType | null;
+    /** @private */
+    gl: WebGLAnyRenderingContext | null;
+    /**
+     * Create a time-varying map layer
+     * @param id - A unique id for this layer
+     */
+    constructor(id: string);
+    /**
+     * @internal
+     * Add this layer to a map
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): void;
+    /**
+     * @internal
+     * Render this layer
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    /**
+     * Set the active key
+     * @param key - The new key
+     */
+    setActiveKey(key: string): void;
+    /**
+     * Get a list of all dates/times that have been added to the layer
+     * @returns An array of dates/times
+     */
+    getKeys(): string[];
+    /**
+     * Add a field valid at a specific date/time
+     * @param field - The field to add
+     * @param dt    - The date/time at which the field is valid
+     */
+    addField(field: PlotComponent, key: string): void;
+    /** @private */
+    _repaintIfNecessary(old_field_key: string | null): void;
+}
+export { PlotLayer, MultiPlotLayer };

package/lib/PlotLayer.js

@@ -0,0 +1,131 @@
+class PlotLayerBase {
+    constructor(id) {
+        this.type = 'custom';
+        this.id = id;
+    }
+}
+/**
+ * A static map layer. The data are assumed to be static in time. If the data have a time component (e.g., a model forecast), an {@link MultiPlotLayer}
+ * may be more appropriate.
+ * @example
+ * // Create map layers from provided fields
+ * const height_layer = new PlotLayer('height-contours', height_contours);
+ * const wind_speed_layer = new PlotLayer('wind-speed-fill', wind_speed_fill);
+ * const barb_layer = new PlotLayer('barbs', wind_barbs);
+ */
+class PlotLayer extends PlotLayerBase {
+    /**
+     * Create a map layer from a field
+     * @param id    - A unique id for this layer
+     * @param field - The field to plot in this layer
+     */
+    constructor(id, field) {
+        super(id);
+        this.field = field;
+    }
+    /**
+     * @internal
+     * Add this layer to a map
+     */
+    onAdd(map, gl) {
+        this.field.onAdd(map, gl);
+    }
+    /**
+     * @internal
+     * Render this layer
+     */
+    render(gl, matrix) {
+        this.field.render(gl, matrix);
+    }
+}
+/**
+ * A varying map layer. If the data don't have a varying component, such as over time, it might be easier to use an {@link PlotLayer} instead.
+ * @example
+ * // Create a varying map layer
+ * height_layer = new MultiPlotLayer('height-contours');
+ *
+ * // Add some fields to it
+ * height_layer.addField(height_contour_f00, '20230112_1200');
+ * height_layer.addField(height_contour_f01, '20230112_1300');
+ * height_layer.addField(height_contour_f02, '20230112_1400');
+ *
+ * // Set the date/time in the map layer
+ * height_layer.setActiveKey('20230112_1200');
+ */
+class MultiPlotLayer extends PlotLayerBase {
+    /**
+     * Create a time-varying map layer
+     * @param id - A unique id for this layer
+     */
+    constructor(id) {
+        super(id);
+        this.fields = {};
+        this.field_key = null;
+        this.map = null;
+        this.gl = null;
+    }
+    /**
+     * @internal
+     * Add this layer to a map
+     */
+    onAdd(map, gl) {
+        this.map = map;
+        this.gl = gl;
+        Object.values(this.fields).forEach(field => {
+            field.onAdd(map, gl).then(res => {
+                this._repaintIfNecessary(null);
+            });
+        });
+        this._repaintIfNecessary(null);
+    }
+    /**
+     * @internal
+     * Render this layer
+     */
+    render(gl, matrix) {
+        if (this.map !== null && this.gl !== null && this.field_key !== null
+            && this.fields.hasOwnProperty(this.field_key) && this.fields[this.field_key] !== null) {
+            this.fields[this.field_key].render(gl, matrix);
+        }
+    }
+    /**
+     * Set the active key
+     * @param key - The new key
+     */
+    setActiveKey(key) {
+        const old_field_key = this.field_key;
+        this.field_key = key;
+        this._repaintIfNecessary(old_field_key);
+    }
+    /**
+     * Get a list of all dates/times that have been added to the layer
+     * @returns An array of dates/times
+     */
+    getKeys() {
+        return Object.keys(this.fields);
+    }
+    /**
+     * Add a field valid at a specific date/time
+     * @param field - The field to add
+     * @param dt    - The date/time at which the field is valid
+     */
+    addField(field, key) {
+        const old_field_key = this.field_key;
+        if (this.map !== null && this.gl !== null && field !== null) {
+            field.onAdd(this.map, this.gl).then(res => {
+                this._repaintIfNecessary(null);
+            });
+        }
+        this.fields[key] = field;
+        if (this.field_key === null) {
+            this.field_key = key;
+        }
+    }
+    /** @private */
+    _repaintIfNecessary(old_field_key) {
+        if (this.map !== null && old_field_key !== this.field_key) {
+            this.map.triggerRepaint();
+        }
+    }
+}
+export { PlotLayer, MultiPlotLayer };

package/lib/PlotLayer.worker.d.ts

@@ -0,0 +1,18 @@
+import { PolylineSpec, LineSpec } from "./AutumnTypes";
+declare function makeBBElements(field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, thin_fac_base: number, max_zoom: number): {
+    pts: Float32Array;
+    tex_coords: Float32Array;
+};
+declare function makeDomainVerticesAndTexCoords(field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, texcoord_margin_r: number, texcoord_margin_s: number): {
+    vertices: Float32Array;
+    tex_coords: Float32Array;
+    grid_cell_size: Float32Array;
+};
+declare function makePolylines(lines: LineSpec[]): PolylineSpec;
+declare const ep_interface: {
+    makeBBElements: typeof makeBBElements;
+    makeDomainVerticesAndTexCoords: typeof makeDomainVerticesAndTexCoords;
+    makePolyLines: typeof makePolylines;
+};
+type PlotLayerWorker = typeof ep_interface;
+export type { PlotLayerWorker };