autumnplot-gl 2.2.0 → 2.2.2

package/README.md

@@ -19,7 +19,7 @@ npm i autumnplot-gl
 Additionally, pre-built autumnplot-gl javascript files area available [here](https://tsupinie.github.io/autumnplot-gl/dist/). Adding them to your page exposes the API via the `apgl` global variable (e.g., instead of `new PlateCarreeGrid(...)` in the examples, you'd call `new apgl.PlateCarreeGrid(...)`). 
 
 ### A basic contour plot
-The first step in plotting data is to create a grid. Currently, the only supported grids are PlateCarree (a.k.a. Lat/Lon) and Lambert Conformal Conic.
+The first step in plotting data is to create a grid. Currently, the only supported grids are PlateCarreeGrid (a.k.a. Lat/Lon), RotatedPlateCarreeGrid, and LambertGrid (a.k.a. Lambert Conformal Conic).
 
 ```javascript
 // Create a grid object that covers the continental United States
@@ -27,7 +27,7 @@ const nx = 121, ny = 61;
 const grid = new PlateCarreeGrid(nx, ny, -130, 20, -65, 55);
 ```
 
-Next, create a RawScalarField with the data. autumnplot-gl doesn't care about how data get to the browser, but it should end up in a Float32Array in row-major order with the first element being at the southwest corner of the grid. A future version might include support for reading from, say, a Zarr file. Once you have your data in that format, to create the raw data field:
+Next, create a RawScalarField with the data. autumnplot-gl doesn't care about how data get to the browser, but it should end up in a `Float32Array` or `Float16Array` in row-major order with the first element being at the southwest corner of the grid. If you're using [zarr.js](https://github.com/gzuidhof/zarr.js/), you can use the `getRaw()` function on a `ZarrArray` to get data in the correct format. Also, `Float16Array`s are not in the Javascript standard library (for now), so for the time being, you'll need to use [this library](https://github.com/petamoriken/float16). However, the nice part about using a `Float16Array` is that your data will be stored as float16s in VRAM, so they'll take up half the space as the same data as float32s. Once you have your data in that format, to create the raw data field:
 
 ```javascript
 // Create the raw data field
@@ -81,7 +81,7 @@ map.on('load', () => {
 
 The wind barbs are automatically rotated based on the grid projection. Also, the density of the wind barbs is automatically varied based on the map zoom level. The `'thin_fac': 16` option means to plot every 16th wind barb in the i and j directions, and this is defined at zoom level 1. So at zoom level 2, it will plot every 8th wind barb, and at zoom level 3 every 4th wind barb, and so on. Because it divides in 2 for every deeper zoom level, `'thin_fac'` should be a power of 2.
 
-### Filled contours
+### Filled contours or raster plots
 
 Plotting filled contours is also similar to plotting regular contours, but there's some additional steps for the color map. A couple color maps are available by default (see [here](#built-in-color-maps) for more details), but if you have the colors you want, creating your own is (relatively) painless (hopefully). First, set up the colormap. Here, we'll just use the bluered colormap included by default.
 
@@ -96,7 +96,13 @@ map.on('load', () => {
 });
 ```
 
-Normally, when you have color-filled contours, you have a color bar on the plot. To create an SVG color bar:
+Making a raster plot is very similar (the two classes support the same options):
+
+```javascript
+const raster = new Raster(height, {cmap: colormap});
+```
+
+Normally, when you have a color fill, you have a color bar on the plot. To create an SVG color bar:
 
 ```javascript
 const colorbar_svg = makeColorBar(colormap, {label: "Height Perturbation (m)", 
@@ -154,7 +160,7 @@ The above exmple uses map tiles from [Maptiler](https://www.maptiler.com/). Map
 So, I've created some [less-detailed map tiles](https://tsupinie.github.io/autumnplot-gl/tiles/) that are small enough that they can be hosted without dedicated hardware. However the tradeoff is that they're only useful down to zoom level 8 or 9 on the map, such that the viewport is somewhere between half a US state and a few counties in size. If that's good enough for you, then these tiles could be useful.
 
 ## Conspicuous absences
-A few capabilities are missing from this library as of v2.0.
+A few capabilities are missing from this library as of v2.2.
 * Helper functions for reading from specific data formats. For instance, I'd like to add support for reading from a zarr file.
 * A whole bunch of little things that ought to be fairly straightforward like tweaking the size of the wind barbs and contour thicknesses.
 * Support for contour labeling. I'd like to add it, but I'm not really sure how I'd do it with the contours as I've implemented them. Any WebGL gurus, get in touch.

package/lib/Barbs.d.ts

@@ -44,7 +44,7 @@ declare class Barbs<ArrayType extends TypedArray> extends PlotComponent {
      * @internal
      * Render the barb field
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 export default Barbs;
 export type { BarbsOptions };

package/lib/BillboardCollection.d.ts

@@ -12,6 +12,6 @@ declare class BillboardCollection<ArrayType extends TypedArray> {
     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;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
 export { BillboardCollection };

package/lib/BillboardCollection.js

@@ -1,7 +1,7 @@
 import { getGLFormatTypeAlignment } from "./PlotComponent";
 import { WGLProgram, WGLTexture } from "autumn-wgl";
-import { Cache } from "./utils";
 const billboard_vertex_shader_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec3 a_pos;    
 attribute vec2 a_tex_coord;
@@ -48,7 +48,10 @@ mat4 rotationXMatrix(float angle) {
 }
 
 void main() {
-    vec4 pivot_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 pivot_pos = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0);
     highp float zoom_corner = a_pos.z;
     lowp float min_zoom = floor(zoom_corner / 4.0);
     lowp float corner = mod(zoom_corner, 4.0);
@@ -57,7 +60,7 @@ void main() {
     highp float v = texture2D(u_v_sampler, a_tex_coord).r;
 
     lowp float bb_aspect = u_bb_width / u_bb_height;
-    lowp float ang = atan(v, u) - 3.141592654 / 2.0;
+    lowp float ang = (abs(u) < 1e-6 && abs(v) < 1e-6) ? 0. : atan(v, u) - 3.141592654 / 2.0;
     highp float mag = length(vec2(u, v));
     mag = floor(mag / u_bb_mag_bin_size + 0.5) * u_bb_mag_bin_size;
 
@@ -101,13 +104,12 @@ 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 = program_cache.getValue(gl);
+        this.program = new WGLProgram(gl, billboard_vertex_shader_src, billboard_fragment_shader_src);
         this.vertices = null;
         this.texcoords = null;
         const n_density_tiers = Math.log2(thin_fac);
@@ -137,15 +139,23 @@ class BillboardCollection {
     render(gl, matrix, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
         if (this.vertices === null || this.texcoords === null)
             return;
+        if (matrix instanceof Float32Array)
+            matrix = [...matrix];
         const bb_size = this.spec.BB_HEIGHT * (map_height / map_width) * this.size_multiplier;
         const bb_width = this.spec.BB_WIDTH / this.spec.BB_TEX_WIDTH;
         const bb_height = this.spec.BB_HEIGHT / this.spec.BB_TEX_HEIGHT;
         this.program.use({ 'a_pos': this.vertices, 'a_tex_coord': this.texcoords }, { 'u_bb_size': bb_size, 'u_bb_width': bb_width, 'u_bb_height': bb_height,
-            'u_bb_mag_bin_size': this.spec.BB_MAG_BIN_SIZE, 'u_bb_mag_wrap': this.spec.BB_MAG_WRAP,
+            'u_bb_mag_bin_size': this.spec.BB_MAG_BIN_SIZE, 'u_bb_mag_wrap': this.spec.BB_MAG_WRAP, 'u_offset': 0,
             'u_bb_color': this.color, 'u_matrix': matrix, 'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_map_bearing': map_bearing }, { 'u_sampler': this.texture, 'u_u_sampler': this.u_texture, 'u_v_sampler': this.v_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 { BillboardCollection };

package/lib/Contour.d.ts

@@ -55,7 +55,7 @@ declare class Contour<ArrayType extends TypedArray> extends PlotComponent {
      * @internal
      * Render the contours
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 export default Contour;
 export type { ContourOptions };

package/lib/Contour.js

@@ -1,7 +1,8 @@
 import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
-import { Cache, hex2rgba } from './utils';
+import { hex2rgba } from './utils';
 import { WGLProgram, WGLTexture } from 'autumn-wgl';
 const contour_vertex_shader_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec2 a_pos;
 attribute float a_grid_cell_size;
@@ -12,7 +13,10 @@ varying highp float v_grid_cell_size;
 varying highp float v_map_scale_fac;
 
 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;
     v_grid_cell_size = a_grid_cell_size;
 
@@ -100,7 +104,6 @@ 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
@@ -132,7 +135,7 @@ class Contour extends PlotComponent {
     async onAdd(map, gl) {
         // Basic procedure for these contours from https://www.shadertoy.com/view/lltBWM
         gl.getExtension("OES_standard_derivatives");
-        const program = program_cache.getValue(gl);
+        const program = new WGLProgram(gl, contour_vertex_shader_src, contour_fragment_shader_src);
         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;
@@ -155,13 +158,15 @@ class Contour extends PlotComponent {
         if (this.gl_elems === null)
             return;
         const gl_elems = this.gl_elems;
+        if (matrix instanceof Float32Array)
+            matrix = [...matrix];
         const zoom = gl_elems.map.getZoom();
         const intv = this.thinner(zoom) * this.interval;
         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] };
+            'u_matrix': matrix, 'u_num_contours': 0, 'u_contour_levels': [0], 'u_offset': 0 };
         if (this.levels.length > 0) {
             uniforms = { ...uniforms, 'u_num_contours': this.levels.length, 'u_contour_levels': this.levels };
         }
@@ -169,6 +174,12 @@ class Contour extends PlotComponent {
         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 Contour;

package/lib/Fill.d.ts

@@ -32,7 +32,7 @@ declare class PlotComponentFill<ArrayType extends TypedArray> extends PlotCompon
     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;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 /**
  * A raster (i.e. pixel) plot
@@ -56,7 +56,7 @@ declare class Raster<ArrayType extends TypedArray> extends PlotComponentFill<Arr
      * @internal
      * Render the raster plot
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 /**
  * A filled contoured field
@@ -80,7 +80,7 @@ declare class ContourFill<ArrayType extends TypedArray> extends PlotComponentFil
      * @internal
      * Render the filled contours
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 export { ContourFill, Raster };
 export type { ContourFillOptions, RasterOptions };

package/lib/Fill.js

@@ -2,8 +2,8 @@ import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
 import { makeTextureImage } from './Colormap';
 import { WGLProgram, WGLTexture } from 'autumn-wgl';
 import { Float16Array } from '@petamoriken/float16';
-import { Cache } from './utils';
 const contourfill_vertex_shader_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec2 a_pos;
 attribute vec2 a_tex_coord;
@@ -11,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;
@@ -39,7 +42,6 @@ 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();
@@ -74,7 +76,7 @@ class PlotComponentFill extends PlotComponent {
         if (this.image_mag_filter === null || this.cmap_mag_filter === null) {
             throw `Implement magnification filtes in a subclass`;
         }
-        const program = program_cache.getValue(gl);
+        const program = new WGLProgram(gl, contourfill_vertex_shader_src, contourfill_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;
@@ -102,11 +104,19 @@ 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();
     }
 }
 /**

package/lib/Hodographs.d.ts

@@ -35,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.js

@@ -125,7 +125,9 @@ 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.

package/lib/Paintball.d.ts

@@ -42,7 +42,7 @@ declare class Paintball<ArrayType extends TypedArray> 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,7 +1,8 @@
 import { PlotComponent, getGLFormatTypeAlignment } from "./PlotComponent";
-import { Cache, hex2rgba } from "./utils";
+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;
@@ -9,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
@@ -41,7 +45,6 @@ void main() {
     color.a = color.a * u_opacity;
     gl_FragColor = color;
 }`
-const program_cache = new Cache((gl) => new WGLProgram(gl, paintball_vertex_shader_src, paintball_fragment_shader_src));
 /**
  * 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,
@@ -72,7 +75,7 @@ class Paintball extends PlotComponent {
      */
     async onAdd(map, gl) {
         gl.getExtension('OES_texture_float');
-        const program = program_cache.getValue(gl);
+        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;
@@ -95,11 +98,19 @@ class Paintball extends PlotComponent {
         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,7 +15,7 @@ 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;
 }
 declare function getGLFormatTypeAlignment(gl: WebGLAnyRenderingContext, is_float16: boolean): {
     format: number;

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}
@@ -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.
@@ -69,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

package/lib/PolylineCollection.d.ts

@@ -11,7 +11,7 @@ declare class PolylineCollection {
     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,6 +1,6 @@
 import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
-import { Cache } from "./utils";
 const polyline_vertex_src = `uniform mat4 u_matrix;
+uniform int u_offset;
 
 attribute vec2 a_pos;
 attribute float a_min_zoom;
@@ -44,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) {
@@ -70,12 +73,11 @@ void main() {
     lowp vec4 tex_color = texture2D(u_sampler, v_tex_coord);
     gl_FragColor = tex_color;
 }`
-const program_cache = new Cache((gl) => new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src));
 class PolylineCollection {
     constructor(gl, polyline, tex_image, line_width, offset_scale) {
         this.width = line_width;
         this.scale = offset_scale;
-        this.program = program_cache.getValue(gl);
+        this.program = new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src);
         this.origin = new WGLBuffer(gl, polyline['origin'], 2, gl.TRIANGLE_STRIP);
         this.offset = new WGLBuffer(gl, polyline['verts'], 2, gl.TRIANGLE_STRIP);
         this.extrusion = new WGLBuffer(gl, polyline['extrusion'], 2, gl.TRIANGLE_STRIP);
@@ -84,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 };

package/lib/RawField.d.ts

@@ -1,10 +1,14 @@
 import { Float16Array } from "@petamoriken/float16";
 import { TypedArray, WebGLAnyRenderingContext, WindProfile } from "./AutumnTypes";
 import { WGLBuffer } from "autumn-wgl";
-interface Coords {
+interface EarthCoords {
     lons: Float32Array;
     lats: Float32Array;
 }
+interface GridCoords {
+    x: Float32Array;
+    y: Float32Array;
+}
 type GridType = 'latlon' | 'latlonrot' | 'lcc';
 declare abstract class Grid {
     readonly type: GridType;
@@ -18,7 +22,8 @@ declare abstract class Grid {
         ni?: number;
         nj?: number;
     }): Grid;
-    abstract getCoords(): Coords;
+    abstract getEarthCoords(): EarthCoords;
+    abstract getGridCoords(): GridCoords;
     abstract transform(x: number, y: number, opts?: {
         inverse?: boolean;
     }): [number, number];
@@ -40,6 +45,7 @@ declare class PlateCarreeGrid extends Grid {
     readonly ur_lon: number;
     readonly ur_lat: number;
     private readonly ll_cache;
+    private readonly gc_cache;
     /**
      * Create a plate carree grid
      * @param ni     - The number of grid points in the i (longitude) direction
@@ -61,7 +67,8 @@ declare class PlateCarreeGrid extends Grid {
     /**
      * Get a list of longitudes and latitudes on the grid (internal method)
      */
-    getCoords(): Coords;
+    getEarthCoords(): EarthCoords;
+    getGridCoords(): GridCoords;
     transform(x: number, y: number, opts?: {
         inverse?: boolean;
     }): [number, number];
@@ -78,6 +85,7 @@ declare class PlateCarreeRotatedGrid extends Grid {
     readonly ur_lat: number;
     private readonly llrot;
     private readonly ll_cache;
+    private readonly gc_cache;
     /**
      * Create a Lambert conformal conic grid
      * @param ni        - The number of grid points in the i (longitude) direction
@@ -102,7 +110,8 @@ declare class PlateCarreeRotatedGrid extends Grid {
     /**
      * Get a list of longitudes and latitudes on the grid (internal method)
      */
-    getCoords(): Coords;
+    getEarthCoords(): EarthCoords;
+    getGridCoords(): GridCoords;
     transform(x: number, y: number, opts?: {
         inverse?: boolean;
     }): [number, number];
@@ -119,6 +128,7 @@ declare class LambertGrid extends Grid {
     readonly ur_y: number;
     private readonly lcc;
     private readonly ll_cache;
+    private readonly gc_cache;
     /**
      * Create a Lambert conformal conic grid
      * @param ni      - The number of grid points in the i (longitude) direction
@@ -143,7 +153,8 @@ declare class LambertGrid extends Grid {
     /**
      * Get a list of longitudes and latitudes on the grid (internal method)
      */
-    getCoords(): Coords;
+    getEarthCoords(): EarthCoords;
+    getGridCoords(): GridCoords;
     transform(x: number, y: number, opts?: {
         inverse?: boolean;
     }): [number, number];

package/lib/RawField.js

@@ -8,7 +8,7 @@ async function makeWGLDomainBuffers(gl, grid, native_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.getCoords();
+    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;
@@ -19,7 +19,7 @@ async function makeWGLDomainBuffers(gl, grid, native_grid) {
     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.getCoords();
+    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);
@@ -64,9 +64,9 @@ class PlateCarreeGrid extends Grid {
         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 dlon = (this.ur_lon - this.ll_lon) / (this.ni - 1);
-            const dlat = (this.ur_lat - this.ll_lat) / (this.nj - 1);
             const lons = new Float32Array(this.ni * this.nj);
             const lats = new Float32Array(this.ni * this.nj);
             for (let i = 0; i < this.ni; i++) {
@@ -78,6 +78,17 @@ class PlateCarreeGrid extends Grid {
             }
             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 : {};
@@ -92,9 +103,12 @@ class PlateCarreeGrid extends Grid {
     /**
      * Get a list of longitudes and latitudes on the grid (internal method)
      */
-    getCoords() {
+    getEarthCoords() {
         return this.ll_cache.getValue();
     }
+    getGridCoords() {
+        return this.gc_cache.getValue();
+    }
     transform(x, y, opts) {
         return [x, y];
     }
@@ -136,13 +150,15 @@ class PlateCarreeRotatedGrid extends Grid {
         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 + (this.ur_lon - this.ll_lon) * i / (this.ni - 1);
+                const lon_p = this.ll_lon + i * dlon;
                 for (let j = 0; j < this.nj; j++) {
-                    const lat_p = this.ll_lat + (this.ur_lat - this.ll_lat) * j / (this.nj - 1);
+                    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;
@@ -151,6 +167,17 @@ class PlateCarreeRotatedGrid extends Grid {
             }
             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 : {};
@@ -165,9 +192,12 @@ class PlateCarreeRotatedGrid extends Grid {
     /**
      * Get a list of longitudes and latitudes on the grid (internal method)
      */
-    getCoords() {
+    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;
@@ -211,13 +241,15 @@ class LambertGrid extends Grid {
         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 + (this.ur_x - this.ll_x) * i / (this.ni - 1);
+                const x = this.ll_x + i * dx;
                 for (let j = 0; j < this.nj; j++) {
-                    const y = this.ll_y + (this.ur_y - this.ll_y) * j / (this.nj - 1);
+                    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;
@@ -226,6 +258,17 @@ class LambertGrid extends Grid {
             }
             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 : {};
@@ -240,9 +283,12 @@ class LambertGrid extends Grid {
     /**
      * Get a list of longitudes and latitudes on the grid (internal method)
      */
-    getCoords() {
+    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;
@@ -345,7 +391,7 @@ class RawVectorField {
         this.relative_to = opts.relative_to === undefined ? 'grid' : opts.relative_to;
         this.rotate_cache = new Cache(() => {
             const grid = this.u.grid;
-            const coords = grid.getCoords();
+            const coords = grid.getEarthCoords();
             const u_rot = new arrayType(coords.lats.length);
             const v_rot = new arrayType(coords.lats.length);
             for (let icd = 0; icd < coords.lats.length; icd++) {
@@ -353,6 +399,11 @@ class RawVectorField {
                 const lat = coords.lats[icd];
                 const u = this.u.data[icd];
                 const v = this.v.data[icd];
+                if (Math.abs(u) < 1e-6 && Math.abs(v) < 1e-6) {
+                    u_rot[icd] = 0;
+                    v_rot[icd] = 0;
+                    continue;
+                }
                 const [x, y] = grid.transform(lon, lat);
                 const [x_pertlon, y_pertlon] = grid.transform(lon + 0.01, lat);
                 const mag_pertlon = Math.hypot(x - x_pertlon, y - y_pertlon);
@@ -412,8 +463,8 @@ class RawProfileField {
     }
     /** Get the gridded storm motion vector field (internal method) */
     getStormMotionGrid() {
-        const u = new Float16Array(this.grid.ni * this.grid.nj);
-        const v = new Float16Array(this.grid.ni * this.grid.nj);
+        const u = new Float16Array(this.grid.ni * this.grid.nj).fill(parseFloat('nan'));
+        const v = new Float16Array(this.grid.ni * this.grid.nj).fill(parseFloat('nan'));
         this.profiles.forEach(prof => {
             const idx = prof.ilon + this.grid.ni * prof.jlat;
             u[idx] = prof.smu;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "autumnplot-gl",
-    "version": "2.2.0",
+    "version": "2.2.2",
     "description": "",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",