autumnplot-gl 2.2.3 → 3.1.0

package/lib/Fill.js

@@ -1,7 +1,7 @@
 import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
-import { makeTextureImage } from './Colormap';
+import { ColorMap, makeIndexMap, makeTextureImage } from './Colormap';
 import { WGLProgram, WGLTexture } from 'autumn-wgl';
-import { Float16Array } from '@petamoriken/float16';
+import { hex2rgb, normalizeOptions } from './utils';
 const contourfill_vertex_shader_src = `uniform mat4 u_matrix;
 uniform int u_offset;
 
@@ -25,6 +25,8 @@ uniform sampler2D u_cmap_nonlin_sampler;
 uniform highp float u_cmap_min;
 uniform highp float u_cmap_max;
 uniform highp float u_opacity;
+uniform highp vec4 u_underflow_color;
+uniform highp vec4 u_overflow_color;
 uniform int u_n_index;
 
 void main() {
@@ -32,45 +34,63 @@ void main() {
     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);
     
-    if (normed_val < 0.0 || normed_val > 1.0) {
-        discard;
+    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));
     }
 
-    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;
-    lowp vec4 color = texture2D(u_cmap_sampler, vec2(nonlin_val, 0.5));
     color.a = color.a * u_opacity;
     gl_FragColor = color;
 }`
