autumnplot-gl 3.1.0 → 4.0.0-beta

package/lib/AutumnTypes.d.ts

@@ -1,7 +1,5 @@
 import { Float16Array } from "@petamoriken/float16";
 interface WindProfile {
-    lat: number;
-    lon: number;
     jlat: number;
     ilon: number;
     smu: number;
@@ -34,7 +32,57 @@ type Polyline = {
 };
 type WebGLAnyRenderingContext = WebGLRenderingContext | WebGL2RenderingContext;
 declare function isWebGL2Ctx(gl: WebGLAnyRenderingContext): gl is WebGL2RenderingContext;
-type TypedArray = Float16Array | Float32Array;
+type TypedArray = Float16Array | Float32Array | Uint8Array;
+type TypedArrayStr = 'float16' | 'float32' | 'uint8';
 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 };
+export type { WindProfile, BillboardSpec, Polyline, LineData, WebGLAnyRenderingContext, TypedArray, TypedArrayStr, ContourData, RenderMethodArg, RendererData, RenderShaderData };

package/lib/AutumnTypes.js

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

package/lib/Barbs.d.ts

@@ -1,13 +1,29 @@
 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";
 interface BarbsOptions {
     /**
      * The color to use for the barbs as a hex color string;.
      * @default '#000000'
      */
     color?: string;
+    /**
+     * A color map to use to color the barbs by magnitude. Specifying cmap overrides the color argument.
+     */
+    cmap?: ColorMap | null;
+    /**
+     * The width of the lines to use for the barbs
+     * @default 2
+     */
+    line_width?: number;
+    /**
+     * A multiplier for the barb size
+     * @default 1
+     */
+    barb_size_multiplier?: number;
     /**
      * How much to thin the barbs at zoom level 1 on the map. This effectively means to plot every `n`th barb in the i and j directions, where `n` =
      * `thin_fac`. `thin_fac` should be a power of 2.
@@ -23,23 +39,24 @@ 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>;
-    private readonly color_rgb;
+    private readonly color;
     private gl_elems;
+    private barb_texture;
     /**
      * Create a field of wind barbs
      * @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
@@ -49,7 +66,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/Barbs.js

@@ -1,7 +1,8 @@
 import { PlotComponent } from "./PlotComponent";
 import { BillboardCollection } from './BillboardCollection';
-import { hex2rgb, normalizeOptions } from './utils';
-const BARB_DIMS = {
+import { normalizeOptions } from './utils';
+import { Color } from "./Color";
+const BASE_BARB_DIMS = {
     BB_WIDTH: 85,
     BB_HEIGHT: 256,
     BB_TEX_WIDTH: 1024,
@@ -10,12 +11,13 @@ const BARB_DIMS = {
     BB_MAG_WRAP: 60,
     BB_MAG_BIN_SIZE: 5,
 };
-function _createBarbTexture() {
+const LINE_WIDTH_MULTIPLIER = 4;
+function createBarbTexture(dimensions, line_width) {
     let canvas = document.createElement('canvas');
-    canvas.width = BARB_DIMS.BB_TEX_WIDTH;
-    canvas.height = BARB_DIMS.BB_TEX_HEIGHT;
+    canvas.width = dimensions.BB_TEX_WIDTH;
+    canvas.height = dimensions.BB_TEX_HEIGHT;
     function drawWindBarb(ctx, tipx, tipy, mag) {
-        const elem_full_size = BARB_DIMS.BB_WIDTH / 2 - 4;
+        const elem_full_size = dimensions.BB_WIDTH / 2 - 4;
         const elem_spacing = elem_full_size / 2;
         if (mag < 2.5) {
             ctx.beginPath();
@@ -87,18 +89,20 @@ function _createBarbTexture() {
     if (ctx === null) {
         throw "Could not get rendering context for the wind barb canvas";
     }
-    ctx.lineWidth = 8;
+    ctx.lineWidth = line_width;
     ctx.miterLimit = 4;
-    for (let ibarb = 0; ibarb <= BARB_DIMS.BB_MAG_MAX; ibarb += BARB_DIMS.BB_MAG_BIN_SIZE) {
-        const x_pos = (ibarb % BARB_DIMS.BB_MAG_WRAP) / BARB_DIMS.BB_MAG_BIN_SIZE * BARB_DIMS.BB_WIDTH + BARB_DIMS.BB_WIDTH / 2;
-        const y_pos = Math.floor(ibarb / BARB_DIMS.BB_MAG_WRAP) * BARB_DIMS.BB_HEIGHT + BARB_DIMS.BB_WIDTH / 2;
+    for (let ibarb = 0; ibarb <= dimensions.BB_MAG_MAX; ibarb += dimensions.BB_MAG_BIN_SIZE) {
+        const x_pos = (ibarb % dimensions.BB_MAG_WRAP) / dimensions.BB_MAG_BIN_SIZE * dimensions.BB_WIDTH + dimensions.BB_WIDTH / 2;
+        const y_pos = Math.floor(ibarb / dimensions.BB_MAG_WRAP) * dimensions.BB_HEIGHT + dimensions.BB_WIDTH / 2;
         drawWindBarb(ctx, x_pos, y_pos, ibarb);
     }
     return canvas;
 }
-let BARB_TEXTURE = null;
 const barb_opt_defaults = {
     color: '#000000',
+    cmap: null,
+    line_width: 2,
+    barb_size_multiplier: 1,
     thin_fac: 1
 };
 /**
@@ -119,8 +123,8 @@ class Barbs extends PlotComponent {
         super();
         this.fields = fields;
         this.opts = normalizeOptions(opts, barb_opt_defaults);
-        const color_rgb = hex2rgb(this.opts.color);
-        this.color_rgb = [color_rgb[0], color_rgb[1], color_rgb[2]];
+        this.color = Color.fromHex(this.opts.color);
+        this.barb_texture = createBarbTexture(BASE_BARB_DIMS, this.opts.line_width / this.opts.barb_size_multiplier * LINE_WIDTH_MULTIPLIER);
         this.gl_elems = null;
     }
     /**
@@ -142,11 +146,9 @@ class Barbs extends PlotComponent {
         gl.getExtension('OES_texture_float');
         gl.getExtension('OES_texture_float_linear');
         const map_max_zoom = map.getMaxZoom();
-        if (BARB_TEXTURE === null) {
-            BARB_TEXTURE = _createBarbTexture();
-        }
-        const barb_image = { format: gl.RGBA, type: gl.UNSIGNED_BYTE, image: BARB_TEXTURE, mag_filter: gl.NEAREST };
-        const barb_billboards = new BillboardCollection(this.fields, this.opts.thin_fac, map_max_zoom, barb_image, BARB_DIMS, this.color_rgb, 0.1);
+        const barb_image = { format: gl.RGBA, type: gl.UNSIGNED_BYTE, image: this.barb_texture, mag_filter: gl.NEAREST };
+        const cmap = this.opts.cmap === null ? undefined : this.opts.cmap;
+        const barb_billboards = new BillboardCollection(this.fields, this.opts.thin_fac, map_max_zoom, barb_image, BASE_BARB_DIMS, 0.1 * this.opts.barb_size_multiplier, { color: this.color, cmap: cmap });
         await barb_billboards.setup(gl);
         this.gl_elems = {
             map: map, barb_billboards: barb_billboards

package/lib/BillboardCollection.d.ts

@@ -1,21 +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";
-declare class BillboardCollection<ArrayType extends TypedArray> {
+interface BillboardCollectionOpts {
+    color?: Color;
+    cmap?: ColorMap;
+    rotate_with_map?: boolean;
+}
+declare class BillboardCollection<ArrayType extends TypedArray, GridType extends Grid> {
     private field;
     readonly spec: BillboardSpec;
-    readonly color: [number, number, number];
+    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_color: [number, number, number], billboard_size_mult: number);
-    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,25 +1,32 @@
-import { getGLFormatTypeAlignment } from "./PlotComponent";
-import { WGLProgram, WGLTexture } from "autumn-wgl";
-const billboard_vertex_shader_src = `uniform mat4 u_matrix;
+import { getRendererData } from "./AutumnTypes";
+import { Color } from "./Color";
+import { ColorMapGPUInterface } from "./Colormap";
+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
+out highp float v_mag;
+#endif
 
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
     return mat4(x_scale, 0.0,     0.0,     0.0,
@@ -52,18 +59,34 @@ 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 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 = 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 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;
     highp float mag = length(vec2(u, v));
+#ifdef COLORMAP
+    v_mag = mag;
+#endif
     mag = floor(mag / u_bb_mag_bin_size + 0.5) * u_bb_mag_bin_size;
 
     vec4 offset = vec4(0.0, 0.0, 0.0, 0.0);
@@ -90,58 +113,62 @@ 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
+in highp float v_mag;
+#else
+uniform lowp vec4 u_bb_color;
+#endif
 
 uniform sampler2D u_sampler;
-uniform lowp vec3 u_bb_color;
+
+out highp vec4 fragColor;
 
 void main() {
-    lowp vec4 tex_color = texture2D(u_sampler, v_tex_coord);
-    gl_FragColor = vec4(u_bb_color, tex_color.a); 
+    lowp vec4 tex_color = texture(u_sampler, v_tex_coord);
+
+    lowp vec4 color;
+#ifdef COLORMAP
+    color = apply_colormap(v_mag);
+#else
+    color = u_bb_color;
+#endif
+
+    color.a *= tex_color.a;
+    fragColor = color; 
 }`
-class BillboardCollectionGLElems {
-}
 class BillboardCollection {
-    constructor(field, thin_fac, max_zoom, billboard_image, billboard_spec, billboard_color, billboard_size_mult) {
+    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.color = billboard_color;
         this.size_multiplier = billboard_size_mult;
         this.thin_fac = thin_fac;
         this.max_zoom = max_zoom;
         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) };
         }
@@ -151,34 +178,55 @@ class BillboardCollection {
         }
     }
     async setup(gl) {
-        const program = new WGLProgram(gl, billboard_vertex_shader_src, billboard_fragment_shader_src);
-        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);
-        this.gl_elems = { gl: gl, program: program, vertices: vertices, texcoords: texcoords, texture: texture, proj_rot_texture: proj_rotation_tex };
+        const shader_defines = [];
+        let fragment_src = billboard_fragment_shader_src;
+        let cmap_gpu = null;
+        if (this.cmap !== null) {
+            fragment_src = ColorMapGPUInterface.applyShader(fragment_src);
+            cmap_gpu = new ColorMapGPUInterface(this.cmap);
+            cmap_gpu.setupShaderVariables(gl, gl.NEAREST);
+            shader_defines.push('COLORMAP');
+        }
+        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_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': 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(program);
+        }
+        else {
+            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

@@ -0,0 +1,57 @@
+declare class Color {
+    private rgba;
+    /**
+     * Create a new color object
+     * @param rgba - An RGBA tuple of floats between 0 and 1
+     */
+    constructor(rgba: [number, number, number, number]);
+    /**
+     * The red component of the color as a float value between 0 and 1
+     */
+    get r(): number;
+    /**
+     * The green component of the color as a float value between 0 and 1
+     */
+    get g(): number;
+    /**
+     * The blue component of the color as a float value between 0 and 1
+     */
+    get b(): number;
+    /**
+     * The alpha component (opacity) of the color as a float value between 0 and 1
+     */
+    get a(): number;
+    /**
+     * @param opacity - The new alpha component (opacity)
+     * @returns A new color with the alpha component set to opacity.
+     */
+    withOpacity(opacity: number): Color;
+    /**
+     * @returns The color as an RGB hex string (e.g., '#dedbef')
+     */
+    toRGBHex(): string;
+    /**
+     * @returns The color as an RGBA hex string (e.g., '#dedbefff')
+     */
+    toRGBAHex(): string;
+    /**
+     * @returns The color as an RGBA float tuple
+     */
+    toRGBATuple(): [number, number, number, number];
+    /**
+     * @returns The color as a tuple of HSV values
+     */
+    toHSVTuple(): [number, number, number];
+    /**
+     * @param hex - An RGB or RGBA hex string to parse
+     * @returns a new Color object
+     */
+    static fromHex(hex: string): Color;
+    /**
+     * @param hsv - A tuple of HSV values
+     * @returns a new Color object
+     */
+    static fromHSVTuple(hsv: [number, number, number]): Color;
+    static normalizeColor(color: Color | string): Color;
+}
+export { Color };