autumnplot-gl 2.1.0 → 2.2.0

package/lib/Paintball.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 paintball_vertex_shader_src = `uniform mat4 u_matrix;
 
@@ -42,6 +41,7 @@ void main() {
     color.a = color.a * u_opacity;
     gl_FragColor = color;
 }`
+const program_cache = new Cache((gl) => new WGLProgram(gl, paintball_vertex_shader_src, paintball_fragment_shader_src));
 /**
  * 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,
@@ -52,10 +52,10 @@ void main() {
 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
+     * @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
+     * @param opts  - Options for creating the paintball plot
      */
     constructor(field, opts) {
         super();
@@ -67,19 +67,20 @@ class Paintball extends PlotComponent {
         this.gl_elems = null;
     }
     /**
-     * &internal
+     * @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 program = program_cache.getValue(gl);
         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,
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 2);
+        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.NEAREST, 'row_alignment': row_alignment,
         };
         const fill_texture = new WGLTexture(gl, fill_image);
         this.gl_elems = {
@@ -87,7 +88,7 @@ class Paintball extends PlotComponent {
         };
     }
     /**
-     * &internal
+     * @internal
      * Render the paintball plot
      */
     render(gl, matrix) {

package/lib/PlotComponent.d.ts

@@ -17,4 +17,9 @@ declare abstract class PlotComponent {
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     abstract render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
 }
-export { PlotComponent, layer_worker };
+declare function getGLFormatTypeAlignment(gl: WebGLAnyRenderingContext, is_float16: boolean): {
+    format: number;
+    type: number;
+    row_alignment: number;
+};
+export { PlotComponent, layer_worker, getGLFormatTypeAlignment };

package/lib/PlotComponent.js

@@ -1,6 +1,39 @@
 import * as Comlink from 'comlink';
+import { getOS } from "./utils";
+import { isWebGL2Ctx } from './AutumnTypes';
 const worker = new Worker(new URL('./PlotLayer.worker', import.meta.url));
 const layer_worker = Comlink.wrap(worker);
 class PlotComponent {
 }
-export { PlotComponent, layer_worker };
+function getGLFormatTypeAlignment(gl, is_float16) {
+    let format, type, row_alignment;
+    const is_webgl2 = isWebGL2Ctx(gl);
+    if (is_float16) {
+        const ext = gl.getExtension('OES_texture_half_float');
+        const ext_lin = gl.getExtension('OES_texture_half_float_linear');
+        if ((!is_webgl2 && ext === null) || (!is_webgl2 && ext_lin === null)) {
+            throw "Float16 data are not supported on this hardware. Try Float32 data instead.";
+        }
+        format = is_webgl2 ? gl.R16F : gl.LUMINANCE;
+        type = is_webgl2 ? gl.HALF_FLOAT : ext.HALF_FLOAT_OES;
+        row_alignment = 2;
+    }
+    else {
+        const ext = gl.getExtension('OES_texture_float');
+        const ext_lin = gl.getExtension('OES_texture_float_linear');
+        // As of 11/3/2023, Safari/WebKit on iOS reports as supporting float textures,
+        // but really doesn't. It just silently fails. In WebGL 1, Safari/Webkit returns
+        // null for ext_lin here, but in WebGL2, both ext vars are null because they were 
+        // merged into the standard. This means that to properly fail for iOS devices using
+        // WebGL2, we have to hard code an OS check... this OS check also works when uers
+        // request desktop-mode websites.
+        if ((!is_webgl2 && ext === null) || (!is_webgl2 && ext_lin === null) || (getOS() === 'iOS')) {
+            throw "Float32 data are not supported on this hardware. Try Float16 data instead.";
+        }
+        format = is_webgl2 ? gl.R32F : gl.LUMINANCE;
+        type = gl.FLOAT;
+        row_alignment = 4;
+    }
+    return { format: format, type: type, row_alignment: row_alignment };
+}
+export { PlotComponent, layer_worker, getGLFormatTypeAlignment };

package/lib/PlotLayer.d.ts

@@ -18,7 +18,7 @@ declare abstract class PlotLayerBase {
  * const barb_layer = new PlotLayer('barbs', wind_barbs);
  */
 declare class PlotLayer extends PlotLayerBase {
-    readonly field: PlotComponent;
+    private readonly field;
     /**
      * Create a map layer from a field
      * @param id    - A unique id for this layer
@@ -51,14 +51,10 @@ declare class PlotLayer extends PlotLayerBase {
  * 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;
+    private fields;
+    private field_key;
+    private map;
+    private gl;
     /**
      * Create a time-varying map layer
      * @param id - A unique id for this layer
@@ -90,7 +86,6 @@ declare class MultiPlotLayer extends PlotLayerBase {
      * @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;
+    private repaintIfNecessary;
 }
 export { PlotLayer, MultiPlotLayer };

package/lib/PlotLayer.js

@@ -73,10 +73,10 @@ class MultiPlotLayer extends PlotLayerBase {
         this.gl = gl;
         Object.values(this.fields).forEach(field => {
             field.onAdd(map, gl).then(res => {
-                this._repaintIfNecessary(null);
+                this.repaintIfNecessary(null);
             });
         });
-        this._repaintIfNecessary(null);
+        this.repaintIfNecessary(null);
     }
     /**
      * @internal
@@ -95,7 +95,7 @@ class MultiPlotLayer extends PlotLayerBase {
     setActiveKey(key) {
         const old_field_key = this.field_key;
         this.field_key = key;
-        this._repaintIfNecessary(old_field_key);
+        this.repaintIfNecessary(old_field_key);
     }
     /**
      * Get a list of all dates/times that have been added to the layer
@@ -113,7 +113,7 @@ class MultiPlotLayer extends PlotLayerBase {
         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.repaintIfNecessary(null);
             });
         }
         this.fields[key] = field;
@@ -121,8 +121,7 @@ class MultiPlotLayer extends PlotLayerBase {
             this.field_key = key;
         }
     }
-    /** @private */
-    _repaintIfNecessary(old_field_key) {
+    repaintIfNecessary(old_field_key) {
         if (this.map !== null && old_field_key !== this.field_key) {
             this.map.triggerRepaint();
         }

package/lib/PolylineCollection.d.ts

@@ -1,15 +1,15 @@
-import { WGLBuffer, WGLProgram, WGLTexture, WGLTextureSpec } from "autumn-wgl";
+import { WGLTextureSpec } from "autumn-wgl";
 import { PolylineSpec, LineSpec, WebGLAnyRenderingContext } from "./AutumnTypes";
 declare class PolylineCollection {
     readonly width: number;
     readonly scale: number;
-    readonly program: WGLProgram;
-    readonly origin: WGLBuffer;
-    readonly offset: WGLBuffer;
-    readonly extrusion: WGLBuffer;
-    readonly min_zoom: WGLBuffer;
-    readonly texture: WGLTexture;
-    readonly texcoords: WGLBuffer;
+    private readonly program;
+    private readonly origin;
+    private readonly offset;
+    private readonly extrusion;
+    private readonly min_zoom;
+    private readonly texture;
+    private readonly texcoords;
     constructor(gl: WebGLAnyRenderingContext, polyline: PolylineSpec, tex_image: WGLTextureSpec, line_width: number, offset_scale: number);
     render(gl: WebGLAnyRenderingContext, matrix: number[], [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }

package/lib/PolylineCollection.js

@@ -1,4 +1,5 @@
 import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+import { Cache } from "./utils";
 const polyline_vertex_src = `uniform mat4 u_matrix;
 
 attribute vec2 a_pos;
@@ -69,11 +70,12 @@ void main() {
     lowp vec4 tex_color = texture2D(u_sampler, v_tex_coord);
     gl_FragColor = tex_color;
 }`
+const program_cache = new Cache((gl) => new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src));
 class PolylineCollection {
     constructor(gl, polyline, tex_image, line_width, offset_scale) {
         this.width = line_width;
         this.scale = offset_scale;
-        this.program = new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src);
+        this.program = program_cache.getValue(gl);
         this.origin = new WGLBuffer(gl, polyline['origin'], 2, gl.TRIANGLE_STRIP);
         this.offset = new WGLBuffer(gl, polyline['verts'], 2, gl.TRIANGLE_STRIP);
         this.extrusion = new WGLBuffer(gl, polyline['extrusion'], 2, gl.TRIANGLE_STRIP);

package/lib/RawField.d.ts

@@ -1,30 +1,18 @@
-import { WebGLAnyRenderingContext, WindProfile } from "./AutumnTypes";
+import { Float16Array } from "@petamoriken/float16";
+import { TypedArray, WebGLAnyRenderingContext, WindProfile } from "./AutumnTypes";
 import { WGLBuffer } from "autumn-wgl";
-declare class Cache<A extends unknown[], R> {
-    cached_value: R | null;
-    compute_value: (...args: A) => R;
-    constructor(compute_value: (...args: A) => R);
-    getValue(...args: A): R;
-}
 interface Coords {
     lons: Float32Array;
     lats: Float32Array;
 }
-type GridType = 'latlon' | 'lcc';
+type GridType = 'latlon' | 'latlonrot' | 'lcc';
 declare abstract class Grid {
     readonly type: GridType;
     readonly ni: number;
     readonly nj: number;
     readonly is_conformal: boolean;
-    readonly _buffer_cache: Cache<[WebGLAnyRenderingContext], Promise<{
-        'vertices': WGLBuffer;
-        'texcoords': WGLBuffer;
-        'cellsize': WGLBuffer;
-    }>>;
-    readonly _billboard_buffer_cache: Cache<[WebGLAnyRenderingContext, number, number], Promise<{
-        'vertices': WGLBuffer;
-        'texcoords': WGLBuffer;
-    }>>;
+    private readonly buffer_cache;
+    private readonly billboard_buffer_cache;
     constructor(type: GridType, is_conformal: boolean, ni: number, nj: number);
     abstract copy(opts?: {
         ni?: number;
@@ -51,8 +39,7 @@ declare class PlateCarreeGrid extends Grid {
     readonly ll_lat: number;
     readonly ur_lon: number;
     readonly ur_lat: number;
-    /** @private */
-    readonly _ll_cache: Cache<[], Coords>;
+    private readonly ll_cache;
     /**
      * Create a plate carree grid
      * @param ni     - The number of grid points in the i (longitude) direction
@@ -80,6 +67,47 @@ declare class PlateCarreeGrid extends Grid {
     }): [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;
+    /**
+     * 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)
+     */
+    getCoords(): Coords;
+    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;
@@ -89,12 +117,8 @@ declare class LambertGrid extends Grid {
     readonly ll_y: number;
     readonly ur_x: number;
     readonly ur_y: number;
-    /** @private */
-    readonly lcc: (a: number, b: number, opts?: {
-        inverse: boolean;
-    }) => [number, number];
-    /** @private */
-    readonly _ll_cache: Cache<[], Coords>;
+    private readonly lcc;
+    private readonly ll_cache;
     /**
      * Create a Lambert conformal conic grid
      * @param ni      - The number of grid points in the i (longitude) direction
@@ -125,17 +149,21 @@ declare class LambertGrid extends Grid {
     }): [number, number];
     getThinnedGrid(thin_x: number, thin_y: number): LambertGrid;
 }
+type TextureDataType<ArrayType> = ArrayType extends Float32Array ? Float32Array : Uint16Array;
 /** A class representing a raw 2D field of gridded data, such as height or u wind. */
-declare class RawScalarField {
+declare class RawScalarField<ArrayType extends TypedArray> {
     readonly grid: Grid;
-    readonly data: Float32Array;
+    readonly data: ArrayType;
     /**
      * Create a data field.
      * @param grid - The grid on which the data are defined
      * @param data - The data, which should be given as a 1D array in row-major order, with the first element being at the lower-left corner of the grid.
      */
-    constructor(grid: Grid, data: Float32Array);
-    getThinnedField(thin_x: number, thin_y: number): RawScalarField;
+    constructor(grid: Grid, data: ArrayType);
+    /** @internal */
+    getTextureData(): TextureDataType<ArrayType>;
+    isFloat16(): boolean;
+    getThinnedField(thin_x: number, thin_y: number): RawScalarField<ArrayType>;
     /**
      * Create a new field by aggregating a number of fields using a specific function
      * @param func - A function that will be applied each element of the field. It should take the same number of arguments as fields you have and return a single number.
@@ -145,7 +173,7 @@ declare class RawScalarField {
      * // Compute wind speed from u and v
      * wind_speed_field = RawScalarField.aggreateFields(Math.hypot, u_field, v_field);
      */
-    static aggregateFields(func: (...args: number[]) => number, ...args: RawScalarField[]): RawScalarField;
+    static aggregateFields<ArrayType extends TypedArray>(func: (...args: number[]) => number, ...args: RawScalarField<ArrayType>[]): RawScalarField<ArrayType>;
 }
 type VectorRelativeTo = 'earth' | 'grid';
 interface RawVectorFieldOptions {
@@ -156,15 +184,11 @@ interface RawVectorFieldOptions {
     relative_to?: VectorRelativeTo;
 }
 /** A class representing a 2D gridded field of vectors */
-declare class RawVectorField {
-    readonly u: RawScalarField;
-    readonly v: RawScalarField;
+declare class RawVectorField<ArrayType extends TypedArray> {
+    readonly u: RawScalarField<ArrayType>;
+    readonly v: RawScalarField<ArrayType>;
     readonly relative_to: VectorRelativeTo;
-    /** @private */
-    readonly _rotate_cache: Cache<[], {
-        u: RawScalarField;
-        v: RawScalarField;
-    }>;
+    private readonly rotate_cache;
     /**
      * Create a vector field.
      * @param grid - The grid on which the vector components are defined
@@ -172,10 +196,10 @@ declare class RawVectorField {
      * @param v    - The v (north/south) component of the vectors, which should be given as a 1D array in row-major order, with the first element being at the lower-left corner of the grid
      * @param opts - Options for creating the vector field.
      */
-    constructor(grid: Grid, u: Float32Array, v: Float32Array, opts?: RawVectorFieldOptions);
-    getThinnedField(thin_x: number, thin_y: number): RawVectorField;
+    constructor(grid: Grid, u: ArrayType, v: ArrayType, opts?: RawVectorFieldOptions);
+    getThinnedField(thin_x: number, thin_y: number): RawVectorField<ArrayType>;
     get grid(): Grid;
-    toEarthRelative(): RawVectorField;
+    toEarthRelative(): RawVectorField<ArrayType>;
 }
 /** A class grid of wind profiles */
 declare class RawProfileField {
@@ -188,7 +212,7 @@ declare class RawProfileField {
      */
     constructor(grid: Grid, profiles: WindProfile[]);
     /** Get the gridded storm motion vector field (internal method) */
-    getStormMotionGrid(): RawVectorField;
+    getStormMotionGrid(): RawVectorField<Float16Array>;
 }
-export { RawScalarField, RawVectorField, RawProfileField, PlateCarreeGrid, LambertGrid, Grid };
-export type { GridType, RawVectorFieldOptions, VectorRelativeTo };
+export { RawScalarField, RawVectorField, RawProfileField, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid, Grid };
+export type { GridType, RawVectorFieldOptions, VectorRelativeTo, TextureDataType };