+const default_cmap = new ColorMap([0, 1], ['#000000'], { overflow_color: '#000000', underflow_color: '#000000' });
+const contour_fill_opt_defaults = {
+    cmap: default_cmap,
+    opacity: 1,
+};
+const raster_opt_defaults = {
+    cmap: default_cmap,
+    opacity: 1,
+};
 class PlotComponentFill extends PlotComponent {
     constructor(field, opts) {
         super();
         this.field = field;
-        this.cmap = opts.cmap;
-        this.opacity = opts.opacity || 1.;
-        this.cmap_image = makeTextureImage(this.cmap);
-        const levels = this.cmap.levels;
-        const n_lev = levels.length - 1;
-        // Build a texture to account for nonlinear colormaps (basically inverts the relationship between
-        //  the normalized index and the normalized level)
-        const n_nonlin = 101;
-        const map_norm = [];
-        for (let i = 0; i < n_nonlin; i++) {
-            map_norm.push(i / (n_nonlin - 1));
-        }
-        const input_norm = levels.map((lev, ilev) => ilev / n_lev);
-        const cmap_norm = levels.map(lev => (lev - levels[0]) / (levels[n_lev] - levels[0]));
-        const inv_cmap_norm = map_norm.map(lev => {
-            let jlev;
-            for (jlev = 0; !(cmap_norm[jlev] <= lev && lev <= cmap_norm[jlev + 1]); jlev++) { }
-            const alpha = (lev - cmap_norm[jlev]) / (cmap_norm[jlev + 1] - cmap_norm[jlev]);
-            return input_norm[jlev] * (1 - alpha) + input_norm[jlev + 1] * alpha;
-        });
-        this.index_map = new Float16Array(inv_cmap_norm);
+        this.opts = normalizeOptions(opts, contour_fill_opt_defaults);
+        this.cmap_image = makeTextureImage(this.opts.cmap);
+        this.index_map = makeIndexMap(this.opts.cmap);
         this.gl_elems = null;
+        this.fill_texture = null;
         this.image_mag_filter = null;
         this.cmap_mag_filter = null;
     }
+    async updateField(field) {
+        this.field = field;
+        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,
+        };
+        if (this.fill_texture === null) {
+            this.fill_texture = new WGLTexture(gl, fill_image);
+        }
+        else {
+            this.fill_texture.setImageData(fill_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) {
@@ -80,12 +100,6 @@ class PlotComponentFill extends PlotComponent {
         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, 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': this.image_mag_filter, 'row_alignment': row_alignment,
-        };
-        const fill_texture = new WGLTexture(gl, fill_image);
         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);
@@ -96,18 +110,22 @@ class PlotComponentFill extends PlotComponent {
         };
         const cmap_nonlin_texture = new WGLTexture(gl, cmap_nonlin_image);
         this.gl_elems = {
-            program: program, vertices: vertices, texcoords: texcoords,
-            fill_texture: fill_texture, cmap_texture: cmap_texture, cmap_nonlin_texture: cmap_nonlin_texture,
+            gl: gl, map: map, program: program, vertices: vertices, texcoords: texcoords,
+            cmap_texture: cmap_texture, cmap_nonlin_texture: cmap_nonlin_texture,
         };
+        this.updateField(this.field);
     }
     render(gl, matrix) {
-        if (this.gl_elems === null)
+        if (this.gl_elems === null || this.fill_texture === null)
             return;
         const gl_elems = this.gl_elems;
         if (matrix instanceof Float32Array)
             matrix = [...matrix];
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_cmap_min': this.cmap.levels[0], 'u_cmap_max': this.cmap.levels[this.cmap.levels.length - 1], 'u_matrix': matrix, 'u_opacity': this.opacity,
-            'u_n_index': this.index_map.length, 'u_offset': 0 }, { 'u_fill_sampler': gl_elems.fill_texture, 'u_cmap_sampler': gl_elems.cmap_texture, 'u_cmap_nonlin_sampler': gl_elems.cmap_nonlin_texture });
+        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();
@@ -134,6 +152,13 @@ class Raster extends PlotComponentFill {
     constructor(field, opts) {
         super(field, opts);
     }
+    /**
+     * 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);
+    }
     /**
      * @internal
      * Add the raster plot to a map
@@ -141,7 +166,7 @@ class Raster extends PlotComponentFill {
     async onAdd(map, gl) {
         this.image_mag_filter = gl.NEAREST;
         this.cmap_mag_filter = gl.LINEAR;
-        super.onAdd(map, gl);
+        await super.onAdd(map, gl);
     }
     /**
      * @internal
@@ -166,6 +191,13 @@ class ContourFill extends PlotComponentFill {
     constructor(field, opts) {
         super(field, opts);
     }
+    /**
+     * Update the data displayed as filled contours
+     * @param field - The new field to display as filled contours
+     */
+    async updateField(field) {
+        await super.updateField(field);
+    }
     /**
      * @internal
      * Add the filled contours to a map
@@ -173,7 +205,7 @@ class ContourFill extends PlotComponentFill {
     async onAdd(map, gl) {
         this.image_mag_filter = gl.LINEAR;
         this.cmap_mag_filter = gl.NEAREST;
-        super.onAdd(map, gl);
+        await super.onAdd(map, gl);
     }
     /**
      * @internal

package/lib/Grid.d.ts

@@ -0,0 +1,167 @@
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
+import { WebGLAnyRenderingContext } from "./AutumnTypes";
+interface EarthCoords {
+    lons: Float32Array;
+    lats: Float32Array;
+}
+interface GridCoords {
+    x: Float32Array;
+    y: Float32Array;
+}
+type GridType = 'latlon' | 'latlonrot' | 'lcc';
+declare abstract class Grid {
+    readonly type: GridType;
+    readonly ni: number;
+    readonly nj: number;
+    readonly is_conformal: boolean;
+    private readonly buffer_cache;
+    private readonly billboard_buffer_cache;
+    private readonly vector_rotation_cache;
+    constructor(type: GridType, is_conformal: boolean, ni: number, nj: number);
+    abstract copy(opts?: {
+        ni?: number;
+        nj?: number;
+    }): Grid;
+    abstract getEarthCoords(): EarthCoords;
+    abstract getGridCoords(): GridCoords;
+    abstract transform(x: number, y: number, opts?: {
+        inverse?: boolean;
+    }): [number, number];
+    abstract getThinnedGrid(thin_x: number, thin_y: number): Grid;
+    getWGLBuffers(gl: WebGLAnyRenderingContext): Promise<{
+        vertices: WGLBuffer;
+        texcoords: WGLBuffer;
+        cellsize: WGLBuffer;
+    }>;
+    getWGLBillboardBuffers(gl: WebGLAnyRenderingContext, thin_fac: number, max_zoom: number): Promise<{
+        vertices: WGLBuffer;
+        texcoords: WGLBuffer;
+    }>;
+    getVectorRotationTexture(gl: WebGLAnyRenderingContext): {
+        rotation: WGLTexture;
+    };
+}
+/** A plate carree (a.k.a. lat/lon) grid with uniform grid spacing */
+declare class PlateCarreeGrid extends Grid {
+    readonly ll_lon: number;
+    readonly ll_lat: number;
+    readonly ur_lon: number;
+    readonly ur_lat: number;
+    private readonly ll_cache;
+    private readonly gc_cache;
+    /**
+     * Create a plate carree grid
+     * @param ni     - The number of grid points in the i (longitude) direction
+     * @param nj     - The number of grid points in the j (latitude) direction
+     * @param ll_lon - The longitude of the lower left corner of the grid
+     * @param ll_lat - The latitude of the lower left corner of the grid
+     * @param ur_lon - The longitude of the upper right corner of the grid
+     * @param ur_lat - The latitude of the upper right corner of the grid
+     */
+    constructor(ni: number, nj: number, ll_lon: number, ll_lat: number, ur_lon: number, ur_lat: number);
+    copy(opts?: {
+        ni?: number;
+        nj?: number;
+        ll_lon?: number;
+        ll_lat?: number;
+        ur_lon?: number;
+        ur_lat?: number;
+    }): PlateCarreeGrid;
+    /**
+     * Get a list of longitudes and latitudes on the grid (internal method)
+     */
+    getEarthCoords(): EarthCoords;
+    getGridCoords(): GridCoords;
+    transform(x: number, y: number, opts?: {
+        inverse?: boolean;
+    }): [number, number];
+    getThinnedGrid(thin_x: number, thin_y: number): PlateCarreeGrid;
+}
+/** A rotated lat-lon (plate carree) grid with uniform grid spacing */
+declare class PlateCarreeRotatedGrid extends Grid {
+    readonly np_lon: number;
+    readonly np_lat: number;
+    readonly lon_shift: number;
+    readonly ll_lon: number;
+    readonly ll_lat: number;
+    readonly ur_lon: number;
+    readonly ur_lat: number;
+    private readonly llrot;
+    private readonly ll_cache;
+    private readonly gc_cache;
+    /**
+     * Create a Lambert conformal conic grid
+     * @param ni        - The number of grid points in the i (longitude) direction
+     * @param nj        - The number of grid points in the j (latitude) direction
+     * @param np_lon    - The longitude of the north pole for the rotated grid
+     * @param np_lat    - The latitude of the north pole for the rotated grid
+     * @param lon_shift - The angle around the rotated north pole to shift the central meridian
+     * @param ll_lon    - The longitude of the lower left corner of the grid (on the rotated earth)
+     * @param ll_lat    - The latitude of the lower left corner of the grid (on the rotated earth)
+     * @param ur_lon    - The longitude of the upper right corner of the grid (on the rotated earth)
+     * @param ur_lat    - The latitude of the upper right corner of the grid (on the rotated earth)
+     */
+    constructor(ni: number, nj: number, np_lon: number, np_lat: number, lon_shift: number, ll_lon: number, ll_lat: number, ur_lon: number, ur_lat: number);
+    copy(opts?: {
+        ni?: number;
+        nj?: number;
+        ll_lon?: number;
+        ll_lat?: number;
+        ur_lon?: number;
+        ur_lat?: number;
+    }): PlateCarreeRotatedGrid;
+    /**
+     * Get a list of longitudes and latitudes on the grid (internal method)
+     */
+    getEarthCoords(): EarthCoords;
+    getGridCoords(): GridCoords;
+    transform(x: number, y: number, opts?: {
+        inverse?: boolean;
+    }): [number, number];
+    getThinnedGrid(thin_x: number, thin_y: number): PlateCarreeRotatedGrid;
+}
+/** A Lambert conformal conic grid with uniform grid spacing */
+declare class LambertGrid extends Grid {
+    readonly lon_0: number;
+    readonly lat_0: number;
+    readonly lat_std: [number, number];
+    readonly ll_x: number;
+    readonly ll_y: number;
+    readonly ur_x: number;
+    readonly ur_y: number;
+    private readonly lcc;
+    private readonly ll_cache;
+    private readonly gc_cache;
+    /**
+     * Create a Lambert conformal conic grid
+     * @param ni      - The number of grid points in the i (longitude) direction
+     * @param nj      - The number of grid points in the j (latitude) direction
+     * @param lon_0   - The standard longitude for the projection; this is also the center longitude for the projection
+     * @param lat_0   - The center latitude for the projection
+     * @param lat_std - The standard latitudes for the projection
+     * @param ll_x    - The x coordinate in projection space of the lower-left corner of the grid
+     * @param ll_y    - The y coordinate in projection space of the lower-left corner of the grid
+     * @param ur_x    - The x coordinate in projection space of the upper-right corner of the grid
+     * @param ur_y    - The y coordinate in projection space of the upper-right corner of the grid
+     */
+    constructor(ni: number, nj: number, lon_0: number, lat_0: number, lat_std: [number, number], ll_x: number, ll_y: number, ur_x: number, ur_y: number);
+    copy(opts?: {
+        ni?: number;
+        nj?: number;
+        ll_x?: number;
+        ll_y?: number;
+        ur_x?: number;
+        ur_y?: number;
+    }): LambertGrid;
+    /**
+     * Get a list of longitudes and latitudes on the grid (internal method)
+     */
+    getEarthCoords(): EarthCoords;
+    getGridCoords(): GridCoords;
+    transform(x: number, y: number, opts?: {
+        inverse?: boolean;
+    }): [number, number];
+    getThinnedGrid(thin_x: number, thin_y: number): LambertGrid;
+}
+export { Grid, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid };
+export type { GridType };