autumnplot-gl 2.0.0 → 2.2.0

package/lib/{ContourFill.js → Fill.js}

@@ -1,7 +1,8 @@
-import { PlotComponent } from './PlotComponent';
+import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
 import { makeTextureImage } from './Colormap';
 import { WGLProgram, WGLTexture } from 'autumn-wgl';
-import { isWebGL2Ctx } from './AutumnTypes';
+import { Float16Array } from '@petamoriken/float16';
+import { Cache } from './utils';
 const contourfill_vertex_shader_src = `uniform mat4 u_matrix;
 
 attribute vec2 a_pos;
@@ -38,18 +39,8 @@ void main() {
     color.a = color.a * u_opacity;
     gl_FragColor = color;
 }`
-/**
- * A filled contoured field
- * &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 PlotComponent {
-    /**
-     * Create a filled contoured field
-     * &param field - The field to create filled contours from
-     * &param opts  - Options for creating the filled contours
-     */
+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();
         this.field = field;
@@ -73,33 +64,33 @@ class ContourFill 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;
     }
-    /**
-     * &internal
-     * Add the filled contours to a map
-     */
     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');
-        const program = new WGLProgram(gl, contourfill_vertex_shader_src, contourfill_fragment_shader_src);
+        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 { 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.LINEAR,
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, this.field.isFloat16());
+        const fill_image = { 'format': format, 'type': type,
+            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.getTextureData(),
+            'mag_filter': 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': gl.NEAREST };
+        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 = {
@@ -107,10 +98,6 @@ class ContourFill extends PlotComponent {
             fill_texture: fill_texture, cmap_texture: cmap_texture, cmap_nonlin_texture: cmap_nonlin_texture,
         };
     }
-    /**
-     * &internal
-     * Render the filled contours
-     */
     render(gl, matrix) {
         if (this.gl_elems === null)
             return;
@@ -122,4 +109,68 @@ class ContourFill extends PlotComponent {
         gl_elems.program.draw();
     }
 }
-export default ContourFill;
+/**
+ * A raster (i.e. pixel) plot
+ * @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
+     */
+    constructor(field, opts) {
+        super(field, opts);
+    }
+    /**
+     * @internal
+     * Add the raster plot to a map
+     */
+    async onAdd(map, gl) {
+        this.image_mag_filter = gl.NEAREST;
+        this.cmap_mag_filter = gl.LINEAR;
+        super.onAdd(map, gl);
+    }
+    /**
+     * @internal
+     * Render the raster plot
+     */
+    render(gl, matrix) {
+        super.render(gl, matrix);
+    }
+}
+/**
+ * A filled contoured field
+ * @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
+     */
+    constructor(field, opts) {
+        super(field, opts);
+    }
+    /**
+     * @internal
+     * Add the filled contours to a map
+     */
+    async onAdd(map, gl) {
+        this.image_mag_filter = gl.LINEAR;
+        this.cmap_mag_filter = gl.NEAREST;
+        super.onAdd(map, gl);
+    }
+    /**
+     * @internal
+     * Render the filled contours
+     */
+    render(gl, matrix) {
+        super.render(gl, matrix);
+    }
+}
+export { ContourFill, Raster };

package/lib/Hodographs.d.ts

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

package/lib/Map.d.ts

@@ -8,6 +8,14 @@ interface LambertConformalConicParameters {
 declare function lambertConformalConic(params: LambertConformalConicParameters): (a: number, b: number, opts?: {
     inverse: boolean;
 }) => [number, number];
+interface RotateSphereParams {
+    np_lon: number;
+    np_lat: number;
+    lon_shift: number;
+}
+declare function rotateSphere(params: RotateSphereParams): (a: number, b: number, opts?: {
+    inverse: boolean;
+}) => [number, number];
 /**
  * A `LngLat` object represents a given longitude and latitude coordinate, measured in degrees.
  * These coordinates are based on the [WGS84 (EPSG:4326) standard](https://en.wikipedia.org/wiki/World_Geodetic_System#WGS84).
@@ -30,5 +38,5 @@ declare class LngLat {
         y: number;
     };
 }
-export { LngLat, lambertConformalConic };
+export { LngLat, lambertConformalConic, rotateSphere };
 export type { MapType };

package/lib/Map.js

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

package/lib/Paintball.d.ts

@@ -1,8 +1,7 @@
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { MapType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
 import { RawScalarField } from "./RawField";
-import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
 interface PaintballOptions {
     /**
      * The list of colors (as hex strings) to use for each member in the paintball plot. The first color corresponds to member 1, the second to member 2, etc.
@@ -14,12 +13,6 @@ interface PaintballOptions {
      */
     opacity?: number;
 }
