autumnplot-gl 3.2.0 → 4.0.0

package/lib/AutumnTypes.d.ts

@@ -1,15 +1,37 @@
 import { Float16Array } from "@petamoriken/float16";
-interface WindProfile {
-    lat: number;
-    lon: number;
+/** A wind profile with a storm-motion for plotting storm-relative hodographs */
+interface StormRelativeWindProfile {
+    /** The grid index in the j direction (ignored for unstructured grids) */
     jlat: number;
+    /** The grid index in the i direction */
     ilon: number;
+    /** u component of storm motion in kts */
     smu: number;
+    /** v component of storm motion in kts */
     smv: number;
+    /** Ground-relative u winds in kts (will be converted to storm-relative during plotting) */
     u: Float32Array;
+    /** Ground-relative v winds in kts (will be converted to storm-relative during plotting) */
     v: Float32Array;
+    /** Height of each data point in km */
     z: Float32Array;
 }
+/** A wind profile without a storm motion for plotting ground-relative hodographs */
+interface GroundRelativeWindProfile {
+    /** The grid index in the j direction (ignored for unstructured grids) */
+    jlat: number;
+    /** The grid index in the i direction */
+    ilon: number;
+    /** Ground-relative u winds in kts */
+    u: Float32Array;
+    /** Ground-relative v winds in kts */
+    v: Float32Array;
+    /** Height of each data point in km */
+    z: Float32Array;
+}
+/** Different types of wind profiles for {@link Hodographs} components */
+type WindProfile = StormRelativeWindProfile | GroundRelativeWindProfile;
+declare function isStormRelativeWindProfile(obj: any): obj is StormRelativeWindProfile;
 interface BillboardSpec {
     BB_WIDTH: number;
     BB_HEIGHT: number;
@@ -32,9 +54,66 @@ type Polyline = {
     data?: Float32Array;
     zoom?: Float32Array;
 };
+/** WebGL rendering contexts (either WebGL1 or WebGL2) */
 type WebGLAnyRenderingContext = WebGLRenderingContext | WebGL2RenderingContext;
 declare function isWebGL2Ctx(gl: WebGLAnyRenderingContext): gl is WebGL2RenderingContext;
-type TypedArray = Float16Array | Float32Array;
+/** Javascript typed arrays for use in raw fields */
+type TypedArray = Float16Array | Float32Array | Uint8Array;
+type TypedArrayStr = 'float16' | 'float32' | 'uint8';
+/**
+ * The result of contouring a field
+ *
+ * Each property is a different contour level giving an array of contours, and each contour is an array of [longitude, latitude].
+ */
 type ContourData = Record<number, [number, number][][]>;
-export { isWebGL2Ctx };
-export type { WindProfile, BillboardSpec, Polyline, LineData, WebGLAnyRenderingContext, TypedArray, ContourData };
+type mat4 = number[] | Float32Array | Float64Array;
+type RenderShaderData = {
+    vertexShaderPrelude: string;
+    define: string;
+    variantName: string;
+};
+type MapLibreRendererDataProjection = {
+    clippingPlane: [number, number, number, number];
+    fallbackMatrix: mat4;
+    mainMatrix: mat4;
+    projectionTransition: number;
+    tileMercatorCoords: [number, number, number, number];
+};
+type MapLibreRendererDataShader = RenderShaderData;
+type MapLibreRendererData = {
+    defaultProjectionData: MapLibreRendererDataProjection;
+    farZ: number;
+    fov: number;
+    modelViewProjectionMatrix: mat4;
+    nearZ: number;
+    projectionMatrix: mat4;
+    shaderData: MapLibreRendererDataShader;
+};
+type RenderMethodArg = mat4 | MapLibreRendererData;
+type RendererDataProjection = {
+    clippingPlane: number[];
+    fallbackMatrix: number[];
+    mainMatrix: number[];
+    projectionTransition: number;
+    tileMercatorCoords: number[];
+};
+type RendererDataShader = RenderShaderData;
+type RendererDataMapLibre = {
+    type: 'maplibre';
+    defaultProjectionData: RendererDataProjection;
+    farZ: number;
+    fov: number;
+    modelViewProjectionMatrix: number[];
+    nearZ: number;
+    projectionMatrix: number[];
+    shaderData: RendererDataShader;
+};
+type RendererDataAutumn = {
+    type: 'autumn';
+    mainMatrix: number[];
+    shaderData: null;
+};
+type RendererData = RendererDataMapLibre | RendererDataAutumn;
+declare function getRendererData(arg: RenderMethodArg): RendererData;
+export { isWebGL2Ctx, getRendererData, isStormRelativeWindProfile };
+export type { WindProfile, StormRelativeWindProfile, GroundRelativeWindProfile, BillboardSpec, Polyline, LineData, WebGLAnyRenderingContext, TypedArray, TypedArrayStr, ContourData, RenderMethodArg, RendererData, RenderShaderData };

package/lib/AutumnTypes.js

@@ -1,4 +1,31 @@
+function isStormRelativeWindProfile(obj) {
+    return 'smu' in obj && 'smv' in obj;
+}
 function isWebGL2Ctx(gl) {
     return gl.getParameter(gl.VERSION).includes('WebGL 2.0');
 }
-export { isWebGL2Ctx };
+function isMapLibreRenderArg(obj) {
+    return 'modelViewProjectionMatrix' in obj && 'defaultProjectionData' in obj && 'mainMatrix' in obj.defaultProjectionData;
+}
+function getRendererData(arg) {
+    if (isMapLibreRenderArg(arg)) {
+        return {
+            type: 'maplibre',
+            defaultProjectionData: {
+                clippingPlane: [...arg.defaultProjectionData.clippingPlane],
+                fallbackMatrix: [...arg.defaultProjectionData.fallbackMatrix],
+                mainMatrix: [...arg.defaultProjectionData.mainMatrix],
+                projectionTransition: arg.defaultProjectionData.projectionTransition,
+                tileMercatorCoords: [...arg.defaultProjectionData.tileMercatorCoords]
+            },
+            farZ: arg.farZ,
+            fov: arg.fov,
+            modelViewProjectionMatrix: [...arg.modelViewProjectionMatrix],
+            nearZ: arg.nearZ,
+            projectionMatrix: [...arg.projectionMatrix],
+            shaderData: arg.shaderData
+        };
+    }
+    return { type: 'autumn', mainMatrix: [...arg], shaderData: null };
+}
+export { isWebGL2Ctx, getRendererData, isStormRelativeWindProfile };

package/lib/Barbs.d.ts

@@ -1,8 +1,10 @@
 import { PlotComponent } from "./PlotComponent";
 import { RawVectorField } from "./RawField";
 import { MapLikeType } from "./Map";
-import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
+import { Grid } from "./Grid";
+/** Options for {@link Barbs} components */
 interface BarbsOptions {
     /**
      * The color to use for the barbs as a hex color string;.
@@ -38,7 +40,7 @@ interface BarbsOptions {
  * const vector_field = new RawVectorField(grid, u_data, v_data);
  * const barbs = new Barbs(vector_field, {color: '#000000', thin_fac: 16});
  */
-declare class Barbs<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+declare class Barbs<ArrayType extends TypedArray, GridType extends Grid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     /** The vector field */
     private fields;
     readonly opts: Required<BarbsOptions>;
@@ -50,12 +52,12 @@ declare class Barbs<ArrayType extends TypedArray, MapType extends MapLikeType> e
      * @param fields - The vector field to plot as barbs
      * @param opts   - Options for creating the wind barbs
      */
-    constructor(fields: RawVectorField<ArrayType>, opts: BarbsOptions);
+    constructor(fields: RawVectorField<ArrayType, GridType>, opts: BarbsOptions);
     /**
      * Update the field displayed as barbs
      * @param fields - The new field to display as barbs
      */
-    updateField(fields: RawVectorField<ArrayType>): Promise<void>;
+    updateField(fields: RawVectorField<ArrayType, GridType>): Promise<void>;
     /**
      * @internal
      * Add the barb field to a map
@@ -65,7 +67,7 @@ declare class Barbs<ArrayType extends TypedArray, MapType extends MapLikeType> e
      * @internal
      * Render the barb field
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, matrix: RenderMethodArg): void;
 }
 export default Barbs;
 export type { BarbsOptions };

package/lib/BillboardCollection.d.ts

@@ -1,28 +1,29 @@
-import { BillboardSpec, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { BillboardSpec, RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { Color } from "./Color";
 import { ColorMap } from "./Colormap";
+import { Grid } from "./Grid";
 import { RawVectorField } from "./RawField";
 import { WGLTextureSpec } from "autumn-wgl";
 interface BillboardCollectionOpts {
     color?: Color;
     cmap?: ColorMap;
+    rotate_with_map?: boolean;
 }
-declare class BillboardCollection<ArrayType extends TypedArray> {
+declare class BillboardCollection<ArrayType extends TypedArray, GridType extends Grid> {
     private field;
     readonly spec: BillboardSpec;
     readonly color: Color;
     readonly cmap: ColorMap | null;
+    readonly rotate_with_map: boolean;
     readonly size_multiplier: number;
     readonly thin_fac: number;
     readonly max_zoom: number;
     readonly billboard_image: WGLTextureSpec;
     private gl_elems;
     private wind_textures;
-    private readonly trim_inaccessible;
-    private show_field;
-    constructor(field: RawVectorField<ArrayType>, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_size_mult: number, opts?: BillboardCollectionOpts);
-    updateField(field: RawVectorField<ArrayType>): void;
+    constructor(field: RawVectorField<ArrayType, GridType>, thin_fac: number, max_zoom: number, billboard_image: WGLTextureSpec, billboard_spec: BillboardSpec, billboard_size_mult: number, opts?: BillboardCollectionOpts);
+    updateField(field: RawVectorField<ArrayType, GridType>): void;
     setup(gl: WebGLAnyRenderingContext): Promise<void>;
-    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 { BillboardCollection };

package/lib/BillboardCollection.js

@@ -1,29 +1,31 @@
+import { getRendererData } from "./AutumnTypes";
 import { Color } from "./Color";
 import { ColorMapGPUInterface } from "./Colormap";
-import { getGLFormatTypeAlignment } from "./PlotComponent";
-import { WGLProgram, WGLTexture } from "autumn-wgl";
-const billboard_vertex_shader_src = `uniform mat4 u_matrix;
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
+import { ShaderProgramManager } from "./ShaderManager";
+const billboard_vertex_shader_src = `#version 300 es
+
 uniform int u_offset;
 
-attribute vec3 a_pos;    
-attribute vec2 a_tex_coord;
+in vec2 a_pos;    
+in vec2 a_tex_coord; 
+in lowp float a_geom; 
 uniform lowp float u_bb_size;
 uniform lowp float u_map_aspect;
 uniform lowp float u_zoom;
-uniform highp float u_map_bearing;
 uniform lowp float u_bb_width;  
 uniform lowp float u_bb_height; 
 uniform highp float u_bb_mag_bin_size;
-
 uniform highp float u_bb_mag_wrap;
+uniform int u_rotate_with_map;
 
 uniform sampler2D u_u_sampler;
 uniform sampler2D u_v_sampler;
 uniform sampler2D u_rot_sampler;
 
-varying highp vec2 v_tex_coord;
+out highp vec2 v_tex_coord;
 #ifdef COLORMAP
-varying highp float v_mag;
+out highp float v_mag;
 #endif
 
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
@@ -57,14 +59,27 @@ void main() {
     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);
+    mat4 map_stretch_matrix = scalingMatrix(1.0, 1. / u_map_aspect, 1.0);
+
+    vec4 pivot_pos = projectTile(a_pos.xy + globe_offset);
+    float globe_rotation = 0.0;
+
+    if (u_rotate_with_map == 1) {
+        vec4 pivot_pos_ihat = projectTile(a_pos.xy + globe_offset + vec2(1e-5, 0.));
+        
+        vec2 pivot_east = normalize((inverse(map_stretch_matrix) * (pivot_pos_ihat - pivot_pos)).xy);
+        globe_rotation = atan(pivot_east.x, pivot_east.y) - 3.141592654 / 2.0;
+    }
 
-    highp float u = texture2D(u_u_sampler, a_tex_coord).r;
-    highp float v = texture2D(u_v_sampler, a_tex_coord).r;
-    highp float rot = texture2D(u_rot_sampler, a_tex_coord).r;
+    highp float min_zoom = floor(a_tex_coord.x);
+    lowp float corner = a_geom;
+
+    vec2 data_texcoord = a_tex_coord;
+    data_texcoord.x = fract(data_texcoord.x);
+
+    highp float u = texture(u_u_sampler, data_texcoord).r;
+    highp float v = texture(u_v_sampler, data_texcoord).r;
+    highp float rot = texture(u_rot_sampler, data_texcoord).r;
 
     lowp float bb_aspect = u_bb_width / u_bb_height;
     lowp float ang = (abs(u) < 1e-6 && abs(v) < 1e-6) ? 0. : atan(v, u) - 3.141592654 / 2.0;
@@ -98,26 +113,29 @@ void main() {
             texcoord = tex_loc + vec2(u_bb_width, u_bb_height);
         }
 
-        mat4 barb_rotation = rotationZMatrix(ang + radians(u_map_bearing) - rot);
-        mat4 map_stretch_matrix = scalingMatrix(1.0, 1. / u_map_aspect, 1.0);
+        mat4 barb_rotation = rotationZMatrix(ang - globe_rotation - rot);
         offset = map_stretch_matrix * barb_rotation * offset;
     }
 
     gl_Position = pivot_pos + offset;
     v_tex_coord = texcoord;
 }`
-const billboard_fragment_shader_src = `varying highp vec2 v_tex_coord;
+const billboard_fragment_shader_src = `#version 300 es
+
+in highp vec2 v_tex_coord;
 
 #ifdef COLORMAP
-varying highp float v_mag;
+in highp float v_mag;
 #else
 uniform lowp vec4 u_bb_color;
 #endif
 
 uniform sampler2D u_sampler;
 
+out highp vec4 fragColor;
+
 void main() {
-    lowp vec4 tex_color = texture2D(u_sampler, v_tex_coord);
+    lowp vec4 tex_color = texture(u_sampler, v_tex_coord);
 
     lowp vec4 color;
 #ifdef COLORMAP
@@ -127,13 +145,14 @@ void main() {
 #endif
 
     color.a *= tex_color.a;
-    gl_FragColor = color; 
+    fragColor = color; 
 }`
 class BillboardCollection {
     constructor(field, thin_fac, max_zoom, billboard_image, billboard_spec, billboard_size_mult, opts) {
         opts = opts === undefined ? {} : opts;
         this.color = opts.color === undefined ? new Color([0, 0, 0, 1]) : opts.color;
         this.cmap = opts.cmap === undefined ? null : opts.cmap;
+        this.rotate_with_map = opts.rotate_with_map === undefined ? true : opts.rotate_with_map;
         this.field = field;
         this.spec = billboard_spec;
         this.size_multiplier = billboard_size_mult;
@@ -142,28 +161,14 @@ class BillboardCollection {
         this.billboard_image = billboard_image;
         this.gl_elems = null;
         this.wind_textures = null;
-        const n_density_tiers = Math.log2(thin_fac);
-        const n_inaccessible_tiers = Math.max(n_density_tiers + 1 - max_zoom, 0);
-        this.trim_inaccessible = Math.pow(2, n_inaccessible_tiers);
-        this.show_field = true;
     }
     updateField(field) {
         this.field = field;
         if (this.gl_elems === null)
             return;
         const gl = this.gl_elems.gl;
-        const data = this.field.getThinnedField(this.trim_inaccessible, this.trim_inaccessible);
-        const { u: u_thin, v: v_thin } = data.getTextureData();
-        this.show_field = u_thin !== null;
-        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, !(u_thin instanceof Float32Array));
-        const u_image = { 'format': format, 'type': type,
-            'width': data.grid.ni, 'height': data.grid.nj, 'image': u_thin,
-            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
-        };
-        const v_image = { 'format': format, 'type': type,
-            'width': data.grid.ni, 'height': data.grid.nj, 'image': v_thin,
-            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
-        };
+        const data = this.field.getThinnedField(this.thin_fac, this.max_zoom);
+        const { u: u_image, v: v_image } = data.getWGLTextureSpecs(gl, gl.NEAREST);
         if (this.wind_textures === null) {
             this.wind_textures = { u: new WGLTexture(gl, u_image), v: new WGLTexture(gl, v_image) };
         }
@@ -173,9 +178,11 @@ class BillboardCollection {
         }
     }
     async setup(gl) {
-        const thinned_field = this.field.getThinnedField(this.trim_inaccessible, this.trim_inaccessible);
-        const { vertices, texcoords } = await thinned_field.grid.getWGLBillboardBuffers(gl, this.thin_fac / this.trim_inaccessible, this.max_zoom);
-        const { rotation: proj_rotation_tex } = thinned_field.grid.getVectorRotationTexture(gl);
+        const thinned_grid = this.field.grid.getThinnedGrid(this.thin_fac, this.max_zoom);
+        const geom_verts = new Float32Array([0., 1., 2., 3.]);
+        const geom_buffer = new WGLBuffer(gl, geom_verts, 1, gl.TRIANGLE_STRIP);
+        const { vertices, texcoords } = await thinned_grid.getWGLBillboardBuffers(gl, this.thin_fac, this.max_zoom);
+        const { rotation: proj_rotation_tex } = thinned_grid.getVectorRotationTexture(gl, this.field.relative_to == 'earth');
         const texture = new WGLTexture(gl, this.billboard_image);
         const shader_defines = [];
         let fragment_src = billboard_fragment_shader_src;
@@ -186,36 +193,40 @@ class BillboardCollection {
             cmap_gpu.setupShaderVariables(gl, gl.NEAREST);
             shader_defines.push('COLORMAP');
         }
-        const program = new WGLProgram(gl, billboard_vertex_shader_src, fragment_src, { define: shader_defines });
-        this.gl_elems = { gl: gl, program: program, vertices: vertices, texcoords: texcoords, texture: texture, proj_rot_texture: proj_rotation_tex, cmap_gpu: cmap_gpu };
+        const shader_manager = new ShaderProgramManager(billboard_vertex_shader_src, fragment_src, shader_defines);
+        this.gl_elems = { gl: gl, shader_manager: shader_manager, geom_vertices: geom_buffer, vertices: vertices, texcoords: texcoords, texture: texture,
+            proj_rot_texture: proj_rotation_tex, cmap_gpu: cmap_gpu };
     }
-    render(gl, matrix, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
-        if (this.gl_elems === null || this.wind_textures === null || !this.show_field)
+    render(gl, arg, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
+        if (this.gl_elems === null || this.wind_textures === null)
             return;
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
+        const render_data = getRendererData(arg);
+        const program = this.gl_elems.shader_manager.getShaderProgram(gl, render_data.shaderData);
         const gl_elems = this.gl_elems;
         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;
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_bb_size': bb_size, 'u_bb_width': bb_width, 'u_bb_height': bb_height,
+        program.use({ 'a_geom': gl_elems.geom_vertices, 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.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_offset': 0,
-            'u_matrix': matrix, 'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_map_bearing': map_bearing }, { 'u_sampler': gl_elems.texture, 'u_u_sampler': this.wind_textures.u, 'u_v_sampler': this.wind_textures.v, 'u_rot_sampler': gl_elems.proj_rot_texture });
+            'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_rotate_with_map': this.rotate_with_map ? 1 : 0,
+            ...this.gl_elems.shader_manager.getShaderUniforms(render_data) }, { 'u_sampler': gl_elems.texture, 'u_u_sampler': this.wind_textures.u, 'u_v_sampler': this.wind_textures.v, 'u_rot_sampler': gl_elems.proj_rot_texture });
         if (gl_elems.cmap_gpu !== null) {
-            gl_elems.cmap_gpu.bindShaderVariables(gl_elems.program);
+            gl_elems.cmap_gpu.bindShaderVariables(program);
         }
         else {
-            gl_elems.program.setUniforms({ 'u_bb_color': this.color.toRGBATuple() });
+            program.setUniforms({ 'u_bb_color': this.color.toRGBATuple() });
         }
         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 { BillboardCollection };

package/lib/Color.d.ts

@@ -1,3 +1,4 @@
+/** A class for handling colors and translations between different color spaces */
 declare class Color {
     private rgba;
     /**
@@ -52,5 +53,6 @@ declare class Color {
      * @returns a new Color object
      */
     static fromHSVTuple(hsv: [number, number, number]): Color;
+    static normalizeColor(color: Color | string): Color;
 }
 export { Color };

package/lib/Color.js

@@ -78,6 +78,7 @@ const hsv2rgb = (hsv) => {
     }
     return [r_prime + m, g_prime + m, b_prime + m];
 };
+/** A class for handling colors and translations between different color spaces */
 class Color {
     /**
      * Create a new color object
@@ -156,5 +157,8 @@ class Color {
         const rgb = hsv2rgb(hsv);
         return new Color([rgb[0], rgb[1], rgb[2], 1]);
     }
+    static normalizeColor(color) {
+        return color instanceof Color ? color : Color.fromHex(color);
+    }
 }
 export { Color };

package/lib/ColorBar.d.ts

@@ -1,10 +1,23 @@
 import { ColorMap } from "./Colormap";
 import { Color } from "./Color";
+/** The orientation for color bars (horizontal or vertical) */
 type ColorbarOrientation = 'horizontal' | 'vertical';
+/** Which side of a color bar the ticks are on */
 type ColorbarTickDirection = 'top' | 'bottom' | 'left' | 'right';
+/** Options for {@link ColorBar}s */
 interface ColorBarOptions {
     /** The label to place along the color bar */
     label?: string;
+    /**
+     * The size in pixels along the long axis of the colorbar
+     * @default 600
+     */
+    size_long?: number;
+    /**
+     * The size in pixels along the short axis of the colorbar
+     * @default size_long / 9
+     */
+    size_short?: number;
     /**
      * An array of numbers to use as the tick locations.
      * @default Use all the levels in the color map provided to {@link makeColorBar}.
@@ -31,6 +44,11 @@ interface ColorBarOptions {
      * @default 12
      */
     ticklabelsize?: number;
+    /**
+     * The color for the color bar outline and the text
+     * @default '#000000'
+     */
+    outline_and_text_color?: string;
 }
 /**
  * Make an SVG containing a color bar. The color bar can either be oriented horizontal or vertical, and a label can be provided.
@@ -46,6 +64,7 @@ interface ColorBarOptions {
  * document.getElementById('colorbar-container').appendChild(svg);
  */
 declare function makeColorBar(colormap: ColorMap, opts: ColorBarOptions): SVGElement;
+/** Options for {@link makePaintballKey | makePaintballKey()} */
 interface PaintballKeyOptions {
     /**
      * The number of columns of entries in the key

package/lib/ColorBar.js

@@ -30,6 +30,9 @@ function makeColorBar(colormap, opts) {
     const orientation = opts.orientation || 'vertical';
     const fontface = opts.fontface || 'sans-serif';
     const tickfontsize = opts.ticklabelsize || 12;
+    const size_long = opts.size_long || 600;
+    const size_short = opts.size_short || size_long / 9;
+    const outline_and_text_color = opts.outline_and_text_color || '#000000';
     const tick_dir = opts.tick_direction || (orientation == 'vertical' ? 'left' : 'bottom');
     if (orientation == 'vertical' && (tick_dir == 'top' || tick_dir == 'bottom') ||
         orientation == 'horizontal' && (tick_dir == 'left' || tick_dir == 'right')) {
@@ -41,8 +44,8 @@ function makeColorBar(colormap, opts) {
     const chars_left = getNChar(ticks[0]);
     const chars_right = getNChar(ticks[ticks.length - 1]);
     const need_overflow = colormap.underflow_color !== null || colormap.overflow_color !== null;
-    const bar_long_size = 600;
-    const bar_cross_size = bar_long_size / 9;
+    const bar_long_size = size_long;
+    const bar_cross_size = size_short;
     const bar_long_pad = Math.max(orientation == 'horizontal' ? Math.max(chars_left, chars_right) * 6 : 8, need_overflow ? bar_cross_size / (2 * Math.sqrt(3)) : 0);
     const bar_cross_pad = 3;
     const bar_thickness = 10;
@@ -141,7 +144,7 @@ function makeColorBar(colormap, opts) {
         else {
             lineattrs = tick_dir == 'bottom' ? { y2: 6 } : { y2: -6 };
         }
-        createElement('line', { ...lineattrs, stroke: '#000000', 'stroke-width': 1.5 }, gtick);
+        createElement('line', { ...lineattrs, stroke: outline_and_text_color, 'stroke-width': 1.5 }, gtick);
         let textattrs;
         if (orientation == 'vertical') {
             textattrs = tick_dir == 'left' ? { x: -9, dy: '0.32em' } : { x: 9, dy: '0.32em' };
@@ -149,7 +152,7 @@ function makeColorBar(colormap, opts) {
         else {
             textattrs = tick_dir == 'bottom' ? { y: 9, dy: '0.8em' } : { y: -9, dy: '0em' };
         }
-        const text = createElement('text', { ...textattrs, fill: '#000000', style: `font-family: ${fontface}; font-size: ${tickfontsize}pt` }, gtick);
+        const text = createElement('text', { ...textattrs, fill: outline_and_text_color, style: `font-family: ${fontface}; font-size: ${tickfontsize}pt` }, gtick);
         text.textContent = level.toString();
     });
     // Draw the outline
@@ -164,7 +167,7 @@ function makeColorBar(colormap, opts) {
     }
     const outline_attrs = {
         points: point_list,
-        stroke: '#000000',
+        stroke: outline_and_text_color,
         'stroke-width': 1.5,
         fill: 'none'
     };
@@ -177,7 +180,7 @@ function makeColorBar(colormap, opts) {
     else {
         labelattrs = tick_dir == 'bottom' ? { transform: `translate(${width / 2}, ${height - 5})` } : { transform: `translate(${width / 2}, 15)` };
     }
-    const label_elem = createElement('text', { ...labelattrs, fill: '#000000', 'text-anchor': 'middle', style: `font-family: ${fontface};` }, root);
+    const label_elem = createElement('text', { ...labelattrs, fill: outline_and_text_color, 'text-anchor': 'middle', style: `font-family: ${fontface};` }, root);
     label_elem.textContent = label;
     return root;
 }

package/lib/Colormap.d.ts

@@ -1,6 +1,7 @@
 import { WGLProgram, WGLTexture } from "autumn-wgl";
 import { WebGLAnyRenderingContext } from "./AutumnTypes";
 import { Color } from "./Color";
+/** Options for {@link ColorMap}s */
 interface ColorMapOptions {
     /** The color to use for areas where the value is above the highest value in the color map */
     overflow_color?: Color | string;

package/lib/Colormap.js

@@ -8,6 +8,7 @@ import { Float16Array } from "@petamoriken/float16";
 import { WGLTexture } from "autumn-wgl";
 import { getGLFormatTypeAlignment } from "./PlotComponent";
 import { Color } from "./Color";
+import { mergeShaderCode } from "./utils";
 const colormap_shader_src = `
 uniform sampler2D u_cmap_sampler;
 uniform sampler2D u_cmap_nonlin_sampler;
@@ -30,8 +31,8 @@ lowp vec4 apply_colormap(highp float value) {
     else {
         lowp float index_buffer = 1. / (2. * float(u_n_index));
         normed_val = index_buffer + normed_val * (1. - 2. * index_buffer); 
-        highp float nonlin_val = texture2D(u_cmap_nonlin_sampler, vec2(normed_val, 0.5)).r;
-        color = texture2D(u_cmap_sampler, vec2(nonlin_val, 0.5));
+        highp float nonlin_val = texture(u_cmap_nonlin_sampler, vec2(normed_val, 0.5)).r;
+        color = texture(u_cmap_sampler, vec2(nonlin_val, 0.5));
     }
 
     return color;
@@ -48,12 +49,11 @@ class ColorMap {
         if (levels.length != colors.length + 1) {
             throw `Mismatch between number of levels (${levels.length}) and number of colors (${colors.length}; expected ${levels.length - 1})`;
         }
-        const normalizeColor = (c) => c instanceof Color ? c : Color.fromHex(c);
         this.levels = levels;
-        this.colors = colors.map(c => normalizeColor(c));
+        this.colors = colors.map(c => Color.normalizeColor(c));
         opts = opts === undefined ? {} : opts;
-        this.overflow_color = opts.overflow_color === undefined ? null : normalizeColor(opts.overflow_color);
-        this.underflow_color = opts.underflow_color === undefined ? null : normalizeColor(opts.underflow_color);
+        this.overflow_color = opts.overflow_color === undefined ? null : Color.normalizeColor(opts.overflow_color);
+        this.underflow_color = opts.underflow_color === undefined ? null : Color.normalizeColor(opts.underflow_color);
     }
     /**
      * @returns an array of hex color strings
@@ -195,12 +195,12 @@ class ColorMapGPUInterface {
         this.gl_elems = null;
     }
     static applyShader(shader_src) {
-        return colormap_shader_src + "\n" + shader_src;
+        return mergeShaderCode(colormap_shader_src, shader_src);
     }
     setupShaderVariables(gl, mag_filter) {
         const index_map = makeIndexMap(this.colormap);
         const cmap_image = makeTextureImage(this.colormap);
-        const { format: format_nonlin, type: type_nonlin, row_alignment: row_alignment_nonlin } = getGLFormatTypeAlignment(gl, true);
+        const { format: format_nonlin, type: type_nonlin, row_alignment: row_alignment_nonlin } = getGLFormatTypeAlignment(gl, 'float16');
         const cmap_image_spec = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': cmap_image, 'mag_filter': mag_filter };
         const cmap_texture = new WGLTexture(gl, cmap_image_spec);
         const cmap_nonlin_image = { 'format': format_nonlin, 'type': type_nonlin,