autumnplot-gl 2.2.3 → 3.1.0

package/lib/Grid.js

@@ -0,0 +1,339 @@
+import { Float16Array } from "@petamoriken/float16";
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
+import { lambertConformalConic, rotateSphere } from "./Map";
+import { getGLFormatTypeAlignment, layer_worker } from "./PlotComponent";
+import { Cache } from "./utils";
+async function makeWGLDomainBuffers(gl, grid, native_grid) {
+    native_grid = native_grid !== undefined ? native_grid : grid;
+    const texcoord_margin_r = 1 / (2 * native_grid.ni);
+    const texcoord_margin_s = 1 / (2 * native_grid.nj);
+    const grid_cell_size_multiplier = (grid.ni * grid.nj) / (native_grid.ni * native_grid.nj);
+    const { lats: field_lats, lons: field_lons } = grid.getEarthCoords();
+    const domain_coords = await layer_worker.makeDomainVerticesAndTexCoords(field_lats, field_lons, grid.ni, grid.nj, texcoord_margin_r, texcoord_margin_s);
+    for (let icd = 0; icd < domain_coords['grid_cell_size'].length; icd++) {
+        domain_coords['grid_cell_size'][icd] *= grid_cell_size_multiplier;
+    }
+    const vertices = new WGLBuffer(gl, domain_coords['vertices'], 2, gl.TRIANGLE_STRIP);
+    const texcoords = new WGLBuffer(gl, domain_coords['tex_coords'], 2, gl.TRIANGLE_STRIP);
+    const grid_cell_size = new WGLBuffer(gl, domain_coords['grid_cell_size'], 1, gl.TRIANGLE_STRIP);
+    return { 'vertices': vertices, 'texcoords': texcoords, 'cellsize': grid_cell_size };
+}
+async function makeWGLBillboardBuffers(gl, grid, thin_fac, max_zoom) {
+    const { lats: field_lats, lons: field_lons } = grid.getEarthCoords();
+    const bb_elements = await layer_worker.makeBBElements(field_lats, field_lons, grid.ni, grid.nj, thin_fac, max_zoom);
+    const vertices = new WGLBuffer(gl, bb_elements['pts'], 3, gl.TRIANGLE_STRIP);
+    const texcoords = new WGLBuffer(gl, bb_elements['tex_coords'], 2, gl.TRIANGLE_STRIP);
+    return { 'vertices': vertices, 'texcoords': texcoords };
+}
+function makeVectorRotationTexture(gl, grid) {
+    const coords = grid.getEarthCoords();
+    if (!grid.is_conformal) {
+        // If the grid is non-conformal, we need a fully general change of basis from grid coordinates to earth coordinates. This is not supported for now, so warn about it.
+        console.warn('Vector rotations for non-conformal projections are not supported. The output may look incorrect.');
+    }
+    const rot_vals = new Float16Array(coords.lats.length);
+    for (let icd = 0; icd < coords.lats.length; icd++) {
+        const lon = coords.lons[icd];
+        const lat = coords.lats[icd];
+        const [x, y] = grid.transform(lon, lat);
+        const [x_pertlon, y_pertlon] = grid.transform(lon + 0.01, lat);
+        rot_vals[icd] = Math.atan2(y_pertlon - y, x_pertlon - x);
+    }
+    const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, true);
+    const rot_img = {
+        format: format, type: type, row_alignment: row_alignment, image: new Uint16Array(rot_vals.buffer),
+        width: grid.ni, height: grid.nj, mag_filter: gl.LINEAR
+    };
+    const rot_tex = new WGLTexture(gl, rot_img);
+    return { 'rotation': rot_tex };
+}
+class Grid {
+    constructor(type, is_conformal, ni, nj) {
+        this.type = type;
+        this.is_conformal = is_conformal;
+        this.ni = ni;
+        this.nj = nj;
+        this.buffer_cache = new Cache((gl) => {
+            const new_ni = Math.max(Math.floor(this.ni / 50), 20);
+            const new_nj = Math.max(Math.floor(this.nj / 50), 20);
+            return makeWGLDomainBuffers(gl, this.copy({ ni: new_ni, nj: new_nj }), this);
+        });
+        this.billboard_buffer_cache = new Cache((gl, thin_fac, max_zoom) => {
+            return makeWGLBillboardBuffers(gl, this, thin_fac, max_zoom);
+        });
+        this.vector_rotation_cache = new Cache((gl) => {
+            return makeVectorRotationTexture(gl, this);
+        });
+    }
+    async getWGLBuffers(gl) {
+        return await this.buffer_cache.getValue(gl);
+    }
+    async getWGLBillboardBuffers(gl, thin_fac, max_zoom) {
+        return await this.billboard_buffer_cache.getValue(gl, thin_fac, max_zoom);
+    }
+    getVectorRotationTexture(gl) {
+        return this.vector_rotation_cache.getValue(gl);
+    }
+}
+/** A plate carree (a.k.a. lat/lon) grid with uniform grid spacing */
+class PlateCarreeGrid extends Grid {
+    /**
+     * 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, nj, ll_lon, ll_lat, ur_lon, ur_lat) {
+        super('latlon', true, ni, nj);
+        this.ll_lon = ll_lon;
+        this.ll_lat = ll_lat;
+        this.ur_lon = ur_lon;
+        this.ur_lat = ur_lat;
+        const dlon = (this.ur_lon - this.ll_lon) / (this.ni - 1);
+        const dlat = (this.ur_lat - this.ll_lat) / (this.nj - 1);
+        this.ll_cache = new Cache(() => {
+            const lons = new Float32Array(this.ni * this.nj);
+            const lats = new Float32Array(this.ni * this.nj);
+            for (let i = 0; i < this.ni; i++) {
+                for (let j = 0; j < this.nj; j++) {
+                    const idx = i + j * this.ni;
+                    lons[idx] = this.ll_lon + i * dlon;
+                    lats[idx] = this.ll_lat + j * dlat;
+                }
+            }
+            return { 'lons': lons, 'lats': lats };
+        });
+        this.gc_cache = new Cache(() => {
+            const x = new Float32Array(this.ni);
+            const y = new Float32Array(this.nj);
+            for (let i = 0; i < this.ni; i++) {
+                x[i] = this.ll_lon + i * dlon;
+            }
+            for (let j = 0; j < this.nj; j++) {
+                y[j] = this.ll_lat + j * dlat;
+            }
+            return { x: x, y: y };
+        });
+    }
+    copy(opts) {
+        opts = opts !== undefined ? opts : {};
+        const ni = opts.ni !== undefined ? opts.ni : this.ni;
+        const nj = opts.nj !== undefined ? opts.nj : this.nj;
+        const ll_lon = opts.ll_lon !== undefined ? opts.ll_lon : this.ll_lon;
+        const ll_lat = opts.ll_lat !== undefined ? opts.ll_lat : this.ll_lat;
+        const ur_lon = opts.ur_lon !== undefined ? opts.ur_lon : this.ur_lon;
+        const ur_lat = opts.ur_lat !== undefined ? opts.ur_lat : this.ur_lat;
+        return new PlateCarreeGrid(ni, nj, ll_lon, ll_lat, ur_lon, ur_lat);
+    }
+    /**
+     * Get a list of longitudes and latitudes on the grid (internal method)
+     */
+    getEarthCoords() {
+        return this.ll_cache.getValue();
+    }
+    getGridCoords() {
+        return this.gc_cache.getValue();
+    }
+    transform(x, y, opts) {
+        return [x, y];
+    }
+    getThinnedGrid(thin_x, thin_y) {
+        const dlon = (this.ur_lon - this.ll_lon) / this.ni;
+        const dlat = (this.ur_lat - this.ll_lat) / this.nj;
+        const ni = Math.ceil(this.ni / thin_x);
+        const nj = Math.ceil(this.nj / thin_y);
+        const ni_remove = (this.ni - 1) % thin_x;
+        const nj_remove = (this.nj - 1) % thin_y;
+        const ll_lon = this.ll_lon;
+        const ll_lat = this.ll_lat;
+        const ur_lon = this.ur_lon - ni_remove * dlon;
+        const ur_lat = this.ur_lat - nj_remove * dlat;
+        return new PlateCarreeGrid(ni, nj, ll_lon, ll_lat, ur_lon, ur_lat);
+    }
+}
+/** A rotated lat-lon (plate carree) grid with uniform grid spacing */
+class PlateCarreeRotatedGrid extends Grid {
+    /**
+     * 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, nj, np_lon, np_lat, lon_shift, ll_lon, ll_lat, ur_lon, ur_lat) {
+        super('latlonrot', true, ni, nj);
+        this.np_lon = np_lon;
+        this.np_lat = np_lat;
+        this.lon_shift = lon_shift;
+        this.ll_lon = ll_lon;
+        this.ll_lat = ll_lat;
+        this.ur_lon = ur_lon;
+        this.ur_lat = ur_lat;
+        this.llrot = rotateSphere({ np_lon: np_lon, np_lat: np_lat, lon_shift: lon_shift });
+        const dlon = (this.ur_lon - this.ll_lon) / (this.ni - 1);
+        const dlat = (this.ur_lat - this.ll_lat) / (this.nj - 1);
+        this.ll_cache = new Cache(() => {
+            const lons = new Float32Array(this.ni * this.nj);
+            const lats = new Float32Array(this.ni * this.nj);
+            for (let i = 0; i < this.ni; i++) {
+                const lon_p = this.ll_lon + i * dlon;
+                for (let j = 0; j < this.nj; j++) {
+                    const lat_p = this.ll_lat + j * dlat;
+                    const [lon, lat] = this.llrot(lon_p, lat_p);
+                    const idx = i + j * this.ni;
+                    lons[idx] = lon;
+                    lats[idx] = lat;
+                }
+            }
+            return { lons: lons, lats: lats };
+        });
+        this.gc_cache = new Cache(() => {
+            const x = new Float32Array(this.ni);
+            const y = new Float32Array(this.nj);
+            for (let i = 0; i < this.ni; i++) {
+                x[i] = this.ll_lon + i * dlon;
+            }
+            for (let j = 0; j < this.nj; j++) {
+                y[j] = this.ll_lat + j * dlat;
+            }
+            return { x: x, y: y };
+        });
+    }
+    copy(opts) {
+        opts = opts !== undefined ? opts : {};
+        const ni = opts.ni !== undefined ? opts.ni : this.ni;
+        const nj = opts.nj !== undefined ? opts.nj : this.nj;
+        const ll_lon = opts.ll_lon !== undefined ? opts.ll_lon : this.ll_lon;
+        const ll_lat = opts.ll_lat !== undefined ? opts.ll_lat : this.ll_lat;
+        const ur_lon = opts.ur_lon !== undefined ? opts.ur_lon : this.ur_lon;
+        const ur_lat = opts.ur_lat !== undefined ? opts.ur_lat : this.ur_lat;
+        return new PlateCarreeRotatedGrid(ni, nj, this.np_lon, this.np_lat, this.lon_shift, ll_lon, ll_lat, ur_lon, ur_lat);
+    }
+    /**
+     * Get a list of longitudes and latitudes on the grid (internal method)
+     */
+    getEarthCoords() {
+        return this.ll_cache.getValue();
+    }
+    getGridCoords() {
+        return this.gc_cache.getValue();
+    }
+    transform(x, y, opts) {
+        opts = opts === undefined ? {} : opts;
+        const inverse = 'inverse' in opts ? opts.inverse : false;
+        return this.llrot(x, y, { inverse: !inverse });
+    }
+    getThinnedGrid(thin_x, thin_y) {
+        const dlon = (this.ur_lon - this.ll_lon) / this.ni;
+        const dlat = (this.ur_lat - this.ll_lat) / this.nj;
+        const ni = Math.ceil(this.ni / thin_x);
+        const nj = Math.ceil(this.nj / thin_y);
+        const ni_remove = (this.ni - 1) % thin_x;
+        const nj_remove = (this.nj - 1) % thin_y;
+        const ll_lon = this.ll_lon;
+        const ll_lat = this.ll_lat;
+        const ur_lon = this.ur_lon - ni_remove * dlon;
+        const ur_lat = this.ur_lat - nj_remove * dlat;
+        return new PlateCarreeRotatedGrid(ni, nj, this.np_lon, this.np_lat, this.lon_shift, ll_lon, ll_lat, ur_lon, ur_lat);
+    }
+}
+/** A Lambert conformal conic grid with uniform grid spacing */
+class LambertGrid extends Grid {
+    /**
+     * 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, nj, lon_0, lat_0, lat_std, ll_x, ll_y, ur_x, ur_y) {
+        super('lcc', true, ni, nj);
+        this.lon_0 = lon_0;
+        this.lat_0 = lat_0;
+        this.lat_std = lat_std;
+        this.ll_x = ll_x;
+        this.ll_y = ll_y;
+        this.ur_x = ur_x;
+        this.ur_y = ur_y;
+        this.lcc = lambertConformalConic({ lon_0: lon_0, lat_0: lat_0, lat_std: lat_std });
+        const dx = (this.ur_x - this.ll_x) / (this.ni - 1);
+        const dy = (this.ur_y - this.ll_y) / (this.nj - 1);
+        this.ll_cache = new Cache(() => {
+            const lons = new Float32Array(this.ni * this.nj);
+            const lats = new Float32Array(this.ni * this.nj);
+            for (let i = 0; i < this.ni; i++) {
+                const x = this.ll_x + i * dx;
+                for (let j = 0; j < this.nj; j++) {
+                    const y = this.ll_y + j * dy;
+                    const [lon, lat] = this.lcc(x, y, { inverse: true });
+                    const idx = i + j * this.ni;
+                    lons[idx] = lon;
+                    lats[idx] = lat;
+                }
+            }
+            return { lons: lons, lats: lats };
+        });
+        this.gc_cache = new Cache(() => {
+            const x = new Float32Array(this.ni);
+            const y = new Float32Array(this.nj);
+            for (let i = 0; i < this.ni; i++) {
+                x[i] = this.ll_x + i * dx;
+            }
+            for (let j = 0; j < this.nj; j++) {
+                y[j] = this.ll_y + j * dy;
+            }
+            return { x: x, y: y };
+        });
+    }
+    copy(opts) {
+        opts = opts !== undefined ? opts : {};
+        const ni = opts.ni !== undefined ? opts.ni : this.ni;
+        const nj = opts.nj !== undefined ? opts.nj : this.nj;
+        const ll_x = opts.ll_x !== undefined ? opts.ll_x : this.ll_x;
+        const ll_y = opts.ll_y !== undefined ? opts.ll_y : this.ll_y;
+        const ur_x = opts.ur_x !== undefined ? opts.ur_x : this.ur_x;
+        const ur_y = opts.ur_y !== undefined ? opts.ur_y : this.ur_y;
+        return new LambertGrid(ni, nj, this.lon_0, this.lat_0, this.lat_std, ll_x, ll_y, ur_x, ur_y);
+    }
+    /**
+     * Get a list of longitudes and latitudes on the grid (internal method)
+     */
+    getEarthCoords() {
+        return this.ll_cache.getValue();
+    }
+    getGridCoords() {
+        return this.gc_cache.getValue();
+    }
+    transform(x, y, opts) {
+        opts = opts === undefined ? {} : opts;
+        const inverse = 'inverse' in opts ? opts.inverse : false;
+        return this.lcc(x, y, { inverse: inverse });
+    }
+    getThinnedGrid(thin_x, thin_y) {
+        const dx = (this.ur_x - this.ll_x) / this.ni;
+        const dy = (this.ur_y - this.ll_y) / this.nj;
+        const ni = Math.ceil(this.ni / thin_x);
+        const nj = Math.ceil(this.nj / thin_y);
+        const ni_remove = (this.ni - 1) % thin_x;
+        const nj_remove = (this.nj - 1) % thin_y;
+        const ll_x = this.ll_x;
+        const ll_y = this.ll_y;
+        const ur_x = this.ur_x - ni_remove * dx;
+        const ur_y = this.ur_y - nj_remove * dy;
+        return new LambertGrid(ni, nj, this.lon_0, this.lat_0, this.lat_std, ll_x, ll_y, ur_x, ur_y);
+    }
+}
+export { Grid, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid };

