autumnplot-gl 3.2.0 → 4.0.0

package/lib/Hodographs.d.ts

@@ -1,8 +1,10 @@
 import { PlotComponent } from "./PlotComponent";
 import { MapLikeType } from "./Map";
 import { RawProfileField } from "./RawField";
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
+import { Grid } from "./Grid";
+/** Options for {@link Hodographs} components */
 interface HodographOptions {
     /**
      * The color of the hodograph plot background as a hex string
@@ -19,19 +21,24 @@ interface HodographOptions {
      * The width of the hodograph line in pixels
      * @default 2.5
      */
-    hodo_line_width: number;
+    hodo_line_width?: number;
     /**
      * The width of the lines on the background in pixels
      * @default 1.5
      */
-    background_line_width: number;
+    background_line_width?: number;
     /**
      * The colormap to use for the heights on the hodograph. Default is a yellow-blue colormap.
      */
-    height_cmap: ColorMap;
+    height_cmap?: ColorMap;
+    /**
+     * The wind speed (in kts) of the largest ring on the hodograph background
+     * @default 80
+     */
+    max_wind_speed_ring?: number;
 }
 /** A class representing a field of hodograph plots */
-declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapType> {
+declare class Hodographs<GridType extends Grid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private profile_field;
     readonly opts: Required<HodographOptions>;
     private gl_elems;
@@ -44,12 +51,12 @@ declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapT
      * @param profile_field - The grid of profiles to plot
      * @param opts          - Various options to use when creating the hodographs
      */
-    constructor(profile_field: RawProfileField, opts?: HodographOptions);
+    constructor(profile_field: RawProfileField<GridType>, opts?: HodographOptions);
     /**
      * Update the profiles displayed
      * @param field - The new profiles to display as hodographs
      */
-    updateField(field: RawProfileField): Promise<void>;
+    updateField(field: RawProfileField<GridType>): Promise<void>;
     /**
      * @internal
      * Add the hodographs to a map
@@ -59,7 +66,7 @@ declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapT
      * @internal
      * Render the hodographs
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
 export default Hodographs;
 export type { HodographOptions };

package/lib/Hodographs.js

@@ -1,11 +1,11 @@
 import { PlotComponent } from "./PlotComponent";
 import { PolylineCollection } from "./PolylineCollection";
 import { BillboardCollection } from "./BillboardCollection";
-import { getMinZoom, normalizeOptions } from './utils';
+import { normalizeOptions } from './utils';
+import { isStormRelativeWindProfile } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
 import { Color } from "./Color";
 const LINE_WIDTH_MULTIPLIER = 2.5;
-const BG_MAX_RING_MAG = 40;
 const HODO_BG_DIMS = {
     BB_WIDTH: 256,
     BB_HEIGHT: 256,
@@ -15,7 +15,7 @@ const HODO_BG_DIMS = {
     BB_MAG_WRAP: 1000,
     BB_MAG_BIN_SIZE: 1000,
 };
-function _createHodoBackgroundTexture(line_width) {
+function _createHodoBackgroundTexture(line_width, arrow_head) {
     let canvas = document.createElement('canvas');
     canvas.width = HODO_BG_DIMS.BB_TEX_WIDTH;
     canvas.height = HODO_BG_DIMS.BB_TEX_HEIGHT;
@@ -29,14 +29,21 @@ function _createHodoBackgroundTexture(line_width) {
         ctx.arc(HODO_BG_DIMS.BB_TEX_WIDTH / 2, HODO_BG_DIMS.BB_TEX_WIDTH / 2, irng - line_width / 2, 0, 2 * Math.PI);
         ctx.stroke();
     }
-    const ctr_x = HODO_BG_DIMS.BB_TEX_WIDTH / 2, ctr_y = HODO_BG_DIMS.BB_TEX_WIDTH / 2;
-    const arrow_size = 20;
-    ctx.beginPath();
-    ctx.moveTo(ctr_x, ctr_y);
-    ctx.lineTo(ctr_x + arrow_size / 2, ctr_y + arrow_size);
-    ctx.lineTo(ctr_x - arrow_size / 2, ctr_y + arrow_size);
-    ctx.lineTo(ctr_x, ctr_y);
-    ctx.fill();
+    if (arrow_head) {
+        const ctr_x = HODO_BG_DIMS.BB_TEX_WIDTH / 2, ctr_y = HODO_BG_DIMS.BB_TEX_WIDTH / 2;
+        const arrow_size = 20;
+        ctx.beginPath();
+        ctx.moveTo(ctr_x, ctr_y);
+        ctx.lineTo(ctr_x + arrow_size / 2, ctr_y + arrow_size);
+        ctx.lineTo(ctr_x - arrow_size / 2, ctr_y + arrow_size);
+        ctx.lineTo(ctr_x, ctr_y);
+        ctx.fill();
+    }
+    else {
+        ctx.beginPath();
+        ctx.arc(HODO_BG_DIMS.BB_TEX_WIDTH / 2, HODO_BG_DIMS.BB_TEX_WIDTH / 2, line_width, 0, 2 * Math.PI);
+        ctx.fill();
+    }
     return canvas;
 }
 ;
@@ -46,7 +53,8 @@ const hodograph_opt_defaults = {
     thin_fac: 1,
     hodo_line_width: 2.5,
     background_line_width: 1.5,
-    height_cmap: HODO_CMAP
+    height_cmap: HODO_CMAP,
+    max_wind_speed_ring: 80
 };
 /** A class representing a field of hodograph plots */
 class Hodographs extends PlotComponent {
@@ -59,8 +67,8 @@ class Hodographs extends PlotComponent {
         super();
         this.profile_field = profile_field;
         this.opts = normalizeOptions(opts, hodograph_opt_defaults);
-        this.hodo_bg_texture = _createHodoBackgroundTexture(this.opts.background_line_width * LINE_WIDTH_MULTIPLIER);
-        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - this.opts.background_line_width / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
+        this.hodo_bg_texture = _createHodoBackgroundTexture(this.opts.background_line_width * LINE_WIDTH_MULTIPLIER, isStormRelativeWindProfile(profile_field.profiles[0]));
+        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - this.opts.background_line_width / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * this.opts.max_wind_speed_ring);
         this.bg_size = 140;
         this.gl_elems = null;
         this.line_elems = null;
@@ -77,29 +85,39 @@ class Hodographs extends PlotComponent {
         const gl = this.gl_elems.gl;
         this.gl_elems.bg_billboard.updateField(field.getStormMotionGrid());
         const profiles = this.profile_field.profiles;
-        const hodo_polyline = profiles.map(prof => {
-            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
+        const { lats, lons } = this.profile_field.getProfileCoords();
+        const min_visible_zoom = this.profile_field.grid.getMinVisibleZoom(this.opts.thin_fac);
+        const hodo_polyline = profiles.map((prof, iprof) => {
             return {
-                'offsets': [...prof['u']].map((u, ipt) => [u - prof['smu'], prof['v'][ipt] - prof['smv']]),
-                'vertices': [...prof['u']].map(u => [prof['lon'], prof['lat']]),
-                'zoom': zoom,
+                'offsets': [...prof['u']].map((u, ipt) => {
+                    if (isStormRelativeWindProfile(prof)) {
+                        return [u - prof['smu'], prof['v'][ipt] - prof['smv']];
+                    }
+                    return [u, prof['v'][ipt]];
+                }),
+                'vertices': [...prof['u']].map(u => [lons[iprof], lats[iprof]]),
+                'zoom': min_visible_zoom[iprof],
                 'data': [...prof['z']],
             };
         });
-        const hodo_line = await PolylineCollection.make(gl, hodo_polyline, { line_width: this.opts.hodo_line_width, cmap: this.opts.height_cmap, offset_scale: this.hodo_scale * this.bg_size });
-        const sm_polyline = profiles.map(prof => {
-            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
+        const hodo_line = await PolylineCollection.make(gl, hodo_polyline, { line_width: this.opts.hodo_line_width, cmap: this.opts.height_cmap,
+            offset_scale: this.hodo_scale * this.bg_size, offset_rotates_with_map: false });
+        const sm_polyline = profiles.map((prof, iprof) => {
+            if (!isStormRelativeWindProfile(prof)) {
+                return { vertices: [] };
+            }
             const sm_mag = Math.hypot(prof['smu'], prof['smv']);
             const sm_ang = Math.PI / 2 - Math.atan2(-prof['smv'], -prof['smu']);
             const buffer = 2;
             return {
                 'offsets': [[buffer * Math.sin(sm_ang), buffer * Math.cos(sm_ang)],
                     [sm_mag * Math.sin(sm_ang), sm_mag * Math.cos(sm_ang)]],
-                'vertices': [[prof['lon'], prof['lat']], [prof['lon'], prof['lat']]],
-                'zoom': zoom
+                'vertices': [[lons[iprof], lats[iprof]], [lons[iprof], lats[iprof]]],
+                'zoom': min_visible_zoom[iprof]
             };
         });
-        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: this.opts.background_line_width, color: this.opts.bgcolor, offset_scale: this.hodo_scale * this.bg_size });
+        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: this.opts.background_line_width, color: this.opts.bgcolor,
+            offset_scale: this.hodo_scale * this.bg_size, offset_rotates_with_map: false });
         this.line_elems = {
             hodo_line: hodo_line, sm_line: sm_line
         };
@@ -111,7 +129,7 @@ class Hodographs extends PlotComponent {
     async onAdd(map, gl) {
         const bg_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': this.hodo_bg_texture, 'mag_filter': gl.NEAREST };
         const max_zoom = map.getMaxZoom();
-        const bg_billboard = new BillboardCollection(this.profile_field.getStormMotionGrid(), this.opts.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, this.bg_size * 0.004, { color: Color.fromHex(this.opts.bgcolor) });
+        const bg_billboard = new BillboardCollection(this.profile_field.getStormMotionGrid(), this.opts.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, this.bg_size * 0.004, { color: Color.fromHex(this.opts.bgcolor), rotate_with_map: false });
         await bg_billboard.setup(gl);
         this.gl_elems = {
             gl: gl, map: map, bg_billboard: bg_billboard
@@ -122,7 +140,7 @@ class Hodographs extends PlotComponent {
      * @internal
      * Render the hodographs
      */
-    render(gl, matrix) {
+    render(gl, arg) {
         if (this.gl_elems === null || this.line_elems === null)
             return;
         const gl_elems = this.gl_elems;
@@ -132,9 +150,9 @@ class Hodographs extends PlotComponent {
         const map_height = gl_elems.map.getCanvas().height;
         const bearing = gl_elems.map.getBearing();
         const pitch = gl_elems.map.getPitch();
-        line_elems.hodo_line.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
-        line_elems.sm_line.render(gl, matrix, [map_width, map_height], zoom, bearing, bearing);
-        gl_elems.bg_billboard.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
+        line_elems.hodo_line.render(gl, arg, [map_width, map_height], zoom, bearing, pitch);
+        line_elems.sm_line.render(gl, arg, [map_width, map_height], zoom, bearing, bearing);
+        gl_elems.bg_billboard.render(gl, arg, [map_width, map_height], zoom, bearing, pitch);
     }
 }
 export default Hodographs;

package/lib/Map.d.ts

@@ -1,6 +1,7 @@
 type StyleSpecification = {
     glyphs?: string;
 };
+/** Type with the required methods for mapping libraries */
 type MapLikeType = {
     triggerRepaint: () => void;
     getCanvas: () => HTMLCanvasElement;
@@ -14,6 +15,8 @@ interface LambertConformalConicParameters {
     lon_0: number;
     lat_0: number;
     lat_std: [number, number] | number;
+    a: number;
+    b: number;
 }
 declare function lambertConformalConic(params: LambertConformalConicParameters): (a: number, b: number, opts?: {
     inverse: boolean;
@@ -26,6 +29,16 @@ interface RotateSphereParams {
 declare function rotateSphere(params: RotateSphereParams): (a: number, b: number, opts?: {
     inverse: boolean;
 }) => [number, number];
+interface VerticalPerspectiveParams {
+    lat_0: number;
+    lon_0: number;
+    alt: number;
+    a: number;
+    b: number;
+}
+declare function verticalPerspective(params: VerticalPerspectiveParams): (a: number, b: number, opts?: {
+    inverse: boolean;
+}) => [number, number];
 /**
  * A `LngLat` object represents a given longitude and latitude coordinate, measured in degrees.
  * These coordinates are based on the [WGS84 (EPSG:4326) standard](https://en.wikipedia.org/wiki/World_Geodetic_System#WGS84).
@@ -49,5 +62,5 @@ declare class LngLat {
     };
     static fromMercatorCoord(x: number, y: number): LngLat;
 }
-export { LngLat, lambertConformalConic, rotateSphere };
+export { LngLat, lambertConformalConic, rotateSphere, verticalPerspective };
 export type { MapLikeType };

package/lib/Map.js

@@ -9,8 +9,8 @@ function lambertConformalConic(params) {
         return Math.cos(lat) / Math.sqrt(1 - eccen * eccen * sin_lat * sin_lat);
     };
     // WGS 84 spheroid
-    const semimajor = 6378137.0;
-    const semiminor = 6356752.314245;
+    const semimajor = params.a;
+    const semiminor = params.b;
     const eccen = Math.sqrt(1 - (semiminor * semiminor) / (semimajor * semimajor));
     const radians = Math.PI / 180;
     let { lon_0, lat_0, lat_std } = params;
@@ -121,6 +121,62 @@ function rotateSphere(params) {
         return opts.inverse ? compute_rotation_inverse(a, b) : compute_rotation(a, b);
     };
 }
+function verticalPerspective(params) {
+    // WGS 84 spheroid
+    const semimajor = params.a;
+    const semiminor = params.b;
+    const eccen = Math.sqrt(1 - (semiminor * semiminor) / (semimajor * semimajor));
+    const radians = Math.PI / 180;
+    let { lat_0, lon_0, alt } = params;
+    const alt_0 = 0;
+    const alt_00 = 0;
+    const eccen2 = eccen * eccen;
+    lat_0 *= radians;
+    lon_0 *= radians;
+    const sin_lat_0 = Math.sin(lat_0);
+    const cos_lat_0 = Math.cos(lat_0);
+    const N1 = semimajor / Math.sqrt(1 - (eccen * sin_lat_0) ** 2);
+    let lat_g = lat_0, P = 0;
+    for (let i = 0; i < 2; i++) {
+        P = Math.cos(lat_0) / Math.cos(lat_g) * (alt + N1 + alt_00) / semimajor;
+        lat_g = lat_0 - Math.asin(N1 * eccen * eccen * sin_lat_0 * cos_lat_0 / (P * semimajor));
+    }
+    const compute_perspective = (lon, lat) => {
+        lon *= radians;
+        lat *= radians;
+        const sin_lat = Math.sin(lat);
+        const cos_lat = Math.cos(lat);
+        const N = semimajor / Math.sqrt(1 - (eccen * sin_lat) ** 2);
+        const C = (N + alt_0) / semimajor * cos_lat;
+        const S = ((N * (1 - eccen * eccen) + alt_0) / semimajor) * sin_lat;
+        const K = alt / (P * Math.cos(lat_0 - lat_g) - S * sin_lat_0 - C * cos_lat_0 * Math.cos(lon - lon_0));
+        const x = K * C * Math.sin(lon - lon_0);
+        const y = K * (P * Math.sin(lat_0 - lat_g) + S * cos_lat_0 - C * sin_lat_0 * Math.cos(lon - lon_0));
+        return [x, y];
+    };
+    const B = P * Math.cos(lat_0 - lat_g);
+    const D = P * Math.sin(lat_0 - lat_g);
+    const L = 1 - eccen2 * cos_lat_0 * cos_lat_0;
+    const G = 1 - eccen2 * sin_lat_0 * sin_lat_0;
+    const J = 2 * eccen2 * sin_lat_0 * cos_lat_0;
+    const E = 1; // If alt_0 = 0, set E = 1
+    const t = P * P * (1 - (eccen * Math.cos(lat_g)) ** 2) - E * (1 - eccen2);
+    const compute_perspective_inverse = (x, y) => {
+        const u = -2 * B * L * alt - 2 * D * G * y + B * J * y + D * J * alt;
+        const v = L * alt * alt + G * y * y - alt * J * y + (1 - eccen2) * x * x;
+        const K_prime = (-u + Math.sqrt(u * u - 4 * t * v)) / (2 * t);
+        const X = semimajor * ((B - alt / K_prime) * cos_lat_0 - (y / K_prime - D) * sin_lat_0);
+        const Y = semimajor * x / K_prime;
+        const S = (y / K_prime - D) * cos_lat_0 + (B - alt / K_prime) * sin_lat_0;
+        const lon = lon_0 + Math.atan2(Y, X);
+        const lat = Math.atan2(S, Math.sqrt((1 - eccen2) * (1 - eccen2 - S * S)));
+        return [lon / radians, lat / radians];
+    };
+    return (a, b, opts) => {
+        opts = opts === undefined ? { inverse: false } : opts;
+        return opts.inverse ? compute_perspective_inverse(a, b) : compute_perspective(a, b);
+    };
+}
 function mercatorXfromLng(lng) {
     return (180 + lng) / 360;
 }
@@ -130,7 +186,7 @@ function lngFromMercatorX(x) {
 function mercatorYfromLat(lat) {
     const sin_lat = Math.sin(lat * Math.PI / 180);
     const y = (180 - (90 / Math.PI * Math.log((1 + sin_lat) / (1 - sin_lat)))) / 360;
-    return Math.min(2, Math.max(-2, y));
+    return Math.min(1.5, Math.max(-0.5, y));
 }
 function latFromMercatorY(y) {
     return Math.atan(Math.sinh((180 - y * 360) * Math.PI / 180)) * 180 / Math.PI;
@@ -166,4 +222,4 @@ class LngLat {
         return new LngLat(lngFromMercatorX(x), latFromMercatorY(y));
     }
 }
-export { LngLat, lambertConformalConic, rotateSphere };
+export { LngLat, lambertConformalConic, rotateSphere, verticalPerspective };

package/lib/Paintball.d.ts

@@ -1,7 +1,9 @@
-import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { StructuredGrid } from "./Grid";
 import { MapLikeType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
 import { RawScalarField } from "./RawField";
+/** Options for {@link Paintball} components */
 interface PaintballOptions {
     /**
      * The list of colors (as hex strings) to use for each member in the paintball plot. The first color corresponds to member 1, the second to member 2, etc.
@@ -20,7 +22,7 @@ interface PaintballOptions {
  * 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.)
  */
-declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+declare class Paintball<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private field;
     readonly opts: Required<PaintballOptions>;
     private readonly color_components;
@@ -33,12 +35,12 @@ declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeTyp
      *               `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: RawScalarField<ArrayType>, opts?: PaintballOptions);
+    constructor(field: RawScalarField<ArrayType, GridType>, opts?: PaintballOptions);
     /**
      * Update the field displayed as a paintball plot
      * @param field - The new field to display as a paintball plot
      */
-    updateField(field: RawScalarField<ArrayType>): Promise<void>;
+    updateField(field: RawScalarField<ArrayType, GridType>): Promise<void>;
     /**
      * @internal
      * Add the paintball plot to a map.
@@ -48,7 +50,7 @@ declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeTyp
      * @internal
      * Render the paintball plot
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
 export default Paintball;
 export type { PaintballOptions };

package/lib/Paintball.js

@@ -1,33 +1,40 @@
+import { getRendererData } from "./AutumnTypes";
 import { Color } from "./Color";
-import { PlotComponent, getGLFormatTypeAlignment } from "./PlotComponent";
+import { PlotComponent } from "./PlotComponent";
+import { ShaderProgramManager } from "./ShaderManager";
 import { normalizeOptions } from "./utils";
-import { WGLProgram, WGLTexture } from "autumn-wgl";
-const paintball_vertex_shader_src = `uniform mat4 u_matrix;
+import { WGLTexture } from "autumn-wgl";
+const paintball_vertex_shader_src = `#version 300 es
+
 uniform int u_offset;
 
-attribute vec2 a_pos;
-attribute vec2 a_tex_coord;
+in vec2 a_pos;
+in vec2 a_tex_coord;
 
-varying highp vec2 v_tex_coord;
+out highp vec2 v_tex_coord;
 
 void main() {
     float globe_width = 1.;
     vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
 
-    gl_Position = u_matrix * vec4(a_pos + globe_offset, 0.0, 1.0);
+    gl_Position = projectTile(a_pos.xy + globe_offset);
     v_tex_coord = a_tex_coord;
 }`
-const paintball_fragment_shader_src = `#define MAX_N_COLORS 24
+const paintball_fragment_shader_src = `#version 300 es
+
+#define MAX_N_COLORS 24
 
-varying highp vec2 v_tex_coord;
+in 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;
 
+out highp vec4 fragColor;
+
 void main() {
-    highp float fill_val = texture2D(u_fill_sampler, v_tex_coord).r;
+    highp float fill_val = texture(u_fill_sampler, v_tex_coord).r;
     
     if (fill_val < 0.5) {
         discard;
@@ -44,7 +51,7 @@ void main() {
     }
 
     color.a = color.a * u_opacity;
-    gl_FragColor = color;
+    fragColor = color;
 }`
 const paintball_opt_defaults = {
     colors: ['#000000'],
@@ -69,7 +76,7 @@ class Paintball extends PlotComponent {
         super();
         this.field = field;
         this.opts = normalizeOptions(opts, paintball_opt_defaults);
-        this.color_components = [...this.opts.colors].reverse().map(color => Color.fromHex(color).toRGBATuple()).flat();
+        this.color_components = this.opts.colors.map(color => Color.fromHex(color).toRGBATuple()).flat();
         this.gl_elems = null;
         this.fill_texture = null;
     }
@@ -83,12 +90,7 @@ class Paintball extends PlotComponent {
             return;
         const gl = this.gl_elems.gl;
         gl.pixelStorei(gl.UNPACK_ALIGNMENT, 2);
-        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': gl.NEAREST, 'row_alignment': row_alignment,
-        };
+        const fill_image = this.field.getWGLTextureSpec(gl, gl.NEAREST);
         if (this.fill_texture === null) {
             this.fill_texture = new WGLTexture(gl, fill_image);
         }
@@ -102,12 +104,12 @@ class Paintball extends PlotComponent {
      */
     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 shader_manager = new ShaderProgramManager(paintball_vertex_shader_src, paintball_fragment_shader_src, []);
         this.gl_elems = {
-            gl: gl, program: program, vertices: vertices, texcoords: texcoords,
+            gl: gl, shader_manager: shader_manager, vertices: vertices, texcoords: texcoords,
         };
         this.updateField(this.field);
     }
@@ -115,23 +117,26 @@ class Paintball extends PlotComponent {
      * @internal
      * Render the paintball plot
      */
-    render(gl, matrix) {
+    render(gl, arg) {
         if (this.gl_elems === null || this.fill_texture === null)
             return;
         const gl_elems = this.gl_elems;
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
+        const render_data = getRendererData(arg);
+        const program = this.gl_elems.shader_manager.getShaderProgram(gl, render_data.shaderData);
         // Render to framebuffer
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opts.opacity, 'u_colors': this.color_components, 'u_num_colors': this.opts.colors.length, 'u_offset': 0 }, { 'u_fill_sampler': this.fill_texture });
+        program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_opacity': this.opts.opacity, 'u_colors': this.color_components, 'u_num_colors': this.opts.colors.length, 'u_offset': 0,
+            ...this.gl_elems.shader_manager.getShaderUniforms(render_data) }, { 'u_fill_sampler': this.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();
-        gl_elems.program.setUniforms({ 'u_offset': -2 });
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': -1 });
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': 1 });
-        gl_elems.program.draw();
+        program.draw();
+        if (render_data.type != 'maplibre' || !render_data.shaderData.define.includes('GLOBE')) {
+            program.setUniforms({ 'u_offset': -2 });
+            program.draw();
+            program.setUniforms({ 'u_offset': -1 });
+            program.draw();
+            program.setUniforms({ 'u_offset': 1 });
+            program.draw();
+        }
     }
 }
 export default Paintball;

package/lib/ParticleTracer.d.ts

@@ -0,0 +1,19 @@
+import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { Grid } from "./Grid";
+import { MapLikeType } from "./Map";
+import { PlotComponent } from "./PlotComponent";
+import { RawVectorField } from "./RawField";
+interface ParticleTracerOptions {
+}
+declare class ParticleTracer<ArrayType extends TypedArray, GridType extends Grid, MapType extends MapLikeType> extends PlotComponent<MapType> {
+    field: RawVectorField<ArrayType, GridType>;
+    readonly opts: Required<ParticleTracerOptions>;
+    private gl_elems;
+    private wind_textures;
+    constructor(fields: RawVectorField<ArrayType, GridType>, opts?: ParticleTracerOptions);
+    updateField(field: RawVectorField<ArrayType, GridType>): void;
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    onRemove(map: MapType, gl: WebGLAnyRenderingContext): void;
+    render(gl: WebGLAnyRenderingContext, args: RenderMethodArg): void;
+}
+export { ParticleTracer };

package/lib/ParticleTracer.js

@@ -0,0 +1,37 @@
+import { WGLTexture } from "autumn-wgl";
+import { PlotComponent } from "./PlotComponent";
+import { normalizeOptions } from "./utils";
+const particle_tracer_opt_defaults = {};
+class ParticleTracer extends PlotComponent {
+    constructor(fields, opts) {
+        super();
+        this.field = fields;
+        this.opts = normalizeOptions(opts, particle_tracer_opt_defaults);
+        this.gl_elems = null;
+        this.wind_textures = null;
+    }
+    updateField(field) {
+        this.field = field;
+        if (this.gl_elems === null)
+            return;
+        const gl = this.gl_elems.gl;
+        const { u: u_image, v: v_image } = this.field.getWGLTextureSpecs(gl, gl.NEAREST);
+        if (this.wind_textures === null) {
+            this.wind_textures = { u: new WGLTexture(gl, u_image), v: new WGLTexture(gl, v_image) };
+        }
+        else {
+            this.wind_textures.u.setImageData(u_image);
+            this.wind_textures.v.setImageData(v_image);
+        }
+    }
+    async onAdd(map, gl) {
+        const { rotation: proj_rotation_tex } = this.field.grid.getVectorRotationTexture(gl, this.field.relative_to == 'earth');
+        this.gl_elems = { gl: gl, proj_rot_texture: proj_rotation_tex };
+        this.updateField(this.field);
+    }
+    onRemove(map, gl) {
+    }
+    render(gl, args) {
+    }
+}
+export { ParticleTracer };

package/lib/PlotComponent.d.ts

@@ -1,25 +1,25 @@
 import * as Comlink from 'comlink';
 import { MapLikeType } from './Map';
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { RenderMethodArg, TypedArrayStr, 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) => {
+    makeBBElements: (field_lats: Float32Array, field_lons: Float32Array, min_zoom: Uint8Array, field_ni: number, field_nj: number, map_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").LineData[]) => import("./AutumnTypes").Polyline;
 }>;
+/** Base class for all plot components */
 declare abstract class PlotComponent<MapType extends MapLikeType> {
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
-    abstract render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    abstract render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
-declare function getGLFormatTypeAlignment(gl: WebGLAnyRenderingContext, is_float16: boolean): {
-    format: 33325 | 33326 | 6409;
-    type: 36193 | 5131 | 5126;
+declare function getGLFormatTypeAlignment(gl: WebGLAnyRenderingContext, array_dtype: TypedArrayStr): {
+    format: 33321 | 33325 | 33326 | 6409;
+    type: 36193 | 5131 | 5121 | 5126;
     row_alignment: number;
 };
 export { PlotComponent, layer_worker, getGLFormatTypeAlignment };

package/lib/PlotComponent.js

@@ -3,12 +3,13 @@ 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);
+/** Base class for all plot components */
 class PlotComponent {
 }
-function getGLFormatTypeAlignment(gl, is_float16) {
+function getGLFormatTypeAlignment(gl, array_dtype) {
     let format, type, row_alignment;
     const is_webgl2 = isWebGL2Ctx(gl);
-    if (is_float16) {
+    if (array_dtype == 'float16') {
         const ext = gl.getExtension('OES_texture_half_float');
         const ext_lin = gl.getExtension('OES_texture_half_float_linear');
         if (is_webgl2) {
@@ -23,7 +24,7 @@ function getGLFormatTypeAlignment(gl, is_float16) {
         }
         row_alignment = 2;
     }
-    else {
+    else if (array_dtype == 'float32') {
         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,
@@ -39,6 +40,11 @@ function getGLFormatTypeAlignment(gl, is_float16) {
         type = gl.FLOAT;
         row_alignment = 4;
     }
+    else {
+        format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
+        type = gl.UNSIGNED_BYTE;
+        row_alignment = 1;
+    }
     return { format: format, type: type, row_alignment: row_alignment };
 }
 export { PlotComponent, layer_worker, getGLFormatTypeAlignment };