autumnplot-gl 3.2.0 → 4.0.0-beta

package/lib/Hodographs.js

@@ -77,17 +77,19 @@ 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 { lats, lons } = this.profile_field.getProfileCoords();
+        const hodo_polyline = profiles.map((prof, iprof) => {
             const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
             return {
                 'offsets': [...prof['u']].map((u, ipt) => [u - prof['smu'], prof['v'][ipt] - prof['smv']]),
-                'vertices': [...prof['u']].map(u => [prof['lon'], prof['lat']]),
+                'vertices': [...prof['u']].map(u => [lons[iprof], lats[iprof]]),
                 'zoom': zoom,
                 '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 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) => {
             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']);
@@ -95,11 +97,12 @@ class Hodographs extends PlotComponent {
             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']]],
+                'vertices': [[lons[iprof], lats[iprof]], [lons[iprof], lats[iprof]]],
                 'zoom': zoom
             };
         });
-        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 +114,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 +125,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 +135,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.js

@@ -130,7 +130,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;

package/lib/Paintball.d.ts

@@ -1,4 +1,5 @@
-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";
@@ -20,7 +21,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 +34,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 +49,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'],
@@ -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,24 @@
 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;
 }>;
 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

@@ -5,10 +5,10 @@ const worker = new Worker(new URL('./PlotLayer.worker', import.meta.url));
 const layer_worker = Comlink.wrap(worker);
 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 +23,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 +39,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 };

package/lib/PlotLayer.d.ts