package/lib/Hodographs.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="mapbox-gl" />
 import { PlotComponent } from "./PlotComponent";
+import { MapLikeType } from "./Map";
 import { RawProfileField } from "./RawField";
 import { WebGLAnyRenderingContext } from "./AutumnTypes";
 interface HodographOptions {
@@ -15,22 +15,29 @@ interface HodographOptions {
     thin_fac?: number;
 }
 /** A class representing a a field of hodograph plots */
-declare class Hodographs extends PlotComponent {
-    private readonly profile_field;
-    readonly bgcolor: [number, number, number];
-    readonly thin_fac: number;
+declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapType> {
+    private profile_field;
+    readonly opts: Required<HodographOptions>;
     private gl_elems;
+    private line_elems;
+    private readonly hodo_scale;
+    private readonly bg_size;
     /**
      * Create a field of hodographs
      * @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);
+    /**
+     * Update the profiles displayed
+     * @param field - The new profiles to display as hodographs
+     */
+    updateField(field: RawProfileField): Promise<void>;
     /**
      * @internal
      * Add the hodographs to a map
      */
-    onAdd(map: mapboxgl.Map, gl: WebGLAnyRenderingContext): Promise<void>;
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     /**
      * @internal
      * Render the hodographs

package/lib/Hodographs.js

@@ -1,8 +1,8 @@
-import { PlotComponent, layer_worker } from "./PlotComponent";
+import { PlotComponent } from "./PlotComponent";
 import { PolylineCollection } from "./PolylineCollection";
 import { BillboardCollection } from "./BillboardCollection";
-import { getMinZoom, hex2rgba } from './utils';
-import { LngLat } from "./Map";
+import { getMinZoom, hex2rgb, normalizeOptions } from './utils';
+import { ColorMap } from "./Colormap";
 const LINE_WIDTH = 4;
 const BG_MAX_RING_MAG = 40;
 const HODO_BG_DIMS = {
@@ -40,28 +40,11 @@ function _createHodoBackgroundTexture() {
 }
 ;
 let HODO_BG_TEXTURE = null;
-const HODO_COLORS = [
-    { 'bounds': [0, 1], 'color': '#ffffcc' },
-    { 'bounds': [1, 3], 'color': '#a1dab4' },
-    { 'bounds': [3, 6], 'color': '#41b6c4' },
-    { 'bounds': [6, 9], 'color': '#225ea8' }
-];
-function _createHodoHeightTexture() {
-    let canvas = document.createElement('canvas');
-    canvas.width = Math.max(...HODO_COLORS.map(s => Math.max(...s['bounds'])));
-    canvas.height = 1;
-    let ctx = canvas.getContext('2d');
-    HODO_COLORS.forEach(stop => {
-        if (ctx === null) {
-            throw "Could not get rendering context for the hodograph height texture canvas";
-        }
-        const [clb, cub] = stop['bounds'];
-        ctx.fillStyle = stop['color'];
-        ctx.fillRect(clb, 0, cub - clb, 1);
-    });
-    return canvas;
-}
-let HODO_HEIGHT_TEXTURE = null;
+const HODO_CMAP = new ColorMap([0, 1, 3, 6, 9], ['#ffffcc', '#a1dab4', '#41b6c4', '#225ea8']);
+const hodograph_opt_defaults = {
+    bgcolor: '#000000',
+    thin_fac: 1
+};
 /** A class representing a a field of hodograph plots */
 class Hodographs extends PlotComponent {
     /**
@@ -71,81 +54,85 @@ class Hodographs extends PlotComponent {
      */
     constructor(profile_field, opts) {
         super();
-        opts = opts || {};
         this.profile_field = profile_field;
-        const color = hex2rgba(opts.bgcolor || '#000000');
-        this.bgcolor = [color[0], color[1], color[2]];
-        this.thin_fac = opts.thin_fac || 1;
+        this.opts = normalizeOptions(opts, hodograph_opt_defaults);
+        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - LINE_WIDTH / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
+        this.bg_size = 140;
         this.gl_elems = null;
+        this.line_elems = null;
     }
     /**
-     * @internal
-     * Add the hodographs to a map
+     * Update the profiles displayed
+     * @param field - The new profiles to display as hodographs
      */
-    async onAdd(map, gl) {
-        const hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - LINE_WIDTH / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
-        const bg_size = 140;
-        if (HODO_BG_TEXTURE === null) {
-            HODO_BG_TEXTURE = _createHodoBackgroundTexture();
-        }
-        const bg_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': HODO_BG_TEXTURE, 'mag_filter': gl.NEAREST };
-        const max_zoom = map.getMaxZoom();
-        const bg_billboard = new BillboardCollection(gl, this.profile_field.getStormMotionGrid(), this.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, this.bgcolor, bg_size * 0.004);
-        const hodo_polyline = await layer_worker.makePolyLines(this.profile_field.profiles.map(prof => {
-            const pt_ll = new LngLat(prof['lon'], prof['lat']).toMercatorCoord();
-            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.thin_fac);
-            const max_tex_z = Math.max(...HODO_COLORS.map(s => Math.max(...s['bounds'])));
+    async updateField(field) {
+        this.profile_field = field;
+        if (this.gl_elems === null)
+            return;
+        // XXX: This might leak VRAM
+        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);
             return {
-                'verts': [...prof['u']].map((u, ipt) => [u - prof['smu'], prof['v'][ipt] - prof['smv']]),
-                'origin': [pt_ll.x, pt_ll.y],
+                '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,
-                'texcoords': [...prof['z']].map(z => [z / max_tex_z, 0.5])
+                'data': [...prof['z']],
             };
-        }));
-        if (HODO_HEIGHT_TEXTURE === null) {
-            HODO_HEIGHT_TEXTURE = _createHodoHeightTexture();
-        }
-        const height_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': HODO_HEIGHT_TEXTURE, 'mag_filter': gl.NEAREST };
-        const hodo_line = new PolylineCollection(gl, hodo_polyline, height_image, 1.5, hodo_scale * bg_size);
-        const sm_polyline = await layer_worker.makePolyLines(this.profile_field.profiles.map(prof => {
-            const pt_ll = new LngLat(prof['lon'], prof['lat']).toMercatorCoord();
-            let ret = {};
-            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.thin_fac);
+        });
+        const hodo_line = await PolylineCollection.make(gl, hodo_polyline, { line_width: 2.5, cmap: HODO_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 sm_mag = Math.hypot(prof['smu'], prof['smv']);
             const sm_ang = Math.PI / 2 - Math.atan2(-prof['smv'], -prof['smu']);
             const buffer = 2;
             return {
-                'verts': [[buffer * Math.sin(sm_ang), buffer * Math.cos(sm_ang)],
+                'offsets': [[buffer * Math.sin(sm_ang), buffer * Math.cos(sm_ang)],
                     [sm_mag * Math.sin(sm_ang), sm_mag * Math.cos(sm_ang)]],
-                'origin': [pt_ll.x, pt_ll.y],
-                'zoom': zoom,
-                'texcoords': [[0.5, 0.5], [0.5, 0.5]]
+                'vertices': [[prof['lon'], prof['lat']], [prof['lon'], prof['lat']]],
+                'zoom': zoom
             };
-        }));
-        let byte_color = this.bgcolor.map(c => c * 255);
-        byte_color.push(255);
-        const sm_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'width': 1, 'height': 1, 'image': new Uint8Array(byte_color),
-            'mag_filter': gl.NEAREST };
-        const sm_line = new PolylineCollection(gl, sm_polyline, sm_image, 1, hodo_scale * bg_size);
+        });
+        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: 1.5, color: this.opts.bgcolor, offset_scale: this.hodo_scale * this.bg_size });
+        this.line_elems = {
+            hodo_line: hodo_line, sm_line: sm_line
+        };
+    }
+    /**
+     * @internal
+     * Add the hodographs to a map
+     */
+    async onAdd(map, gl) {
+        if (HODO_BG_TEXTURE === null) {
+            HODO_BG_TEXTURE = _createHodoBackgroundTexture();
+        }
+        const bg_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': 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, hex2rgb(this.opts.bgcolor), this.bg_size * 0.004);
+        await bg_billboard.setup(gl);
         this.gl_elems = {
-            map: map, bg_billboard: bg_billboard, hodo_line: hodo_line, sm_line: sm_line
+            gl: gl, map: map, bg_billboard: bg_billboard
         };
+        this.updateField(this.profile_field);
     }
     /**
      * @internal
      * Render the hodographs
      */
     render(gl, matrix) {
-        if (this.gl_elems === null)
+        if (this.gl_elems === null || this.line_elems === null)
             return;
         const gl_elems = this.gl_elems;
+        const line_elems = this.line_elems;
         const zoom = gl_elems.map.getZoom();
         const map_width = gl_elems.map.getCanvas().width;
         const map_height = gl_elems.map.getCanvas().height;
         const bearing = gl_elems.map.getBearing();
         const pitch = gl_elems.map.getPitch();
-        gl_elems.hodo_line.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
-        gl_elems.sm_line.render(gl, matrix, [map_width, map_height], zoom, bearing, bearing);
+        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);
     }
 }

