autumnplot-gl 2.1.0 → 2.2.1

package/lib/Fill.js

@@ -1,8 +1,9 @@
-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';
 const contourfill_vertex_shader_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec2 a_pos;
 attribute vec2 a_tex_coord;
@@ -10,7 +11,10 @@ attribute vec2 a_tex_coord;
 varying highp vec2 v_tex_coord;
 
 void main() {
-    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
+    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);
     v_tex_coord = a_tex_coord;
 }`
 const contourfill_fragment_shader_src = `varying highp vec2 v_tex_coord;
@@ -62,15 +66,13 @@ 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`;
         }
@@ -78,18 +80,19 @@ class PlotComponentFill extends PlotComponent {
         const { vertices: verts_buf, texcoords: tex_coords_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
         const texcoords = tex_coords_buf;
-        const format = 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 = {
@@ -101,30 +104,38 @@ class PlotComponentFill extends PlotComponent {
         if (this.gl_elems === null)
             return;
         const gl_elems = this.gl_elems;
+        if (matrix instanceof Float32Array)
+            matrix = [...matrix];
         gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_cmap_min': this.cmap.levels[0], 'u_cmap_max': this.cmap.levels[this.cmap.levels.length - 1], 'u_matrix': matrix, 'u_opacity': this.opacity,
-            'u_n_index': this.index_map.length }, { 'u_fill_sampler': gl_elems.fill_texture, 'u_cmap_sampler': gl_elems.cmap_texture, 'u_cmap_nonlin_sampler': gl_elems.cmap_nonlin_texture });
+            'u_n_index': this.index_map.length, 'u_offset': 0 }, { 'u_fill_sampler': gl_elems.fill_texture, 'u_cmap_sampler': gl_elems.cmap_texture, 'u_cmap_nonlin_sampler': gl_elems.cmap_nonlin_texture });
         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();
     }
 }
 /**
  * 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 +144,7 @@ class Raster extends PlotComponentFill {
         super.onAdd(map, gl);
     }
     /**
-     * &internal
+     * @internal
      * Render the raster plot
      */
     render(gl, matrix) {
@@ -142,21 +153,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 +176,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
@@ -45,7 +35,7 @@ declare class Hodographs extends PlotComponent {
      * @internal
      * Render the hodographs
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 export default Hodographs;
 export type { HodographOptions };

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,11 +83,51 @@ 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;
 }
 function mercatorYfromLat(lat) {
-    return (180 - (180 / Math.PI * Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360)))) / 360;
+    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));
 }
 /**
  * A `LngLat` object represents a given longitude and latitude coordinate, measured in degrees.
@@ -117,4 +157,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.
@@ -50,7 +42,7 @@ declare class Paintball extends PlotComponent {
      * @internal
      * Render the paintball plot
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 export default Paintball;
 export type { PaintballOptions };

package/lib/Paintball.js

@@ -1,8 +1,8 @@
-import { isWebGL2Ctx } from "./AutumnTypes";
-import { PlotComponent } from "./PlotComponent";
+import { PlotComponent, getGLFormatTypeAlignment } from "./PlotComponent";
 import { hex2rgba } from "./utils";
 import { WGLProgram, WGLTexture } from "autumn-wgl";
 const paintball_vertex_shader_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec2 a_pos;
 attribute vec2 a_tex_coord;
@@ -10,7 +10,10 @@ attribute vec2 a_tex_coord;
 varying highp vec2 v_tex_coord;
 
 void main() {
-    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
+    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);
     v_tex_coord = a_tex_coord;
 }`
 const paintball_fragment_shader_src = `#define MAX_N_COLORS 24
@@ -52,10 +55,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,7 +70,7 @@ class Paintball extends PlotComponent {
         this.gl_elems = null;
     }
     /**
-     * &internal
+     * @internal
      * Add the paintball plot to a map.
      */
     async onAdd(map, gl) {
@@ -76,10 +79,11 @@ class Paintball extends PlotComponent {
         const { vertices: verts_buf, texcoords: tex_coords_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
         const texcoords = tex_coords_buf;
-        const format = 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,18 +91,26 @@ class Paintball extends PlotComponent {
         };
     }
     /**
-     * &internal
+     * @internal
      * Render the paintball plot
      */
     render(gl, matrix) {
         if (this.gl_elems === null)
             return;
         const gl_elems = this.gl_elems;
+        if (matrix instanceof Float32Array)
+            matrix = [...matrix];
         // Render to framebuffer
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opacity, 'u_colors': this.colors, 'u_num_colors': this.colors.length / 4 }, { 'u_fill_sampler': gl_elems.fill_texture });
+        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opacity, 'u_colors': this.colors, 'u_num_colors': this.colors.length / 4, 'u_offset': 0 }, { 'u_fill_sampler': gl_elems.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();
     }
 }
 export default Paintball;

package/lib/PlotComponent.d.ts

@@ -15,6 +15,11 @@ declare const layer_worker: Comlink.Remote<{
 }>;
 declare abstract class PlotComponent {
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
-    abstract render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    abstract render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): 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

@@ -6,7 +6,7 @@ declare abstract class PlotLayerBase {
     readonly id: string;
     constructor(id: string);
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): void;
-    abstract render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    abstract render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 /**
  * A static map layer. The data are assumed to be static in time. If the data have a time component (e.g., a model forecast), an {@link MultiPlotLayer}
@@ -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
@@ -34,7 +34,7 @@ declare class PlotLayer extends PlotLayerBase {
      * @internal
      * Render this layer
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 /**
  * A varying map layer. If the data don't have a varying component, such as over time, it might be easier to use an {@link PlotLayer} instead.
@@ -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
@@ -73,7 +69,7 @@ declare class MultiPlotLayer extends PlotLayerBase {
      * @internal
      * Render this layer
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
     /**
      * Set the active key
      * @param key - The new key
@@ -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,17 +1,17 @@
-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;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
 export { PolylineCollection };
 export type { PolylineSpec, LineSpec };

package/lib/PolylineCollection.js

@@ -1,5 +1,6 @@
 import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
 const polyline_vertex_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec2 a_pos;
 attribute float a_min_zoom;
@@ -43,7 +44,10 @@ mat4 rotationXMatrix(float angle) {
 }
 
 void main() {
-    vec4 center_pos = u_matrix * vec4(a_pos.xy, 0.0, 1.0);
+    float globe_width = 1.;
+    vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
+
+    vec4 center_pos = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0);
     vec4 offset = vec4(0.0, 0.0, 0.0, 0.0);
     
     if (u_zoom >= a_min_zoom) {
@@ -82,11 +86,19 @@ class PolylineCollection {
         this.texcoords = new WGLBuffer(gl, polyline['texcoords'], 2, gl.TRIANGLE_STRIP);
     }
     render(gl, matrix, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
+        if (matrix instanceof Float32Array)
+            matrix = [...matrix];
         this.program.use({ 'a_pos': this.origin, 'a_offset': this.offset, 'a_extrusion': this.extrusion, 'a_min_zoom': this.min_zoom, 'a_tex_coord': this.texcoords }, { 'u_offset_scale': this.scale * (map_height / map_width), 'u_line_width': this.width, 'u_matrix': matrix,
-            'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_map_bearing': map_bearing }, { 'u_sampler': this.texture });
+            'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_map_bearing': map_bearing, 'u_offset': 0 }, { 'u_sampler': this.texture });
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
         this.program.draw();
+        this.program.setUniforms({ 'u_offset': -2 });
+        this.program.draw();
+        this.program.setUniforms({ 'u_offset': -1 });
+        this.program.draw();
+        this.program.setUniforms({ 'u_offset': 1 });
+        this.program.draw();
     }
 }
 export { PolylineCollection };