autumnplot-gl 3.2.0 → 4.0.0-beta

package/lib/PolylineCollection.js

@@ -1,42 +1,45 @@
-import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
-import { isWebGL2Ctx } from "./AutumnTypes";
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
+import { isWebGL2Ctx, getRendererData } from "./AutumnTypes";
 import { ColorMap, ColorMapGPUInterface } from "./Colormap";
 import { Color } from "./Color";
 import { layer_worker } from "./PlotComponent";
-const polyline_vertex_src = `uniform mat4 u_matrix;
+import { ShaderProgramManager } from "./ShaderManager";
+const polyline_vertex_src = `#version 300 es
+
 uniform int u_offset;
 
-attribute vec3 a_pos;
-attribute vec2 a_extrusion;
-attribute float a_data;
+in vec3 a_pos;
+in vec2 a_extrusion;
+in float a_data;
 
 #ifdef ZOOM
-attribute float a_min_zoom;
+in float a_min_zoom;
 #endif
 
 #ifdef OFFSET
-attribute vec2 a_offset;
+in vec2 a_offset;
 #endif
 
 uniform lowp float u_line_width;
 uniform lowp float u_map_width;
 uniform lowp float u_map_height;
-uniform highp float u_map_bearing;
+
 
 #ifdef ZOOM
 uniform lowp float u_zoom;
 #endif
 
 #ifdef OFFSET
+uniform int u_offset_rotates_with_map;
 uniform lowp float u_offset_scale;
 #endif
 
 #ifdef DATA
-varying highp float v_data;
+out highp float v_data;
 #endif
 