package/lib/Map.d.ts

@@ -1,5 +1,15 @@
-import mapboxgl from 'mapbox-gl';
-type MapType = mapboxgl.Map | maplibregl.Map;
+type StyleSpecification = {
+    glyphs?: string;
+};
+type MapLikeType = {
+    triggerRepaint: () => void;
+    getCanvas: () => HTMLCanvasElement;
+    getStyle: () => StyleSpecification;
+    getZoom: () => number;
+    getMaxZoom: () => number;
+    getBearing: () => number;
+    getPitch: () => number;
+};
 interface LambertConformalConicParameters {
     lon_0: number;
     lat_0: number;
@@ -37,6 +47,7 @@ declare class LngLat {
         x: number;
         y: number;
     };
+    static fromMercatorCoord(x: number, y: number): LngLat;
 }
 export { LngLat, lambertConformalConic, rotateSphere };
-export type { MapType };
+export type { MapLikeType };

package/lib/Map.js

@@ -124,11 +124,17 @@ function rotateSphere(params) {
 function mercatorXfromLng(lng) {
     return (180 + lng) / 360;
 }
+function lngFromMercatorX(x) {
+    return 360 * x - 180;
+}
 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));
 }
+function latFromMercatorY(y) {
+    return Math.atan(Math.sinh((180 - y * 360) * Math.PI / 180)) * 180 / Math.PI;
+}
 /**
  * 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).
@@ -156,5 +162,8 @@ class LngLat {
     toMercatorCoord() {
         return { x: mercatorXfromLng(this.lng), y: mercatorYfromLat(this.lat) };
     }
+    static fromMercatorCoord(x, y) {
+        return new LngLat(lngFromMercatorX(x), latFromMercatorY(y));
+    }
 }
 export { LngLat, lambertConformalConic, rotateSphere };

package/lib/Paintball.d.ts

@@ -1,5 +1,5 @@
 import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
-import { MapType } from "./Map";
+import { MapLikeType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
 import { RawScalarField } from "./RawField";
 interface PaintballOptions {
@@ -20,11 +20,12 @@ 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> extends PlotComponent {
-    private readonly field;
-    readonly colors: number[];
-    readonly opacity: number;
+declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+    private field;
+    readonly opts: Required<PaintballOptions>;
+    private readonly color_components;
     private gl_elems;
+    private fill_texture;
     /**
      * 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
@@ -33,6 +34,11 @@ declare class Paintball<ArrayType extends TypedArray> extends PlotComponent {
      * @param opts  - Options for creating the paintball plot
      */
     constructor(field: RawScalarField<ArrayType>, 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>;
     /**
      * @internal
      * Add the paintball plot to a map.