autumnplot-gl 2.1.0 → 2.2.0

package/lib/AutumnTypes.d.ts

@@ -1,3 +1,4 @@
+import { Float16Array } from "@petamoriken/float16";
 interface WindProfile {
     lat: number;
     lon: number;
@@ -33,5 +34,6 @@ interface LineSpec {
 }
 type WebGLAnyRenderingContext = WebGLRenderingContext | WebGL2RenderingContext;
 declare function isWebGL2Ctx(gl: WebGLAnyRenderingContext): gl is WebGL2RenderingContext;
+type TypedArray = Float16Array | Float32Array;
 export { isWebGL2Ctx };
-export type { WindProfile, BillboardSpec, PolylineSpec, LineSpec, WebGLAnyRenderingContext };
+export type { WindProfile, BillboardSpec, PolylineSpec, LineSpec, WebGLAnyRenderingContext, TypedArray };

package/lib/Barbs.d.ts

@@ -1,8 +1,7 @@
 import { PlotComponent } from "./PlotComponent";
-import { BillboardCollection } from './BillboardCollection';
 import { RawVectorField } from "./RawField";
 import { MapType } from "./Map";
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 interface BarbsOptions {
     /**
      * The color to use for the barbs as a hex color string;.
@@ -16,10 +15,6 @@ interface BarbsOptions {
      */
     thin_fac?: number;
 }
-interface BarbsGLElems {
-    map: MapType | null;
-    barb_billboards: BillboardCollection | null;
-}
 /**
  * A class representing a field of wind barbs. The barbs are automatically thinned based on the zoom level on the map; the user only has to provide a
  * thinning factor at zoom level 1.
@@ -28,19 +23,18 @@ interface BarbsGLElems {
  * const vector_field = new RawVectorField(grid, u_data, v_data);
  * const barbs = new Barbs(vector_field, {color: '#000000', thin_fac: 16});
  */
-declare class Barbs extends PlotComponent {
+declare class Barbs<ArrayType extends TypedArray> extends PlotComponent {
     /** The vector field */
-    readonly fields: RawVectorField;
+    private readonly fields;
     readonly color: [number, number, number];
     readonly thin_fac: number;
-    /** @private */
-    gl_elems: BarbsGLElems | null;
+    private gl_elems;
     /**
      * Create a field of wind barbs
      * @param fields - The vector field to plot as barbs
      * @param opts   - Options for creating the wind barbs
      */
-    constructor(fields: RawVectorField, opts: BarbsOptions);
+    constructor(fields: RawVectorField<ArrayType>, opts: BarbsOptions);
     /**
      * @internal
      * Add the barb field to a map

package/lib/BillboardCollection.d.ts

@@ -1,17 +1,17 @@
-import { BillboardSpec, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { BillboardSpec, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { RawVectorField } from "./RawField";
-import { WGLBuffer, WGLProgram, WGLTexture, WGLTextureSpec } from "autumn-wgl";
-declare class BillboardCollection {
+import { WGLTextureSpec } from "autumn-wgl";
+declare class BillboardCollection<ArrayType extends TypedArray> {
     readonly spec: BillboardSpec;
     readonly color: [number, number, number];
     readonly size_multiplier: number;
-    readonly program: WGLProgram;
-    vertices: WGLBuffer | null;
-    texcoords: WGLBuffer | null;
-    readonly texture: WGLTexture;
-    readonly u_texture: WGLTexture;
-    readonly v_texture: WGLTexture;
-    constructor(gl: WebGLAnyRenderingContext, field: RawVectorField, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_color: [number, number, number], billboard_size_mult: number);
+    private readonly program;
+    private vertices;
+    private texcoords;
+    private readonly texture;
+    private readonly u_texture;
+    private readonly v_texture;
+    constructor(gl: WebGLAnyRenderingContext, field: RawVectorField<ArrayType>, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_color: [number, number, number], billboard_size_mult: number);
     render(gl: WebGLAnyRenderingContext, matrix: number[], [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
 export { BillboardCollection };

package/lib/BillboardCollection.js

@@ -1,5 +1,6 @@
-import { isWebGL2Ctx } from "./AutumnTypes";
+import { getGLFormatTypeAlignment } from "./PlotComponent";
 import { WGLProgram, WGLTexture } from "autumn-wgl";
+import { Cache } from "./utils";
 const billboard_vertex_shader_src = `uniform mat4 u_matrix;
 
 attribute vec3 a_pos;    
@@ -100,12 +101,13 @@ void main() {
     lowp vec4 tex_color = texture2D(u_sampler, v_tex_coord);
     gl_FragColor = vec4(u_bb_color, tex_color.a); 
 }`
+const program_cache = new Cache((gl) => new WGLProgram(gl, billboard_vertex_shader_src, billboard_fragment_shader_src));
 class BillboardCollection {
     constructor(gl, field, thin_fac, max_zoom, billboard_image, billboard_spec, billboard_color, billboard_size_mult) {
         this.spec = billboard_spec;
         this.color = billboard_color;
         this.size_multiplier = billboard_size_mult;
-        this.program = new WGLProgram(gl, billboard_vertex_shader_src, billboard_fragment_shader_src);
+        this.program = program_cache.getValue(gl);
         this.vertices = null;
         this.texcoords = null;
         const n_density_tiers = Math.log2(thin_fac);
@@ -119,14 +121,14 @@ class BillboardCollection {
             this.vertices = vertices;
             this.texcoords = texcoords;
         })();
-        const format = isWebGL2Ctx(gl) ? gl.R32F : gl.LUMINANCE;
-        const u_image = { 'format': format, 'type': gl.FLOAT,
-            'width': u_thin.grid.ni, 'height': u_thin.grid.nj, 'image': u_thin.data,
-            'mag_filter': gl.NEAREST,
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, u_thin.isFloat16());
+        const u_image = { 'format': format, 'type': type,
+            'width': u_thin.grid.ni, 'height': u_thin.grid.nj, 'image': u_thin.getTextureData(),
+            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
         };
-        const v_image = { 'format': format, 'type': gl.FLOAT,
-            'width': v_thin.grid.ni, 'height': v_thin.grid.nj, 'image': v_thin.data,
-            'mag_filter': gl.NEAREST,
+        const v_image = { 'format': format, 'type': type,
+            'width': v_thin.grid.ni, 'height': v_thin.grid.nj, 'image': v_thin.getTextureData(),
+            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
         };
         this.texture = new WGLTexture(gl, billboard_image);
         this.u_texture = new WGLTexture(gl, u_image);

package/lib/Contour.d.ts

@@ -1,8 +1,7 @@
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
 import { MapType } from './Map';
 import { PlotComponent } from './PlotComponent';
 import { RawScalarField } from './RawField';
-import { WGLBuffer, WGLProgram, WGLTexture } from 'autumn-wgl';
 interface ContourOptions {
     /**
      * The color of the contours as a hex color string
@@ -26,14 +25,6 @@ interface ContourOptions {
      */
     thinner?: (zoom: number) => number;
 }
-interface ContourGLElems {
-    map: MapType;
-    program: WGLProgram;
-    vertices: WGLBuffer;
-    grid_cell_size: WGLBuffer;
-    fill_texture: WGLTexture;
-    texcoords: WGLBuffer;
-}
 /**
  * A field of contoured data. The contours can optionally be thinned based on map zoom level.
  * @example
@@ -42,20 +33,19 @@ interface ContourGLElems {
  * const contours = new Contour(height_field, {color: '#000000', interval: 30,
  *                                                  thinner: zoom => zoom < 5 ? 2 : 1});
  */
-declare class Contour extends PlotComponent {
-    readonly field: RawScalarField;
+declare class Contour<ArrayType extends TypedArray> extends PlotComponent {
+    private readonly field;
     readonly color: [number, number, number];
     readonly interval: number;
     readonly levels: number[];
     readonly thinner: (zoom: number) => number;
-    /** @private */
-    gl_elems: ContourGLElems | null;
+    private gl_elems;
     /**
      * Create a contoured field
      * @param field - The field to contour
      * @param opts  - Options for creating the contours
      */
-    constructor(field: RawScalarField, opts: ContourOptions);
+    constructor(field: RawScalarField<ArrayType>, opts: ContourOptions);
     /**
      * @internal
      * Add the contours to a map

package/lib/Contour.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 contour_vertex_shader_src = `uniform mat4 u_matrix;
 
@@ -40,16 +39,20 @@ uniform lowp float u_zoom_fac;
 void main() {
     highp float field_val = texture2D(u_fill_sampler, v_tex_coord).r;
 
-    
+    lowp vec2 grid_point = fract(v_tex_coord / u_step_size + vec2(0.5, 0.5));
+    highp vec2 grid_sw = v_tex_coord - grid_point * u_step_size;
+
     lowp vec2 ihat = vec2(u_step_size.x, 0.0);
     lowp vec2 jhat = vec2(0.0, u_step_size.y);
-    highp float fv_xp1 = texture2D(u_fill_sampler, v_tex_coord + ihat).r;
-    highp float fv_xm1 = texture2D(u_fill_sampler, v_tex_coord - ihat).r;
-    highp float fv_yp1 = texture2D(u_fill_sampler, v_tex_coord + jhat).r;
-    highp float fv_ym1 = texture2D(u_fill_sampler, v_tex_coord - jhat).r;
-    highp float fwidth_field = sqrt(((fv_xp1 - fv_xm1) * (fv_xp1 - fv_xm1) + (fv_yp1 - fv_ym1) * (fv_yp1 - fv_ym1)) / (5e5 * v_grid_cell_size));
+    highp float fv_sw = texture2D(u_fill_sampler, grid_sw).r;
+    highp float fv_se = texture2D(u_fill_sampler, grid_sw + ihat).r;
+    highp float fv_nw = texture2D(u_fill_sampler, grid_sw + jhat).r;
+    highp float fv_ne = texture2D(u_fill_sampler, grid_sw + ihat + jhat).r;
+
+    highp float dfdx = mix(fv_se, fv_ne, grid_point.y) - mix(fv_sw, fv_nw, grid_point.y);
+    highp float dfdy = mix(fv_nw, fv_ne, grid_point.x) - mix(fv_sw, fv_se, grid_point.x);
+    highp float fwidth_field = sqrt((dfdx * dfdx + dfdy * dfdy) / (5e5 * v_grid_cell_size));
 
-    
     lowp float plot_val;
 
     if (u_num_contours > 0) {
@@ -97,9 +100,10 @@ void main() {
 
     gl_FragColor = vec4(u_color, 1. - (plot_val * plot_val / (u_line_cutoff * u_line_cutoff)));
 }`
+const program_cache = new Cache((gl) => new WGLProgram(gl, contour_vertex_shader_src, contour_fragment_shader_src));
 /**
  * A field of contoured data. The contours can optionally be thinned based on map zoom level.
- * &example
+ * @example
  * // Create a contoured height field, with black contours every 30 m (assuming the height field is in
  * // meters) and only using every other contour when the map zoom level is less than 5.
  * const contours = new Contour(height_field, {color: '#000000', interval: 30,
@@ -108,8 +112,8 @@ void main() {
 class Contour extends PlotComponent {
     /**
      * Create a contoured field
-     * &param field - The field to contour
-     * &param opts  - Options for creating the contours
+     * @param field - The field to contour
+     * @param opts  - Options for creating the contours
      */
     constructor(field, opts) {
         super();
@@ -122,23 +126,21 @@ class Contour extends PlotComponent {
         this.gl_elems = null;
     }
     /**
-     * &internal
+     * @internal
      * Add the contours to a map
      */
     async onAdd(map, gl) {
         // Basic procedure for these contours from https://www.shadertoy.com/view/lltBWM
-        gl.getExtension('OES_texture_float');
-        gl.getExtension('OES_texture_float_linear');
-        gl.getExtension('OES_standard_derivatives');
-        const program = new WGLProgram(gl, contour_vertex_shader_src, contour_fragment_shader_src);
+        gl.getExtension("OES_standard_derivatives");
+        const program = program_cache.getValue(gl);
         const { vertices: verts_buf, texcoords: tex_coords_buf, cellsize: cellsize_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
         const texcoords = tex_coords_buf;
         const grid_cell_size = cellsize_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.LINEAR,
+        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.LINEAR, 'row_alignment': row_alignment,
         };
         const fill_texture = new WGLTexture(gl, fill_image);
         this.gl_elems = {
@@ -146,7 +148,7 @@ class Contour extends PlotComponent {
         };
     }
     /**
-     * &internal
+     * @internal
      * Render the contours
      */
     render(gl, matrix) {
@@ -155,8 +157,8 @@ class Contour extends PlotComponent {
         const gl_elems = this.gl_elems;
         const zoom = gl_elems.map.getZoom();
         const intv = this.thinner(zoom) * this.interval;
-        const cutoff = 0.5 / intv;
-        const step_size = [0.25 / this.field.grid.ni, 0.25 / this.field.grid.nj];
+        const cutoff = 0.3 / intv;
+        const step_size = [1 / this.field.grid.ni, 1 / this.field.grid.nj];
         const zoom_fac = Math.pow(2, zoom);
         let uniforms = { 'u_contour_interval': intv, 'u_line_cutoff': cutoff, 'u_color': this.color, 'u_step_size': step_size, 'u_zoom_fac': zoom_fac,
             'u_matrix': matrix, 'u_num_contours': 0, 'u_contour_levels': [0] };

package/lib/Fill.d.ts

@@ -1,9 +1,8 @@
 import { PlotComponent } from './PlotComponent';
 import { ColorMap } from './Colormap';
-import { WGLBuffer, WGLProgram, WGLTexture } from 'autumn-wgl';
 import { RawScalarField } from './RawField';
 import { MapType } from './Map';
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
 interface ContourFillOptions {
     /** The color map to use when creating the fills */
     cmap: ColorMap;
@@ -22,27 +21,16 @@ interface RasterOptions {
      */
     opacity?: number;
 }
-interface PlotComponentFillGLElems {
-    program: WGLProgram;
-    vertices: WGLBuffer;
-    fill_texture: WGLTexture;
-    texcoords: WGLBuffer;
-    cmap_texture: WGLTexture;
-    cmap_nonlin_texture: WGLTexture;
-}
-declare class PlotComponentFill extends PlotComponent {
-    readonly field: RawScalarField;
+declare class PlotComponentFill<ArrayType extends TypedArray> extends PlotComponent {
+    private readonly field;
     readonly cmap: ColorMap;
     readonly opacity: number;
-    /** @private */
-    readonly cmap_image: HTMLCanvasElement;
-    /** @private */
-    readonly index_map: Float32Array;
-    /** @private */
-    gl_elems: PlotComponentFillGLElems | null;
-    image_mag_filter: number | null;
-    cmap_mag_filter: number | null;
-    constructor(field: RawScalarField, opts: ContourFillOptions);
+    private readonly cmap_image;
+    private readonly index_map;
+    private gl_elems;
+    protected image_mag_filter: number | null;
+    protected cmap_mag_filter: number | null;
+    constructor(field: RawScalarField<ArrayType>, opts: ContourFillOptions);
     onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
 }
@@ -52,13 +40,13 @@ declare class PlotComponentFill extends PlotComponent {
  * // Create a raster plot with the provided color map
  * const raster = new Raster(wind_speed_field, {cmap: color_map});
  */
-declare class Raster extends PlotComponentFill {
+declare class Raster<ArrayType extends TypedArray> extends PlotComponentFill<ArrayType> {
     /**
      * Create a raster plot
      * @param field - The field to create the raster plot from
      * @param opts  - Options for creating the raster plot
      */
-    constructor(field: RawScalarField, opts: RasterOptions);
+    constructor(field: RawScalarField<ArrayType>, opts: RasterOptions);
     /**
      * @internal
      * Add the raster plot to a map
@@ -76,13 +64,13 @@ declare class Raster extends PlotComponentFill {
  * // Create a field of filled contours with the provided color map
  * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
  */
-declare class ContourFill extends PlotComponentFill {
+declare class ContourFill<ArrayType extends TypedArray> extends PlotComponentFill<ArrayType> {
     /**
      * Create a filled contoured field
      * @param field - The field to create filled contours from
      * @param opts  - Options for creating the filled contours
      */
-    constructor(field: RawScalarField, opts: ContourFillOptions);
+    constructor(field: RawScalarField<ArrayType>, opts: ContourFillOptions);
     /**
      * @internal
      * Add the filled contours to a map

package/lib/Fill.js

@@ -1,7 +1,8 @@
-import { PlotComponent } from './PlotComponent';
+import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
 import { makeTextureImage } from './Colormap';
 import { WGLProgram, WGLTexture } from 'autumn-wgl';
-import { isWebGL2Ctx } from './AutumnTypes';
+import { Float16Array } from '@petamoriken/float16';
+import { Cache } from './utils';
 const contourfill_vertex_shader_src = `uniform mat4 u_matrix;
 
 attribute vec2 a_pos;
@@ -38,6 +39,7 @@ void main() {
     color.a = color.a * u_opacity;
     gl_FragColor = color;
 }`
+const program_cache = new Cache((gl) => new WGLProgram(gl, contourfill_vertex_shader_src, contourfill_fragment_shader_src));
 class PlotComponentFill extends PlotComponent {
     constructor(field, opts) {
         super();
@@ -62,34 +64,33 @@ class PlotComponentFill extends PlotComponent {
             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 Float32Array(inv_cmap_norm);
+        this.index_map = new Float16Array(inv_cmap_norm);
         this.gl_elems = null;
         this.image_mag_filter = null;
         this.cmap_mag_filter = null;
     }
     async onAdd(map, gl) {
         // Basic procedure for the filled contours inspired by https://blog.mbq.me/webgl-weather-globe/
-        gl.getExtension('OES_texture_float');
-        gl.getExtension('OES_texture_float_linear');
         if (this.image_mag_filter === null || this.cmap_mag_filter === null) {
             throw `Implement magnification filtes in a subclass`;
         }
-        const program = new WGLProgram(gl, contourfill_vertex_shader_src, contourfill_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': this.image_mag_filter,
+        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 cmap_nonlin_image = { 'format': format, 'type': gl.FLOAT,
+        const { format: format_nonlin, type: type_nonlin, row_alignment: row_alignment_nonlin } = getGLFormatTypeAlignment(gl, true);
+        const cmap_nonlin_image = { 'format': format_nonlin, 'type': type_nonlin,
             'width': this.index_map.length, 'height': 1,
-            'image': this.index_map,
-            'mag_filter': gl.LINEAR
+            'image': new Uint16Array(this.index_map.buffer),
+            'mag_filter': gl.LINEAR, 'row_alignment': row_alignment_nonlin,
         };
         const cmap_nonlin_texture = new WGLTexture(gl, cmap_nonlin_image);
         this.gl_elems = {
@@ -110,21 +111,21 @@ class PlotComponentFill extends PlotComponent {
 }
 /**
  * A raster (i.e. pixel) plot
- * &example
+ * @example
  * // Create a raster plot with the provided color map
  * const raster = new Raster(wind_speed_field, {cmap: color_map});
  */
 class Raster extends PlotComponentFill {
     /**
      * Create a raster plot
-     * &param field - The field to create the raster plot from
-     * &param opts  - Options for creating the raster plot
+     * @param field - The field to create the raster plot from
+     * @param opts  - Options for creating the raster plot
      */
     constructor(field, opts) {
         super(field, opts);
     }
     /**
-     * &internal
+     * @internal
      * Add the raster plot to a map
      */
     async onAdd(map, gl) {
@@ -133,7 +134,7 @@ class Raster extends PlotComponentFill {
         super.onAdd(map, gl);
     }
     /**
-     * &internal
+     * @internal
      * Render the raster plot
      */
     render(gl, matrix) {
@@ -142,21 +143,21 @@ class Raster extends PlotComponentFill {
 }
 /**
  * A filled contoured field
- * &example
+ * @example
  * // Create a field of filled contours with the provided color map
  * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
  */
 class ContourFill extends PlotComponentFill {
     /**
      * Create a filled contoured field
-     * &param field - The field to create filled contours from
-     * &param opts  - Options for creating the filled contours
+     * @param field - The field to create filled contours from
+     * @param opts  - Options for creating the filled contours
      */
     constructor(field, opts) {
         super(field, opts);
     }
     /**
-     * &internal
+     * @internal
      * Add the filled contours to a map
      */
     async onAdd(map, gl) {
@@ -165,7 +166,7 @@ class ContourFill extends PlotComponentFill {
         super.onAdd(map, gl);
     }
     /**
-     * &internal
+     * @internal
      * Render the filled contours
      */
     render(gl, matrix) {

package/lib/Hodographs.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="mapbox-gl" />
 import { PlotComponent } from "./PlotComponent";
-import { PolylineCollection } from "./PolylineCollection";
-import { BillboardCollection } from "./BillboardCollection";
-import { MapType } from "./Map";
 import { RawProfileField } from "./RawField";
 import { WebGLAnyRenderingContext } from "./AutumnTypes";
 interface HodographOptions {
@@ -17,19 +14,12 @@ interface HodographOptions {
      */
     thin_fac?: number;
 }
-interface HodographGLElems {
-    map: MapType;
-    bg_billboard: BillboardCollection | null;
-    hodo_line: PolylineCollection | null;
-    sm_line: PolylineCollection | null;
-}
 /** A class representing a a field of hodograph plots */
 declare class Hodographs extends PlotComponent {
-    readonly profile_field: RawProfileField;
+    private readonly profile_field;
     readonly bgcolor: [number, number, number];
     readonly thin_fac: number;
-    /** @private */
-    gl_elems: HodographGLElems;
+    private gl_elems;
     /**
      * Create a field of hodographs
      * @param profile_field - The grid of profiles to plot

package/lib/Map.d.ts

@@ -8,6 +8,14 @@ interface LambertConformalConicParameters {
 declare function lambertConformalConic(params: LambertConformalConicParameters): (a: number, b: number, opts?: {
     inverse: boolean;
 }) => [number, number];
+interface RotateSphereParams {
+    np_lon: number;
+    np_lat: number;
+    lon_shift: number;
+}
+declare function rotateSphere(params: RotateSphereParams): (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).
@@ -30,5 +38,5 @@ declare class LngLat {
         y: number;
     };
 }
-export { LngLat, lambertConformalConic };
+export { LngLat, lambertConformalConic, rotateSphere };
 export type { MapType };

package/lib/Map.js

@@ -83,6 +83,44 @@ function lambertConformalConic(params) {
         return opts.inverse ? compute_lcc_inverse(a, b) : compute_lcc(a, b);
     };
 }
+function rotateSphere(params) {
+    const radians = Math.PI / 180;
+    const np_lat = params.np_lat * radians;
+    const np_lon = params.np_lon * radians;
+    const lon_shift = params.lon_shift * radians;
+    const sin_np_lat = Math.sin(np_lat);
+    const cos_np_lat = Math.cos(np_lat);
+    const compute_rotation = (lon, lat) => {
+        lon *= radians;
+        lat *= radians;
+        const sin_lat = Math.sin(lat);
+        const cos_lat = Math.cos(lat);
+        const sin_lon_diff = Math.sin(lon - lon_shift);
+        const cos_lon_diff = Math.cos(lon - lon_shift);
+        const lat_p = Math.asin(sin_np_lat * sin_lat - cos_np_lat * cos_lat * cos_lon_diff);
+        let lon_p = np_lon + Math.atan2((cos_lat * sin_lon_diff), (sin_np_lat * cos_lat * cos_lon_diff + cos_np_lat * sin_lat));
+        if (lon_p > Math.PI)
+            lon_p -= 2 * Math.PI;
+        return [lon_p / radians, lat_p / radians];
+    };
+    const compute_rotation_inverse = (lon_p, lat_p) => {
+        lon_p *= radians;
+        lat_p *= radians;
+        const sin_lat_p = Math.sin(lat_p);
+        const cos_lat_p = Math.cos(lat_p);
+        const sin_lon_p_diff = Math.sin(lon_p - np_lon);
+        const cos_lon_p_diff = Math.cos(lon_p - np_lon);
+        const lat = Math.asin(sin_np_lat * sin_lat_p + cos_np_lat * cos_lat_p * cos_lon_p_diff);
+        let lon = lon_shift + Math.atan2((cos_lat_p * sin_lon_p_diff), (sin_np_lat * cos_lat_p * cos_lon_p_diff - cos_np_lat * sin_lat_p));
+        if (lon_p > Math.PI)
+            lon_p -= 2 * Math.PI;
+        return [lon / radians, lat / radians];
+    };
+    return (a, b, opts) => {
+        opts = opts === undefined ? { inverse: false } : opts;
+        return opts.inverse ? compute_rotation_inverse(a, b) : compute_rotation(a, b);
+    };
+}
 function mercatorXfromLng(lng) {
     return (180 + lng) / 360;
 }
@@ -117,4 +155,4 @@ class LngLat {
         return { x: mercatorXfromLng(this.lng), y: mercatorYfromLat(this.lat) };
     }
 }
-export { LngLat, lambertConformalConic };
+export { LngLat, lambertConformalConic, rotateSphere };

package/lib/Paintball.d.ts

@@ -1,8 +1,7 @@
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { MapType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
 import { RawScalarField } from "./RawField";
-import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
 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.
@@ -14,12 +13,6 @@ interface PaintballOptions {
      */
     opacity?: number;
 }
-interface PaintballGLElems {
-    program: WGLProgram;
-    vertices: WGLBuffer;
-    fill_texture: WGLTexture;
-    texcoords: WGLBuffer;
-}
 /**
  * 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,
@@ -27,12 +20,11 @@ interface PaintballGLElems {
  * 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 extends PlotComponent {
-    readonly field: RawScalarField;
+declare class Paintball<ArrayType extends TypedArray> extends PlotComponent {
+    private readonly field;
     readonly colors: number[];
     readonly opacity: number;
-    /** @private */
-    gl_elems: PaintballGLElems | null;
+    private gl_elems;
     /**
      * 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
@@ -40,7 +32,7 @@ declare class Paintball extends PlotComponent {
      *               `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, opts?: PaintballOptions);
+    constructor(field: RawScalarField<ArrayType>, opts?: PaintballOptions);
     /**
      * @internal
      * Add the paintball plot to a map.