-varying highp float v_dist;
-varying lowp float v_cross;
+out highp float v_dist;
+out lowp float v_cross;
 
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
     return mat4(x_scale, 0.0,     0.0,     0.0,
@@ -71,7 +74,7 @@ void main() {
 
     v_dist = abs(a_pos.z);
     v_cross = sign(a_pos.z);
-    vec4 center_pos = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0);
+    vec4 center_pos = projectTile(a_pos.xy + globe_offset);
     vec4 offset = vec4(0.0, 0.0, 0.0, 0.0);
 
 #ifdef ZOOM
@@ -81,13 +84,26 @@ void main() {
         vec2 offset_ext = u_line_width * 2. * a_extrusion;
 
         mat4 map_stretch_matrix = scalingMatrix(u_map_height / u_map_width, 1., 1.);
-        mat4 rotation_matrix = rotationZMatrix(radians(u_map_bearing));  
+        
+        vec4 center_pos_ihat = projectTile(a_pos.xy + globe_offset + vec2(1e-5, 0.));
+        
+        vec2 center_east = normalize((inverse(map_stretch_matrix) * (center_pos_ihat - center_pos)).xy);
+        float globe_rotation = atan(center_east.x, center_east.y) - 3.141592654 / 2.0;
+        mat4 rotation_matrix = rotationZMatrix(-globe_rotation);
+
         offset = map_stretch_matrix * rotation_matrix * vec4(offset_ext, 0., 0.);
 
 #ifdef OFFSET
-        map_stretch_matrix = scalingMatrix(1., u_map_width / u_map_height, 1.);
+        mat4 offset_matrix = scalingMatrix(1., u_map_width / u_map_height, 1.);
+        if (u_offset_rotates_with_map == 1) {
+            offset_matrix = offset_matrix * rotation_matrix;
+        }
+        else {
+            offset = map_stretch_matrix * vec4(offset_ext, 0., 0.);
+        }
+
         vec2 offset_offset = u_offset_scale * a_offset;
-        offset += map_stretch_matrix * rotation_matrix * vec4(offset_offset, 0., 0.);
+        offset += offset_matrix * vec4(offset_offset, 0., 0.);
 #endif
 
 #ifdef ZOOM
@@ -100,7 +116,8 @@ void main() {
     v_data = a_data;
 #endif
 }`
-const polyline_fragment_src = `
+const polyline_fragment_src = `#version 300 es
+
 uniform sampler2D u_dash_sampler;
 
 #ifndef DATA
@@ -112,15 +129,17 @@ uniform lowp float u_zoom;
 uniform int u_dash_pattern_length;
 
 #ifdef DATA
-varying highp float v_data;
+in highp float v_data;
 #endif
 
-varying highp float v_dist;
-varying lowp float v_cross;
+in highp float v_dist;
+in lowp float v_cross;
+
+out highp vec4 fragColor;
 
 void main() {
     lowp float dash_x = fract(v_dist * 2e2 * pow(2., floor(u_zoom)) / float(u_dash_pattern_length));
-    lowp float dash = texture2D(u_dash_sampler, vec2(dash_x, 0.5)).r;
+    lowp float dash = texture(u_dash_sampler, vec2(dash_x, 0.5)).r;
 
     lowp vec4 color;
 #ifdef DATA
@@ -132,7 +151,7 @@ void main() {
     lowp float feather = clamp((1. - abs(v_cross)) * u_line_width, 0., 1.);
     color.a *= (dash >= 1. ? 1. : 0.) * feather;
 
-    gl_FragColor = color;
+    fragColor = color;
 }`
 const dash_arrays = {
     "-": [1],
@@ -162,6 +181,7 @@ class PolylineCollection {
         this.color = Color.fromHex(color_hex);
         const line_width = opts.line_width === undefined ? 1 : opts.line_width;
         const line_style = opts.line_style === undefined ? '-' : opts.line_style;
+        this.offset_rotates_with_map = opts.offset_rotates_with_map === undefined ? true : opts.offset_rotates_with_map;
         this.width = line_width;
         const shader_defines = [];
         this.vertices = new WGLBuffer(gl, polyline['vertices'], 3, gl.TRIANGLE_STRIP);
@@ -196,24 +216,25 @@ class PolylineCollection {
             this.cmap_gpu = null;
         }
         [this.n_dash, this.dash_texture] = makeDashTexture(gl, line_style);
-        this.program = new WGLProgram(gl, polyline_vertex_src, fragment_src, { define: shader_defines });
+        this.shader_manager = new ShaderProgramManager(polyline_vertex_src, fragment_src, shader_defines);
     }
     static async make(gl, lines, opts) {
         const polylines = await layer_worker.makePolyLines(lines);
         return new PolylineCollection(gl, polylines, opts);
     }
-    render(gl, matrix, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
+    render(gl, arg, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
+        const render_data = getRendererData(arg);
+        const program = this.shader_manager.getShaderProgram(gl, render_data.shaderData);
         const attributes = { 'a_pos': this.vertices, 'a_extrusion': this.extrusion };
         const uniforms = {
-            'u_matrix': matrix, 'u_line_width': this.width, 'u_map_width': map_width, 'u_map_height': map_height, 'u_map_bearing': map_bearing, 'u_offset': 0, 'u_zoom': map_zoom,
-            'u_dash_pattern_length': this.n_dash
+            'u_line_width': this.width, 'u_map_width': map_width, 'u_map_height': map_height, 'u_offset': 0, 'u_zoom': map_zoom,
+            'u_dash_pattern_length': this.n_dash, ...this.shader_manager.getShaderUniforms(render_data)
         };
         const textures = { 'u_dash_sampler': this.dash_texture };
         if (this.offset !== null && this.scale !== null) {
             attributes['a_offset'] = this.offset;
             uniforms['u_offset_scale'] = this.scale * (map_height / map_width);
+            uniforms['u_offset_rotates_with_map'] = this.offset_rotates_with_map ? 1 : 0;
         }
         if (this.min_zoom !== null) {
             attributes['a_min_zoom'] = this.min_zoom;
@@ -224,19 +245,21 @@ class PolylineCollection {
         else {
             uniforms['u_color'] = this.color.toRGBATuple();
         }
-        this.program.use(attributes, uniforms, textures);
+        program.use(attributes, uniforms, textures);
         if (this.cmap_gpu !== null) {
-            this.cmap_gpu.bindShaderVariables(this.program);
+            this.cmap_gpu.bindShaderVariables(program);
         }
         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();
+        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 { PolylineCollection, isLineStyle };

package/lib/RawField.d.ts

@@ -1,11 +1,12 @@
 import { Float16Array } from "@petamoriken/float16";
-import { ContourData, TypedArray, WindProfile } from "./AutumnTypes";
+import { ContourData, TypedArray, WebGLAnyRenderingContext, WindProfile } from "./AutumnTypes";
 import { FieldContourOpts } from "./ContourCreator";
 import { Grid } from "./Grid";
-type TextureDataType<ArrayType> = ArrayType extends Float32Array ? Float32Array : Uint16Array;
+import { WGLTextureSpec } from "autumn-wgl";
+type TextureDataType<ArrayType> = ArrayType extends Float32Array ? Float32Array : (ArrayType extends Uint8Array ? Uint8Array : Uint16Array);
 /** A class representing a raw 2D field of gridded data, such as height or u wind. */
-declare class RawScalarField<ArrayType extends TypedArray> {
-    readonly grid: Grid;
+declare class RawScalarField<ArrayType extends TypedArray, GridType extends Grid> {
+    readonly grid: GridType;
     readonly data: ArrayType;
     private readonly contour_cache;
     /**
@@ -13,9 +14,15 @@ declare class RawScalarField<ArrayType extends TypedArray> {
      * @param grid - The grid on which the data are defined
      * @param data - The data, which should be given as a 1D array in row-major order, with the first element being at the lower-left corner of the grid.
      */
-    constructor(grid: Grid, data: ArrayType);
+    constructor(grid: GridType, data: ArrayType);
     /** @internal */
-    getTextureData(): TextureDataType<ArrayType>;
+    private getTextureData;
+    getWGLTextureSpec(gl: WebGLAnyRenderingContext, image_mag_filter: number): WGLTextureSpec;
+    /**
+     * Get contour data as an object with each contour level being a separate property.
+     * @param opts - Options for doing the contouring
+     * @returns contour data as an object
+     */
     getContours(opts: FieldContourOpts): Promise<ContourData>;
     /**
      * Create a new field by aggregating a number of fields using a specific function
@@ -26,7 +33,8 @@ declare class RawScalarField<ArrayType extends TypedArray> {
      * // Compute wind speed from u and v
      * wind_speed_field = RawScalarField.aggreateFields(Math.hypot, u_field, v_field);
      */
-    static aggregateFields<ArrayType extends TypedArray>(func: (...args: number[]) => number, ...args: RawScalarField<ArrayType>[]): RawScalarField<ArrayType>;
+    static aggregateFields<ArrayType extends TypedArray, GridType extends Grid>(func: (...args: number[]) => number, ...args: RawScalarField<ArrayType, GridType>[]): RawScalarField<ArrayType, GridType>;
+    sampleField(lon: number, lat: number): number;
 }
 type VectorRelativeTo = 'earth' | 'grid';
 interface RawVectorFieldOptions {
@@ -37,9 +45,9 @@ interface RawVectorFieldOptions {
     relative_to?: VectorRelativeTo;
 }
 /** A class representing a 2D gridded field of vectors */
-declare class RawVectorField<ArrayType extends TypedArray> {
-    readonly u: RawScalarField<ArrayType>;
-    readonly v: RawScalarField<ArrayType>;
+declare class RawVectorField<ArrayType extends TypedArray, GridType extends Grid> {
+    readonly u: RawScalarField<ArrayType, GridType>;
+    readonly v: RawScalarField<ArrayType, GridType>;
     readonly relative_to: VectorRelativeTo;
     /**
      * Create a vector field.
@@ -48,26 +56,71 @@ declare class RawVectorField<ArrayType extends TypedArray> {
      * @param v    - The v (north/south) component of the vectors, which should be given as a 1D array in row-major order, with the first element being at the lower-left corner of the grid
      * @param opts - Options for creating the vector field.
      */
-    constructor(grid: Grid, u: ArrayType, v: ArrayType, opts?: RawVectorFieldOptions);
-    getTextureData(): {
-        u: TextureDataType<ArrayType>;
-        v: TextureDataType<ArrayType>;
+    constructor(grid: GridType, u: ArrayType, v: ArrayType, opts?: RawVectorFieldOptions);
+    /** @internal */
+    private getTextureData;
+    getWGLTextureSpecs(gl: WebGLAnyRenderingContext, mag_filter: number): {
+        u: WGLTextureSpec;
+        v: WGLTextureSpec;
     };
-    getThinnedField(thin_x: number, thin_y: number): RawVectorField<ArrayType>;
-    get grid(): Grid;
+    /** @internal */
+    getThinnedField(thin_fac: number, map_max_zoom: number): RawVectorField<ArrayType, Grid>;
+    /** @internal */
+    get grid(): GridType;
+    sampleField(lon: number, lat: number): [number, number];
 }
 /** A class grid of wind profiles */
-declare class RawProfileField {
+declare class RawProfileField<GridType extends Grid> {
     readonly profiles: WindProfile[];
-    readonly grid: Grid;
+    readonly grid: GridType;
     /**
      * Create a grid of wind profiles
      * @param grid     - The grid on which the profiles are defined
      * @param profiles - The wind profiles themselves, which should be given as a 1D array in row-major order, with the first profile being at the lower-left corner of the grid
      */
-    constructor(grid: Grid, profiles: WindProfile[]);
-    /** Get the gridded storm motion vector field (internal method) */
-    getStormMotionGrid(): RawVectorField<Float16Array>;
+    constructor(grid: GridType, profiles: WindProfile[]);
+    /**
+     * @internal
+     * Get the gridded storm motion vector field
+     */
+    getStormMotionGrid(): RawVectorField<Float16Array, GridType>;
+    /** @internal */
+    getProfileCoords(): {
+        lats: Float32Array;
+        lons: Float32Array;
+    };
+}
+/**
+ * Type for an observation data point
+ * @example
+ * const obs : ObsRawData<'t' | 'td'> = {'t': 71, 'td': 66};
+ */
+type ObsRawData<ObsFieldName extends string> = Record<ObsFieldName, string | number | [number, number] | null>;
+/** Raw observation data, given as a list of objects */
+declare class RawObsField<GridType extends Grid, ObsFieldName extends string> {
+    readonly grid: GridType;
+    readonly data: ObsRawData<ObsFieldName>[];
+    /**
+     * Create a field of observations
+     * @param grid - The grid on which the obs are defined (can be either a structured or unstructured grid)
+     * @param data - The observation data. Conceptually, obs are given as a list of individual observations.
+     */
+    constructor(grid: GridType, data: ObsRawData<ObsFieldName>[]);
+    /**
+     * @internal
+     * Get observation element as a list of scalar numbers
+     */
+    getScalar(key: ObsFieldName): (number | null)[];
+    /**
+     * @internal
+     * Get observed element as a list of strings (internal method)
+     */
+    getStrings(key: ObsFieldName): (string | null)[];
+    /**
+     * @internal
+     * Get observed element as a list of vectors (internal method)
+     */
+    getVector(key: ObsFieldName): RawVectorField<Float16Array, GridType>;
 }
-export { RawScalarField, RawVectorField, RawProfileField };
-export type { RawVectorFieldOptions, VectorRelativeTo, TextureDataType };
+export { RawScalarField, RawVectorField, RawProfileField, RawObsField };
+export type { RawVectorFieldOptions, VectorRelativeTo, TextureDataType, ObsRawData };

package/lib/RawField.js

@@ -1,8 +1,15 @@
 import { Float16Array } from "@petamoriken/float16";
 import { contourCreator } from "./ContourCreator";
-import { Cache, zip } from "./utils";
-function getArrayConstructor(ary) {
-    return ary.constructor;
+import { Cache, getArrayConstructor, zip } from "./utils";
+import { getGLFormatTypeAlignment } from "./PlotComponent";
+function getArrayDType(ary) {
+    if (ary instanceof Float32Array) {
+        return 'float32';
+    }
+    else if (ary instanceof Uint8Array) {
+        return 'uint8';
+    }
+    return 'float16';
 }
 /** A class representing a raw 2D field of gridded data, such as height or u wind. */
 class RawScalarField {
@@ -25,15 +32,23 @@ class RawScalarField {
     getTextureData() {
         // Need to give float16 data as uint16s to make WebGL happy: https://github.com/petamoriken/float16/issues/105
         const raw_data = this.data;
-        let data;
-        if (raw_data instanceof Float32Array) {
-            data = raw_data;
-        }
-        else {
-            data = new Uint16Array(raw_data.buffer);
-        }
+        const raw_data_type = getArrayDType(raw_data);
+        const data = (raw_data_type == 'float32' || raw_data_type == 'uint8') ? raw_data : new Uint16Array(raw_data.buffer);
         return data;
     }
+    getWGLTextureSpec(gl, image_mag_filter) {
+        const tex_data = this.getTextureData();
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, getArrayDType(this.data));
+        return { 'format': format, 'type': type,
+            'width': this.grid.ni, 'height': this.grid.nj, 'image': tex_data,
+            'mag_filter': image_mag_filter, 'row_alignment': row_alignment,
+        };
+    }
+    /**
+     * Get contour data as an object with each contour level being a separate property.
+     * @param opts - Options for doing the contouring
+     * @returns contour data as an object
+     */
     async getContours(opts) {
         return await this.contour_cache.getValue(opts);
     }
@@ -57,6 +72,9 @@ class RawScalarField {
         const agg_data = new arrayType(mapGenerator(zipped_args, (a) => func(...a)));
         return new RawScalarField(args[0].grid, agg_data);
     }
+    sampleField(lon, lat) {
+        return this.grid.sampleNearestGridPoint(lon, lat, this.data).sample;
+    }
 }
 /** A class representing a 2D gridded field of vectors */
 class RawVectorField {
@@ -73,35 +91,53 @@ class RawVectorField {
         this.v = new RawScalarField(grid, v);
         this.relative_to = opts.relative_to === undefined ? 'grid' : opts.relative_to;
     }
+    /** @internal */
     getTextureData() {
         // Need to give float16 data as uint16s to make WebGL happy: https://github.com/petamoriken/float16/issues/105
         const raw_u = this.u.data;
         const raw_v = this.v.data;
-        const u = raw_u instanceof Float32Array ? raw_u : new Uint16Array(raw_u.buffer);
-        const v = raw_v instanceof Float32Array ? raw_v : new Uint16Array(raw_v.buffer);
+        const u_raw_data_type = getArrayDType(raw_u);
+        const v_raw_data_type = getArrayDType(raw_u);
+        const u = (u_raw_data_type == 'float32' || u_raw_data_type == 'uint8') ? raw_u : new Uint16Array(raw_u.buffer);
+        const v = (v_raw_data_type == 'float32' || v_raw_data_type == 'uint8') ? raw_v : new Uint16Array(raw_v.buffer);
         return { u: u, v: v };
     }
-    getThinnedField(thin_x, thin_y) {
-        const new_grid = this.grid.getThinnedGrid(thin_x, thin_y);
-        const thinGrid = (data) => {
-            const arrayType = getArrayConstructor(data);
-            const new_data = new arrayType(new_grid.ni * new_grid.nj);
-            for (let i = 0; i < new_grid.ni; i++) {
-                for (let j = 0; j < new_grid.nj; j++) {
-                    const idx_old = i * thin_x + this.grid.ni * j * thin_y;
-                    const idx = i + new_grid.ni * j;
-                    new_data[idx] = data[idx_old];
-                }
-            }
-            return new_data;
+    getWGLTextureSpecs(gl, mag_filter) {
+        const { u: u_thin, v: v_thin } = this.getTextureData();
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, getArrayDType(this.u.data));
+        const u_image = { 'format': format, 'type': type,
+            'width': this.grid.ni, 'height': this.grid.nj, 'image': u_thin,
+            'mag_filter': mag_filter, 'row_alignment': row_alignment,
+        };
+        const v_image = { 'format': format, 'type': type,
+            'width': this.grid.ni, 'height': this.grid.nj, 'image': v_thin,
+            'mag_filter': mag_filter, 'row_alignment': row_alignment,
         };
-        const thin_u = thinGrid(this.u.data);
-        const thin_v = thinGrid(this.v.data);
+        return { u: u_image, v: v_image };
+    }
+    /** @internal */
+    getThinnedField(thin_fac, map_max_zoom) {
+        const new_grid = this.grid.getThinnedGrid(thin_fac, map_max_zoom);
+        const thin_u = new_grid.thinDataArray(this.grid, this.u.data);
+        const thin_v = new_grid.thinDataArray(this.grid, this.v.data);
         return new RawVectorField(new_grid, thin_u, thin_v, { relative_to: this.relative_to });
     }
+    /** @internal */
     get grid() {
         return this.u.grid;
     }
+    sampleField(lon, lat) {
+        const u_sample = this.grid.sampleNearestGridPoint(lon, lat, this.u.data);
+        const v_sample = this.grid.sampleNearestGridPoint(lon, lat, this.v.data);
+        const rot = this.relative_to == 'earth' ? 0 : this.grid.getVectorRotationAtPoint(u_sample.sample_lon, u_sample.sample_lat);
+        const mag = Math.hypot(u_sample.sample, v_sample.sample);
+        let brg = (Math.PI / 2 - Math.atan2(-v_sample.sample, -u_sample.sample) + rot) * 180 / Math.PI;
+        if (brg > 360)
+            brg -= 360;
+        if (brg < 0)
+            brg += 360;
+        return [brg, mag];
+    }
 }
 /** A class grid of wind profiles */
 class RawProfileField {
@@ -114,7 +150,10 @@ class RawProfileField {
         this.profiles = profiles;
         this.grid = grid;
     }
-    /** Get the gridded storm motion vector field (internal method) */
+    /**
+     * @internal
+     * Get the gridded storm motion vector field
+     */
     getStormMotionGrid() {
         const profiles = this.profiles;
         const u = new Float16Array(this.grid.ni * this.grid.nj).fill(parseFloat('nan'));
@@ -126,5 +165,75 @@ class RawProfileField {
         });
         return new RawVectorField(this.grid, u, v, { relative_to: 'grid' });
     }
+    /** @internal */
+    getProfileCoords() {
+        const { lats, lons } = this.grid.getEarthCoords();
+        const prof_lats = new Float32Array(this.profiles.length);
+        const prof_lons = new Float32Array(this.profiles.length);
+        this.profiles.forEach((prof, iprof) => {
+            const idx = prof.ilon + prof.jlat * this.grid.ni;
+            prof_lats[iprof] = lats[idx];
+            prof_lons[iprof] = lons[idx];
+        });
+        return { lats: prof_lats, lons: prof_lons };
+    }
+}
+/** Raw observation data, given as a list of objects */
+class RawObsField {
+    /**
+     * Create a field of observations
+     * @param grid - The grid on which the obs are defined (can be either a structured or unstructured grid)
+     * @param data - The observation data. Conceptually, obs are given as a list of individual observations.
+     */
+    constructor(grid, data) {
+        this.grid = grid;
+        this.data = data;
+    }
+    /**
+     * @internal
+     * Get observation element as a list of scalar numbers
+     */
+    getScalar(key) {
+        const field_data = this.data.map(d => d[key]);
+        if (!field_data.map(d => typeof d == 'number' || d === null).reduce((a, b) => a && b, true))
+            throw `It doesn't look like ${key} contains scalar numerical data`;
+        return field_data;
+    }
+    /**
+     * @internal
+     * Get observed element as a list of strings (internal method)
+     */
+    getStrings(key) {
+        const field_data = this.data.map(d => d[key]);
+        if (!field_data.map(d => typeof d == 'string' || d === null).reduce((a, b) => a && b, true))
+            throw `It doesn't look like ${key} contains string data`;
+        return field_data;
+    }
+    /**
+     * @internal
+     * Get observed element as a list of vectors (internal method)
+     */
+    getVector(key) {
+        const field_data = this.data.map(d => d[key]);
+        if (!field_data.map(d => Array.isArray(d)).reduce((a, b) => a && b, true))
+            throw `It doesn't look like ${key} contains vector data`;
+        const vector_field_data = field_data;
+        const vec2comp = (wspd, wdir) => {
+            const u = -wspd * Math.sin(wdir * Math.PI / 180);
+            const v = -wspd * Math.cos(wdir * Math.PI / 180);
+            return [u, v];
+        };
+        const u_data = new Float16Array(this.grid.ni * this.grid.nj).fill(parseFloat('nan'));
+        const v_data = new Float16Array(this.grid.ni * this.grid.nj).fill(parseFloat('nan'));
+        vector_field_data.forEach(([wspd, wdir], idat) => {
+            if (wspd === null || wdir === null) {
+                return;
+            }
+            const [u, v] = vec2comp(wspd, wdir);
+            u_data[idat] = u;
+            v_data[idat] = v;
+        });
+        return new RawVectorField(this.grid, u_data, v_data, { relative_to: 'earth' });
+    }
 }
-export { RawScalarField, RawVectorField, RawProfileField };
+export { RawScalarField, RawVectorField, RawProfileField, RawObsField };

package/lib/ShaderManager.d.ts

@@ -0,0 +1,12 @@
+import { WGLProgram } from "autumn-wgl";
+import { RenderShaderData, RendererData, WebGLAnyRenderingContext } from "./AutumnTypes";
+declare class ShaderProgramManager {
+    readonly vertex_shader_src: string;
+    readonly fragment_shader_src: string;
+    readonly shader_defines: string[];
+    private readonly program_map;
+    constructor(vertex_shader_src: string, fragment_shader_src: string, shader_defines: string[]);
+    getShaderProgram(gl: WebGLAnyRenderingContext, shader_data: RenderShaderData | null): WGLProgram;
+    getShaderUniforms(render_data: RendererData): Record<string, number | number[]>;
+}
+export { ShaderProgramManager };

package/lib/ShaderManager.js

@@ -0,0 +1,58 @@
+import { WGLProgram } from "autumn-wgl";
+import { mergeShaderCode } from "./utils";
+class ShaderProgramManager {
+    constructor(vertex_shader_src, fragment_shader_src, shader_defines) {
+        this.vertex_shader_src = vertex_shader_src;
+        this.fragment_shader_src = fragment_shader_src;
+        this.shader_defines = shader_defines;
+        this.program_map = new Map();
+    }
+    getShaderProgram(gl, shader_data) {
+        const shader_key = shader_data === null ? 'default' : shader_data.variantName;
+        const cached_program = this.program_map.get(shader_key);
+        if (cached_program !== undefined) {
+            return cached_program;
+        }
+        let vertex_src = this.vertex_shader_src;
+        if (shader_data !== null) {
+            vertex_src = mergeShaderCode(shader_data.vertexShaderPrelude + '\n' + shader_data.define, vertex_src);
+        }
+        else {
+            const prelude = `
+            uniform mat4 u_projection_matrix;
+
+            vec4 projectTile(vec2 p) {
+                vec4 result = u_projection_matrix * vec4(p, 0.0, 1.0);
+                return result;
+            }`;
+            vertex_src = mergeShaderCode(prelude, vertex_src);
+        }
+        const program = new WGLProgram(gl, vertex_src, this.fragment_shader_src, { define: this.shader_defines });
+        this.program_map.set(shader_key, program);
+        return program;
+    }
+    getShaderUniforms(render_data) {
+        if (render_data.type == 'maplibre') {
+            if (render_data.shaderData.define.includes('GLOBE')) {
+                return {
+                    'u_projection_matrix': render_data.defaultProjectionData.mainMatrix,
+                    'u_projection_fallback_matrix': render_data.defaultProjectionData.fallbackMatrix,
+                    'u_projection_tile_mercator_coords': render_data.defaultProjectionData.tileMercatorCoords,
+                    'u_projection_clipping_plane': render_data.defaultProjectionData.clippingPlane,
+                    'u_projection_transition': render_data.defaultProjectionData.projectionTransition
+                };
+            }
+            else {
+                return {
+                    'u_projection_matrix': render_data.defaultProjectionData.mainMatrix,
+                };
+            }
+        }
+        else {
+            return {
+                'u_projection_matrix': render_data.mainMatrix,
+            };
+        }
+    }
+}
+export { ShaderProgramManager };