@@ -1,4 +1,4 @@
-import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { RenderMethodArg, WebGLAnyRenderingContext } from './AutumnTypes';
 import { MapLikeType } from './Map';
 import { PlotComponent } from './PlotComponent';
 declare abstract class PlotLayerBase<MapType extends MapLikeType> {
@@ -36,7 +36,7 @@ declare class PlotLayer<MapType extends MapLikeType> extends PlotLayerBase<MapTy
      * @internal
      * Render this layer
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, matrix: RenderMethodArg): 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.
@@ -70,7 +70,7 @@ declare class MultiPlotLayer<MapType extends MapLikeType> extends PlotLayerBase<
      * @internal
      * Render this layer
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, matrix: RenderMethodArg): void;
     /**
      * Set the active key
      * @param key - The new key. The field with that key is plotted immediately.

package/lib/PlotLayer.worker.d.ts

@@ -1,12 +1,11 @@
 import { LineData, Polyline } from "./AutumnTypes";
-declare function makeBBElements(field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, thin_fac_base: number, max_zoom: number): {
+declare function 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;
 };
 declare function 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;
 };
 declare function makePolylines(lines: LineData[]): Polyline;
 declare const ep_interface: {

package/lib/PlotLayer.worker.js

@@ -1,17 +1,11 @@
-import { getMinZoom } from "./utils";
 import * as Comlink from 'comlink';
 import { LngLat } from "./Map";
-function makeBBElements(field_lats, field_lons, field_ni, field_nj, thin_fac_base, max_zoom) {
-    const n_pts_per_poly = 6;
-    const n_coords_per_pt_pts = 3;
+function makeBBElements(field_lats, field_lons, min_zoom, field_ni, field_nj, map_max_zoom) {
+    const n_coords_per_pt_pts = 2;
     const n_coords_per_pt_tc = 2;
-    const n_density_tiers = Math.log2(thin_fac_base);
-    const n_inaccessible_tiers = Math.max(n_density_tiers + 1 - max_zoom, 0);
-    const trim_inaccessible = Math.pow(2, n_inaccessible_tiers);
-    const field_ni_access = Math.floor((field_ni - 1) / trim_inaccessible) + 1;
-    const field_nj_access = Math.floor((field_nj - 1) / trim_inaccessible) + 1;
-    const n_elems_pts = field_ni_access * field_nj_access * n_pts_per_poly * n_coords_per_pt_pts;
-    const n_elems_tc = field_ni_access * field_nj_access * n_pts_per_poly * n_coords_per_pt_tc;
+    const field_n_access = min_zoom.filter(mz => mz <= map_max_zoom).length;
+    const n_elems_pts = field_n_access * n_coords_per_pt_pts;
+    const n_elems_tc = field_n_access * n_coords_per_pt_tc;
     let pts = new Float32Array(n_elems_pts);
     let tex_coords = new Float32Array(n_elems_tc);
     let istart_pts = 0;
@@ -21,22 +15,16 @@ function makeBBElements(field_lats, field_lons, field_ni, field_nj, thin_fac_bas
             const idx = ilat * field_ni + ilon;
             const lat = field_lats[idx];
             const lon = field_lons[idx];
-            const zoom = getMinZoom(ilat, ilon, thin_fac_base);
-            if (zoom > max_zoom)
-                continue;
+            const zoom = min_zoom[idx];
+            if (zoom > map_max_zoom || lon === undefined || lat === undefined)
+                continue; // TAS: Adding the checks for lat/lon here may be a bug waiting to happen? Not sure.
             const pt_ll = new LngLat(lon, lat).toMercatorCoord();
-            // These contain a degenerate triangle on either end to imitate primitive restarting
-            //  (see https://groups.google.com/g/webgl-dev-list/c/KLfiwj4jax0/m/cKiezrhRz8MJ?pli=1)
-            for (let icrnr = 0; icrnr < n_pts_per_poly; icrnr++) {
-                const actual_icrnr = Math.max(0, Math.min(icrnr - 1, 3));
-                pts[istart_pts + icrnr * n_coords_per_pt_pts + 0] = pt_ll.x;
-                pts[istart_pts + icrnr * n_coords_per_pt_pts + 1] = pt_ll.y;
-                pts[istart_pts + icrnr * n_coords_per_pt_pts + 2] = zoom * 4 + actual_icrnr;
-                tex_coords[istart_tc + icrnr * n_coords_per_pt_tc + 0] = ilon / (field_ni - 1);
-                tex_coords[istart_tc + icrnr * n_coords_per_pt_tc + 1] = ilat / (field_nj - 1);
-            }
-            istart_pts += (n_pts_per_poly * n_coords_per_pt_pts);
-            istart_tc += (n_pts_per_poly * n_coords_per_pt_tc);
+            pts[istart_pts + 0] = pt_ll.x;
+            pts[istart_pts + 1] = pt_ll.y;
+            tex_coords[istart_tc + 0] = ilon / (field_ni - 1) + zoom; // Pack the min zoom in with the texture coordinates; only works because the min zoom is always an integer
+            tex_coords[istart_tc + 1] = ilat / (field_nj - 1);
+            istart_pts += n_coords_per_pt_pts;
+            istart_tc += n_coords_per_pt_tc;
         }
     }
     return { 'pts': pts, 'tex_coords': tex_coords };
@@ -44,7 +32,6 @@ function makeBBElements(field_lats, field_lons, field_ni, field_nj, thin_fac_bas
 function makeDomainVerticesAndTexCoords(field_lats, field_lons, field_ni, field_nj, texcoord_margin_r, texcoord_margin_s) {
     const verts = new Float32Array(2 * 2 * (field_ni - 1) * (field_nj + 1)).fill(0);
     const tex_coords = new Float32Array(2 * 2 * (field_ni - 1) * (field_nj + 1)).fill(0);
-    const grid_cell_size = new Float32Array(1 * 2 * (field_ni - 1) * (field_nj + 1)).fill(0);
     let ivert = 0;
     let itexcoord = 0;
     for (let i = 0; i < field_ni - 1; i++) {
@@ -83,29 +70,7 @@ function makeDomainVerticesAndTexCoords(field_lats, field_lons, field_ni, field_
             }
         }
     }
-    let igcs = 0;
-    for (let i = 0; i < field_ni - 1; i++) {
-        for (let j = 0; j < field_nj - 1; j++) {
-            const ivert = j == 0 ? 2 * (igcs + 1) : 2 * igcs;
-            const x_ll = verts[ivert], y_ll = verts[ivert + 1], x_lr = verts[ivert + 2], y_lr = verts[ivert + 3], x_ul = verts[ivert + 4], y_ul = verts[ivert + 5], x_ur = verts[ivert + 6], y_ur = verts[ivert + 7];
-            const area = 0.5 * Math.abs(x_ll * (y_lr - y_ul) + x_lr * (y_ul - y_ll) + x_ul * (y_ll - y_lr) +
-                x_ur * (y_ul - y_lr) + x_ul * (y_lr - y_ur) + x_lr * (y_ur - y_ul));
-            if (j == 0) {
-                grid_cell_size[igcs] = area;
-                igcs += 1;
-            }
-            grid_cell_size[igcs] = area;
-            grid_cell_size[igcs + 1] = area;
-            igcs += 2;
-            if (j == field_nj - 2) {
-                grid_cell_size[igcs] = area;
-                grid_cell_size[igcs + 1] = area;
-                grid_cell_size[igcs + 2] = area;
-                igcs += 3;
-            }
-        }
-    }
-    return { 'vertices': verts, 'tex_coords': tex_coords, 'grid_cell_size': grid_cell_size };
+    return { 'vertices': verts, 'tex_coords': tex_coords };
 }
 /*
 function makePolylinesMiter(lines) {

package/lib/PolylineCollection.d.ts

@@ -1,4 +1,4 @@
-import { LineData, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { LineData, WebGLAnyRenderingContext, RenderMethodArg } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
 /**
  * A style to use to draw lines. The possible options are '-' for a solid line, '--' for a dashed line, ':' for a
@@ -9,6 +9,7 @@ type LineStyle = "-" | "--" | ":" | "-." | number[];
 declare function isLineStyle(obj: any): obj is LineStyle;
 interface PolylineCollectionOpts {
     offset_scale?: number;
+    offset_rotates_with_map?: boolean;
     color?: string;
     cmap?: ColorMap;
     line_width?: number;
@@ -17,7 +18,7 @@ interface PolylineCollectionOpts {
 declare class PolylineCollection {
     readonly width: number;
     readonly scale: number | null;
-    private readonly program;
+    private readonly shader_manager;
     private readonly vertices;
     private readonly extrusion;
     private readonly offset;
@@ -25,11 +26,12 @@ declare class PolylineCollection {
     private readonly line_data;
     private readonly color;
     private readonly cmap_gpu;
+    private readonly offset_rotates_with_map;
     private readonly dash_texture;
     private readonly n_dash;
     private constructor();
     static make(gl: WebGLAnyRenderingContext, lines: LineData[], opts?: PolylineCollectionOpts): Promise<PolylineCollection>;
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
 export { PolylineCollection, isLineStyle };
 export type { PolylineCollectionOpts, LineStyle };