-interface PaintballGLElems {
-    program: WGLProgram;
-    vertices: WGLBuffer;
-    fill_texture: WGLTexture;
-    texcoords: WGLBuffer;
-}
 /**
  * A class representing a paintball plot, which is a plot of objects in every member of an ensemble. Objects are usually defined by a single threshold on
  * a field (such as simulated reflectivity greater than 40 dBZ), but could in theory be defined by any arbitrarily complicated method. In autumnplot-gl,
@@ -27,12 +20,11 @@ interface PaintballGLElems {
  * of single-precision floats, this works for up to 24 members. (Technically speaking, I don't need the quotes around "bits", as they're bits of the
  * significand of an IEEE 754 float.)
  */
-declare class Paintball extends PlotComponent {
-    readonly field: RawScalarField;
+declare class Paintball<ArrayType extends TypedArray> extends PlotComponent {
+    private readonly field;
     readonly colors: number[];
     readonly opacity: number;
-    /** @private */
-    gl_elems: PaintballGLElems | null;
+    private gl_elems;
     /**
      * Create a paintball plot
      * @param field - A scalar field containing the member objects encoded as "bits." The numerical value of each grid point can be constructed like
@@ -40,7 +32,7 @@ declare class Paintball extends PlotComponent {
      *               `M2` is the same thing for member 2, and `M3` and `M4` and up to `Mn` are the same thing for the rest of the members.
      * @param opts  - Options for creating the paintball plot
      */
-    constructor(field: RawScalarField, opts?: PaintballOptions);
+    constructor(field: RawScalarField<ArrayType>, opts?: PaintballOptions);
     /**
      * @internal
      * Add the paintball plot to a map.

package/lib/Paintball.js

@@ -1,6 +1,5 @@
-import { isWebGL2Ctx } from "./AutumnTypes";
-import { PlotComponent } from "./PlotComponent";
-import { hex2rgba } from "./utils";
+import { PlotComponent, getGLFormatTypeAlignment } from "./PlotComponent";
+import { Cache, hex2rgba } from "./utils";
 import { WGLProgram, WGLTexture } from "autumn-wgl";
 const paintball_vertex_shader_src = `uniform mat4 u_matrix;
 
@@ -42,6 +41,7 @@ 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,
@@ -52,10 +52,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,19 +67,20 @@ class Paintball extends PlotComponent {
         this.gl_elems = null;
     }
     /**
-     * &internal
+     * @internal
      * Add the paintball plot to a map.
      */
     async onAdd(map, gl) {
         gl.getExtension('OES_texture_float');
-        const program = new WGLProgram(gl, paintball_vertex_shader_src, paintball_fragment_shader_src);
+        const program = program_cache.getValue(gl);
         const { vertices: verts_buf, texcoords: tex_coords_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
         const texcoords = tex_coords_buf;
-        const format = isWebGL2Ctx(gl) ? gl.R32F : gl.LUMINANCE;
-        const fill_image = { 'format': format, 'type': gl.FLOAT,
-            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.data,
-            'mag_filter': 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,7 +88,7 @@ class Paintball extends PlotComponent {
         };
     }
     /**
-     * &internal
+     * @internal
      * Render the paintball plot
      */
     render(gl, matrix) {

package/lib/PlotComponent.d.ts

@@ -17,4 +17,9 @@ declare abstract class PlotComponent {
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     abstract render(gl: WebGLAnyRenderingContext, matrix: number[]): 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

@@ -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
@@ -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
@@ -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,15 +1,15 @@
-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;
 }

package/lib/PolylineCollection.js

@@ -1,4 +1,5 @@
 import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+import { Cache } from "./utils";
 const polyline_vertex_src = `uniform mat4 u_matrix;
 
 attribute vec2 a_pos;
@@ -69,11 +70,12 @@ 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 = new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src);
+        this.program = program_cache.getValue(gl);
         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);